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