Testing Codes/Testing Android

[Android UI Test] onNodeWithTag로 testTag 사용해 UI 노드 찾기

Dev.Cho 2023. 11. 24. 22:21
반응형

Composable에 테스트용 태그를 붙이는 방법

Composable에 테스트용 태그를 붙이기 위해서는 Modifier의 semantics 속성을 추가할 때 testTag 프로퍼티를 설정해 주면 된다. 다음 CirclePauseButton Composable은 버튼 전체를 감싸는 Box에 태그를 "Circle Pause Button"으로 붙였다. 

@Composable
fun CirclePauseButton(
    modifier: Modifier = Modifier,
    boxSize: Dp,
    iconSize: Dp = boxSize,
    boxColor: Color = MaterialTheme.colorScheme.secondary,
    iconColor: Color = MaterialTheme.colorScheme.onSecondary,
    onClick: () -> Unit
) {
    Box(
        modifier = modifier
            ...
            .semantics {
                this.testTag = "Circle Pause Button" // 태그 붙이기
            }
            .clickable {
                onClick.invoke()
            }
    ) {
        ...
    }
}

 

 

onNodeWithTag 사용해 테스트 실행하기

그러면 이제 우리는 이 테스트에서 composeRule.onNodeWithTag("Circle Pause Button")을 통해 CirclePauseButton 컴포저블에 접근할 수 있게 된다.

composeRule.onNodeWithTag("Circle Pause Button").performClick()

 

CirclePauseButton을 클릭하고 해당 클릭 이벤트가 제대로 들어가는지 확인하는 testCircleButtonClick 테스트를 다음과 같이 작성해보자.

class OnNodeWithTagTest {
    @get:Rule
    val composeRule = createComposeRule()

    @Test
    fun testCircleButtonClick() {
        // Given
        var isClicked = false
        composeRule.setContent {
            CirclePauseButton(
                boxSize = 48.dp,
                iconSize = 36.dp
            ) {
                isClicked = true
            }
        }

        // When
        composeRule.onNodeWithTag("Circle Pause Button").performClick()

        // Then
        Assert.assertTrue(isClicked)
    }
}

 

그러면 모든 테스트가 정상적으로 통과하는 것을 볼 수 있다. 

그림1. 테스트 통과 화면

 

 

onNodeWithTag의 한계

앞의 코드를 보면 프로덕션 코드에 Composable에 테스트를 위한 태그를 부여하기 위해 다음과 같은 코드라인이 추가된 것을 볼 수 있다.

.semantics {
    this.testTag = "Circle Pause Button" // 태그 붙이기
}

 

좋은 테스트는 테스트를 위해 프로덕션 코드의 가독성을 해치지 않아야 하고, 테스트만을 위해 불필요한 코드를 추가하는 것을 지양해야 한다. 하지만, Composable에 testTag를 추가하는 것은 테스트만을 위해 불필요한 코드를 추가하고 있다. 따라서 태그를 꼭 사용해야 하는 경우가 아니면 onNodeWithTag 대신 onNodeWithContentDescription을 사용하는 것이 좋다. 

반응형