Implementing a test suite in an existing Frontend application

Slides to my talk at JS World Conference 2021.

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