https://kotlinlang.org logo
#compose
Title
# compose
a

Aditya Wasan

02/25/2021, 7:47 AM
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
Copy code
|-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)
My BottomNav looks like this
Copy code
@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
Copy code
composeTestRule.onNodeWithTag("LobstersBottomNav")
      .assertIsDisplayed()
      .onChildren()
      .assertCountEquals(Destination.values().size)
This is the complete hierarchy now.
Copy code
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'
j

jim

02/25/2021, 10:49 AM
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.
a

Aditya Wasan

02/25/2021, 2:12 PM
I'm kinda new to UI testing and followed the docs around compose-testing. Is there a google recommended way to perform screenshot testing?
👍 1
☝️ 1
j

jim

02/25/2021, 3:44 PM
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.
cc @Pedro Gomez
a

Aditya Wasan

02/25/2021, 4:11 PM
Thanks for the references, I'll surely take a look :)
p

Pedro Gomez

03/03/2021, 4:14 PM
thanks for the mention @jim 😃
@Aditya Wasan we've been providing compose support in Shot since the first alpha release and we are really happy with the result 😃
a

Aditya Wasan

03/04/2021, 6:48 AM
@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.
p

Pedro Gomez

03/04/2021, 7:51 AM
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 😞
a

Aditya Wasan

03/04/2021, 11:24 AM
Oh sorry, no rush, please take your time. If I get time, I'll also try updating the lib and pushing changes upstream.
v

Vinay Gaba

03/07/2021, 6:56 PM
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?
2 Views