Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Testing JavaScript

Testing JavaScript

Intro to JavaScript testing

Irfan Maulana

May 24, 2022
Tweet

More Decks by Irfan Maulana

Other Decks in Programming

Transcript

  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.