Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Testing a constraint-based layout of UIView
Search
Shin Yamamoto
August 27, 2019
Programming
1
1.3k
Testing a constraint-based layout of UIView
Shin Yamamoto
August 27, 2019
Tweet
Share
More Decks by Shin Yamamoto
See All by Shin Yamamoto
Meet CoreDevice and devicectl
scenee
0
500
DocCのドキュメントをGithub Pagesで公開する
scenee
2
650
SwiftライブラリのObjC対応における落とし穴と回避策
scenee
0
300
Playing Sheet presentation style on iOS 13
scenee
0
630
Fluid Interfacesの実践
scenee
4
1.6k
Introducing Relax
scenee
0
570
Potatotips#7: Box C String Tip
scenee
0
2.8k
Other Decks in Programming
See All in Programming
Laravel Boost 超入門
fire_arlo
3
220
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
310
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
160
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
為你自己學 Python - 冷知識篇
eddie
1
350
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
690
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
440
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
320
AIコーディングAgentとの向き合い方
eycjur
0
270
はじめてのMaterial3 Expressive
ym223
2
740
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
460
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Producing Creativity
orderedlist
PRO
347
40k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
A designer walks into a library…
pauljervisheath
207
24k
Facilitating Awesome Meetings
lara
55
6.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
The Cult of Friendly URLs
andyhume
79
6.6k
Faster Mobile Websites
deanohume
309
31k
BBQ
matthewcrist
89
9.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Transcript
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
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 質問があればぜひ懇親会で話かけてください
None