Testing JavaScript By Irfan Maulana

Hi, I am Irfan Working at Tokopedia as Principal Engineer for Web Platform Team. mazipan.space @Maz_Ipan

A process to verifying the correctness & validating the functional features of the app being developed APPLICATION TESTING

Software Development Life Cycle

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.

PERFORM APP TESTING MANUAL AUTOMATED

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.

Focused on input & output. Not interested about the things happening inside. Involve testing of the internal structure, code, design & implementation. METHODOLOGIES BLACKBOX WHITEBOX

TESTING PROCESS 1. PLANNING 2. PREPARATION 3. EXECUTION 4. REPORTING

THE TESTING TYPES

PROVEN METHOD FOR TESTING APP

STATIC TEST To catch typos, errors, possible bugs as you write the code. Tools: ● ESLint + Prettier ● CodeQL, Snyk, SonarQube

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

UNIT TEST To verify that individual, isolated and smallest part works as expected. Tools: ● TestingLibrary.com

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

INTEGRATION TEST To verify that several units work together in harmony. Tools: ● TestingLibrary.com

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

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

Can use multiple device Very slow to executed Need the biggest effort E2E TEST: PRO & CONS Can use real data Replicate real user

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

BEST ROI https://twitter.com/kentcdodds/status/960723172591992832

DEMO TIME!

CHECK THE CODE https://github.com/mazipan/react-testing-workshop Prerequisites: ● Node.js

ASK ME!

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.