Przetestuj animacje

Twórz oferty ComposeTestRule, które umożliwiają pisanie testów animacji w deterministyczny sposób z pełną kontrolą nad zegarem testowym. Umożliwia to weryfikację wartości pośrednich animacji. Poza tym test może trwać krócej niż rzeczywisty czas trwania animacji.

ComposeTestRule udostępnia zegar testowy jako mainClock. Możesz ustawić właściwość autoAdvance na wartość false, aby kontrolować zegar w kodzie testu. Po uruchomieniu animacji, którą chcesz przetestować, możesz przesunąć zegar do przodu, klikając advanceTimeBy.

Warto pamiętać, że advanceTimeBy nie przesuwa zegara dokładnie o określony czas. Zaokrągla ją w górę do najbliższego czasu trwania, który jest wielokrotnością czasu trwania klatki.

@get:Rule
val rule = createComposeRule()

@Test
fun testAnimationWithClock() {
    // Pause animations
    rule.mainClock.autoAdvance = false
    var enabled by mutableStateOf(false)
    rule.setContent {
        val color by animateColorAsState(
            targetValue = if (enabled) Color.Red else Color.Green,
            animationSpec = tween(durationMillis = 250)
        )
        Box(Modifier.size(64.dp).background(color))
    }

    // Initiate the animation.
    enabled = true

    // Let the animation proceed.
    rule.mainClock.advanceTimeBy(50L)

    // Compare the result with the image showing the expected result.
    // `assertAgainGolden` needs to be implemented in your code.
    rule.onRoot().captureToImage().assertAgainstGolden()
}

Optymalizowanie testów animacji

Podczas testowania animacji o wysokiej wierności często trzeba wyłączyć automatyczne przechodzenie do następnego stanu i ręcznie przechodzić między klatkami, aby potwierdzić pośrednie stany interfejsu. W przypadku tych konkretnych pętli klatka po klatce użyj metody runWithoutImplicitWait, aby wykonać potwierdzenia. Standardowe zapytania do węzłów (np. onNodeWithTag lub fetchSemanticsNode) wywołują niejawne synchronizacje, które są zbędne, gdy ręcznie kontrolujesz zegar, więc ich pomijanie znacznie przyspiesza czas trwania testu.

Wytyczne dotyczące użytkowania

  • Ręczne zarządzanie zegarem: używaj tego interfejsu API, gdy wartość mainClock.autoAdvance jest ustawiona na false, a interfejs użytkownika jest w znanym, stabilnym stanie dla bieżącej klatki.
  • Wykonywanie w wątku UI: aby zapewnić stabilność drzewa UI, wywołuj funkcję runWithoutImplicitWait w wątku UI, np. za pomocą funkcji runOnUiThread. Uruchamianie go poza wątkiem UI naraża test na sytuację wyścigu i odczytywanie nieaktualnego stanu.
  • Asercje tylko do odczytu: blok powinien zawierać wyłącznie asercje tylko do odczytu. Wszelkie działania, które zmieniają stan, powinny być wykonywane poza tym blokiem.

Przykład

@Test
fun runWithoutImplicitWaitSample() = runComposeUiTest {
    setContent { MainScreen() }
    mainClock.autoAdvance = false

    // Trigger an animation
    onNodeWithText("Start Animation").performClick()

    // Step through the animation frame-by-frame
    while (hasPendingWork()) {
        mainClock.advanceTimeByFrame()
        waitForIdle()
        runOnUiThread {
            // Suppress implicit synchronization inside this block to avoid redundant
            // waits on each node query, making the frame assertions execute much faster.
            runWithoutImplicitWait {
                val box1 = onNodeWithTag("Box1").fetchSemanticsNode()
                val box2 = onNodeWithTag("Box2").fetchSemanticsNode()
                val box3 = onNodeWithTag("Box3").fetchSemanticsNode()

                // Assert the exact intermediate state of all three properties for this frame
                assert(box1.boundsInRoot.right <= box2.boundsInRoot.left)
                assert(box2.boundsInRoot.right <= box3.boundsInRoot.left)
            }
        }
    }
}