時計仕掛けのCompose

Shibuya.apk #51での発表資料です。
https://shibuya-apk.connpass.com/event/342351/

この発表をするにあたって作ったサンプルのテストコードはこちらです。
https://github.com/mkeeda/recompose-control-deep-dive

Transcript

1. Compose Shibuya.apk # 5 1 田 一 (@mr_mkeeda)
2. 田 一 ( ) 𝕏 : @mr_mkeeda Github: @mkeeda Android Engineer at Cybozu, Inc 💣 2
3. Recomposition 3
4. Compose 4 @Test fun successfulTest() = runComposeUiTest { var flag by mutableStateOf(false) setContent { if (flag) { Text("Hello") } else { Text("World") } } onNodeWithText("Hello").assertDoesNotExist() onNodeWithText("World").assertExists() flag = true onNodeWithText("Hello").assertExists() onNodeWithText("World").assertDoesNotExist() }
5. 手 5 Side e ff ects (LaunchedE ff ect, produceState) mainClock.autoAdvance = false mainClock.advanceTimeBy(3000) mainClock.advanceTimeByFrame()
6. 6 var isRunning by mutableStateOf(false) var taskStarted = false var taskFinished = false setContent { if (isRunning) { LaunchedEffect(Unit) { taskStarted = true delay(3000) taskFinished = true } } } mainClock.autoAdvance = false isRunning = true mainClock.advanceTimeBy(1500) // ൒෼͚ͩ࣌ؒΛਐΊΔ
 taskStarted shouldBe true // λεΫ͸։͍࢝ͯ͠Δ͚Ͳ taskFinished shouldBe false // ऴΘͬͯͳ͍ mainClock.advanceTimeBy(1500) // ׬ྃ࣌ࠁ·ͰਐΊΔ taskFinished shouldBe true // λεΫ͸ऴΘ͍ͬͯΔ FAILED ❌ testStarted = false
7. 7 mainClock.autoAdvance = false isRunning = true waitForIdle() // ⭐ mainClock.advanceTimeByFrame() // ⭐ mainClock.advanceTimeBy(1500) // ൒෼͚ͩ࣌ؒΛਐΊΔ
 taskStarted shouldBe true // λεΫ͸։͍࢝ͯ͠Δ͚Ͳ taskFinished shouldBe false // ऴΘͬͯͳ͍ mainClock.advanceTimeBy(1500) // ׬ྃ࣌ࠁ·ͰਐΊΔ taskFinished shouldBe true // λεΫ͸ऴΘ͍ͬͯΔ SUCCESS ✅ var isRunning by mutableStateOf(false) var taskStarted = false var taskFinished = false setContent { if (isRunning) { LaunchedEffect(Unit) { taskStarted = true delay(3000) taskFinished = true } } }
8. 8 mainClock.autoAdvance = false isRunning = true mainClock.advanceTimeByFrame() // ⭐ waitForIdle() // ⭐ mainClock.advanceTimeBy(1500) // ൒෼͚ͩ࣌ؒΛਐΊΔ
 taskStarted shouldBe true // λεΫ͸։͍࢝ͯ͠Δ͚Ͳ taskFinished shouldBe false // ऴΘͬͯͳ͍ mainClock.advanceTimeBy(1500) // ׬ྃ࣌ࠁ·ͰਐΊΔ taskFinished shouldBe true // λεΫ͸ऴΘ͍ͬͯΔ var isRunning by mutableStateOf(false) var taskStarted = false var taskFinished = false setContent { if (isRunning) { LaunchedEffect(Unit) { taskStarted = true delay(3000) taskFinished = true } } } FAILED ❌ testStarted = false
9. 9 mainClock.autoAdvance = false isRunning = true mainClock.advanceTimeByFrame() // ⭐ mainClock.advanceTimeBy(1500) // ൒෼͚ͩ࣌ؒΛਐΊΔ
 taskStarted shouldBe true // λεΫ͸։͍࢝ͯ͠Δ͚Ͳ taskFinished shouldBe false // ऴΘͬͯͳ͍ mainClock.advanceTimeBy(1500) // ׬ྃ࣌ࠁ·ͰਐΊΔ taskFinished shouldBe true // λεΫ͸ऴΘ͍ͬͯΔ var isRunning by mutableStateOf(false) var taskStarted = false var taskFinished = false setContent { if (isRunning) { LaunchedEffect(Unit) { taskStarted = true delay(3000) taskFinished = true } } } FAILED ❌ testStarted = false
10. 10 mainClock.autoAdvance = false isRunning = true waitForIdle() // ⭐ mainClock.advanceTimeBy(1500) // ൒෼͚ͩ࣌ؒΛਐΊΔ
 taskStarted shouldBe true // λεΫ͸։͍࢝ͯ͠Δ͚Ͳ taskFinished shouldBe false // ऴΘͬͯͳ͍ mainClock.advanceTimeBy(1500) // ׬ྃ࣌ࠁ·ͰਐΊΔ taskFinished shouldBe true // λεΫ͸ऴΘ͍ͬͯΔ var isRunning by mutableStateOf(false) var taskStarted = false var taskFinished = false setContent { if (isRunning) { LaunchedEffect(Unit) { taskStarted = true delay(3000) taskFinished = true } } } FAILED ❌ testStarted = false
12. Frame 面 1 60 fps 1 60 frame 生 12 Frame
13. 13 MainTestClock Test ComposeTestRule Monotonic FrameClock Recomposer MainTestClock.autoAdvance = false Frame
14. 14 MainTestClock Test ComposeTestRule Monotonic FrameClock state Composition Recomposer MainTestClock.autoAdvance = false Frame
15. 15 MainTestClock Test ComposeTestRule Monotonic FrameClock state Composition waitForIdle() Recomposer Frame Recompose MainTestClock.autoAdvance = false
16. 16 MainTestClock Test ComposeTestRule Monotonic FrameClock state Composition waitForIdle() Recomposer Frame Recompose advanceTimeByFrame() Frame recompose MainTestClock.autoAdvance = false
17. MonotonicFrameClock Frame withFrameNanos() Frame suspend onFrame 1Frame withFrameNanos() Frame 17 interface MonotonicFrameClock : CoroutineContext.Element { suspend fun <R> withFrameNanos( onFrame: (frameTimeNanos: Long) -> R ): R }
18. MonotonicFrameClock AndroidUiFrameClock Android 用 TestMonotonicFrameClock Frame Coroutine delay kotlinx.coroutines.test.TestCoroutineScheduler Frame 18 Frame 1 Frame 2 Frame 2 delay( 16 mills) delay( 16 mills) advanceTimeBy( 32 mills)
19. Recomposition Frame Frame MonotonicFrameClock Recomposition Frame 19
21. 21 MainTestClock Test ComposeTestRule Monotonic FrameClock state Composition waitForIdle() Recomposer Frame Recompose advanceTimeByFrame() Frame recompose MainTestClock.autoAdvance = true onNode onNodeWithText("Hello").assertDoesNotExist()