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)
}
}
그러면 모든 테스트가 정상적으로 통과하는 것을 볼 수 있다.
onNodeWithTag의 한계
앞의 코드를 보면 프로덕션 코드에 Composable에 테스트를 위한 태그를 부여하기 위해 다음과 같은 코드라인이 추가된 것을 볼 수 있다.
.semantics {
this.testTag = "Circle Pause Button" // 태그 붙이기
}
좋은 테스트는 테스트를 위해 프로덕션 코드의 가독성을 해치지 않아야 하고, 테스트만을 위해 불필요한 코드를 추가하는 것을 지양해야 한다. 하지만, Composable에 testTag를 추가하는 것은 테스트만을 위해 불필요한 코드를 추가하고 있다. 따라서 태그를 꼭 사용해야 하는 경우가 아니면 onNodeWithTag 대신 onNodeWithContentDescription을 사용하는 것이 좋다.
반응형
