Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tkmnzm
September 29, 2020

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

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

tkmnzm

September 29, 2020
Tweet

More Decks by tkmnzm

Other Decks in Programming

Transcript

  1. Jetpack ComposeのPreview機能 @Composable fun Greeting(name: String) { Text (text =

    "Hello $name!") } @Preview @Composable fun PreviewGreeting() { Greeting("Android") }
  2. @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)
  3. サンプルデータでPreview作成 @Composable fun ProfileScreen( userData: ProfileScreenState, onFabClicked: () -> Unit

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

    = { } ) @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) } プロフィールデータを受け取る Composable Function サンプルデータを用意しておき それを使ってプレビューを作成
  5. PreviewParameterProvider interface PreviewParameterProvider<T> { val values: Sequence<T> val count get()

    = values.count() } overrideして複数のサンプル データを返すようにする
  6. PreviewParameterProvider @Preview @Composable fun Preview() { ProfileScreen(SampleData.myProfile) } @Preview @Composable

    fun Preview(state: ProfileScreenState) { ProfileScreen(state) } 引数にProfileScreenStateを うけとるように修正
  7. @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を作成
  8. 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をプレビューの 引数に指定する
  9. 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) }
  10. createComposeRule class ProfileTest { @get:Rule val rule = createComposeRule() @Test

    fun test() { rule.setContent { ProfileScreen(userData = SampleData.meProfile) } } }
  11. createAndroidComposeRule class ProfileTest { @get:Rule val rule = createAndroidComposeRule<MainActivity>() @Test

    fun test() { // MainActivityが起動した状態 // rule.setContentで表示中のComposable Functionを上書きすることも可 } }
  12. セマンティクスツリー Display Name Nozomi Takuma Root Node #1 Node #4

    Node #2 text = Display Name Node #3 text = Nozomi Takuma