visual & logical tests for an international ios app
TRANSCRIPT
![Page 1: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/1.jpg)
Visual & logical tests for an international iOS appA case study of the Wikipedia iOS app[1]
Mobile Delivery Days, Day 2 (March 22, 2016)Brian Gerstle (@b_gerstle) lookback.io
![Page 2: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/2.jpg)
● RTL (right-to-left)○ Hebrew (he)○ Arabic (ar)
● LTR (left-to-right)○ English (en)○ German (de)○ French (fr)
What does RTL mean?
![Page 3: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/3.jpg)
?Why is it important
● Drastically improves UX for users that prefer RTLlanguages
●Makes your app more inclusive
For more information, check out Moriel Schottlender’s RTL talk[2] and rtl.wtf[3] website.
![Page 4: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/4.jpg)
![Page 5: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/5.jpg)
LTR & RTL Wikipedia article previews
![Page 6: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/6.jpg)
Looks easy, almost too easy...
It would be, except:
● Visual tests?!○ Visual test framework: FBSnapshotTestCase[4]
● Immutable global state?!○ Runtime configuration with launch arguments[5]
● Multiple test runs?!○ fastlane[6]
![Page 7: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/7.jpg)
Visual testing in a nutshell
2. Compare with reference image
1. Snapshot a view
Pass or Fail?
![Page 8: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/8.jpg)
Let’s write a visual test!
![Page 9: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/9.jpg)
Automate it with fastlane!
![Page 10: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/10.jpg)
But, we need LTR and RTL visual tests!
![Page 11: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/11.jpg)
Add Xcode launch arguments!
![Page 12: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/12.jpg)
Pass!
![Page 13: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/13.jpg)
Automate both schemes with fastlane!
![Page 14: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/14.jpg)
Visually test all the things!
![Page 15: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/15.jpg)
What about navigation?
![Page 16: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/16.jpg)
Gallery architecture
Picture of the Day Model
Article Gallery Model
Modal Article Header Model
Modal gallery Article header galleryGallery Model Protocol
![Page 17: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/17.jpg)
Testing RTL support across multiple OS versions
● Ideally, write simple UI test to verify swipe navigation behavior in all cases
● Unit test the business logic in the gallery model
iOS 8 iOS 9
LTR 0...N 0...N
RTL N...0 0...N
![Page 18: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/18.jpg)
Quick[7] shared behaviors (BDD)
![Page 19: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/19.jpg)
Running tests on iOS 8 & 9
![Page 20: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/20.jpg)
Running all the tests in parallel
![Page 21: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/21.jpg)
![Page 22: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/22.jpg)
Next steps
● Functional tests● Automating test runs on device● Adding another dimension to the visual matrix: device model (i.e. iPhone 6,
iPhone 4S, iPad, etc.)● Compile once, run tests in parallel
![Page 23: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/23.jpg)
References
1. https://github.com/wikimedia/wikipedia-ios2. Tech Talk: Nothing Left but Always Right: The Twisted Road to RTL Support3. rtl.wtf4. https://github.com/facebook/ios-snapshot-test-case5. fastlane6. Testing Your Internationalized App7. https://github.com/Quick/Quick
![Page 24: Visual & Logical tests for an international iOS app](https://reader034.vdocuments.us/reader034/viewer/2022042908/58f0c3321a28ab910e8b45c3/html5/thumbnails/24.jpg)
Further Reading
1. A look at iOS 9’s comprehensive support for right-to-left languages (9to5mac.com)
2. Supporting Right-to-Left Languages3. objc.io article about Snapshot Testing