UI testing of Jetpack Compose apps - Dutch Android User Group

@alex_zhukovich
https://alexzh.com/
UI Testing
 
Jetpack Compose apps

View Slide

View Slide

ANDROID TESTS
LOCAL INSTRUMENTATION

View Slide

ANDROID TESTS
UI* Non-UI

View Slide

ANDROID TESTS
UI* Non-UI UI Non-UI

View Slide

Good Test Case

View Slide

STABLE FAST READABLE INDEPENDENT

View Slide

Interaction Pixel perfectness

View Slide

INTERACTION
PIXEL PERFECTNESS

View Slide

PIXEL PERFECTNESS INTERACTION
TESTING UI COMPONENTS
 
(DESIGN SYSTEM)
INTERACTION WITH SCREEN(S)
SUPPORT MULTIPLE LANGUAGES
SUPPORT DIFFERENT
 
COLOR THEMES
SUPPORT ACCESSIBILITY OPTIONS
 
(FONT SIZE, SCREEN SIZE, ETC)
SUPPORT LTR & RTL
PERMISSION TESTING
YES
YES YES
YES
YES
YES
YES
YES

View Slide

SCREENSHOT TESTS FUNCTIONAL TESTS END TO END TESTS

View Slide

FUNCTIONAL TESTS
END TO END TESTS
SCREENSHOT TESTS

View Slide

END-TO-END TESTS
FUNCTIONAL TESTS
SCREENSHOT TESTS

View Slide

State of Android

Dev & Testing

View Slide

ACTIVITY FRAGMENT

View Slide

ACTIVITY FRAGMENT
COMPOSABLE
FUNCTION

View Slide

launchActivity
launchFragmentInContainer
ComposeContentTestRule
ActivityScenario.launch(

MainActivity::class.java

)

View Slide

launchActivity
val activityOptions = bundleOf(

Pair("param-1", 1),

Pair("param-2", 2),

Pair("param-3", 3),

)

val scenario = ActivityScenario.launch(

MainActivity::class.java,

activityOptions

)

scenario.moveToState(Lifecycle.State.STARTED)

ActivityScenario.launch(

View Slide

launchActivity
val scenario = launchFragmentInContainer(

fragmentArgs: Bundle? = null,

@StyleRes themeResId: Int =
 
R.style.FragmentScenarioEmptyFragmentActivityTheme,

initialState: Lifecycle.State =
 
Lifecycle.State.RESUMED,

factory: FragmentFactory? = null

)

scenario.moveToState(Lifecycle.State.STARTED)

debugImplementation "androidx.fragment:fragment-testing:1.4.0"

View Slide

launchActivity
Activity
Fragment

View Slide

launchActivity
androidx.fragment.app.testing.FragmentScenario$EmptyFragmentActivity
Activity
Fragment
Compilation
Added to AndroidManifest

View Slide

launchActivity
@get:Rule

val composeTestRule = createComposeRule()

composeTestRule.apply {

setContent { LoginScreen() }

onNodeWithTag("email")

.performTextInput("[email protected]")

onNodeWithTag("password")

.performTextInput("password")

onNodeWithTag("login")

.performClick()

...

}
debugImplementation "androidx.compose.ui:ui-test-manifest:1:0:5"

View Slide

launchActivity
Component
Activity
@Composable

View Slide

launchActivity
androidx.activity.ComponentActivity
Component
Activity
@Composable
Compilation
Added to AndroidManifest

View Slide

NO ID
 
OF COMPONENT
SEMANTIC
PROPERTIES
VIRTUAL CLOCK

View Slide

Testing Composable code

View Slide

CREATE COMPOSE
RULE
CREATE EMPTY
COMPOSE RULE
CREATE ANDROID
COMPOSE RULE

View Slide

class SubscribeBoxTest {

@get:Rule


@Test

fun shouldDisplaySnackbar_whenEmailIsEnteredAndSubscribeClicked() {


setContent { SubscribeBox() }

onNode(hasTestTag("subscribe_email"))


onNode(hasText("SUBSCRIBE"))

.performClick()

onNode(hasText("You successfully subscribed"))

.assertIsDisplayed()

}

}

}

View Slide


@get:Rule


