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
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
110
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
4
1.6k
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
私の後悔をAWS DMSで解決した話
hiramax
4
180
MLH State of the League: 2026 Season
theycallmeswift
0
210
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
350
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
1.1k
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
210
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
230
KessokuでDIでもgoroutineを活用する / Go Connect #6
mazrean
0
140
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Code Review Best Practice
trishagee
70
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Music & Morning Musume
bryan
46
6.8k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Why Our Code Smells
bkeepers
PRO
339
57k
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