Jetpack Composeの テストに入門しよう / Getting started with Jetpack Compose Testing

Android 11 Meetups (UI・デザイン)の発表資料です。
https://developersonair.withgoogle.com/events/a11meetups-jp

Transcript

1. Jetpack Composeの テストに入門しよう Nozomi Takuma SWET DeNA Co., Ltd.
2. Composable Functionの動作確認をしたい • アプリをビルドする • Preview機能 • 自動テスト
3. Composable Functionの動作確認をしたい • アプリをビルドする • Preview機能 • 自動テスト
4. Jetpack Composeの Preview機能
5. Jetpack ComposeのPreview機能 • @Previewアノテーションをつけたプレビュー用の Composable Functionを作成する • 画面幅・デバイスなどを指定してプレビューを作成 できる • サンプルデータを用いたプレビューを作成できる
6. Jetpack ComposeのPreview機能 @Composable fun Greeting(name: String) { Text (text = "Hello $name!") } @Preview @Composable fun PreviewGreeting() { Greeting("Android") }
7. @Previewで設定できる項目 annotation class Preview( val name: String = "", val group: String = "", @IntRange(from = 1) val apiLevel: Int = -1, val widthDp: Int = -1, val heightDp: Int = -1, val locale: String = "", @FloatRange(from = 0.01) val fontScale: Float = 1f, val showDecoration: Boolean = false, val showBackground: Boolean = false, val backgroundColor: Long = 0, @UiMode val uiMode: Int = 0, @Device val device: String = Devices.DEFAULT)
8. サンプルデータでPreview作成 @Composable fun ProfileScreen( userData: ProfileScreenState, onFabClicked: () -> Unit = { } ) @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) }
9. サンプルデータでPreview作成 @Composable fun ProfileScreen( userData: ProfileScreenState, onFabClicked: () -> Unit = { } ) @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) } プロフィールデータを受け取る Composable Function サンプルデータを用意しておき それを使ってプレビューを作成
10. 表示パターンが複数あるとき • PreviewParameterProviderを使うことで、 プレビューしたいデータをパラメータ化することが できる
11. PreviewParameterProvider interface PreviewParameterProvider<T> { val values: Sequence<T> val count get() = values.count() }
12. PreviewParameterProvider interface PreviewParameterProvider<T> { val values: Sequence<T> val count get() = values.count() } Composable Functionにわたす データの型
13. PreviewParameterProvider interface PreviewParameterProvider<T> { val values: Sequence<T> val count get() = values.count() } overrideして複数のサンプル データを返すようにする
14. PreviewParameterProvider @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) } @Preview @Composable fun Preview(state: ProfileScreenState) { ProfileScreen(state) } 引数にProfileScreenStateを うけとるように修正
15. @Preview @Composable fun Preview(state: ProfileScreenState) { ProfileScreen(state) } class ProfileStateProvider : PreviewParameterProvider<ProfileScreenState> { override val values: Sequence<ProfileScreenState> get() = sequenceOf(SampleData.meProfile, SampleData.friend) } PreviewParameterProvider プロフィールデータを返すカスタムの PreviewParameterProviderを作成
16. PreviewParameterProvider @Preview @Composable fun Preview(@PreviewParameter(ProfileStateProvider::class) state: ProfileScreenState) { ProfileScreen(state) } class ProfileStateProvider : PreviewParameterProvider<ProfileScreenState> { override val values: Sequence<ProfileScreenState> get() = sequenceOf(SampleData.meProfile, SampleData.friend) } @PreviewParameterをプレビューの 引数に指定する
17. PreviewParameterProvider @Preview @Composable fun Preview(@PreviewParameter(ProfileStateProvider::class) state: ProfileScreenState) { ProfileScreen(state) } class ProfileStateProvider : PreviewParameterProvider<ProfileScreenState> { override val values: Sequence<ProfileScreenState> get() = sequenceOf(SampleData.meProfile, SampleData.friend) }
18. その他便利なPreview機能 • Interactive previews mode ◦ Previewに対してUIの操作をすることができる • Animation Inspector ◦ アニメーションのプレビューをタイムラインでみる ことができる
19. Preview機能 デモ
20. Animation Inspector(Coming soon)
21. Jetpack ComposeのPreview機能 • 素早く動作確認ができる • サンプルデータを用意することで表示パターンの 確認ができる • Previewの作りやすさを意識したIFや、サンプルデー タの管理をどうするかを考える必要がありそう
22. Jetpack Composeの 自動テスト
23. Jetpack Composeの自動テスト • Jetpack Compose用のTest Rule • Jetpack Compose用のテストAPI ◦ Semanticsを使ってテストをする
24. ComposeTestRule • createComposeRule ◦ 空のActivityにsetContentをした上でテストをする ◦ 実Activityとは切り離して、Composable Function単 体のテストをすることができる • createAndroidComposeRule ◦ 任意のActivityを指定できる ◦ 実Activity上でテストをすることが可能
25. createComposeRule • 空のComponentActivityを起動できるように AndroidManifestに登録しておく ◦ app/src/debug/AndroidManifest.xmlなど <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <application> <activity android:name="androidx.activity.ComponentActivity" /> </application> </manifest>
26. createComposeRule class ProfileTest { @get:Rule val rule = createComposeRule() @Test fun test() { rule.setContent { ProfileScreen(userData = SampleData.meProfile) } } }
27. createAndroidComposeRule class ProfileTest { @get:Rule val rule = createAndroidComposeRule<MainActivity>() @Test fun test() { // MainActivityが起動した状態 // rule.setContentで表示中のComposable Functionを上書きすることも可 } }
28. Semantics • Jetpack Composeでは既存のViewのテストとは異な り、IDではなくセマンティクスでUIの操作をする • セマンティクスはアクセシビリティのために使用さ れる
29. Semanticsの指定 • Modifier.semanticsで指定する • 指定できる要素 ◦ text ◦ accessibilityLabel ◦ accessibilityValue etc…
30. セマンティクスツリー Display Name Nozomi Takuma
31. セマンティクスツリー Display Name Nozomi Takuma Root Node #1 Node #4 Node #2 text = Display Name Node #3 text = Nozomi Takuma
32. Semanticsのデフォルト値 • デフォルトでプロパティの値をセマンティクスツ リーに公開しているComposable Functionもある • TextのComposable Functionは、textプロパティの値 がセマンティクスのtextの値としても使用される ◦ 自身で別の値を指定したいときはModifierで変更する
33. Test用API • Jetpack ComposeのUIテスト用API • Espressoと似た構造 • Finder/Semantics Matcher/Action/Assertion
34. Finder • onNode(SemanticsMatcher) ◦ 単一のノードを選択 • onAllNodes(SemanticsMatcher) ◦ 複数のノードを選択
35. Semantics Matcher • hasText(String) • hasLabel(String) • hasParent(SemanticsMatcher) • hasAnyChild(SemanticsMatcher) etc...
36. Action • performClick • performTextReplacement • performKeypress • performScrollTo etc...
37. Assertion • assert(SemanticsMatcher) • assertIsDisplayed etc...
38. その他便利なTest用API • captureBitmap ◦ ノードをBitmap化できる ◦ Visual Regression Test等の用途で使用できる • printLog ◦ 現在のセマンティクスツリーをLogに出力する
39. 自動テスト デモ
40. Jetpack Composeの自動テスト • Jetpack Composeではセマンティクスを使用して UIテストを行い、Jetpack Composeのテスト用APIが 提供されている • 空のActivityを利用することで、Jetpack Compose単 体のUIテストをすることが可能
41. Jetpack Composeのテストまとめ • Jetpack ComposeではUIの作り方だけではなく、 動作確認時も既存のViewとは違う仕組みを使う • Jetpack Composeははじめから動作確認・テストの やりやすさを意識して実装されていると感じる • Preview機能もテストAPIも進化中だと思うので今後 のアップデートにも期待
43. ご静聴ありがとうご ざいました！