Test First with Snapshot Tests

I talked about our experiences using Snapshot Testing at Hopscotch.

Event: http://www.cocoaheadsnyc.org/2017/03/02/march-9th-triple-header/

Transcript

1. Nina Baculinao CocoaheadsNYC 3/9/2017 TEST FIRST WITH SNAPSHOT TESTS
2. IS A VISUAL PROGRAMMING LANGUAGE
6. PROTOTYPING
7. PROTOTYPING GOAL See UI layout changes quickly & on all iOS devices
8. IOS LAYOUT 1. Storyboard 2. NIB Files 3. Code
9. PROGRAMMATIC LAYOUT Dynamic Layouts Performance No Merge Conflicts Custom Views Reusable Code
10. PROGRAMMATIC LAYOUT Dynamic Layouts Performance No Merge Conflicts Custom Views Reusable Code Prototyping?
11. THINGS WE TRIED 1. Simulator 2. Playgrounds 3. Snapshot Testing
12. SNAPSHOT TESTING Unit testing for your views and view controllers We use Nimble Snapshots
13. 1. Examine sketch file 2. Create a view or view controller 3. Write a snapshot test 4. Repeat ( until view looks good ) a. Write view logic b. Run that single test c. Look at screenshots d. If ( self has questions ) i. Borrow designer 5. Write navigation logic 6. Run simulator A PROCESS
14. 1. EXAMINE SKETCH FILE
15. 2. CREATE A VIEW TIP: Start with the smallest view
16. 3. WRITE A SNAPSHOT TEST TIP: Use code snippets
17. 1 import Quick 2 import Nimble 3 import Nimble_Snapshots 4 import HopscotchTestHelpers 5 class <classname> : QuickSpec { 6 override func spec() { 7 describe("appearance") { 8 it("has valid snapshots") { 9 DeviceOrientation.allOrientations.forEach { orientation in 10 let view = <view> 11 view.size = orientation.configuration.screenSize 12 view.configuration = orientation.configuration 13 view.layoutSubviews() 14 expect(view).to(recordSnapshot(named: orientation.name)) 15 // expect(view).to(haveValidSnapshot(named: orientation.name)) 16 } 17 } 18 } 19 } 20 } snapshot Autocomplete
18. DeviceOrientation Helper Struct
19. DeviceConfigurationType
20. Property injection: configuration is a mutable property on the class Initializer injection: configuration is passed into the init 4a. WRITE VIEW LOGIC
21. These snapshots will look wrong Why? The subviews are using the wrong configuration
22. TIP: Pass through view configurations in the initializer
23. 4b. RUN SINGLE TEST TIP: Make a separate test target to run a single test file
26. TIP: Stub view models to test view states
28. TIP: Stub datasource to test view controller
29. TIP: Audit the colors in your app
30. SNAPSHOTS > PLAYGROUNDS Readable pull requests Tested @testable imports Faster prototyping on different devices Reference for designers
31. AH YES, I SEE
32. GOTCHAS Test must be in a folder with spec in it Cannot record WKWebView [1] Running all specs can be slow iOS 10: retook all snapshots & no device agnostic tests [2]
33. LEARNINGS Start with the smallest view Use code snippets for autocompletion Pass through view configurations in the initializer Make a separate test target to run a single test file Stub view models and data sources for testing Audit the colors in your app
34. Nimble Snapshots https://github.com/ashfurrow/Nimble-Snapshots FBSnapshotTestCase https://github.com/facebook/ios-snapshot-test-case Rapid View Prototyping Using FBSnapshotTestCase https://github.com/paulrehkugler/Snapshot-Test-Case-Talk all gifs made by rodrigotello.me
35. i am nina.baculinao@gmail.com Any questions?