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

Better late than never - Retrofit test suite in existing React apps

Better late than never - Retrofit test suite in existing React apps

Slides to my talk at International JavaScript Conference Munich, 2020.

Nobody wants to work with legacy code! Nevertheless, a large part of us does just that. Michael Feathers has defined it painfully well: "Legacy code is code without testing. No matter how old or clean it is and no matter who wrote it. With the rapid increase in front-end complexity, testing has become a necessity much more quickly than a matter of course. That's why they are now everywhere: grown software systems without tests in the frontend. Legacy code that not only runs in production, but wants to be developed further. In her talk, Mirjam tells you how her team had to face this dragon and followed up with a test suite for a 40,000 lines of code react app.

Mirjam Aulbach

October 29, 2020
Tweet

More Decks by Mirjam Aulbach

Other Decks in Programming

Transcript

  1. Better late than never
    Retrofit test suite in existing React apps

    View Slide

  2. Hi!
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  7. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  16. "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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. "We're going to rewrite
    that anyway!"
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

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

    View Slide

  24. 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

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

    View Slide

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

    View Slide

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

    View Slide

  28. ! "
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide

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

    View Slide

  30. 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

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

    View Slide

  32. 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

  33. 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

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

    View Slide


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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  39. 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

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

    View Slide

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

    View Slide

  42. Order
    ! ✅
    Tests
    media source: https://giphy.com/gifs/iiDWuyzFoUvpm

    View Slide

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

    View Slide

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

    View Slide

  45. 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

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

    View Slide

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

    View Slide

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

    View Slide

  49. 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

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

    View Slide

  51. 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

  52. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  57. 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

  58. Programmer get asked to write more tests.
    twitter: @mirjam_diala | github/gitlab: @programmiri

    View Slide