Tweet
Tweet

Slide 1

Slide 1 text

Jetpack Composeの テストに入門しよう Nozomi Takuma SWET DeNA Co., Ltd.

Slide 2

Slide 2 text

Composable Functionの動作確認をしたい ● アプリをビルドする ● Preview機能 ● 自動テスト

Slide 3

Slide 3 text

Composable Functionの動作確認をしたい ● アプリをビルドする ● Preview機能 ● 自動テスト

Slide 4

Slide 4 text

Jetpack Composeの Preview機能

Slide 5

Slide 5 text

Jetpack ComposeのPreview機能 ● @Previewアノテーションをつけたプレビュー用の Composable Functionを作成する ● 画面幅・デバイスなどを指定してプレビューを作成 できる ● サンプルデータを用いたプレビューを作成できる

Slide 6

Slide 6 text

Jetpack ComposeのPreview機能 @Composable fun Greeting(name: String) { Text (text = "Hello $name!") } @Preview @Composable fun PreviewGreeting() { Greeting("Android") }

Slide 7

Slide 7 text

@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)

Slide 8

Slide 8 text

サンプルデータでPreview作成 @Composable fun ProfileScreen( userData: ProfileScreenState, onFabClicked: () -> Unit = { } ) @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) }

Slide 9

Slide 9 text

サンプルデータでPreview作成 @Composable fun ProfileScreen( userData: ProfileScreenState, onFabClicked: () -> Unit = { } ) @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) } プロフィールデータを受け取る Composable Function サンプルデータを用意しておき それを使ってプレビューを作成

Slide 10

Slide 10 text

表示パターンが複数あるとき ● PreviewParameterProviderを使うことで、 プレビューしたいデータをパラメータ化することが できる

Slide 11

Slide 11 text

PreviewParameterProvider interface PreviewParameterProvider { val values: Sequence val count get() = values.count() }

Slide 12

Slide 12 text

PreviewParameterProvider interface PreviewParameterProvider { val values: Sequence val count get() = values.count() } Composable Functionにわたす データの型

Slide 13

Slide 13 text

PreviewParameterProvider interface PreviewParameterProvider { val values: Sequence val count get() = values.count() } overrideして複数のサンプル データを返すようにする

Slide 14

Slide 14 text

PreviewParameterProvider @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) } @Preview @Composable fun Preview(state: ProfileScreenState) { ProfileScreen(state) } 引数にProfileScreenStateを うけとるように修正

Slide 15

Slide 15 text

@Preview @Composable fun Preview(state: ProfileScreenState) { ProfileScreen(state) } class ProfileStateProvider : PreviewParameterProvider { override val values: Sequence get() = sequenceOf(SampleData.meProfile, SampleData.friend) } PreviewParameterProvider プロフィールデータを返すカスタムの PreviewParameterProviderを作成

Slide 16

Slide 16 text

PreviewParameterProvider @Preview @Composable fun Preview(@PreviewParameter(ProfileStateProvider::class) state: ProfileScreenState) { ProfileScreen(state) } class ProfileStateProvider : PreviewParameterProvider { override val values: Sequence get() = sequenceOf(SampleData.meProfile, SampleData.friend) } @PreviewParameterをプレビューの 引数に指定する

Slide 17

Slide 17 text

PreviewParameterProvider @Preview @Composable fun Preview(@PreviewParameter(ProfileStateProvider::class) state: ProfileScreenState) { ProfileScreen(state) } class ProfileStateProvider : PreviewParameterProvider { override val values: Sequence get() = sequenceOf(SampleData.meProfile, SampleData.friend) }

Slide 18

Slide 18 text

その他便利なPreview機能 ● Interactive previews mode ○ Previewに対してUIの操作をすることができる ● Animation Inspector ○ アニメーションのプレビューをタイムラインでみる ことができる

Slide 19

Slide 19 text

Preview機能 デモ

Slide 20

Slide 20 text

Animation Inspector(Coming soon)

Slide 21

Slide 21 text

Jetpack ComposeのPreview機能 ● 素早く動作確認ができる ● サンプルデータを用意することで表示パターンの 確認ができる ● Previewの作りやすさを意識したIFや、サンプルデー タの管理をどうするかを考える必要がありそう

