"Snapshot testing with FBSnapshotTestCase" by Ahmed Sulaiman

"Snapshot testing with FBSnapshotTestCase" by Ahmed Sulaiman

This talk was made for CocoaHeads Kyiv #10 which took place 10 Dec 2016, and it gives a brief introduction to FBSnapshotTestCase, describes how to use it properly and motivates you to use it.

Db84cf61fdada06b63f43f310b68b462?s=128

CocoaHeads Ukraine

December 22, 2016
Tweet

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