Hey there, is there a way to insert an observer at the point where a ChildStack animation finishes? My scenario is as follows: I'm trying to write a few integration tests that run the whole app, execute a few UI commands to progress the UI, and assert that everything works reasonably well. To improve this, I want to create an automatism that takes a screenshot of the current compose scene after every navigation. If a test fails, I can present the user with a set of screenshots to help them identify where things went wrong. I can observe ChildStack's current value, but at that point the transition animation hasn't happened yet, and I basically take a screenshot of the previous scene. Here is an example of how the test currently looks like, with me manually calling

awaitIdle()

before taking a screenshot. This works because it waits until the animation has finished, but since

awaitIdle()

is a suspend function, I cannot just run it in a ChildStack observer.

@Test
fun test() = runBlocking {
    var count = 0

    // The user flow is: Login -> Onboarding -> Dashboard
    val main = MainComponent(testContext(lifecycleRegistry))

    rule.setContentAndAwaitIdle {
        MainUi(main)
    }
    lifecycleRegistry.start()
    
    rule.awaitIdle()
    rule.renderToFile("${count++}.jpg") // Takes a screenshot of the Login screen

    // Perform login
    rule.onNodeWithText("E-Mail").performTextInput("test")
    rule.onNodeWithText("Password").performTextInput("word")
    rule.onNode(hasText("Login").and(hasClickAction().and(isEnabled()))).performClick()

    rule.awaitIdle()
    rule.renderToFile("${count++}.jpg") // Takes a screenshot of the Onboarding screen

    rule.onNode(hasClickAction()).performClick() // Accept Onboarding

    rule.awaitIdle()
    rule.renderToFile("${count++}.jpg") // Takes a screenshot of the Dashboard screen
}

If I want to automate the process of taking screenshots the only options I can see are (1) observe the moment the transition animation has ended or (2) modify the code so that no animation happens during tests (but even then I think I'm actually taking a screenshot of the frame before the new scene is rendered).

Hello! When the animation finishes, the previous Composable gets destroyed. Perhaps, you could do the following?

Children(
        stack = childStack,
        modifier = Modifier.weight(weight = 1F),
        animation = tabAnimation(),
    ) {
        when (val child = it.instance) {
            is CountersChild -> CountersContent(component = child.component, modifier = Modifier.fillMaxSize())
            is MultiPaneChild -> MultiPaneContent(component = child.component, modifier = Modifier.fillMaxSize())
            is DynamicFeaturesChild -> DynamicFeaturesContent(component = child.component, modifier = Modifier.fillMaxSize())
            is CustomNavigationChild -> CustomNavigationContent(component = child.component, modifier.fillMaxSize())
        }

        DisposableEffect(it.configuration) {
            onDispose {
                // The animation is finished
            }
        }
    }

Hey, thanks for the reply! I'll try the DisposableEffect and see if it works. Waiting for idle is kind-of iffy. It works if I integrate it into the test, as in my example. But best-case I don't want to care about the screenshot mechanic at all inside a test; it should "just work". But explicitly waiting for idle has to be woven into the flow of the test. Or at least that is my understanding.

Waiting for idle in UI and integration tests (for animations and background processing) is a common practice, based on my experience.