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

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

Slides to my talk at the coseeTechTalks Meetup in July 2019.

6fe15a7e096eb9517a201a249e57aa80?s=128

Mirjam

July 25, 2019
Tweet

Transcript

  1. Besser spät als nie! Testsuite in bestehende React Application nachziehen

    #CoseeTechTalks
  2. ! Mirjam Bäuerlein Frontend Engineer @mirjam_diala • @programmiri • programmiri.de

  3. I ! Testing media source: http://www.latlmes.com/arts/return-of-the-golden-age-of-comics-1

  4. Fahrplan ✔ Hello World! " Ausgangslage # Erste Schritte $

    Wann testen? % Wie testen? & Die 3 wichtigsten Learnings ' Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  5. Ausgangslage @mirjam_diala • @programmiri • programmiri.de

  6. None
  7. Stand 23.03.2018 ̣ 38.181 Zeilen Code ̣ 291 JS Dateien

    ̣ 238 React Komponenten @mirjam_diala • @programmiri • programmiri.de
  8. UI Tests: 877 @mirjam_diala • @programmiri • programmiri.de

  9. Integration and Unit Tests: 0 @mirjam_diala • @programmiri • programmiri.de

  10. actual footage of me seeing this numbers media source: https://giphy.com/gifs/queen-recap-geek-V9SviiJPLyFQ4/

  11. Legacy Code? media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186

  12. "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
  13. media source: https://imgur.com/gallery/XkM0Jqp

  14. Lösung? @mirjam_diala • @programmiri • programmiri.de

  15. @mirjam_diala • @programmiri • programmiri.de

  16. Warum Testsuite nachziehen? (ernstha! jetzt mal) @mirjam_diala • @programmiri •

    programmiri.de
  17. Warum Testsuite nachziehen? ̣Zukun!ssicher sein ̣Erweiterbarkeit erhalten ̣Refactoring vereinfachen ̣Bugs

    langfristig reduzieren ̣Bugs vor dem User finden media source: https://gfycat.com/piercinghospitabledwarfrabbit
  18. "Irgendwann schreiben wir es einfach neu!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR

  19. Fahrplan ✔ Hello World! ✔ Ausgangslage " Erste Schritte #

    Wann testen? $ Wie testen? % Die 3 wichtigsten Learnings & Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  20. . . Erste Schritte @mirjam_diala • @programmiri • programmiri.de

  21. Verkauf das erst mal @mirjam_diala • @programmiri • programmiri.de

  22. ! " @mirjam_diala • @programmiri • programmiri.de

  23. Wie sag ich's... ̣ !"#$% ̣ &'() ̣ *+,⏰ @mirjam_diala

    • @programmiri • programmiri.de
  24. Hilfreiche Werkzeuge media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2

  25. Hilfreiche Werkzeuge Helfen vor dem ersten Test, versprochen. ̣ Code

    Formatter und Linting ̣ Komponenten Bibliothek ̣ Schnellere UI Tests ̣ Error Tracking @mirjam_diala • @programmiri • programmiri.de
  26. Workflow Regeln media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW

  27. Workflow Regeln ̣ Tests vor Commit ̣ Tests vor Build

    ̣ Tests in Code Review ̣ Improvement Tickets für Refactorings @mirjam_diala • @programmiri • programmiri.de
  28. Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte "

    Wann testen? # Wie testen? $ Die 3 wichtigsten Learnings % Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  29. Wann testen wir? @mirjam_diala • @programmiri • programmiri.de

  30. ‼ Neue Funktionalität nur mit Tests @mirjam_diala • @programmiri •

    programmiri.de
  31. ! Wenn Bug dann Test @mirjam_diala • @programmiri • programmiri.de

  32. ! Test before Changes @mirjam_diala • @programmiri • programmiri.de

  33. ! Idle Time nutzen @mirjam_diala • @programmiri • programmiri.de

  34. Fahrplan ✔ Hello World! ✔ Ausgangslage ✔ Erste Schritte ✔

    Wann testen? " Wie testen? # Die 3 wichtigsten Learnings $ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  35. Wie testen wir? @mirjam_diala • @programmiri • programmiri.de

  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.de
  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.de
  42. Mit diesen 3 Tipps kannst du nix mehr falsch machen

    beinahe @mirjam_diala • @programmiri • programmiri.de
  43. Tipp # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU

  44. Tipp zum Separieren: . . VanillaJS is love, VanillaJS is

    life! media source: https://giphy.com/gifs/ice-oddlysatisfying-cone-uflBFkDR2T9m
  45. Tipp zum Separieren: . . Dumb is the new sexy!1

    1 Nur bei Code Komponenten. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
  46. 2. media source: http://t.co/ca31My7

  47. 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.de
  49. Hat es was gebracht? @mirjam_diala • @programmiri • programmiri.de

  50. First test media source: https://www.youtube.com/watch?v=EH3X4469Aag

  51. media source: https://www.youtube.com/watch?v=EH3X4469Aag

  52. Actual footage of me testing code media source: https://www.youtube.com/watch?v=EH3X4469Aag

  53. ! 10/10 would write tests again. @mirjam_diala • @programmiri •

    programmiri.de
  54. And that's it! Danke ! ̣Twitter: @mirjam_diala ̣Github: programmiri ̣Mail:

    mirjam.baeuerlein@cosee.biz media source: https://www.youtube.com/watch?v=EH3X4469Aag