25
Visual & logical tests for an international iOS app A case study of the Wikipedia iOS app [1] Mobile Delivery Days, Day 2 (March 22, 2016) Brian Gerstle (@b_gerstle) lookback.io

Visual & Logical tests for an international iOS app

Embed Size (px)

Citation preview

Page 1: Visual & Logical tests for an international iOS app

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

● 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

?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
Page 5: Visual & Logical tests for an international iOS app

LTR & RTL Wikipedia article previews

Page 6: Visual & Logical tests for an international iOS app

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

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

Let’s write a visual test!

Page 9: Visual & Logical tests for an international iOS app

Automate it with fastlane!

Page 10: Visual & Logical tests for an international iOS app

But, we need LTR and RTL visual tests!

Page 11: Visual & Logical tests for an international iOS app

Add Xcode launch arguments!

Page 12: Visual & Logical tests for an international iOS app

Pass!

Page 13: Visual & Logical tests for an international iOS app

Automate both schemes with fastlane!

Page 14: Visual & Logical tests for an international iOS app

Visually test all the things!

Page 15: Visual & Logical tests for an international iOS app

What about navigation?

Page 16: Visual & Logical tests for an international iOS app

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

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

Quick[7] shared behaviors (BDD)

Page 19: Visual & Logical tests for an international iOS app

Running tests on iOS 8 & 9

Page 20: Visual & Logical tests for an international iOS app

Running all the tests in parallel

Page 21: Visual & Logical tests for an international iOS app
Page 22: Visual & Logical tests for an international iOS app

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 25: Visual & Logical tests for an international iOS app

Thanks!Any questions?

Brian Gerstle (@b_gerstle) lookback.io