Compose UI testing in Android Kotlin - Mini App: Build & Ship

Build: Greeting Screen

A simple screen that shows a greeting message and a button to change the greeting.

Target UI

---------------------
| Greeting Screen    |
|-------------------|
| Hello, User!       |
|                   |
| [Change Greeting]  |
---------------------

Display a Text composable with initial text 'Hello, User!'

Display a Button below the text labeled 'Change Greeting'

When the button is clicked, the text changes to 'Welcome to Compose UI Testing!'

Write a Compose UI test to verify the initial text is shown

Write a Compose UI test to verify the text changes after button click

Starter Code

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier

@Composable
fun GreetingScreen() {
    // TODO: Add state and UI here
}

Task 1

Task 2

Task 3

Solution

Android Kotlin

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.unit.dp

@Composable
fun GreetingScreen() {
    var greeting by remember { mutableStateOf("Hello, User!") }

    Column(modifier = Modifier.padding(16.dp)) {
        Text(
            text = greeting,
            modifier = Modifier.testTag("greetingText")
        )
        Button(
            onClick = { greeting = "Welcome to Compose UI Testing!" },
            modifier = Modifier.testTag("changeGreetingButton")
        ) {
            Text("Change Greeting")
        }
    }
}

We use remember and mutableStateOf to hold the greeting text state. The Text composable shows the current greeting. The Button updates the greeting when clicked. We add testTag modifiers to identify UI elements in tests easily.

Final Result

Completed Screen

---------------------
| Greeting Screen    |
|-------------------|
| Hello, User!       |
|                   |
| [Change Greeting]  |
---------------------

User sees 'Hello, User!' text initially

User taps 'Change Greeting' button

Text changes to 'Welcome to Compose UI Testing!'

Stretch Goal

Write a Compose UI test that clicks the button and verifies the text changes

💡 Hint

Use createComposeRule(), onNodeWithTag(), performClick(), and assertTextEquals()