UI State設計とテスト方針

Ebisu.mobile #8 大忘年会 STORES kubell Kyash asken
https://hey.connpass.com/event/335971/

Transcript

1. ©2024 Kyash Inc. ©2024 Kyash Inc. UI State設計とテスト方針 2024/12/20 rmakiyama(MAKIYAMA Ryo) Ebisu.mobile #8 大忘年会 STORES kubell Kyash asken
2. ©2024 Kyash Inc. 2 • Kyash Inc (2022/10 -) • Android Engineer • Engineering Manager • @_rmakiyama • @rmakiyama MAKIYAMA Ryo 自己紹介
3. ©2024 Kyash Inc. 3 Kyashについて お支払いも お金の管理も かんたんに Visaプリペイドカードとスマホで、いつでもどこでも、かんたんにお支払い。 アプリへのリアルタイムな履歴反映や自動カテゴリー分類で、お金の管理もかんたんに。
4. ©2024 Kyash Inc. KyashとJetpack Compose • 2021年5月から導入開始 • Fragmentの上にComposeViewを載せる運用 • 新規実装する画面は基本的にJetpack Composeを利用 • 大小含め100画面以上を実装 Jetpack Composeがデファクトスタンダード󰚗 4 ※2024年5月現在
5. ©2024 Kyash Inc. アジェンダ • KyashのKotlin Multiplatform構成 ◦ Reactor概説 ◦ UI Stateのサンプル • UI Stateの設計で考えていること • テスト方針 UI State設計とテスト方針 5
6. ©2024 Kyash Inc. KyashのKMP構成概略 6 • ReactorKitを汲んだMVIライクな設計 ◦ State/Action/Event • 各OSでWrapper実装がある
7. ©2024 Kyash Inc. KyashのKMP構成概略 / UI Layer 7
8. ©2024 Kyash Inc. KyashのKMP構成概略 / UI Layer / Reactor 8 class InputAmountReactor( mainDispatcher: CoroutineDispatcher, ) : AbstractReactor<Reactor.LoadState<State>, Action, Mutation, Event>( mainDispatcher = mainDispatcher, initialState = Reactor.LoadState.Loading(), ) { override fun mutate(action: Action): Flow<Mutation> = flow {...} override fun reduce( state: Reactor.LoadState<State>, mutation: Mutation, ): Reactor.LoadState<State> = when (mutation) {...} data class State(...) : Reactor.State sealed class Action : Reactor.Action sealed class Mutation : AbstractReactor.Mutation sealed class Event : Reactor.Event }
9. ©2024 Kyash Inc. ©2024 Kyash Inc. UI State設計⚒ 9 9
10. ©2024 Kyash Inc. ©2024 Kyash Inc. 簡単なサンプル󰙇 10 10
11. ©2024 Kyash Inc. Sample app 11
12. ©2024 Kyash Inc. Sample app 12 • 金額を入力してOKをおしてSubmit • 金額を入力しないとOKが押せない • 1000円以上でないとエラーとする
13. ©2024 Kyash Inc. Sample app / UI State 13 data class UiState( val amount: Long?, )
14. ©2024 Kyash Inc. Sample app / UI State 14 data class UiState( val amount: Long?, ) 🤔
15. ©2024 Kyash Inc. Sample app / UI State 15 data class UiState( val amount: Long?, ) : Reactor.State { val hasError: Boolean = amount &= null && amount &= 0L && amount < 1000L val buttonEnabled: Boolean = amount &= null && isError.not() }
16. ©2024 Kyash Inc. Sample app / UI State 16 data class UiState( val amount: Long?, ) : Reactor.State { val hasError: Boolean = amount &= null && amount &= 0L && amount < 1000L val buttonEnabled: Boolean = amount &= null && isError.not() } 関心の分離ができている！ 仕様・振る舞いが見えてくる！
17. ©2024 Kyash Inc. UI Stateの設計で考えていること UI Stateで仕様や振る舞いを表現する • 見た目（Element)と状態（State)で関心の分離をする ◦ Composable関数を簡単にレンダリングできるデータとして定義 • UIの理解容易性とテスタビリティを高める • ※ 網羅性を意識しすぎない 17 https://developer.android.com/topic/architecture/ui-layer
18. ©2024 Kyash Inc. ©2024 Kyash Inc. テスト方針🧪 18 18
19. ©2024 Kyash Inc. 2024年現在のKyashアプリのテスト方針 State Holder / UI Stateの ユニットテストを重点的にやる • Reactorのユニットテストを最低限行う ◦ Actionに対するStateの期待値をテスト ◦ 状態遷移のテストはUI Stateに対するテスト • UIの振る舞いのテストの一部をカバー ◦ UI Stateの責務の工夫とセット 19
20. ©2024 Kyash Inc. 2024年現在のKyashアプリのテスト方針の背景 問題をできるだけ早い段階で検出し 開発/アウトカムのフィードバックループを早めたい • KMPだとユニットテストのROIが高い ◦ バグの検出コストを最小限に抑える • UIテストの責務を絞り効果を高める ◦ テストの関心を分離 ◦ UIロジックや外観のテストにフォーカス 20
21. ©2024 Kyash Inc. Thank you!! • UIを見た目（Element)と状態（State)に分けてUI Stateを設計している ◦ UI Stateで仕様や振る舞いを表現 • State Holder/UI Stateのテストで仕様や振る舞いのテストを一部カバー • みんなはどうやってる？このあと話しましょう！！ まとめ󰢥 21
22. ©2024 Kyash Inc. Last one… • モバイルエンジニアを募集中です！ • 懇親会でも気軽に話しましょう！ WE ARE HIRING 󰚗 22 エンジニアの求人一覧 Advent Calendar 2024
23. ©2024 Kyash Inc.
24. ©2024 Kyash Inc. Appendix 24 https://www.wantedly.com/companies/wantedly/post_articles/300999 https://developer.android.com/topic/architecture/ui-layer?hl=ja https://developer.android.com/topic/architecture/ui-layer/stateholders?hl=ja https://developer.android.com/develop/ui/compose/migrate/other-considerations?hl=ja#prio ritize-splitting-state https://developer.android.com/training/testing/fundamentals/strategies?hl=ja https://developer.android.com/training/testing/fundamentals?hl=ja