Testing a constraint-based layout of UIView

Testing a constraint-based layout of UIView iOS Test Night #11
Shin Yamamoto @scenee #ios_test_night

今日は.. • AutoLayout(constraint-based)のレイアウトテスト • 前提と手法 • UIViewにフォーカス ◦ UIViewControllerは割愛しますが、ほぼ同じ

なぜUIViewレイアウトをテストしたいのか？

XCTestでレイアウトをユニットテストしたいから

XCTestでレイアウトをユニットテストしたい • OSSのメンテンスなどで必要に QAで時間が溶ける！

XCTestでレイアウトをユニットテストしたい • OSSのメンテンスなどで必要に QAで時間が溶ける！ • 安心して追加変更、デグレ防止

XCTestでレイアウトをユニットテストしたい • OSSのメンテンスなどで必要に QAで時間が溶ける！ • 安心して追加変更、デグレ防止 • 素早い開発フィードバックループ Design Develop
Unit testing

どうしたらレイアウトをユニットテストできるか？

SnapshotTesting with Jest

SnapshotTesting with Jest • 画面に描画する • Reactツリーを出力 • 比較 •
差分検出

ポイントは...

レンダラーを信頼する

レンダラーがあるレイアウトを期待通り描画すると仮定すること！

コントロールできない領域をテスト対象から除外する

UIKitのレンダラーを信頼する • あるレイアウト結果が、期待通りに描画されると想定 • レイアウト結果とは ◦ UIViewの各プロパティ値(frameなど) ◦ View hierarchy(Layer
tree) ◦ など

もう少し詳しく説明します

High Performance Auto Layout: https://developer.apple.com/videos/play/wwdc2018/220

High Performance Auto Layout: https://developer.apple.com/videos/play/wwdc2018/220 Layout pass Update pass Display
pass

High Performance Auto Layout: https://developer.apple.com/videos/play/wwdc2018/220 draw(_:) layoutSubviews(_:) updateConstraints(_:)

High Performance Auto Layout: https://developer.apple.com/videos/play/wwdc2018/220 draw(_:)はテストしない layoutSubviews(_:) updateConstraints(_:)

何が嬉しいのか？

レイアウトのパラメーター化 • レイアウトを各パラメーターの集合として処理 • 各パラメーターの変化をXCTestで評価

Pros • 気軽にViewのテストが書ける • Viewの振る舞いをテストで記述・保存 ◦ i.e. リグレッションテストが簡単に • Viewをテスト駆動で開発・リファクタ
◦ i.e. frame-based layoutからの移行が楽に

Cons • 描画結果が想定と異なるケースがある

この前提の上で...

早速テストを書いてみましょう！コード例ではわかりやすさのため使ってませんが、 swift-snaphost-testing が便利 https://github.com/pointfreeco/swift-snapshot-testing

MyView .containerView top bottom left right

‍レイアウト更新をテスト

❌ Failed: frame値が.zero

‍レイアウト更新をテスト

✅ Passed: frameが期待通り更新

なぜ？

Layout passを手動実行している

Layout passを手動実行している setNeedsLayoutはLayout passをlayoutIfNeededで実行するために

Mysteries of Auto Layout, Part 2: https://developer.apple.com/videos/play/wwdc2015/219

1. 制約の変更 2. setNeedsLayout() + layoutIfNeeded() 3. frameを評価 XCTestでのレイアウトテスト方法

• Intrinsic Content Sizeに応じたテスト可 • Unsatisfiable constraintsエラーもコンソールに出力補足

簡単ですね！あくまで導入です！でも導入が大事。

✅ Passed: UIWindow + MainRunLoop ✏ Frameworkでは、Host Application追加不要

まとめ: XCTestでレイアウトテストをするには? • UIKitのレンダラーを信頼する • レイアウトをパラメーター化して評価 • レイアウト更新するにはLayout passを手動実行

References ◦ https://jestjs.io/docs/en/snapshot-testing Snapshot Testing · Jest ◦ https://github.com/pointfreeco/swift-snapshot-testing swift-snapshot-testing
◦ https://developer.apple.com/videos/play/wwdc2015/219 Mysteries of Auto Layout, Part 2 ◦ https://developer.apple.com/videos/play/wwdc2018/220 High Performance Auto Layout ◦ http://tech.gc.com/demystifying-ios-layout/ Demystifying iOS Layout

Happy Testing 質問があればぜひ懇親会で話かけてください

Testing a constraint-based layout of UIView

Testing a constraint-based layout of UIView

More Decks by Shin Yamamoto

Other Decks in Programming

Featured

Transcript