@Test







.performClick()



}

}

}

Finder Matcher

View Slide


@get:Rule


@Test







.performClick()



}

}

}

Finder Matcher
Action

View Slide


@get:Rule


@Test







.performClick()



}

}

}

Finder Matcher
Action
Assertion

View Slide

MERGED NODE TREE
UNMERGED NODE TREE
Printing with useUnmergedTree = ‘false’

Node #1 at (l=0.0, t=74.0, r=1080.0, b=2012.0)px

|-Node #2 at (l=247.0, t=956.0, r=834.0, b=1130.0)px

Role = 'Button'

Focused = 'false'

ContentDescription = '[Schedule a task]'

Text = '[Schedule a task]'

Actions = [OnClick, GetTextLayoutResult]

MergeDescendants = 'true'
Printing with useUnmergedTree = ‘true’

Node #1 at (l=0.0, t=74.0, r=1080.0, b=2012.0)px

|-Node #2 at (l=247.0, t=956.0, r=834.0, b=1130.0)px

Role = 'Button'

Focused = 'false'

Actions = [OnClick]


|-Node #4 at (l=321.0, t=1006.0, r=395.0, b=1080.0)px

| ContentDescription = '[Schedule a task]'

| Role = 'Image'

|-Node #5 at (l=420.0, t=1014.0, r=785.0, b=1072.0)px


Actions = [GetTextLayoutResult]

View Slide

MERGED NODE TREE
UNMERGED NODE TREE

Node #1 at (l=0.0, t=74.0, r=1080.0, b=2012.0)px

|-Node #2 at (l=247.0, t=956.0, r=834.0, b=1130.0)px

Role = 'Button'

Focused = 'false'

Actions = [OnClick]


|-Node #4 at (l=321.0, t=1006.0, r=395.0, b=1080.0)px


| Role = 'Image'

|-Node #5 at (l=420.0, t=1014.0, r=785.0, b=1072.0)px



Node #1 at (l=0.0, t=74.0, r=1080.0, b=2012.0)px

|-Node #2 at (l=247.0, t=956.0, r=834.0, b=1130.0)px

Role = 'Button'

Focused = 'false'




onRoot(useUnmergedTree = false)
 
.printToLog("MERGED")

onRoot(useUnmergedTree = true)

.printToLog("UNMERGED")

View Slide

MERGED NODE TREE
UNMERGED NODE TREE
onNode(hasText("Schedule a task"), useUnmergedTree = true)

.assertHasClickAction()

Error
onNode(hasText("Schedule a task"))

.assertHasClickAction()

useUnmergedTree = false

Node #1 at (l=0.0, t=74.0, r=1080.0, b=2012.0)px

|-Node #2 at (l=247.0, t=956.0, r=834.0, b=1130.0)px

Role = 'Button'

Focused = 'false'

Actions = [OnClick]


|-Node #4 at (l=321.0, t=1006.0, r=395.0, b=1080.0)px


| Role = 'Image'

|-Node #5 at (l=420.0, t=1014.0, r=785.0, b=1072.0)px



Node #1 at (l=0.0, t=74.0, r=1080.0, b=2012.0)px

|-Node #2 at (l=247.0, t=956.0, r=834.0, b=1130.0)px

Role = 'Button'

Focused = 'false'




onRoot(useUnmergedTree = false)
 
.printToLog("MERGED")

onRoot(useUnmergedTree = true)

.printToLog("UNMERGED")

View Slide

