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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. Ausgangslage
   @mirjam_diala • @programmiri • programmiri.de
   

   View Slide

6. View Slide

7. Stand 23.03.2018
   ̣ 38.181 Zeilen Code
   ̣ 291 JS Dateien
   ̣ 238 React Komponenten
   @mirjam_diala • @programmiri • programmiri.de
   

   View Slide

8. UI Tests: 877
   @mirjam_diala • @programmiri • programmiri.de
   

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

15. @mirjam_diala • @programmiri • programmiri.de
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

20. .
    .
    Erste Schritte
    @mirjam_diala • @programmiri • programmiri.de
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

26. Workflow Regeln
    media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW
    

    View Slide

27. Workflow Regeln
    ̣ Tests vor Commit
    ̣ Tests vor Build
    ̣ Tests in Code Review
    ̣ Improvement Tickets für Refactorings
    @mirjam_diala • @programmiri • programmiri.de
    

    View Slide

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

    View Slide

29. Wann testen wir?
    @mirjam_diala • @programmiri • programmiri.de
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

35. Wie testen wir?
    @mirjam_diala • @programmiri • programmiri.de
    

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

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

    View Slide

42. Mit diesen 3 Tipps
    kannst du nix mehr falsch machen
    beinahe
    @mirjam_diala • @programmiri • programmiri.de
    

    View Slide

43. Tipp # 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!
    media source: https://giphy.com/gifs/ice-oddlysatisfying-cone-uflBFkDR2T9m
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

49. Hat es was
    gebracht?
    @mirjam_diala • @programmiri • programmiri.de
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide