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
510
DocCのドキュメントをGithub Pagesで公開する
scenee
2
650
SwiftライブラリのObjC対応における落とし穴と回避策
scenee
0
310
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
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
1k
Introducing ReActionView: A new ActionView-Compatible ERB Engine @ Kaigi on Rails 2025, Tokyo, Japan
marcoroth
3
950
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
850
iOSアプリの信頼性を向上させる取り組み/ios-app-improve-reliability
shino8rayu9
0
160
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
500
Pythonスレッドとは結局何なのか? CPython実装から見るNoGIL時代の変化
curekoshimizu
5
1.5k
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
560
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
940
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
180
iOS 17で追加されたSubscriptionStoreView を利用して5分でサブスク実装チャレンジ
natmark
0
640
開発者への寄付をアプリ内課金として実装する時の気の使いどころ
ski
0
360
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
A better future with KSS
kneath
239
17k
Become a Pro
speakerdeck
PRO
29
5.5k
Documentation Writing (for coders)
carmenintech
75
5k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cost Of JavaScript in 2023
addyosmani
53
9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Producing Creativity
orderedlist
PRO
347
40k
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