Przetestuj animacje

Compose udostępnia ComposeTestRule, który umożliwia pisanie testów animacji w sposób deterministyczny z pełną kontrolą nad zegarem testowym. Dzięki temu możesz sprawdzić pośrednie wartości animacji. Dodatkowo test może przebiegać szybciej niż rzeczywisty czas trwania animacji.

ComposeTestRule udostępnia zegar testowy jako mainClock. Aby sterować zegarem w kodzie testowym, możesz ustawić właściwość autoAdvance na wartość false. Po uruchomieniu animacji, którą chcesz przetestować, możesz przesunąć zegar do przodu za pomocą advanceTimeBy.

Warto zauważyć, że advanceTimeBy nie przesuwa zegara dokładnie o określony czas. Zamiast tego zaokrągla go 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()
}

Testy animacji Optimize

Podczas testowania animacji o wysokiej jakości często trzeba wyłączyć automatyczne przechodzenie i ręcznie przechodzić przez klatki, aby sprawdzić stany pośrednie interfejsu. W przypadku tych konkretnych pętli klatka po klatce użyj metody runWithoutImplicitWait, aby wykonać asercje. Standardowe zapytania dotyczące węzłów (takie jak onNodeWithTag lub fetchSemanticsNode) wywołują niejawne synchronizacje, które są zbędne, gdy ręcznie sterujesz zegarem, więc ich pominięcie znacznie przyspiesza czas wykonywania testów.

Wytyczne dotyczące użytkowania

  • Ręczne zarządzanie zegarem: używaj tego interfejsu API, gdy parametr mainClock.autoAdvance jest ustawiony na false, a interfejs jest w znanym, stabilnym stanie dla bieżącej klatki.
  • Wykonywanie wątku UI: aby zapewnić stabilność drzewa UI, wywołaj runWithoutImplicitWait w wątku UI, np. za pomocą runOnUiThread. Uruchomienie go poza wątkiem UI naraża test na sytuacje 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)
            }
        }
    }
}

Wstecz
Dostosuj animacje
Dalej
Narzędzia