Unit Testing for Frontend Code at Blibli.com
1 like272 views
The document discusses unit testing for frontend code at Blibli.com. It introduces the speaker and outlines Blibli.com's frontend framework preference. It then covers the topics of blackbox vs whitebox testing, the unit test tools used like karma and mocha, automating tests on git commits, and establishing a quality gate. It also compares Karma and Jest testing tools. The document proposes moving from Karma to Jest to simplify tooling, adding Avoriaz for UI testing, implementing end-to-end developer tests, and other improvements to ensure better quality delivery.
Unit Testing for Frontend Code at Blibli.com
- 1. UNIT TESTING FOR FRONTEND CODE at Blibli.com Irfan Maulana | Front End Developer
- 2. 😎 About Me
- 3. 🤣 Fans ?
- 4. Blibli.com Frontend Code ⚔ We believe in 💚 Green framework (*not 💙 Blue)
- 5. 😱
- 6. '
- 7. Blackbox vs Whitebox Testing
- 8. Blibli.com Frontend Unit Test Tools • karma runner • karma-mocha • karma-sinon-chai • karma-babel-preprocessor • Karma-coverage • karma-sourcemap-loader • karma-spec-reporter • karma-webpack • karma-phantomjs-launcher
- 9. Automate on Git Commit • Developer commit code • Automate run build and test • Run Code Analysis • Quality Passed ? ✅ : ⛔
- 10. Quality Gate
- 11. Karma vs Jest • https://stackshare.io/stackups/jest-vs-karma-runner update in January 26 2018
- 12. Let’s take a look the codes… 🛠
- 13. Vue Component
- 14. Unit Testing Vue Component
- 15. How (*Blue) Doing Unit Test ?
- 16. Vue Unit Test with 🔬 Avoriaz
- 17. 🃏 Jest-in-Vue
- 18. Space for Improvement (for Blibli.com) • Move from Karma to Jest – Simplify tooling • Add 🔬 Avoriaz / vue-test-utils – UI centric testing • End 2 End Test for Developer – Better quality delivery • Etc…
- 19. 👍 Do you like my talks ? 🐙 https://github.com/mazipan 🎤 https://github.com/mazipan/talks 🎁 https://github.com/mazipan/project-catalog
- 20. THANK YOU