Implementing a test suite in an existing Frontend application

Slides to my talk at JS World Conference 2021.

Transcript

1. Better late than never
2. Mirjam ! Software Engineer twitter: @mirjam_diala | github/gitlab: @programmiri
3. I ! Testing twitter: @mirjam_diala | github/gitlab: @programmiri
4. Me when someone says they don't like testing twitter: @mirjam_diala | github/gitlab: @programmiri
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
6. Where we started twitter: @mirjam_diala | github/gitlab: @programmiri
7. twitter: @mirjam_diala | github/gitlab: @programmiri
8. 23.03.2018 » 38.181 lines of code » 291 JS files » 238 React components twitter: @mirjam_diala | github/gitlab: @programmiri
9. UI Tests: 877 twitter: @mirjam_diala | github/gitlab: @programmiri
10. Integration and Unit Tests: 0 twitter: @mirjam_diala | github/gitlab: @programmiri
11. actual footage of me seeing this numbers media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/
12. Legacy Code? twitter: @mirjam_diala | github/gitlab: @programmiri
13. "Nobody touch nothing" Alien, 1986 media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186
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
15. media source: https://imgur.com/gallery/XkM0Jqp
16. Solution? twitter: @mirjam_diala | github/gitlab: @programmiri
17. twitter: @mirjam_diala | github/gitlab: @programmiri
18. Why retrofit a test suite? (for real) twitter: @mirjam_diala | github/gitlab: @programmiri
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
20. "We're going to rewrite that anyway!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
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
22. First steps twitter: @mirjam_diala | github/gitlab: @programmiri
23. You have to sell this twitter: @mirjam_diala | github/gitlab: @programmiri
24. How to tell my... » !"#$% » &'() » *+,⏰ twitter: @mirjam_diala | github/gitlab: @programmiri
25. Useful tools media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2
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
27. Workflow rules media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
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
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
30. When to test? twitter: @mirjam_diala | github/gitlab: @programmiri
31. ‼ New functionality only with tests twitter: @mirjam_diala | github/gitlab: @programmiri
32. ! If Bug then test twitter: @mirjam_diala | github/gitlab: @programmiri
33. ! Test before changes twitter: @mirjam_diala | github/gitlab: @programmiri
34. ! Use idle times twitter: @mirjam_diala | github/gitlab: @programmiri
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
36. How to test? twitter: @mirjam_diala | github/gitlab: @programmiri
37. Order ! ⭕ Tests twitter: @mirjam_diala | github/gitlab: @programmiri
38. Order ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
39. Order ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
40. Order ! ✅ Tests # ⭕ Refactor -> rinse and repeat! twitter: @mirjam_diala | github/gitlab: @programmiri
41. Order ! ✅ Tests # ✅ Refactor ! ⭕ Tests # ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
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
43. With this 3 tips you can't do ANYTHING wrong again probably twitter: @mirjam_diala | github/gitlab: @programmiri
44. Tip # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
45. Tip for separating: . . VanillaJS is love, VanillaJS is life! Yeah, ok, you can also use Typescript
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
47. Tip #2: media source: http://t.co/ca31My7
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
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
50. So... did it work? twitter: @mirjam_diala | github/gitlab: @programmiri
51. First test media source: https://www.youtube.com/watch?v=EH3X4469Aag
52. media source: https://www.youtube.com/watch?v=EH3X4469Aag
53. Actual footage of me testing code media source: https://www.youtube.com/watch?v=EH3X4469Aag
54. ! 10/10 would write tests again. twitter: @mirjam_diala | github/gitlab: @programmiri
55. And that's it! Thanks ! » twitter: @mirjam_diala » github/gitlab: programmiri » web: programmiri.rocks media source: https://www.youtube.com/watch?v=EH3X4469Aag