In Unit Compose UI test, OutlinedTextField exists but is not displayed

Question

I have an OutlinedTextField that I'm testing in unit tests. When I run the app, the TextField is always displayed. However, when I run the unit tests, the element exists, but is not displayed. I can't do text input without calling focus on the item, which I am assuming means the item is displayed.

Here is my OutlinedTextField:

@Composable
fun ChangeUserNameInput(
    userName: String,
    onChangeUserName: (String) -> Unit) {
    Box(modifier = Modifier.testTag(UpdateUserNameTags.USERNAME).alpha(1f)) {
        OutlinedTextField(
            modifier = Modifier
                .fillMaxWidth()
                .alpha(1f)
                .semantics { contentDescription = UpdateUserNameTags.USERNAME },
            value = userName,
            onValueChange = onChangeUserName,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = Color.Transparent,
                focusedIndicatorColor = MaterialTheme.colors.primary,
                unfocusedIndicatorColor = niro,
                disabledIndicatorColor = Color.Transparent,
                focusedLabelColor = MaterialTheme.colors.primary,
                unfocusedLabelColor = niro,
                textColor = MaterialTheme.colors.onBackground
            ),
            label = {
                Text(text = stringResource(id = R.string.update_user_name))
            },
            keyboardOptions = KeyboardOptions(
                keyboardType = KeyboardType.Text
            )
        )
    }
}

Here is my test:

@Test
fun `test to see if username typed text is Displayed`() = runTest {
    val value = composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME)
    composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).assertExists()
    composeTestRule.awaitIdle()


   composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).onChildAt(0).assertIsDisplayed() ---> FAILS here
    composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).onChildAt(0).performTextInput(" Welsh")
    value.assertTextEquals("Kristy Welsh")

    //composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).assertTextContains("Kristy Welsh")
}

I can't figure out why the item is not displaying.

Answer 1

My problem actually was that the screen was too large and a bunch of the content was off screen.

I solved it by making the screen scrollable and the doing performScrollTo:

@Test
fun `test to see if username is showing`() = runTest {
    composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).assertExists()
    composeTestRule.onNodeWithTag("Annotated String").assertIsDisplayed()
    composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).performScrollTo()
    composeTestRule.onNodeWithTag(UPDATE_USER_SCREEN).assertIsDisplayed()
    composeTestRule.onNodeWithTag(UpdateUserNameTags.USERNAME).onChildAt(0).assertTextContains("Kristy")
}