#testing #snapshots #compose #android
Suppose you want to record a snapshot not just of your UI in a particular state but combine two snapshots side by side to see how UI looks before and after the state transition (user input, for instance).
Here is how to do it:
## Update your device config
You have to make your device twice as wide to align two snapshots:
```kotlin
DeviceConfig(
screenWidth = your_device_width * 2,
screenHeight = your_device_height,
xdpi = your xdpi * 2,
ydpi = your ydpi,
)
```
## Accept modifiers in your root screen composable
```kotlin
@Composable
fun MyScreen(
modifier: Modifier = Modifier,
state: MyScreenViewState,
) {
Scaffold(modifier = modifier) {
...
}
}
```
## Now test
```kotlin
@Test
fun `test some state transition`() {
val stateA = MyScreenViewState(...)
val stateB = MyScreenViewState(...) // after transition
paparazzi.snapshot {
Row {
MyScreen(
modifier = Modifier.weight(1f),
state = stateA,
)
MyScreen(
modifier = Modifier.weight(1f),
state = stateB,
)
}
}
}
```
Here is the result:
![[snapshot_delta.png]]