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.

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