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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Software Development Life Cycle

    View full-size 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 full-size slide

  6. PERFORM APP TESTING
    MANUAL AUTOMATED

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

  10. THE
    TESTING
    TYPES

    View full-size slide

  11. PROVEN METHOD FOR TESTING APP

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 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 full-size slide