Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Slides to my talk at ct'webdev 2021.

6fe15a7e096eb9517a201a249e57aa80?s=128

Mirjam Aulbach

December 07, 2021
Tweet

More Decks by Mirjam Aulbach

Other Decks in Programming

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

  7. None
  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