Testing JavaScript

Intro to JavaScript testing

Transcript

1. Testing
   JavaScript
   By Irfan Maulana
   

   View Slide

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

   View Slide

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

   View Slide

4. Software Development Life Cycle
   

   View Slide

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.
   

   View Slide

6. PERFORM APP TESTING
   MANUAL AUTOMATED
   

   View Slide

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.
   

   View Slide

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

   View Slide

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

   View Slide

10. THE
    TESTING
    TYPES
    

    View Slide

11. PROVEN METHOD FOR TESTING APP
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

22. DEMO TIME!
    

    View Slide

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

    View Slide

24. ASK ME!
    

    View Slide

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.
    

    View Slide