Besser spät als nie - Testsuite in bestehende React Application nachziehen

Slides to my talk at ct'webdev 2021.

Transcript

1. Besser spät als nie! Testsuite in bestehende React Application nachziehen @mirjam_diala • | @programmiri • programmiri.rocks
2. ! Mirjam Aulbach @mirjam_diala • | @programmiri • programmiri.rocks
3. I ! Testing @mirjam_diala • | @programmiri • programmiri.rocks
4. Me when someone says they don't like testing media source: https://giphy.com/gifs/reaction-dogs-texting-RGK9jWz0t89Hy
5. Fahrplan ✔ Hello World! " Ausgangslage # Erste Schritte $ Wann testen? % Wie testen? & Die 3 wichtigsten Learnings ' Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
6. Ausgangslage @mirjam_diala • | @programmiri • programmiri.rocks
8. Stand 23.03.2018 → 38.181 Zeilen Code → 291 JS Dateien → 238 React Komponenten @mirjam_diala • | @programmiri • programmiri.rocks
9. UI Tests: 877 @mirjam_diala • | @programmiri • programmiri.rocks
10. Integration and Unit Tests: 0 @mirjam_diala • | @programmiri • programmiri.rocks
11. actual footage of me seeing this numbers media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/
12. Legacy Code? media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186
13. "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
14. media source: https://imgur.com/gallery/XkM0Jqp
15. Lösung? @mirjam_diala • | @programmiri • programmiri.rocks
16. @mirjam_diala • | @programmiri • programmiri.rocks
17. Warum Testsuite nachziehen? (ernsthaft jetzt mal) @mirjam_diala • | @programmiri • programmiri.rocks
18. Warum Testsuite nachziehen? → Zukunftssicher sein → Erweiterbarkeit erhalten → Refactoring vereinfachen → Bugs langfristig reduzieren → Bugs vor dem User finden media source: https://gfycat.com/piercinghospitabledwarfrabbit
19. "Irgendwann schreiben wir es einfach neu!" ! @mirjam_diala • " | # @programmiri • programmiri.rocks
20. "Irgendwann schreiben wir es einfach neu!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
21. Fahrplan ✔ Hello World! ✔ Ausgangslage " Erste Schritte # Wann testen? $ Wie testen? % Die 3 wichtigsten Learnings & Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
22. . . Erste Schritte @mirjam_diala • | @programmiri • programmiri.rocks
23. Verkauf das erst mal @mirjam_diala • | @programmiri • programmiri.rocks
24. Wie sag ich's... → !"#$% → &'() → *+,⏰ @mirjam_diala • | @programmiri • programmiri.rocks
25. Hilfreiche Werkzeuge Helfen vor dem ersten Test, versprochen. → Code Formatter und Linting → Komponenten Bibliothek → Schnellere UI Tests → Error Tracking @mirjam_diala • | @programmiri • programmiri.rocks
26. Workflow Regeln → Tests vor Commit → Tests vor Build → Tests in Code Review → Improvement Tickets für Refactorings @mirjam_diala • | @programmiri • programmiri.rocks
27. Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte " Wann testen? # Wie testen? $ Die 3 wichtigsten Learnings % Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
28. Wann testen wir? @mirjam_diala • | @programmiri • programmiri.rocks
29. ‼ Neue Funktionalität nur mit Tests @mirjam_diala • | @programmiri • programmiri.rocks
30. ! Wenn Bug dann Test @mirjam_diala • | @programmiri • programmiri.rocks
31. ! Tests vor Änderungen @mirjam_diala • | @programmiri • programmiri.rocks
32. ! Idle Time nutzen @mirjam_diala • | @programmiri • programmiri.rocks
33. Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ✔ Wann testen? " Wie testen? # Die 3 wichtigsten Learnings $ Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
34. Wie testen wir? @mirjam_diala • | @programmiri • programmiri.rocks
35. Reihenfolge ! ⭕ Tests ! @mirjam_diala • " | # @programmiri • $ programmiri.rocks
36. Reihenfolge ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad- fR7StZn0GlJYdx9Pfs
37. Reihenfolge ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad- fR7StZn0GlJYdx9Pfs
38. Reihenfolge ! ✅ Tests media source: https://giphy.com/gifs/iiDWuyzFoUvpm
39. Reihenfolge ! ✅ Tests # ⭕ Refactor -> rinse and repeat! ! @mirjam_diala • " | # @programmiri • $ programmiri.rocks
40. Reihenfolge ! ✅ Tests # ✅ Refactor ! ⭕ Tests # ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
41. Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ✔ Wann testen? ✔ Wie testen? " Die 3 wichtigsten Learnings # Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
42. Mit diesen 3 Tipps kannst du nix mehr falsch machen quasi @mirjam_diala • | @programmiri • programmiri.rocks
43. Learning #1 Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
44. Tipp zum Separieren: . . VanillaJS is love, VanillaJS is life!1 1 Ja ja, gilt auch für TypeScript! media source: https://giphy.com/gifs/ice-oddlysatisfying-cone- uflBFkDR2T9m
45. Tipp zum Separieren: . . Dumb is the new sexy!2 2 Nur bei Code Komponenten. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
46. Learning #2 media source: http://t.co/ca31My7
47. Learning #3 Perfektion ist keine Ausrede “Imperfect action is better than perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
48. Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ~~ ✔ ~~Wann testen? ✔ Wie testen? ✔ Die 3 wichtigsten Learnings " Rückblick & Fazit @mirjam_diala • | @programmiri • programmiri.rocks
49. Hat es was gebracht? @mirjam_diala • | @programmiri • programmiri.rocks
50. First test media source: https://www.youtube.com/watch?v=EH3X4469Aag
51. Actual footage of me testing code media source: https://www.youtube.com/watch?v=EH3X4469Aag
52. ! 10/10 would write tests again. @mirjam_diala • | @programmiri • programmiri.rocks
53. And that's it! Danke ! → Twitter: @mirjam_diala → Twitter: @Conf_Buddy → Github/Gitlab: programmiri → Web: programmiri.rocks media source: https://www.youtube.com/watch?v=EH3X4469Aag