Besser spät als nie: Testsuite in bestehenden React-Apps nachziehen

Slides zu meinem Talk am 27.06.2019 an der EnterJS in Darmstadt.

Ein paar nützliche Ressourcen und Links zum Thema habe ich hier zusammengefasst:
https://gist.github.com/programmiri/50d1810e8f30651fe96d6affbb2240ed

Transcript

1. Besser spät als nie! Testsuite in bestehende React Application nachziehen @mirjam_diala • @programmiri • programmiri.de
2. ! Mirjam Bäuerlein Frontend Engineer @mirjam_diala • @programmiri • programmiri.de
3. So!ware made in Darmstadt ̣ Crossfunktionale Teams ̣ Begleitung + Unterstützung Produktentwicklung ̣ Umsetzung So!ware Projekten @mirjam_diala • @programmiri • programmiri.de
4. I ! Testing media source: http://www.latlmes.com/arts/return-of-the-golden-age-of-comics-1
5. Fahrplan ⚪ Hello World! ✔ # Ausgangslage ⚪ Erste Schritte ⚪ Wann testen? ⚪ Wie testen? ⚪ Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
6. Ausgangslage @mirjam_diala • @programmiri • programmiri.de
8. Stand 23.03.2018 ̣ 38.181 Zeilen Code ̣ 291 JS Dateien ̣ 238 React Komponenten @mirjam_diala • @programmiri • programmiri.de
9. UI Tests: 877 @mirjam_diala • @programmiri • programmiri.de
10. Integration and Unit Tests: 0 @mirjam_diala • @programmiri • programmiri.de
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.de
16. @mirjam_diala • @programmiri • programmiri.de
17. Warum Testsuite nachziehen? (ernstha! jetzt mal) @mirjam_diala • @programmiri • programmiri.de
18. Warum Testsuite nachziehen? ̣Zukun!ssicher 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.de
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.de
22. . . Erste Schritte @mirjam_diala • @programmiri • programmiri.de
23. ! " @mirjam_diala • @programmiri • programmiri.de
24. Verkauf das erst mal @mirjam_diala • @programmiri • programmiri.de
25. Wie sag ich's... ̣ !"#$% ̣ &'() ̣ *+,⏰ @mirjam_diala • @programmiri • programmiri.de
26. Hilfreiche Werkzeuge media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2
27. Hilfreiche Werkzeuge Helfen vor dem ersten Test, versprochen. ̣ Code Formatter und Linting ̣ Komponenten Bibliothek ̣ Schnellere UI Tests ̣ Error Tracking @mirjam_diala • @programmiri • programmiri.de
28. Workflow Regeln media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
29. Workflow Regeln ̣ Tests vor Commit ̣ Tests vor Build ̣ Tests in Code Review ̣ Improvement Tickets für Refactorings @mirjam_diala • @programmiri • programmiri.de
30. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ ⚪ Erste Schritte ✔ # Wann testen? ⚪ Wie testen? ⚪ Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
31. Wann testen wir? @mirjam_diala • @programmiri • programmiri.de
32. ‼ Neue Funktionalität nur mit Tests @mirjam_diala • @programmiri • programmiri.de
33. ! Wenn Bug dann Test @mirjam_diala • @programmiri • programmiri.de
34. ! Test before Changes @mirjam_diala • @programmiri • programmiri.de
35. ! Idle Time nutzen @mirjam_diala • @programmiri • programmiri.de
36. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ ⚪ Erste Schritte ✔ ⚪ Wann testen? ✔ # Wie testen? ⚪ Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
37. Wie testen wir? @mirjam_diala • @programmiri • programmiri.de
38. Reihenfolge ! ⭕ Tests @mirjam_diala • @programmiri • programmiri.de
39. Reihenfolge ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
40. Reihenfolge ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs
41. Reihenfolge ! ✅ Tests media source: https://giphy.com/gifs/iiDWuyzFoUvpm
42. Reihenfolge ! ✅ Tests # ⭕ Refactor @mirjam_diala • @programmiri • programmiri.de
43. Reihenfolge ! ✅ Tests # ⭕ Refactor -> rinse and repeat! @mirjam_diala • @programmiri • programmiri.de
44. Reihenfolge ! ✅ Tests # ✅ Refactor ! ⭕ Tests @mirjam_diala • @programmiri • programmiri.de
45. Reihenfolge ! ✅ Tests # ✅ Refactor ! ⭕ Tests # ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
46. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ ⚪ Erste Schritte ✔ ⚪ Wann testen? ✔ ⚪ Wie testen? ✔ # Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
47. Mit diesen 3 Tipps kannst du nix mehr falsch machen beinahe @mirjam_diala • @programmiri • programmiri.de
48. Tipp # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
49. Tipp zum Separieren: . . VanillaJS is love, VanillaJS is life! media source: https://giphy.com/gifs/ice-oddlysatisfying-cone-uflBFkDR2T9m
50. Tipp zum Separieren: . . Dumb is the new sexy!1 1 Nur bei Code Komponenten. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
51. 2. media source: http://t.co/ca31My7
52. 3. Perfektion ist keine Ausrede “Imperfect action is better than perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
53. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ ⚪ Erste Schritte ✔ ⚪ Wann testen? ✔ ⚪ Wie testen? ✔ ⚪ Die 3 wichtigsten Learnings # Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
54. Hat es was gebracht? @mirjam_diala • @programmiri • programmiri.de
55. First test media source: https://www.youtube.com/watch?v=EH3X4469Aag
56. media source: https://www.youtube.com/watch?v=EH3X4469Aag
57. Actual footage of me testing code media source: https://www.youtube.com/watch?v=EH3X4469Aag
58. ! 10/10 would write tests again. @mirjam_diala • @programmiri • programmiri.de
59. And that's it! Danke ! ̣Twitter: @mirjam_diala ̣Twitter: @Conf_Buddy ̣Github: programmiri media source: https://www.youtube.com/watch?v=EH3X4469Aag