Hi, is there a way to use composeTestRule to find ...

# compose

[Ying Chen]

Hi, is there a way to use composeTestRule to find a AndroidView wrapped Button and click on it?

It appears that composeTestRule.onNodeWithText(xxx).performClick() doesn't work for an AndroidView wrapped Button

I also tried using a Modifier.testTag for the AndroidView wrapped Button, it can find the Button but won't be clickable

[dewildte]

Can you find the View with Espresso?
Like you would typically find a View using onView?

[Ying Chen]

Espresso.onView(ViewMatchers.withText(xxx)).perform(click())

Unfortunately Espresso doesn't work for both pure Compose case or AndroidView wrapped Button case

[dewildte]

Hmm.

[dewildte]

My initial thought is to make the Composable using the AndroidView Composable use a Modifier.clickable.

[Ying Chen]

emm the value of using the AndroidView wrapped Composable is to reuse the previous XML based Button set up?

[dewildte]

https://developer.android.com/jetpack/compose/testing#espresso-interop

[Ying Chen]

otherwise the pure compose version will be better 😛

[dewildte]

This doc says that

Espresso.onView(ViewMatchers.withText(xxx)).perform(click())

Should work.

[dewildte]

What does composeTestRule.onNodeWithTestTag(YOUR_TEST_TAG).printToString() produce?

[Ying Chen]

if use the AndroidView wrapped component:

|-Node #9 at (l=136.0, t=57.0, r=184.0, b=116.0)px, Tag: 'xxx'

if pure compose:

|-Node #9 at (l=136.0, t=57.0, r=200.0, b=114.0)px Role = 'Button' Focused = 'false' Actions = [OnClick, RequestFocus] MergeDescendants = 'true' MergeDescendants = 'true' |-Node #11 at (l=166.0, t=65.0, r=170.0, b=106.0)px Text = '[xxx]' Actions = [GetTextLayoutResult]

[Ying Chen]

I was scanning the way how we pass the text and clickListener to the AndroidWrappedButton right now

AndroidWrappedButton() {

it.text = "xxx"

it.setOnClickListener { onClick.invoke() }

}

[Ying Chen]

wonder if use Modifier to input the text and click event would work🤔, as you suggested

[dewildte]

Try it?

[dewildte]

Like, do you have to click the View, or can the whole Composable be clickable?

[Ying Chen]

trying now : )
It is ok to pass in the clickable

how do we use modifier to pass in text?👀
I saw this:

Modifier.semantics { text = ... }

and it requires a annotated string instead of a string

[Ying Chen]

String.toAnnotatedString can not work because @Composable invocations can only happen from the context of a @Composable function

[dewildte]

Node #9

Should be clickable, no?

[Ying Chen]

> Node #9

Should be clickable, no?

AndroidView wrapped component, no
so it can be "clicked" but the click event is not triggered 😕

[Ying Chen]

Thank you for suggestions! I will try some simple example when I get a chance

I figured can use

.semantics { text = AnnotatedString("xxx") })

[dewildte]

Can you propagate the click from the Composable to the View manually?

[Ying Chen]

@dewildte This simple example illustrate the issue.
func testAndroidWrappedButton won't print "onClick called" from the lambda val onClick, no matter use modifier.clickable or it.setOnClickListener

@Composable
    fun AndroidWrappedButton(
        modifier: Modifier = Modifier,
        setup: (Button) -> Unit = {}
    ) {
        AndroidView(modifier = modifier, factory = { context -> Button(context) }, update = setup)
    }

    @Test
    fun testAndroidWrappedButton() {
        val onClick: () -> Unit = {
            println("onClick called")
        }
        composeTestRule.setContent {
            AndroidWrappedButton(
                Modifier
                    .semantics { text = AnnotatedString("AndroidButton") }
                    .clickable { onClick }
            ) {
//                it.setOnClickListener {
//                    onClick
//                }
            }
        }
        val androidButtonViewText = composeTestRule.onNodeWithText("AndroidButton")
        androidButtonViewText.assertExists()
        androidButtonViewText.performClick()
    }

[Ying Chen]

And another find is clickable is not working at all but setOnClickListener will work if print directly in it.
The following test will only print setOnClickListener

@Test
fun testAndroidWrappedButton() {
    val onClick: () -> Unit = {
        println("onClick called")
    }
    composeTestRule.setContent {
        AndroidWrappedButton(
            Modifier
                .semantics { text = AnnotatedString("AndroidButton") }
                .clickable {
                    println("print clickable")
                    onClick
                }
        ) {
            it.setOnClickListener {
                println("print setOnClickListener")
                onClick
            }
        }
    }
    val androidButtonViewText = composeTestRule.onNodeWithText("AndroidButton")
    androidButtonViewText.assertExists()
    androidButtonViewText.performClick()
}