Slide 22

Slide 22 text

Jetpack Composeの 自動テスト

Slide 23

Slide 23 text

Jetpack Composeの自動テスト ● Jetpack Compose用のTest Rule ● Jetpack Compose用のテストAPI ○ Semanticsを使ってテストをする

Slide 24

Slide 24 text

ComposeTestRule ● createComposeRule ○ 空のActivityにsetContentをした上でテストをする ○ 実Activityとは切り離して、Composable Function単 体のテストをすることができる ● createAndroidComposeRule ○ 任意のActivityを指定できる ○ 実Activity上でテストをすることが可能

Slide 25

Slide 25 text

createComposeRule ● 空のComponentActivityを起動できるように AndroidManifestに登録しておく ○ app/src/debug/AndroidManifest.xmlなど

Slide 26

Slide 26 text

createComposeRule class ProfileTest { @get:Rule val rule = createComposeRule() @Test fun test() { rule.setContent { ProfileScreen(userData = SampleData.meProfile) } } }

Slide 27

Slide 27 text

createAndroidComposeRule class ProfileTest { @get:Rule val rule = createAndroidComposeRule() @Test fun test() { // MainActivityが起動した状態 // rule.setContentで表示中のComposable Functionを上書きすることも可 } }

Slide 28

Slide 28 text

Semantics ● Jetpack Composeでは既存のViewのテストとは異な り、IDではなくセマンティクスでUIの操作をする ● セマンティクスはアクセシビリティのために使用さ れる

Slide 29

Slide 29 text

Semanticsの指定 ● Modifier.semanticsで指定する ● 指定できる要素 ○ text ○ accessibilityLabel ○ accessibilityValue etc…

Slide 30

Slide 30 text

セマンティクスツリー Display Name Nozomi Takuma

Slide 31

Slide 31 text

セマンティクスツリー Display Name Nozomi Takuma Root Node #1 Node #4 Node #2 text = Display Name Node #3 text = Nozomi Takuma

Slide 32

Slide 32 text

Semanticsのデフォルト値 ● デフォルトでプロパティの値をセマンティクスツ リーに公開しているComposable Functionもある ● TextのComposable Functionは、textプロパティの値 がセマンティクスのtextの値としても使用される ○ 自身で別の値を指定したいときはModifierで変更する

Slide 33

Slide 33 text

Test用API ● Jetpack ComposeのUIテスト用API ● Espressoと似た構造 ● Finder/Semantics Matcher/Action/Assertion

Slide 34

Slide 34 text

Finder ● onNode(SemanticsMatcher) ○ 単一のノードを選択 ● onAllNodes(SemanticsMatcher) ○ 複数のノードを選択

Slide 35

Slide 35 text

Semantics Matcher ● hasText(String) ● hasLabel(String) ● hasParent(SemanticsMatcher) ● hasAnyChild(SemanticsMatcher) etc...

Slide 36

Slide 36 text

Action ● performClick ● performTextReplacement ● performKeypress ● performScrollTo etc...

Slide 37

Slide 37 text

Assertion ● assert(SemanticsMatcher) ● assertIsDisplayed etc...

Slide 38

Slide 38 text

その他便利なTest用API ● captureBitmap ○ ノードをBitmap化できる ○ Visual Regression Test等の用途で使用できる ● printLog ○ 現在のセマンティクスツリーをLogに出力する

Slide 39

Slide 39 text

自動テスト デモ

Slide 40

Slide 40 text

Jetpack Composeの自動テスト ● Jetpack Composeではセマンティクスを使用して UIテストを行い、Jetpack Composeのテスト用APIが 提供されている ● 空のActivityを利用することで、Jetpack Compose単 体のUIテストをすることが可能

Slide 41

Slide 41 text

Jetpack Composeのテストまとめ ● Jetpack ComposeではUIの作り方だけではなく、 動作確認時も既存のViewとは違う仕組みを使う ● Jetpack Composeははじめから動作確認・テストの やりやすさを意識して実装されていると感じる ● Preview機能もテストAPIも進化中だと思うので今後 のアップデートにも期待

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

ご静聴ありがとうご ざいました！