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

Besser spät als nie: Testsuite in bestehenden R...

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

Slides zu meinem Talk am 27.06.2019 an der EnterJS in Darmstadt.

Ein paar nützliche Ressourcen und Links zum Thema habe ich hier zusammengefasst:
https://gist.github.com/programmiri/50d1810e8f30651fe96d6affbb2240ed

Mirjam Aulbach

June 27, 2019
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.de
  2. So!ware made in Darmstadt ̣ Crossfunktionale Teams ̣ Begleitung +

    Unterstützung Produktentwicklung ̣ Umsetzung So!ware Projekten @mirjam_diala • @programmiri • programmiri.de
  3. Fahrplan ⚪ Hello World! ✔ # Ausgangslage ⚪ Erste Schritte

    ⚪ Wann testen? ⚪ Wie testen? ⚪ Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  4. Stand 23.03.2018 ̣ 38.181 Zeilen Code ̣ 291 JS Dateien

    ̣ 238 React Komponenten @mirjam_diala • @programmiri • programmiri.de
  5. "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
  6. Warum Testsuite nachziehen? ̣Zukun!ssicher sein ̣Erweiterbarkeit erhalten ̣Refactoring vereinfachen ̣Bugs

    langfristig reduzieren ̣Bugs vor dem User finden media source: https://gfycat.com/piercinghospitabledwarfrabbit
  7. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ # Erste

    Schritte ⚪ Wann testen? ⚪ Wie testen? ⚪ Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  8. Wie sag ich's... ̣ !"#$% ̣ &'() ̣ *+,⏰ @mirjam_diala

    • @programmiri • programmiri.de
  9. Hilfreiche Werkzeuge Helfen vor dem ersten Test, versprochen. ̣ Code

    Formatter und Linting ̣ Komponenten Bibliothek ̣ Schnellere UI Tests ̣ Error Tracking @mirjam_diala • @programmiri • programmiri.de
  10. Workflow Regeln ̣ Tests vor Commit ̣ Tests vor Build

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

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

    Schritte ✔ ⚪ Wann testen? ✔ # Wie testen? ⚪ Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  13. Reihenfolge ! ✅ Tests # ⭕ Refactor -> rinse and

    repeat! @mirjam_diala • @programmiri • programmiri.de
  14. Reihenfolge ! ✅ Tests # ✅ Refactor ! ⭕ Tests

    @mirjam_diala • @programmiri • programmiri.de
  15. Reihenfolge ! ✅ Tests # ✅ Refactor ! ⭕ Tests

    # ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
  16. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ ⚪ Erste

    Schritte ✔ ⚪ Wann testen? ✔ ⚪ Wie testen? ✔ # Die 3 wichtigsten Learnings ⚪ Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  17. Mit diesen 3 Tipps kannst du nix mehr falsch machen

    beinahe @mirjam_diala • @programmiri • programmiri.de
  18. Tipp zum Separieren: . . VanillaJS is love, VanillaJS is

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

    1 Nur bei Code Komponenten. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
  20. 3. Perfektion ist keine Ausrede “Imperfect action is better than

    perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
  21. Fahrplan ⚪ Hello World! ✔ ⚪ Ausgangslage ✔ ⚪ Erste

    Schritte ✔ ⚪ Wann testen? ✔ ⚪ Wie testen? ✔ ⚪ Die 3 wichtigsten Learnings # Rückblick & Fazit @mirjam_diala • @programmiri • programmiri.de
  22. And that's it! Danke ! ̣Twitter: @mirjam_diala ̣Twitter: @Conf_Buddy ̣Github:

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