Testing JavaScript

Intro to JavaScript testing

1. Testing JavaScript By Irfan Maulana
2. Hi, I am Irfan Working at Tokopedia as Principal Engineer for Web Platform Team. mazipan.space @Maz_Ipan
3. A process to verifying the correctness & validating the functional features of the app being developed APPLICATION TESTING
4. Software Development Life Cycle
5. JAVASCRIPT APPLICATION Frontend Backend Handling UI functionality: web, apps, desktop Handling business logic, data store connection A B We will focus on the Frontend for this session.
6. PERFORM APP TESTING MANUAL AUTOMATED
7. WHY DO WE NEED? Bugs are bad, and who gets blamed? The developer. You know humans are bad at complex, repetitive tasks. Computers are very, very good at complex, repetitive tasks. A professional ships working code. Code that works. Code that is well tested.
8. Focused on input & output. Not interested about the things happening inside. Involve testing of the internal structure, code, design & implementation. METHODOLOGIES BLACKBOX WHITEBOX
9. TESTING PROCESS 1. PLANNING 2. PREPARATION 3. EXECUTION 4. REPORTING
10. THE TESTING TYPES
11. PROVEN METHOD FOR TESTING APP
12. STATIC TEST To catch typos, errors, possible bugs as you write the code. Tools: • ESLint + Prettier • CodeQL, Snyk, SonarQube
13. Very fast feedback Can not reproduce functional bugs faced by users STATIC TEST: PRO & CONS We can mark it as mandatory Very beneficial in the development phase
14. UNIT TEST To verify that individual, isolated and smallest part works as expected. Tools: • TestingLibrary.com
15. Fast feedback Need an extra effort to write UT UNIT TEST: PRO & CONS Verify the correctness of the function Can not represent the bug when the unit integrated Can not represent real user interaction
16. INTEGRATION TEST To verify that several units work together in harmony. Tools: • TestingLibrary.com
17. Verify most of user interactions Slower feedback than UT More effort than UT INTEGRATION TEST: PRO & CONS Can not represent device variant Can not replicate using the real data
18. END-TO-END TEST A robot that behaves like a user to click around the app and verify that it functions correctly. Tools: • Cypress • Nightwatch • TestCafe
19. Can use multiple device Very slow to executed Need the biggest effort E2E TEST: PRO & CONS Can use real data Replicate real user
20. COMPARISON Static Test Unit Test Integration E2E Test 🚀 Speed 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 ⏰ Development time 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 💰 Cost 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 😎 Confidence 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 🟢 Read more on https://kentcdodds.com/blog/static-vs-unit-vs-integration-vs-e2e-tests
21. BEST ROI https://twitter.com/kentcdodds/status/960723172591992832
22. DEMO TIME!
23. CHECK THE CODE https://github.com/mazipan/react-testing-workshop Prerequisites: • Node.js
24. ASK ME!
25. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik and illustrations by Stories. THANK YOU Please keep this slide for attribution.