[Android UI Test] createComposeRule과 createAndroidComposeRule의 차이 알아보기

특정 Composable에 대한 Isolated Test를 위한 createComposeRule

우리는 지금까지 createComposeRule을 사용해 UI 테스트를 진행했다. createComposeRule을 사용하면, 특정한 Composable을 화면에 표시할 수 있고, 해당 UI를 조작해 테스트를 진행할 수 있다. 

 

예를 들어 다음 코드와 같이 CirclePlayButton을 화면에 표시하고, 클릭한 다음, 해당 클릭이 제대로 일어났는지를 테스트할 수 있다.

class OnNodeWithContentDescriptionTest {
    @get:Rule
    val composeRule = createComposeRule()
    
    @Test
    fun testCircleButtonClick() {
        // Given
        var isClicked = false
        composeRule.setContent {
            CirclePlayButton(
                boxSize = 48.dp,
                iconSize = 36.dp
            ) {
                isClicked = true
            }
        }

        // When
        composeRule.onNodeWithContentDescription("Circle Play Button").performClick()

        // Then
        Assert.assertTrue(isClicked)
    }
}

 

이 테스트를 실행한 화면은 다음과 같다.

그림1. createComposeRule

 

createComposeRule을 사용했을 때 어떻게 이런 동작이 일어날 수 있을까?

정답은 바로 createComposeRule 함수의 선언부에 있다. createComposeRule은 Compose에서 일반적으로 사용하는 Activity인 ComponentActivity를 시작시키며, 테스트 코드의 composeRule.setContent 함수를 통해 이 ComponentActivity 속에 들어갈 UI를 설정할 수 있는 것이다.

actual fun createComposeRule(): ComposeContentTestRule =
    createAndroidComposeRule<ComponentActivity>()

 

여기서 특정 Activity를 시작시키기 위해 사용되는 것이 바로 createAndroidComposeRule 함수이며, 이 createAndroidComposeRule 함수를 사용해 ComponentActivity가 아닌 실제 애플리케이션의 Activity도 시작할 수 있다.

 

createAndroidComposeRule 사용해 실제 앱의 Activity 테스트하기

예를 들어 다음과 같이 작성된 MainActivity가 있다고 해보자. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            AndroidUITestCourseTheme {
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    LazyColumn(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(4.dp),
                        verticalArrangement = Arrangement.spacedBy(6.dp)
                    ) {
                        item {
                            EmojiText(modifier = Modifier, emoji = "👍", content = "Good")
                        }
                        item {
                            EmojiText(modifier = Modifier, emoji = "🙏", content = "Pray")
                        }

                        item {
                            CirclePlayButton(
                                boxSize = 48.dp,
                                iconSize = 36.dp,
                                onClick = {
                                }
                            )
                        }
                    }
                }
            }
        }
    }
}

 

이 MainActivity는 Emoji와 Text가 함께 들어간 EmojiText 컴포저블과 Play 버튼을 Lazy Column을 통해 화면에 표시해 다음과 같은 화면을 표시한다.

 

그림2. MainActivity

 

이 Activity를 테스트하기 위해서 우리는 createAndroidComposeRule<MainActivity>() 를 사용할 수 있으며, 모든 EmojiText 컴포저블이 화면에 표시되는지 확인하는 테스트는 다음과 같이 만들 수 있다.

class AndroidComposeRuleTest {
    @get:Rule
    val composeRule = createAndroidComposeRule<MainActivity>()

    @Test
    fun assertAllEmojiTextDisplayed() {
        // Then
        composeRule.onNodeWithText("Good").assertIsDisplayed()
        composeRule.onNodeWithText("Pray").assertIsDisplayed()
    }
}

 

createAndroidComposeRule을 사용해 특정 Activity에 대한 테스트를 작성하면, 이미 화면이 구성되어 있기 때문에 composeRule.setContent를 사용하지 않으며, 화면상의 UI Node와의 인터렉션과 단언만을 실행하면 되는 것을 볼 수 있다. 아래 영상은 위 테스트를 실행해 본 결과이다.

*UI 테스트는 워낙 빨리 끝나기 때문에 중간에 Thread.sleep을 두었다. 실제 테스트에서는 쓰면 안된다.

그림3.&nbsp;createAndroidComposeRule

 

정리

• createComposeRule은 createAndroidComposeRule을 사용해 ComponentActivity를 시작시킨다.
• createAndroidComposeRule을 사용해 특정 Activity를 테스트할 수 있다.