[DOCUMENTATION] Compose UI Test 내용 공유를 위한 문서

[KanuKim97]

Description

Compose UI Test에 대한 내용을 공유하고자 만든 문서입니다.

Content

Compose Test는 계측 테스트로 실행되어야합니다.
따라서 (androidTest)에 Test를 위한 파일을 생성하여 진행해야합니다.
future/test-compose 브랜치에는 app 모듈의 GnrTopLevelBar를 간단히 테스트하는 코드를 작성해 GnrTopLevelBarSimpleUiTest.kt 파일로 지정해두었습니다.

Test Scenario

GnrTopLevelBar를 간단히 테스트하는 코드를 작성해 GnrTopLevelBarSimpleUiTest의 Test Scenario는 아래와 같습니다.

- GnrTopLevelBar는 각각 TopLevelDestination에 해당하는 name을 보여주는 title이 있다.
- 각각의 TopLevelDestination이 다른 경우 활성화된 title은 TopLevelDestination의 목적지의 name 프로퍼티와 같은가?

ComposeTest

• Compose 테스트는 createComposeRule()을 사용하여 테스트 중인 Composable 콘텐츠를 설정하고 이와 상호작용할 수 있습니다.

@get:Rule
val composeTestRule = createComposeRule()

• 또한 Espresso를 사용하여 Android 뷰 환경에서 실행하는 방식과 유사하게 앱의 액티비티를 시작할 수 있습니다.
  이 경우, createAndroidComposeRule()을 사용하면 됩니다.

@get:Rule
val composeTestRule = createAndroidComposeRule(ExampleActivity::class.java)

• Compose를 사용하는 경우 각각의 Composable에 대한 Component들을 격리 테스트 할 수 있습니다.
  이 경우 setContent메서드를 사용하여 테스트합니다.

@get:Rule
val composeTestRule = createComposeRule()

@Test
fun testUi() {
   composeTestRule.setContent {
     // 테스트를 진행할 컴포저블
   }
}

• Compose를 테스트하는 규칙들은 아래와 같습니다.

 composeTestRule{.finder}{.assertion}{.action}

1. {.finder} : UI 요소를 탐색하는 테스트 규칙입니다.
2. {.assertion} : 속성을 확인하는 테스트 규칙입니다.
3. {.action} : 작업을 실행하는 규칙입니다.

• Compose Test를 위한 도구를 알고 싶으시다면 Compose Test 요약본 , Android Developers Compose Ui Test Docs를 참조하시면 도움이 됩니다.

Code Brief

GnrTopLevelBarSimpleUiTest는 간단한 UI 테스트로 finder와 assertion만 사용하여 TopLevelBar를 테스트하였습니다.

composeTestRule.setContent {
            GnrTopLevelBar(
                topLevelDestination = TopLevelDestination.TEAM,
                icons = {  }
            )
}

composeTestRule
            .onNodeWithText(TopLevelDestination.TEAM.name) //finder
            .assertIsDisplayed() //assertion

위 테스트 규칙은 아래와 같이 풀이됩니다.

1. GnrTopLevelBar의 Destination은 TEAM이다.
2. composeTestRule의 finder는 setContent를 통해 그려준 GnrTopLevelBar에 TopLevelDestination.TEAM.name Text를 가진 UI 요소를 찾는다.
3. assertion에 해당하는 assertIsDisplayed는 2에 해당하는 UI 요소가 화면에 Displayed 되었는지 확인한다.

Preferences

1. Android Developers Compose Ui Test Docs
2. Compose Test 요약본
3. CodeLab, JetpackCompose에서 테스트

---

History

• 2024.05.02 First drafted by @KanuKim97

[KanuKim97]

지속적으로 문서는 업데이트 될 예정입니다.