Snapshot testing in iOS

Snapshot testing is a way of ensuring that your views look correctly in every possible configuration, size and language (among others). It tries to bridge the gap between unit tests and manual or UI tests. You can learn from the slides about snapshot testing itself, its pros and cons, and to see some examples of real-life scenarios.

Transcript

1. Snapshot testing in iOS Bartłomiej Hyży iOS dev
2. What is snapshot testing?
3. Mobile test types Unit tests Integration tests UI tests Manual tests Complexity Quantity Snapshot tests }
4. Record snapshot Take a screenshot Store as a reference image
5. Execute test Take a screenshot Pull reference image Compare
7. Visuals influenced by… ‣ Screen resolution ‣ Language ‣ Device orientation ‣ Interface idiom (phone, pad, TV, CarPlay) ‣ Application state
8. Combinatorial explosion ๏ 1 UI element, e.g. button ๏ 3 states (normal, highlighted, disabled) ๏ 2 configurations (normal, with subtitle) ๏ 10 languages ๏ 2 styles (light, dark) 1 × 3 × 2 × 10 × 2 = 120 combinations
9. Pranoto Stockholm Arlanda Airport Samarinda Aji Pangeran Tumenggung Pranoto Int'l Airport Samarinda Aji Pangeran Tumenggung International Airport
12. Libraries ‣ XCUITest ‣ Own solution ‣ iOSSnapshotTestCase (FBSnapshotTestCase)
13. iOSSnapshotTestCase Podfile: target "Tests" do
 use_frameworks!
 pod 'iOSSnapshotTestCase'
 end Env. variables: FB_REFERENCE_IMAGE_DIR
 IMAGE_DIFF_DIR
14. iOSSnapshotTestCase
15. iOSSnapshotTestCase ⌘U
16. Pros + Quickly validate numerous view forms + Detect subtle issues in reused components + Much faster than UI tests — no navigation, animations
17. Pros + Promote well-designed APIs and good programming practices • Lightweight views/controllers • Abstraction • Dependency injection
18. Pros + Visual pull requests
19. Pros + Enable fast design iterations Developer Designer Tester
20. Cons - Occasional flakiness - Animations and interactions not tested - Might need good image diff tool, e.g. Kaleidoscope
21. Cons - Some features trickier to test (e.g. size classes, UIAppearance) - Complex screens and scenarios might require hacky solutions
22. Cons - Repository can grow in size considerably ‣ Snapshots of entire screens ‣ Large Retina displays ‣ 2x/3x images ‣ Large, scrollable content
23. Cons ‣ Choose your tests wisely ‣ Purge snapshots from history ‣ Use Git LFS - Repository can grow in size considerably
24. Git LFS git add Snapshots/some_huge_snapshot.png
 git commit Snapshots/some_huge_snapshot.png
 2 MB +2 MB +2 MB Screen under test modified git add Snapshots/some_huge_snapshot.png
 git commit
25. Git LFS Snapshots/some_huge_snapshot.png
 version https://git-lfs.github.com/spec/v1oid sha256:3296c129ae4c4e25cdcbe248e553ca4aa0d7b88caeb2e9cf1491f0de81570944
 size 2097152 sha256:3296…0944 2 MB sha256:XXXXXXXXXX 2 MB sha256:YYYYYYYYYY 2 MB Git repository Git LFS server
26. Thanks! Questions?