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

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.

Mirjam Aulbach

July 25, 2019
Tweet

More Decks by Mirjam Aulbach

Other Decks in Programming

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: [email protected]
    media source: https://www.youtube.com/watch?v=EH3X4469Aag

    View Slide