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
480
DocCのドキュメントをGithub Pagesで公開する
scenee
2
640
SwiftライブラリのObjC対応における落とし穴と回避策
scenee
0
300
Playing Sheet presentation style on iOS 13
scenee
0
620
Fluid Interfacesの実践
scenee
4
1.6k
Introducing Relax
scenee
0
560
Potatotips#7: Box C String Tip
scenee
0
2.8k
Other Decks in Programming
See All in Programming
Jakarta EE Meets AI
ivargrimstad
0
400
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
690
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
530
コーディングエージェント概観(2025/07)
itsuki_t88
0
450
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
Understanding Kotlin Multiplatform
l2hyunwoo
0
230
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
3
520
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
100
構文解析器入門
ydah
7
1.9k
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.5k
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
720
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Navigating Team Friction
lara
187
15k
YesSQL, Process and Tooling at Scale
rocio
173
14k
GraphQLとの向き合い方2022年版
quramy
49
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Side Projects
sachag
455
43k
Done Done
chrislema
184
16k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Experiences People Love
moore
142
24k
What's in a price? How to price your products and services
michaelherold
246
12k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
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