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

6fe15a7e096eb9517a201a249e57aa80?s=47 Mirjam
October 29, 2020

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.

6fe15a7e096eb9517a201a249e57aa80?s=128

Mirjam

October 29, 2020
Tweet

Transcript

  1. Better late than never Retrofit test suite in existing React

    apps
  2. Hi! twitter: @mirjam_diala | github/gitlab: @programmiri

  3. ! twitter: @mirjam_diala | github/gitlab: @programmiri

  4. twitter: @mirjam_diala | github/gitlab: @programmiri

  5. I ! Testing twitter: @mirjam_diala | github/gitlab: @programmiri

  6. Me when someone says they don't like testing twitter: @mirjam_diala

    | github/gitlab: @programmiri
  7. 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
  8. Where we started twitter: @mirjam_diala | github/gitlab: @programmiri

  9. twitter: @mirjam_diala | github/gitlab: @programmiri

  10. 23.03.2018 » 38.181 lines of code » 291 JS files

    » 238 React components twitter: @mirjam_diala | github/gitlab: @programmiri
  11. UI Tests: 877 twitter: @mirjam_diala | github/gitlab: @programmiri

  12. Integration and Unit Tests: 0 twitter: @mirjam_diala | github/gitlab: @programmiri

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

  14. Legacy Code? twitter: @mirjam_diala | github/gitlab: @programmiri

  15. "Nobody touch nothing" Alien, 1986 media source: https://getyarn.io/yarn-clip/7555a768-216e-40a0-9f9d-bb417a138186

  16. "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
  17. media source: https://imgur.com/gallery/XkM0Jqp

  18. Solution? twitter: @mirjam_diala | github/gitlab: @programmiri

  19. twitter: @mirjam_diala | github/gitlab: @programmiri

  20. Why retrofit a test suite? (for real) twitter: @mirjam_diala |

    github/gitlab: @programmiri
  21. 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
  22. "We're going to rewrite that anyway!" twitter: @mirjam_diala | github/gitlab:

    @programmiri
  23. "We're going to rewrite that anyway!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR

  24. 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
  25. First steps twitter: @mirjam_diala | github/gitlab: @programmiri

  26. You have to sell this twitter: @mirjam_diala | github/gitlab: @programmiri

  27. How to tell my... » !"#$% » &'() » *+,⏰

    twitter: @mirjam_diala | github/gitlab: @programmiri
  28. ! " twitter: @mirjam_diala | github/gitlab: @programmiri

  29. Useful tools media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2

  30. 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
  31. Workflow rules media source: https://giphy.com/gifs/season-17-the-simpsons-17x12-xT5LMQgPLUzWHfZ0hW

  32. Workflow rules » Tests before commit » Tests before build

    » Tests are part of code review » Improvement tickets for refactorings twitter: @mirjam_diala | github/gitlab: @programmiri
  33. 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
  34. When to test? twitter: @mirjam_diala | github/gitlab: @programmiri

  35. ‼ New functionality only with tests twitter: @mirjam_diala | github/gitlab:

    @programmiri
  36. ! If Bug then test twitter: @mirjam_diala | github/gitlab: @programmiri

  37. ! Test before changes twitter: @mirjam_diala | github/gitlab: @programmiri

  38. ! Use idle times twitter: @mirjam_diala | github/gitlab: @programmiri

  39. 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
  40. How to test? twitter: @mirjam_diala | github/gitlab: @programmiri

  41. Order ! ⭕ Tests "Characterisation" || "Pinning" media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs

  42. Order ! ✅ Tests media source: https://giphy.com/gifs/iiDWuyzFoUvpm

  43. Order ! ✅ Tests # ⭕ Refactor -> rinse and

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

    # ⭕ Code $ ⭕ Refactor media source: https://giphy.com/gifs/mad-lights-2d-3oKIP833PIFb553OP6
  45. 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
  46. With this 3 tips you can't do ANYTHING wrong again

    probably twitter: @mirjam_diala | github/gitlab: @programmiri
  47. Tip # 1: Keep 'em separated media source: https://www.youtube.com/watch?v=1jOk8dk-qaU

  48. Tip for separating: . . VanillaJS is love, VanillaJS is

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

    1 Only with code components. media source: https://giphy.com/gifs/talk-warming-rpt-Q1aRmd8e90WIw
  50. Tip #2: media source: http://t.co/ca31My7

  51. 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
  52. 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
  53. So... did it work? twitter: @mirjam_diala | github/gitlab: @programmiri

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

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

  56. ! 10/10 would write tests again. twitter: @mirjam_diala | github/gitlab:

    @programmiri
  57. And that's it! Thanks ! » twitter: @mirjam_diala » github/gitlab:

    programmiri » web: programmiri.rocks media source: https://www.youtube.com/watch?v=EH3X4469Aag
  58. Programmer get asked to write more tests. twitter: @mirjam_diala |

    github/gitlab: @programmiri