Visual Testing: A Communication Problem

Transcript

1. VISUAL TESTING
   A COMMUNICATION PROBLEM
   1 — @basthomas
   

   View Slide

2. COMMUNICATION
   IS HARD
   2 — @basthomas
   

   View Slide

3. SNAPSHOT
   TESTING
   3 — @basthomas
   

   View Slide

4. func testViewWithSecondaryInteraction() {
   let viewUnderTest = InteractionBarView()
   let primaryInteractions: [Interaction] = [.recommend, .comment, .like]
   let secondaryInteractions: [Interaction] = [.report]
   viewUnderTest.setup(
   withInteractions: primaryInteractions,
   secondaryInteractions: secondaryInteractions
   )
   validateSnapshots(forView: viewUnderTest)
   }
   4 — @basthomas
   

   View Slide

5. func testViewWithSecondaryInteraction() {
   let viewUnderTest = InteractionBarView()
   let primaryInteractions: [Interaction] = [.recommend, .comment, .like]
   let secondaryInteractions: [Interaction] = [.report]
   viewUnderTest.setup(
   withInteractions: primaryInteractions,
   secondaryInteractions: secondaryInteractions
   )
   validateSnapshots(forView: viewUnderTest)
   }
   5 — @basthomas
   

   View Slide

6. func testViewWithSecondaryInteraction() {
   let viewUnderTest = InteractionBarView()
   let primaryInteractions: [Interaction] = [.recommend, .comment, .like]
   let secondaryInteractions: [Interaction] = [.report]
   viewUnderTest.setup(
   withInteractions: primaryInteractions,
   secondaryInteractions: secondaryInteractions
   )
   validateSnapshots(forView: viewUnderTest)
   }
   6 — @basthomas
   

   View Slide

7. func testViewWithSecondaryInteraction() {
   let viewUnderTest = InteractionBarView()
   let primaryInteractions: [Interaction] = [.recommend, .comment, .like]
   let secondaryInteractions: [Interaction] = [.report]
   viewUnderTest.setup(
   withInteractions: primaryInteractions,
   secondaryInteractions: secondaryInteractions
   )
   validateSnapshots(forView: viewUnderTest)
   }
   7 — @basthomas
   

   View Slide

8. func testViewWithSecondaryInteraction() {
   let viewUnderTest = InteractionBarView()
   let primaryInteractions: [Interaction] = [.recommend, .comment, .like]
   let secondaryInteractions: [Interaction] = [.report]
   viewUnderTest.setup(
   withInteractions: primaryInteractions,
   secondaryInteractions: secondaryInteractions
   )
   validateSnapshots(forView: viewUnderTest)
   }
   8 — @basthomas
   

   View Slide

9. func testViewWithSecondaryInteraction() {
   let viewUnderTest = InteractionBarView()
   let primaryInteractions: [Interaction] = [.recommend, .comment, .like]
   let secondaryInteractions: [Interaction] = [.report]
   viewUnderTest.setup(
   withInteractions: primaryInteractions,
   secondaryInteractions: secondaryInteractions
   )
   validateSnapshots(forView: viewUnderTest)
   }
   9 — @basthomas
   

   View Slide

10. 10 — @basthomas
    

    View Slide

11. WHAT IF THE
    DESIGN
    CHANGES?
    11 — @basthomas
    

    View Slide

12. WHAT IF ONE OF THE
    PRIMARY INTERACTIONS
    CHANGES?
    12 — @basthomas
    

    View Slide

13. !
    13 — @basthomas
    

    View Slide

14. IT IS EASY TO
    MAKE A MISTAKE
    14 — @basthomas
    

    View Slide

15. NAMING IS HARD
    15 — @basthomas
    

    View Slide

16. NAMING IS HARD
    > testCellWithPageControlOnPage2of3
    > testCellWithLongNameAndJob
    > testWithShortContent
    > testTwoBirthdaysUnseenElement
    > testStateLoadMoreFailedInsertedOnTop
    > testSlideupViewWithNoIconNoButton
    16 — @basthomas
    

    View Slide

17. DO YOU HAVE ANY IDEA
    WHAT IT IS WE'RE
    TESTING HERE?
    17 — @basthomas
    

    View Slide

18. ... MAYBE?
    18 — @basthomas
    

    View Slide

19. DO YOU HAVE ANY IDEA
    WHEN THESE TESTS ARE
    EXPECTEDLY FAILING?
    19 — @basthomas
    

    View Slide

20. ME NEITHER
    20 — @basthomas
    

    View Slide

21. A FAILING
    SNAPSHOT
    TEST
    21 — @basthomas
    

    View Slide

22. 22 — @basthomas
    

    View Slide

23. testCellWithPageControlOnPage2of3
    SO, IT SHOULDN'T BE
    23 — @basthomas
    

    View Slide

24. !
    24 — @basthomas
    

    View Slide

25. REPLACEABLE
    BY UNIT TESTS
    25 — @basthomas
    

    View Slide

26. SNAPSHOTS AT
    SCALE
    26 — @basthomas
    

    View Slide

27. WE MADE IT HARDER ON
    OURSELVES
    FORK, WRAPPER, WRAPPER, WRAPPER
    27 — @basthomas
    

    View Slide

28. DOCUMENT
    DECISIONS
    28 — @basthomas
    

    View Slide

29. MULTIPLE
    SIMULATORS
    29 — @basthomas
    

    View Slide

30. SPACE
    30 — @basthomas
    

    View Slide

31. IDE UPDATES
    31 — @basthomas
    

    View Slide

32. !
    32 — @basthomas
    

    View Slide

33. !"!"!"!"!
    !"!"!"!"!
    !"!"!"!"!
    !"!"!"!"!
    !"!"!"!"!
    33 — @basthomas
    

    View Slide

34. SNAPSHOTS
    ARE
    SUBJECTIVE
    34 — @basthomas
    

    View Slide

35. IT IS NOT ALL
    BAD
    35 — @basthomas
    

    View Slide

36. QUESTION THINGS
    > "but I just copied it"
    > "but others are doing it"
    > "but I can't write a unit test here"
    > "but ..."
    36 — @basthomas
    

    View Slide

37. HOW TO
    PREVENT THIS
    37 — @basthomas
    

    View Slide

38. DOCUMENT
    38 — @basthomas
    

    View Slide

39. DOCUMENT
    COMMUNICATE
    39 — @basthomas
    

    View Slide

40. DOCUMENT
    COMMUNICATE
    QUESTION THINGS
    40 — @basthomas
    

    View Slide

41. DOCUMENT
    COMMUNICATE
    QUESTION THINGS
    ITERATE
    41 — @basthomas
    

    View Slide

42. THANKS!
    42 — @basthomas
    

    View Slide