ComposeのMutableStateってどうやってLocal Unit Testすれば良いの？？

Transcript

1. ComposeのMutableStateってどうやってLocal Unit Testすれば良いの？？ 2022/02/22 Mobile勉強会 Wantedly × チームラボ #4 tomoya0x00 1
2. About me tomoya0x00 Twitter, GitHub Android U-NEXT Co., Ltd. 2
3. 話す事と、話さない 話す事 Jetpack ComposeのMutableStateテスト方法 無理矢理感があるので、もっと良い方法をご存じであれば教えて欲しい 話さない事 Jetpack Composeそのものの話 Coroutinesのテスト方法詳細 3
4. 目次 推奨されているViewModelでのUiState公開方法 Local Unit Testが簡単なケース・難しいケース 救世主？snapshotFlow どうにかしてLocal Unit Testで動かす まとめと感想 4
5. 推奨されているViewModelでのUiState公開方法 5
6. Guide to app architectureがリニューアル https://android-developers.googleblog.com/2021/12/rebuilding-our-guide-to-app- architecture.html 6
7. UiState UI表示に必要なデータは、1つのUiState classとしてViewModelが公開するのがお勧 め。 data class NewsUiState( val isSignedIn: Boolean = false, val isPremium: Boolean = false, val newsItems: List<NewsItemUiState> = listOf(), val userMessages: List<Message> = listOf() ) data class NewsItemUiState( val title: String, val body: String, val bookmarked: Boolean = false, ... ) https://developer.android.com/jetpack/guide/ui-layer#define-ui-state 7
8. どうやって公開するのか？ 8
9. https://developer.android.com/jetpack/guide/ui-layer#expose-ui-state 9
10. StateFlowでOK？でもコレって従来のViewな場合の話 っぽい？？ 10
11. Composeだと、どうするのがお勧めなの？ 11
12. https://developer.android.com/jetpack/guide/ui-layer#expose-ui-state 12
13. 単なる変数だと、その変化をどうやってUIに伝える の？？ 13
14. https://developer.android.com/jetpack/guide/ui-layer#expose-ui-state 14
15. MutableStateにdelegateすれば、ちゃんと値の変化時 にrecomposeのトリガーを引いてくれる 15
16. 公式のツイートでも、不要なら LiveDataやStateFlow作らないでね、 と言及されている。 https://twitter.com/AndroidDev/statu s/1487062911960895494 16
17. Local Unit Testはどうするの？？ 17
18. Local Unit Testが簡単なケース・難しいケース 18
19. 簡単なケース 19
20. 簡単なケース data class TweetUiState( val isFavorited: Boolean = false ) class TweetViewModel(): ViewModel() { var uiState by mutableStateOf(TweetUiState()) private set fun toggleFavorite() { uiState = uiState.copy(isFavorited = uiState.isFavorited.not()) } } 20
21. 単なる変数の変化としてテストすればOK @Test fun TestToggleFavorite() { val viewModel = TweetViewModel() val prev = viewModel.uiState.isFavorited viewModel.toggleFavorite() assert(viewModel.uiState.isFavorited == prev.not()) } 21
22. とても簡単ですよね？ 22
23. 難しいケース 23
24. 難しいケース data class TimelineUiState( val isLoading: Boolean = false, val tweets: List<String> = emptyList() ) class TimelineViewModel(): ViewModel() { var uiState by mutableStateOf(TimelineUiState()) private set fun refreshTimeline() { viewModelScope.launch { uiState = uiState.copy(isLoading = true) delay(10) // APIを呼ぶ代わり uiState = uiState.copy( isLoading = false, tweets = listOf("Android 13 Tiramisu", "Android 12L") ) } } } 24
25. テストが難しいポイントはどこか？ isLoadingのテストが難しい data class TimelineUiState( val isLoading: Boolean = false, val tweets: List<String> = emptyList() ) class TimelineViewModel(): ViewModel() { var uiState by mutableStateOf(TimelineUiState()) private set fun refreshTimeline() { viewModelScope.launch { uiState = uiState.copy(isLoading = true) // isLoading == true になったあと delay(10) uiState = uiState.copy( isLoading = false, // isLoading == false になる事をテストしたい tweets = listOf("Android 13 Tiramisu", "Android 12L") ) } } } 25
26. uiStateを普通の変数としてアクセスする限り、Local Unit Testできないのでは？？ 26
27. 救世主？snapshotFlow 27
28. snapshotFlow: convert Compose's State into Flows https://developer.android.com/jetpack/compose/side-effects#snapshotFlow 28
29. https://developer.android.com/jetpack/compose/side-effects#snapshotFlow 29
30. これぞ求めていたものでしょう！！ 30
31. だがしかし･･･ 31
32. collectしてみても、値が流れてこない･･･ 32
33. なぜ値が流れてこないのか？ 33
34. なぜ値が流れてこないのか？ Composableは定期的にsnapshotを取っており、これによってMutableStateの値の変化 を検知してrecomposeしている。 また、snapshotFlowも上記の仕組みを使って変化を検知、新しい値をemitしている。 という事っぽい。 34
35. 動かない理由はわかった 35
36. でも、Compose無しで純粋なKotlinのコードとして、 Local Unit Testしたい！ 36
37. snapshotを手動で取れば良いのでは？ 37
38. snapshotを手動で取れば良いのでは？ できそうな関数がありました。 https://developer.android.com/reference/kotlin/androidx/compose/runtime/snapshots/ Snapshot.Companion#takeSnapshot(kotlin.Function1) 38
39. 高頻度にsnapshotを取りまくるTestRuleをつくりまし た https://gist.github.com/tomoya0x00/0e758bb5a471f2d046391564a3898273 39
40. 一部抜粋でご紹介 class ComposeStateTestRule(snapshotIntervalMilliSec: Long = 1L): TestWatcher() { ... private val snapshotTaker = flow<Unit> { coroutineScope { while(isActive) { delay(snapshotIntervalMilliSec) Snapshot.takeSnapshot { } } } } override fun starting(description: Description?) { job = snapshotTaker.launchIn(scope) } override fun finished(description: Description?) { job?.cancel() job = null } } 40
41. How to use ComposeStateTestRule class TimelineViewModelTest() { @get:Rule val composeStateTestRule = ComposeStateTestRule() // これだけでOK } 41
42. 無事にLocal Unit TestでsnapshotFlowをcollectしても 値が流れてきた！ 42
43. あとはfilter()やfirst()、take()やtoList()などを使って頑 張ってテストを書けばOK 43
44. テストコードの例 https://github.com/tomoya0x00/mutablestate-test- sample/blob/main/app/src/test/java/dev/tomoya0x00/mutablestatetest/TimelineViewM odelTest.kt 44
45. 一部抜粋でご紹介 @Test fun testRefreshTimeline() = runTest { val viewModel = TimelineViewModel() var output: List<TimelineUiState>? = null val job = launch { output = snapshotFlow { viewModel.uiState } .take(2) .toList() } viewModel.refreshTimeline() job.join() assert(output?.size == 2) assert(output?.get(0)?.isLoading == true) assert(output?.get(1)?.isLoading == false) assert(output?.get(1)?.tweets == listOf("Android 13 Tiramisu", "Android 12L")) } 45
46. まとめと感想 46
47. まとめと感想 Compose用のViewModelはStateFlowの公開すら推奨されていない、ということが 個人的にはちょっとビックリ でも、Single Source of TruthやStatelessなComposable関数が好ましい事を考 えるとそれが正しいのかも Flow.collectAsState() は単に内部でMutableStateつくってcollectしてい るだけだし、Lifecycleすら考慮されていない ただ、MutableStateはちょっと難しい（でも、良くありそうなケース）ケースの テスト難易度が高いので、公式で補足が欲しいなーというところ 自分が見落としているだけ、という事であればどなたか教えてください！ ComposeStateTestRuleで1msecごとにsnapshot取るのはやり過ぎな気もするけ ど、テストだから良いかな、という気持ちです もっと良い方法をご存じの方がいたら、教えてください！ 47