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

Visual Testing: A Communication Problem

Visual Testing: A Communication Problem

Bas Broek

June 15, 2018
Tweet

More Decks by Bas Broek

Other Decks in Programming

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