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

Implementing a test suite in an existing Frontend application

Implementing a test suite in an existing Frontend application

Slides to my talk at JS World Conference 2021.

6fe15a7e096eb9517a201a249e57aa80?s=128

Mirjam Aulbach

February 23, 2021
Tweet

Transcript

  1. Better late than never

  2. Mirjam ! Software Engineer twitter: @mirjam_diala | github/gitlab: @programmiri

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    github/gitlab: @programmiri
  19. Why retrofit a test suite » become futureproof » keep

    the Extensibility » Refactoring easier » reduce bugs long-term » find bugs before my user does media source: https://gfycat.com/piercinghospitabledwarfrabbit
  20. "We're going to rewrite that anyway!" media source: https://giphy.com/gifs/bublywater-2mEhEXJTxEJFBMVduR

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

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

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

    twitter: @mirjam_diala | github/gitlab: @programmiri
  25. Useful tools media source: https://giphy.com/gifs/laff-tv-funny-comedy-25JgMcsSndyuBkoaV2

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

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

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

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

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

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

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

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

  37. Order ! ⭕ Tests twitter: @mirjam_diala | github/gitlab: @programmiri

  38. Order ! ⭕ Tests media source: https://giphy.com/gifs/cartoonhangover-cute-sad-fR7StZn0GlJYdx9Pfs

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

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

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

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

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

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

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

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

  48. 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
  49. 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
  50. So... did it work? twitter: @mirjam_diala | github/gitlab: @programmiri

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

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

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

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

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

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