Testing Lottie Animations in Jetpack Compose
Article Summary
Jordi Coll Marin from Just Eat Takeaway reveals a testing challenge most Android devs overlook: how do you verify a Lottie animation actually completes when it only runs for half a second?
Testing animations in Jetpack Compose isn't straightforward, especially when they're short-lived and run only once. Jordi breaks down three distinct approaches to testing Lottie animations in Compose, each with different tradeoffs for controlling animation state during UI tests.
Key Takeaways
- MainTestClock lets you manually jump to specific frames using advanceTimeBy
- CompositionLocal with iterations prevents animation from finishing before assertion runs
- ClipSpec approach keeps progress below 1.0 so animation never leaves screen
- Default animateLottieCompositionAsState progress runs from 0 (not started) to 1 (finished)
Three different testing strategies (MainTestClock, iterations control, and clipSpec manipulation) each solve the problem of verifying short-lived Lottie animations in Compose tests.
About This Article
Jordi Coll Marin was testing a half-second Lottie animation in UI tests. He needed to make sure the animation completed its full cycle before assertions ran, since the timing was tight.
He tried three approaches with Jetpack Compose's testing framework. First, he used MainTestClock to manually advance frames. Then he tried CompositionLocal with LottieConstants.IterateForever to loop the animation continuously. Finally, he set clipSpec to 0.99 maximum using CompositionLocal to stop the animation from fully completing.
The clipSpec approach worked best. By keeping animation progress below 1.0, assertions could reliably check that the animation was displaying without worrying about timing or manually controlling the clock.