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
   

   View Slide

2. !
   Mirjam Aulbach
   @mirjam_diala • | @programmiri • programmiri.rocks
   

   View Slide

3. I
   !
   Testing
   @mirjam_diala • | @programmiri • programmiri.rocks
   

   View Slide

4. Me when someone says they don't like testing
   media source: https://giphy.com/gifs/reaction-dogs-texting-RGK9jWz0t89Hy
   

   View Slide

5. Fahrplan
   ✔
   Hello World!
   "
   Ausgangslage
   #
   Erste Schritte
   $
   Wann testen?
   %
   Wie testen?
   &
   Die 3 wichtigsten Learnings
   '
   Rückblick & Fazit
   @mirjam_diala • | @programmiri • programmiri.rocks
   

   View Slide

6. Ausgangslage
   @mirjam_diala • | @programmiri • programmiri.rocks
   

   View Slide

7. View Slide

8. Stand 23.03.2018
   → 38.181 Zeilen Code
   → 291 JS Dateien
   → 238 React Komponenten
   @mirjam_diala • | @programmiri • programmiri.rocks
   

   View Slide

9. UI Tests: 877
   @mirjam_diala • | @programmiri • programmiri.rocks
   

   View Slide

10. Integration and Unit Tests: 0
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

14. media source: https://imgur.com/gallery/XkM0Jqp
    

    View Slide

15. Lösung?
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

16. @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

17. Warum Testsuite
    nachziehen?
    (ernsthaft jetzt mal)
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

18. Warum Testsuite nachziehen?
    → Zukunftssicher sein
    → Erweiterbarkeit erhalten
    → Refactoring vereinfachen
    → Bugs langfristig reduzieren
    → Bugs vor dem User finden
    media source: https://gfycat.com/piercinghospitabledwarfrabbit
    

    View Slide

19. "Irgendwann
    schreiben
    wir es
    einfach neu!"
    !
    @mirjam_diala •
    "
    |
    #
    @programmiri • programmiri.rocks
    

    View Slide

20. "Irgendwann
    schreiben
    wir es
    einfach neu!"
    media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR
    

    View Slide

21. Fahrplan
    ✔
    Hello World!
    ✔
    Ausgangslage
    "
    Erste Schritte
    #
    Wann testen?
    $
    Wie testen?
    %
    Die 3 wichtigsten Learnings
    &
    Rückblick & Fazit
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

22. .
    .
    Erste Schritte
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

23. Verkauf das erst mal
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

24. Wie sag ich's...
    →
    !"#$%
    →
    &'()
    →
    *+,⏰
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

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
    

    View Slide

26. Workflow Regeln
    → Tests vor Commit
    → Tests vor Build
    → Tests in Code Review
    → Improvement Tickets für Refactorings
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

27. Fahrplan
    ✔
    Hello World!
    ✔
    Ausgangslage
    ✔
    Erste Schritte
    "
    Wann testen?
    #
    Wie testen?
    $
    Die 3 wichtigsten Learnings
    %
    Rückblick & Fazit
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

28. Wann testen wir?
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

29. ‼
    Neue Funktionalität nur mit Tests
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

30. !
    Wenn Bug dann Test
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

31. !
    Tests vor Änderungen
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

32. !
    Idle Time nutzen
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

33. Fahrplan
    ✔
    Hello World!
    ✔
    Ausgangslage
    ✔
    Erste Schritte
    ✔
    Wann testen?
    "
    Wie testen?
    #
    Die 3 wichtigsten Learnings
    $
    Rückblick & Fazit
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

34. Wie testen wir?
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

35. Reihenfolge
    ! ⭕
    Tests
    !
    @mirjam_diala •
    "
    |
    #
    @programmiri •
    $
    programmiri.rocks
    

    View Slide

36. Reihenfolge
    ! ⭕
    Tests
    media source: https://giphy.com/gifs/cartoonhangover-cute-sad-
    fR7StZn0GlJYdx9Pfs
    

    View Slide

37. Reihenfolge
    ! ⭕
    Tests
    "Characterisation" || "Pinning"
    media source: https://giphy.com/gifs/cartoonhangover-cute-sad-
    fR7StZn0GlJYdx9Pfs
    

    View Slide

38. Reihenfolge
    ! ✅
    Tests
    media source: https://giphy.com/gifs/iiDWuyzFoUvpm
    

    View Slide

39. Reihenfolge
    ! ✅
    Tests
    # ⭕
    Refactor
    -> rinse and repeat!
    !
    @mirjam_diala •
    "
    |
    #
    @programmiri •
    $
    programmiri.rocks
    

    View Slide

40. Reihenfolge
    ! ✅
    Tests
    # ✅
    Refactor
    ! ⭕
    Tests
    # ⭕
    Code
    $ ⭕
    Refactor
    media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
    

    View Slide

41. Fahrplan
    ✔
    Hello World!
    ✔
    Ausgangslage
    ✔
    Erste Schritte
    ✔
    Wann testen?
    ✔
    Wie testen?
    "
    Die 3 wichtigsten Learnings
    #
    Rückblick & Fazit
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

42. Mit diesen 3 Tipps
    kannst du nix mehr falsch machen
    quasi
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

43. Learning #1
    Keep 'em separated
    media source: https://www.youtube.com/watch?v=1jOk8dk-qaU
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. Learning #2
    media source: http://t.co/ca31My7
    

    View Slide

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
    

    View Slide

48. Fahrplan
    ✔
    Hello World!
    ✔
    Ausgangslage
    ✔
    Erste Schritte ~~
    ✔
    ~~Wann testen?
    ✔
    Wie testen?
    ✔
    Die 3 wichtigsten Learnings
    "
    Rückblick & Fazit
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

49. Hat es was gebracht?
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

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

    View Slide

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

    View Slide

52. !
    10/10 would write tests again.
    @mirjam_diala • | @programmiri • programmiri.rocks
    

    View Slide

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
    

    View Slide