Hey guys, all my tests started failing in compose ...

# compose

[Aditya Wasan]

Hey guys, all my tests started failing in compose beta 01 and by logging it with the printToLog method it seems that now there is an extra node in the compose hierarchy

|-Node #4 at (0.0, 171.0, 1080.0, 325.0)px
  SelectableGroup = 'kotlin.Unit'
  MergeDescendants = 'true'

Is this a planned change or a bug?

(Posting more details in the thread)

[Aditya Wasan]

My BottomNav looks like this

@Composable
fun LobstersBottomNav(
  currentDestination: Destination,
  navigateToDestination: (destination: Destination) -> Unit,
  jumpToIndex: (index: Int) -> Unit,
) {
  BottomNavigation(modifier = Modifier.testTag("LobstersBottomNav").semantics(mergeDescendants = true) {}) {
    Destination.values().forEach { screen ->
      BottomNavigationItem(
        icon = {
          IconResource(
            resourceId = screen.badgeRes,
            contentDescription = stringResource(screen.labelRes),
          )
        },
        label = { Text(stringResource(id = screen.labelRes)) },
        selected = currentDestination == screen,
        alwaysShowLabel = false,
        onClick = {
          if (screen != currentDestination) {
            navigateToDestination(screen)
          } else if (screen.route == Destination.Hottest.route) {
            jumpToIndex(0)
          }
        }
      )
    }
  }
}

and this was a sample test

composeTestRule.onNodeWithTag("LobstersBottomNav")
      .assertIsDisplayed()
      .onChildren()
      .assertCountEquals(Destination.values().size)

[Aditya Wasan]

This is the complete hierarchy now.

Node #1 at (0.0, 171.0, 1080.0, 325.0)px
     |-Node #2 at (0.0, 171.0, 1080.0, 325.0)px, Tag: 'LobstersBottomNav'
        |-Node #4 at (0.0, 171.0, 1080.0, 325.0)px
          SelectableGroup = 'kotlin.Unit'
          MergeDescendants = 'true'
           |-Node #5 at (0.0, 171.0, 540.0, 325.0)px
           | Role = 'Tab'
           | OnClick = 'AccessibilityAction(label=null, action=Function0<java.lang.Boolean>)'
           | Selected = 'true'
           | StateDescription = 'Selected'
           | Text = 'Hottest'
           | GetTextLayoutResult = 'AccessibilityAction(label=null, action=Function1<java.util.List<androidx.compose.ui.text.TextLayoutResult>, java.lang.Boolean>)'
           | ContentDescription = 'Hottest'
           | MergeDescendants = 'true'
           |-Node #10 at (540.0, 171.0, 1080.0, 325.0)px
             Role = 'Tab'
             OnClick = 'AccessibilityAction(label=null, action=Function0<java.lang.Boolean>)'
             Selected = 'false'
             StateDescription = 'Not selected'
             ContentDescription = 'Saved'
             Text = 'Saved'
             GetTextLayoutResult = 'AccessibilityAction(label=null, action=Function1<java.util.List<androidx.compose.ui.text.TextLayoutResult>, java.lang.Boolean>)'
             MergeDescendants = 'true'

[jim]

This is one of the reasons I'd recommend using screenshot tests, instead of trying to manually query/assert against nodes. The thing that matters is the pixels on the screen, and the node structure is somewhat more of an implementation detail for any given composable.

[Aditya Wasan]

I'm kinda new to UI testing and followed the docs around compose-testing. Is there a google recommended way to perform screenshot testing?

[jim]

Hmm, that does seem to be missing from our docs. Please feel free to file a bug: https://issuetracker.google.com/issues?q=componentid:612128

I know karumi released screenshot testing a while back:
https://blog.karumi.com/jetpack-compose-screenshot-testing-with-shot/

We also have some internal test rules that we use in androidx (eg. you can take a look at https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:test/scr[…]shot/ScreenshotTestRule.kt?q=%22class%20ScreenshotTestRule%22 and also for desktop https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]/SkijaTest.desktop.kt?q=%22fun%20DesktopScreenshotTestRule%22 which might be interesting places to grab some ideas.

[jim]

cc @Pedro Gomez

[Aditya Wasan]

Thanks for the references, I'll surely take a look :)

[Pedro Gomez]

thanks for the mention @jim 😃

[Pedro Gomez]

@Aditya Wasan we've been providing compose support in Shot since the first alpha release and we are really happy with the result 😃

[Aditya Wasan]

@Pedro Gomez Thanks for shot, it is an awesome lib and I've already added it to my testing setup. One thing that didn't work for me though is passing the composeTestRule into compareScreenshot() method. Adding composeTestRule.onRoot().captureToImage().asAndroidBitmap() to compareScreenshot() worked fine. My initial guess is that shot has not been updated yet to support beta-01 but if it is something else I'll be happy to provide more logs to triage this.

[Pedro Gomez]

we are working on compose beta support, but I have only 1 day per month to develop and maintain this library and all the open-source projects we have in the company 😞

[Aditya Wasan]

Oh sorry, no rush, please take your time. If I get time, I'll also try updating the lib and pushing changes upstream.

[Vinay Gaba]

I noticed AndroidXScreenshotRule in the codebase but it doesn’t seem to be a part of the Androidx Rules Library. Any plans of doing that? Or should we simply copy paste it?