Snapshot testing with FBSnapshotTestCase

Brief introduction to FBSnapshotTestCase. How to use it properly. And why you should do it. Talk for Cocoaheads Kyiv 2016/12/10

Transcript

1. Snapshot testing with FBSnapshotTestCase AHMED SULAIMAN CEO @ Flawless App, ex. Petcube engineer
2. iPhone 6 – iOS 10.1 (23E233) FLAWLESS APP Real-time comparison of expected and implemented design. Built into iOS simulator.
3. @ahmed_sulajman WHY Why you should use snapshot tests How to write snapshot tests Ques8ons and answers HOW Q&A
4. @ahmed_sulajman WHY How to write snapshot tests HOW Q&A Why you should use snapshot tests Ques8ons and answers
5. @ahmed_sulajman CONFIDENCE UI elements wri4en properly and works as expected
6. @ahmed_sulajman WYSIWYG What You See Is What You Get
7. @ahmed_sulajman 10010 11001 11100 01100 10001 SEPARATION Separate internal changes in logic and visual changes
8. @ahmed_sulajman EDGE CASES Detect possible UI elements appearance edge cases TEXT IS TOO LONG TO HANDLE...
9. @ahmed_sulajman IMPORTANT NOTICE
10. @ahmed_sulajman IMPORTANT NOTICE Snapshot Tes2ng ≠
11. @ahmed_sulajman IMPORTANT NOTICE Snapshot Tests Unit Tests Integra7on Tests Regression Tests UI Tests Usability Tests Manual Tests
12. @ahmed_sulajman WHY How to write snapshot tests HOW Q&A Why you should use snapshot tests Ques8ons and answers
13. @ahmed_sulajman HOW: SETUP THE PROJECT
14. @ahmed_sulajman HOW: SETUP THE PROJECT Using Cocoapods – h6ps://guides.cocoapods.org/using/using-cocoapods.html target "Tests" do pod 'FBSnapshotTestCase' end
15. @ahmed_sulajman HOW: SETUP THE PROJECT
16. @ahmed_sulajman HOW: CREATE SNAPSHOT TEST
17. @ahmed_sulajman HOW: CREATE SNAPSHOT TEST SUBCLASS FBSnapchotTestCase class HealthyGroceriesTests: FBSnapshotTestCase { FBSnapshotTestCase is a subclass of XCTestCase
18. @ahmed_sulajman HOW: CREATE SNAPSHOT TEST WRITE THE TEST Init View with needed condi5ons and verify it func testLoginButton() { let loginButton = LoginButton() loginButton.setTitle("Sign in", for: .normal) FBSnapshotVerifyView(view: loginButton) }
19. @ahmed_sulajman HOW: CREATE SNAPSHOT TEST RECORD REFERENCES override func setUp() { super.setUp() recordMode = true } Record reference images of testable views
20. @ahmed_sulajman HOW: CREATE SNAPSHOT TEST COMPARE RESULT Compare the difference between reference image and real view Reference Real Diff
21. @ahmed_sulajman WHY How to write snapshot tests HOW Q&A Why you should use snapshot tests Ques8ons and answers
22. @ahmed_sulajman Q&A: HOW TO DEAL WITH ANIMATION
23. @ahmed_sulajman Q&A: HOW TO DEAL WITH ANIMATION DRAW LAST STATE This method is smart enough to render the view’s final state UIView func drawHierarchy(in rect: CGRect, afterScreenUpdates afterUpdates: Bool) -> Bool
24. @ahmed_sulajman Q&A: HOW TO DEAL WITH ANIMATIONS TURN OFF ANIMATION Rewrite components to have an ability to turn off anima:on at any :me UISwitch func setOn(_ on: Bool, animated: Bool)
25. @ahmed_sulajman Q&A: HOW LONG IMAGE COMPARISON MAY TAKE
26. @ahmed_sulajman Q&A: HOW LONG IMAGE COMPARISON MAY TAKE AVERAGE = 0.008s On a Macbook Air 2012
27. @ahmed_sulajman Q&A: HOW LONG IMAGE COMPARISON MAY TAKE AVERAGE = 0.008s On a Macbook Air 2012 int memcmp(const void *ptr1, const void *ptr2, size_t num);
28. @ahmed_sulajman SUMMARY
29. @ahmed_sulajman SUMMARY – DISADVANTAGES ASYNC Hard to test async code
30. @ahmed_sulajman SUMMARY – DISADVANTAGES ASYNC STANDARD UI Hard to test async code Apple could change style of standard UI
31. @ahmed_sulajman SUMMARY – DISADVANTAGES ASYNC STANDARD UI DISK SPACE Hard to test async code Apple could change style of standard UI Every reference image is a .png file
32. @ahmed_sulajman SUMMARY – ADVANTAGES EDGE CASES Detect possible UI elements edge cases
33. @ahmed_sulajman SUMMARY – ADVANTAGES EDGE CASES CONCURRENT Detect possible UI elements edge cases Snapshot tests runs at the same :me as other tests
34. @ahmed_sulajman SUMMARY – ADVANTAGES EDGE CASES CONCURRENT SEPARATION Detect possible UI elements edge cases Snapshot tests runs at the same :me as other tests Separate logical and visual changes 10010 11001 11100 01100 10001
35. @ahmed_sulajman SUMMARY – ADVANTAGES EDGE CASES DESIGN REVIEW CONCURRENT SEPARATION Detect possible UI elements edge cases Involve designer in code review process Snapshot tests runs at the same <me as other tests Separate logical and visual changes 10010 11001 11100 01100 10001
36. @ahmed_sulajman SUMMARY – ADVANTAGES EDGE CASES DESIGN REVIEW SPEED CONCURRENT SEPARATION Detect possible UI elements edge cases Involve designer in code review process Snapshot tests are fast enough Snapshot tests runs at the same =me as other tests Separate logical and visual changes 10010 11001 11100 01100 10001
37. THANKS! AHMED SULAIMAN CEO @ Flawless App, ex. Petcube developer flawlessapp.io ahmed@flawlessapp.io
38. Using Cocoapods: h/ps://guides.cocoapods.org/using/using-cocoapods.html FBSnapshotTestCase Github: h/ps:/ /github.com/facebook/ios-snapshot-test-case Snapshot TesAng objc.io: h/ps:/ /www.objc.io/issues/15-tesAng/snapshot-tesAng RESOURCES