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

Implementing a test suite in an existing Frontend application

Implementing a test suite in an existing Frontend application

Slides to my talk at JS World Conference 2021.

Mirjam Aulbach

February 23, 2021
Tweet

More Decks by Mirjam Aulbach

Other Decks in Programming

Transcript

  1. Better late than never

    View Slide

  2. Mirjam
    !
    Software Engineer
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  3. I
    !
    Testing
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  4. Me when someone says they don't like testing
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  5. Roadmap

    Hello World!
    "
    Where we started
    #
    First steps
    $
    When to test?
    %
    How to test?
    &
    The 3 most important learnings
    '
    Summary
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  6. Where we started
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  7. twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  8. 23.03.2018
    » 38.181 lines of code
    » 291 JS files
    » 238 React components
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  9. UI Tests: 877
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  10. Integration and Unit Tests: 0
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  11. actual footage of me seeing this
    numbers
    media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/

    View Slide

  12. Legacy Code?
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  13. "Nobody touch nothing"
    Alien, 1986
    media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186

    View Slide

  14. "To me, legacy code is simply
    code without tests."
    Michael C. Feathers
    "Working Effectively with Legacy Code"
    media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186

    View Slide

  15. media source: https://imgur.com/gallery/XkM0Jqp

    View Slide

  16. Solution?
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  17. twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  18. Why retrofit a test suite?
    (for real)
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  19. Why retrofit a test suite
    » become futureproof
    » keep the Extensibility
    » Refactoring easier
    » reduce bugs long-term
    » find bugs before my user does
    media source: https://gfycat.com/piercinghospitabledwarfrabbit

    View Slide

  20. "We're going to rewrite that
    anyway!"
    media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR

    View Slide

  21. Roadmap

    Hello World!

    Where we started
    "
    First steps
    #
    When to test?
    $
    How to test?
    %
    The 3 most important learnings
    &
    Summary
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  22. First steps
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  23. You have to sell this
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  24. How to tell my...
    »
    !"#$%
    »
    &'()
    »
    *+,⏰
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  25. Useful tools
    media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2

    View Slide

  26. Useful tools
    Will support you before the first test - pinky promise
    » Code formatter and linting
    » Component library
    » Faster UI tests
    » Error tracking
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  27. Workflow rules
    media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW

    View Slide

  28. Workflow rules
    » Tests before commit
    » Tests before build
    » Tests are part of code review
    » Improvement tickets for refactorings
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  29. Roadmap

    Hello World!

    Where we started

    First steps
    "
    When to test?
    #
    How to test?
    $
    The 3 most important learnings
    %
    Summary
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  30. When to test?
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide


  31. New functionality only with tests
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  32. !
    If Bug then test
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  33. !
    Test before changes
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  34. !
    Use idle times
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  35. Roadmap

    Hello World!

    Where we started

    First steps

    When to test?
    "
    How to test?
    #
    The 3 most important learnings
    $
    Summary
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  36. How to test?
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  37. Order
    ! ⭕
    Tests
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  38. Order
    ! ⭕
    Tests
    media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs

    View Slide

  39. Order
    ! ⭕
    Tests
    "Characterisation" || "Pinning"
    media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs

    View Slide

  40. Order
    ! ✅
    Tests
    # ⭕
    Refactor
    -> rinse and repeat!
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  41. Order
    ! ✅
    Tests
    # ✅
    Refactor
    ! ⭕
    Tests
    # ⭕
    Code
    $ ⭕
    Refactor
    media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6

    View Slide

  42. Roadmap

    Hello World!

    Where we started

    First steps

    When to test?

    How to test?
    "
    The 3 most important learnings
    #
    Summary
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  43. With this 3 tips
    you can't do ANYTHING wrong again
    probably
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  44. Tip # 1:
    Keep 'em separated
    media source: https://www.youtube.com/watch?v=1jOk8dk-qaU

    View Slide

  45. Tip for separating:
    .
    .
    VanillaJS is love, VanillaJS is life!
    Yeah, ok, you can also use Typescript

    View Slide

  46. Tip for separating:
    .
    .
    Dumb is the new sexy!1
    1 Only with code components.
    media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw

    View Slide

  47. Tip #2:
    media source: http://t.co/ca31My7

    View Slide

  48. Tip #3: Perfection is not an
    excuse
    “Imperfect action is better than
    perfect inaction.”
    – Harry Truman
    media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg

    View Slide

  49. Roadmap

    Hello World!

    Where we started

    First steps

    When to test?

    How to test?

    The 3 most important learnings
    "
    Summary
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  50. So... did it work?
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  51. First test
    media source: https://www.youtube.com/watch?v=EH3X4469Aag

    View Slide

  52. media source: https://www.youtube.com/watch?v=EH3X4469Aag

    View Slide

  53. Actual footage of me testing code
    media source: https://www.youtube.com/watch?v=EH3X4469Aag

    View Slide

  54. !
    10/10 would write tests again.
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

  55. And that's it!
    Thanks
    !
    » twitter: @mirjam_diala
    » github/gitlab: programmiri
    » web: programmiri.rocks
    media source: https://www.youtube.com/watch?v=EH3X4469Aag

    View Slide