Paparazzi Snapshot tests failing between 0.4.1 -> 0.4.2

[wezley98]

As title, we integrated haze into our project at 0.4.1, but any version above 0.4.2/0.4.3/0.4.4 doesn't show the haze in our snapshots anymore.

0.4.4 Delta

Example Usage

Box(modifier = Modifier.clip(RoundedCornerShape(8.dp))) {
            val imageSizeModifier = Modifier
                .aspectRatio(ratio = AspectRatio.FOUR_BY_THREE.ratio)

            val hazeState = remember { HazeState() }

            UrlImage(
                modifier = imageSizeModifier.then(
                    if (tile.containsVideo) {
                        Modifier.haze(
                            state = hazeState,
                            backgroundColor = SkyTheme.skyColors.black.copy(alpha = 0.2f),
                            tint = SkyTheme.skyColors.black.copy(alpha = 0.2f)
                        )
                    } else {
                        Modifier
                    }
                ),
                url = tile.images.fourByThree ?: tile.images.sixteenByNine,
                mode = AspectRatio.FOUR_BY_THREE,
                imageCropsConfig = imageCropsConfig
            )

            if (tile.containsVideo) {
                TileVideoContentTimestampComponent(
                    tile = tile,
                    modifier = Modifier
                        .padding(start = 8.dp, bottom = 8.dp)
                        .hazeChild(state = hazeState, shape = RoundedCornerShape(2.dp))
                        .align(Alignment.BottomStart),
                    carouselTile = false
                )
                if (tile.contentLocked) {
                    LockedComponent(
                        contentTitle = tile.title,
                        modifier = imageSizeModifier
                    )
                }
            }
        }

[wezley98]

Updated version, we are on 0.4.1

[chrisbanes]

So this is likely because of #72 and #70 which where merged to actually get Haze working in previews and screenshot tests.

Looking at your screenshots, the difference is that the TileVideoContentTimestampComponent is now missing a background. Where was that background coming from? Haze?

Paparazzi uses SDK 33 iirc, so I'm surprised this didn't crash previously tbh (for the same reason as #71).

[wezley98]

@chrisbanes Originally the background was set on the TileVideoContentTimestampComponent like this:

@Composable
fun TileVideoContentTimestampComponent(
    tile: Component.Tile,
    modifier: Modifier = Modifier,
    carouselTile: Boolean
) = Row(
        modifier = modifier
            .clip(RoundedCornerShape(2.dp))
            .background(SkyTheme.skyColors.black.copy(alpha = 0.6f))
    ) {
.....
}

After adding haze we removed it and relied on haze's backgroundColor which seem to work ok.

@Composable
fun TileVideoContentTimestampComponent(
    tile: Component.Tile,
    modifier: Modifier = Modifier,
    carouselTile: Boolean
) = Row(modifier = modifier) {
    Icon(
        painter = painterResource(id = R.drawable.ic_video_play_arrow),
        contentDescription = "",
        modifier = Modifier
            .align(Alignment.CenterVertically),
        tint = SkyTheme.skyColors.white
    )

    TileVideoDuration(
        videoDuration = tile.videoDuration,
        carouselTile = carouselTile
    )
}

If haze won't appear in screenshots for now, that's ok we just need to let the team know.

[chrisbanes]

Sounds good. The background will be shown again as soon as #71 is fully fixed (I'm working on it this week).

I just don't know how it worked previously in Paparazzi 🤔. What version of Paparazzi are you using?

[wezley98]

Currently on latest stable 1.3.1