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.

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

    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