Implementing a test suite in an existing Frontend application

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