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.

Mirjam Aulbach

February 23, 2021
Tweet

More Decks by Mirjam Aulbach

Other Decks in Programming

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