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

Better late than never - Retrofit test suite in existing React apps

Better late than never - Retrofit test suite in existing React apps

Slides to my talk at International JavaScript Conference Munich, 2020.

Nobody wants to work with legacy code! Nevertheless, a large part of us does just that. Michael Feathers has defined it painfully well: "Legacy code is code without testing. No matter how old or clean it is and no matter who wrote it. With the rapid increase in front-end complexity, testing has become a necessity much more quickly than a matter of course. That's why they are now everywhere: grown software systems without tests in the frontend. Legacy code that not only runs in production, but wants to be developed further. In her talk, Mirjam tells you how her team had to face this dragon and followed up with a test suite for a 40,000 lines of code react app.

Mirjam Aulbach

October 29, 2020
Tweet

More Decks by Mirjam Aulbach

Other Decks in Programming

Transcript

  1. Roadmap ✔ Hello World! " Where we started # First

    steps $ When to test? % How to test? & The 3 most important learnings ' Summary twitter: @mirjam_diala | github/gitlab: @programmiri
  2. 23.03.2018 » 38.181 lines of code » 291 JS files

    » 238 React components twitter: @mirjam_diala | github/gitlab: @programmiri
  3. "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
  4. Why retrofit a test suite » become futureproof » keep

    the Extensibility » Refactoring easier » reduce bugs long-term » nd bugs before my user does media source: https://gfycat.com/piercinghospitabledwarfrabbit
  5. Roadmap ✔ Hello World! ✔ Where we started " First

    steps # When to test? $ How to test? % The 3 most important learnings & Summary twitter: @mirjam_diala | github/gitlab: @programmiri
  6. How to tell my... » !"#$% » &'() » *+,⏰

    twitter: @mirjam_diala | github/gitlab: @programmiri
  7. Useful tools Will support you before the first test -

    pinky promise » Code formatter and linting » Component library » Faster UI tests » Error tracking twitter: @mirjam_diala | github/gitlab: @programmiri
  8. Workflow rules » Tests before commit » Tests before build

    » Tests are part of code review » Improvement tickets for refactorings twitter: @mirjam_diala | github/gitlab: @programmiri
  9. Roadmap ✔ Hello World! ✔ Where we started ✔ First

    steps " When to test? # How to test? $ The 3 most important learnings % Summary twitter: @mirjam_diala | github/gitlab: @programmiri
  10. Roadmap ✔ Hello World! ✔ Where we started ✔ First

    steps ✔ When to test? " How to test? # The 3 most important learnings $ Summary twitter: @mirjam_diala | github/gitlab: @programmiri
  11. Order ! ✅ Tests # ⭕ Refactor -> rinse and

    repeat! twitter: @mirjam_diala | github/gitlab: @programmiri
  12. Order ! ✅ Tests # ✅ Refactor ! ⭕ Tests

    # ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
  13. Roadmap ✔ Hello World! ✔ Where we started ✔ First

    steps ✔ When to test? ✔ How to test? " The 3 most important learnings # Summary twitter: @mirjam_diala | github/gitlab: @programmiri
  14. With this 3 tips you can't do ANYTHING wrong again

    probably twitter: @mirjam_diala | github/gitlab: @programmiri
  15. Tip for separating: . . VanillaJS is love, VanillaJS is

    life! Yeah, ok, you can also use Typescript
  16. Tip for separating: . . Dumb is the new sexy!1

    1 Only with code components. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
  17. Tip #3: Perfection is not an excuse “Imperfect action is

    better than perfect inaction.” – Harry Truman media source: https://giphy.com/gifs/hoppip-art-film-bOflabuL47FKg
  18. Roadmap ✔ Hello World! ✔ Where we started ✔ First

    steps ✔ When to test? ✔ How to test? ✔ The 3 most important learnings " Summary twitter: @mirjam_diala | github/gitlab: @programmiri
  19. And that's it! Thanks ! » twitter: @mirjam_diala » github/gitlab:

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