onAllNodesWithText(“＋")[1]

.performClick()

.performClick()

onAllNodes(hasText(“＋"))[0]

.performClick()

onNode(hasText("Pay (€ 18.5)"))


View Slide

Node #1 at (l=0.0, t=74.0, r=1080.0, b=1188.0)px

View Slide

Node #1 at (l=0.0, t=74.0, r=1080.0, b=1188.0)px

|-Node #2 at (l=0.0, t=74.0, r=1080.0, b=1016.0)px

| VerticalScrollAxisRange = 'ScrollAxisRange(value=0.0, maxValue=0.0, reverseScrolling=false)'

| CollectionInfo = '[email protected]'

| Actions = [IndexForKey, ScrollBy, ScrollToIndex]

| |-Node #4 at (l=25.0, t=99.0, r=1055.0, b=360.0)px

| | |-Node #5 at (l=271.0, t=99.0, r=907.0, b=173.0)px

| | | Text = '[Americano]'


| | |-Node #6 at (l=271.0, t=185.0, r=907.0, b=345.0)px

| | | Text = '[Americano is ...]’


| | |-Node #7 at (l=932.0, t=99.0, r=1055.0, b=360.0)px

| | |-Node #8 at (l=932.0, t=99.0, r=1055.0, b=186.0)px

| | | Focused = 'false'

| | | Text = '[＋]'

| | | Actions = [OnClick, GetTextLayoutResult]

| | | MergeDescendants = 'true'

| | |-Node #11 at (l=976.0, t=186.0, r=1011.0, b=273.0)px

| | | Text = '[0]'


| | |-Node #12 at (l=932.0, t=273.0, r=1055.0, b=360.0)px

| | Focused = 'false'

| | Text = '[—]'

| | Actions = [OnClick, GetTextLayoutResult]

| | MergeDescendants = 'true'

| |-Node #15 at (l=25.0, t=413.0, r=1055.0, b=674.0)px

| | |-Node #16 at (l=271.0, t=413.0, r=907.0, b=487.0)px

| | | Text = '[Cappuccino]'


| | |-Node #17 at (l=271.0, t=499.0, r=907.0, b=659.0)px

| | | Text = '[A cappuccino is ...]’


| | |-Node #18 at (l=932.0, t=413.0, r=1055.0, b=674.0)px

| | |-Node #19 ...

| | |-Node #22 ...

| | |-Node #23 ...

| |-Node #26 at (l=25.0, t=727.0, r=1055.0, b=988.0)px

| |-Node #27 at (l=271.0, t=727.0, r=907.0, b=801.0)px

| | Text = '[Espresso]'


| |-Node #28 at (l=271.0, t=813.0, r=907.0, b=973.0)px

| | Text = '[Espresso is ...]’


| |-Node #29 at (l=932.0, t=727.0, r=1055.0, b=988.0)px

| |-Node #30 ...

| |-Node #33 ...

| |-Node #34 ...

|-Node #3 at (l=49.0, t=1065.0, r=1031.0, b=1139.0)px

Text = '[Pay (€ 0)]'

Modifier.semantics(mergeDescendants = false) {}

View Slide

Modifier.semantics(mergeDescendants = false) {}

class CoffeeDrinksTest {

@get:Rule


@Test

fun coffeeDrinksAreNotAddedToBasket_whenCoffeeAddedToBasket_thenPaymentAmountRecalculated() {


setContent { CoffeeDrinksWithBasket(drinks = coffeeDrinks) }

onNode(withIncrementForCoffeeDrink("Espresso"))

.performClick()

onNode(withIncrementForCoffeeDrink("Americano"))

.performClick()

onNodeWithIncrementForCoffeeDrink("Americano")

.performClick()

onNode(hasText("Pay (€ 18.5)”))


}

}

}

fun withIncrementForCoffeeDrink(text: String): SemanticsMatcher {

return hasText("＋")

.and(hasAnyAncestor(hasAnyChild(hasText(text))))

}

fun SemanticsNodeInteractionsProvider.onNodeWithIncrementForCoffeeDrink(text: String) =

onNode(withIncrementForCoffeeDrink(text))

View Slide

View Slide

@Preview

@Composable

fun Preview_MultipleRadioButtons() {

val selectedValue = remember { mutableStateOf("") }

val isSelectedItem: (String) -> Boolean = { selectedValue.value == it }

val onChangeState: (String) -> Unit = { selectedValue.value = it }

val items = listOf("Item 1", "Item 2", "Item 3", "Item 4", "Item 5")

Column(Modifier.padding(8.dp)) {

Text(text = "Selected value: ${selectedValue.value.ifEmpty { "NONE" }}")

items.forEach { item ->

Row(

verticalAlignment = Alignment.CenterVertically,

modifier = Modifier.selectable(

selected = isSelectedItem(item),

onClick = { onChangeState(item) },

role = Role.RadioButton

).padding(8.dp)

) {

RadioButton(

selected = isSelectedItem(item),

onClick = null

)

Text(

text = item,

modifier = Modifier.fillMaxWidth()

)

}

}

}

}

View Slide

@ExperimentalFoundationApi

class RadioButtonTest {

@get:Rule


@Test

fun firstItemSelectedByDefault_whenThirdItemIsSelected_thenSelectedValueDisplayed() {


setContent { Demo_RadioButton () }

onNodeWithRoleAndText(Role.RadioButton, "Item 1")

.assertIsSelected()

onNodeWithText("Item 3")

.performClick()

onNodeWithRoleAndText(Role.RadioButton, "Item 3")

.assertIsSelected()

onNodeWithText("Selected value: Item 3")


}

}

private fun withRole(role: Role): SemanticsMatcher {

return SemanticsMatcher("${SemanticsProperties.Role.name} contains '$role'") {

it.config.getOrNull(SemanticsProperties.Role) == role

}

}

private fun SemanticsNodeInteractionsProvider.onNodeWithRoleAndText(

role: Role,

text: String

) = onNode(

withRole(role)

.and(isSelectable())

.and(isEnabled())

.and(hasText(text))

)

}

View Slide

COLUMN
LAZY COLUMN
val amount = 1_000

LazyColumn(

modifier = Modifier.testTag("list")

) {

items(amount) {

Row(

modifier = Modifier.padding(8.dp)

) {

Text(text = "Item $it", fontSize = 20.sp)

}

}

}

val amount = 1_000

Column(


) {

(1..amount).forEach {

Row(


) {


}

}

}

View Slide

COLUMN
ADD UI
val amount = 1_000

Column(


) {

(0..amount).forEach {

Row(


) {


}

}

}

onNode(hasText("Item 14"))


onNode(hasTestTag("list"))

.performScrollToIndex(80)



Scroll actions:

performScrollToNode(hasText("Item 80”))

performScrollToIndex(80)
15 ITEMS ARE DISPLAYED
ALL ITEMS ARE EXIST

View Slide

LAZY COLUMN
ADD UI
val amount = 1_000

LazyColumn(


) {

items(amount) {

Row(


) {


}

}

}



onNode(hasTestTag("list"))

.performScrollToIndex(80)



Scroll actions:

performScrollToNode(hasText("Item 80”))

performScrollToIndex(80)
15 ITEMS ARE DISPLAYED
15 ITEMS ARE EXIST

View Slide

class TextTest {

@get:Rule


@Test

fun chapter1IsSelectedByDefault_whenSwipeLeftTheSecondAndThirdChapterIsDisplayed() {


setContent {

val content = listOf(

listOf("Lorem ipsum ...", ...),

listOf(...),

listOf(...)

)

Demo_capitalizeTheFirstLetterOfBookChapter(content)

}

onNodeWithText("Chapter 1")


onNode(hasSelectableGroup())

.performTouchInput { swipeLeft() }



onNode(hasSelectableGroup())

.performTouchInput { swipeLeft() }



}

}

fun hasSelectableGroup() =

SemanticsMatcher.keyIsDefined(SemanticsProperties.SelectableGroup)

}

View Slide

ENABLE/DISABLE
SYNCHRONIZATION
ADVANCE TIME BY A
SPECIFIC DURATION
IDLING RESOURCES
SUPPORT

View Slide

class AnimationTest {

@get:Rule


@Test

fun coffeeDrinkAnimation() {


setContent {

CoffeeDrinkAnimationBox()

}

composeTestRule.mainClock.autoAdvance = false

compareScreenshot(composeTestRule, "test-state-0")

composeTestRule.mainClock.advanceTimeBy(150)










}

}

}

View Slide

Testing hybrid apps

View Slide

COMBINE MULTIPLE
FRAMEWORKS IN A
TEST
COMBINE DIFFERENT
APPROACHES
USE DSL (DOMAIN-
SPECIFIC-LANGUAGE)

View Slide

UI testing of Jetpack Compose apps - Dutch Android User Group

UI testing of Jetpack Compose apps - Dutch Android User Group

Alex Zhukovich

More Decks by Alex Zhukovich

Other Decks in Technology

Featured

Transcript