[Compose] UI Test

💡개요

---

협업하는 개발자들 끼리 서로의 코드를 다 살펴볼 순 없습니다. 특히, 각자 개발한 UI에 대해 한눈에 알아보는 것은 더욱 힘든 일입니다.

UI Test를 작성하는 것 만으로도 이것이 어떻게 작동하는지 유추가 가능하게 되고, 이것은 일종의 문서 역할을 하게 됩니다.

프로젝트 덕키(Duckie)는 독립적인 디자인 시스템(Quack-Quack)을 가지고 있습니다. 덕키의 거의 모든 컴포넌트는 디자인 시스템의 컴포넌트로 이루어질 것이므로 중요성은 이루 말할 수가 없습니다. 따라서 UI Test를 통해 UI가 올바르게 작동하는지 검증하고, 안정성을 검증하는 과정을 필수로 거치게 되었습니다.
https://github.com/sungbinland/duckie-quack-quack

🎆Semantic

---

UI Tree에 의미론적인 요소를 부여한 체계 라고 할수 있습니다

.View System에서는, 각 View가 계층 구조 내에 정의되고, 관련 속성을 보유할 수 있었습니다.

컴포저블같은 경우 시각적 표현에 중점을 두는 background라던지, text라던지 상위 컨테이너의 정렬을 포함한 트리 구조를 방출합니다. 

이러한 의미에서 Semantic은 방출된 시점에 컴포저블에 의미를 부여하고 찾기 위한 시스템이라고 볼 수 있습니다.

Compose의 UI 테스트는 Semantic을 사용하여 UI 계층 구조와 상호작용 하게 됩니다. Semantic tree는 UI 계층 구조와 함께 생성되고 UI 계층 구조를 형성합니다

각각의 UI요소에 시맨틱이 의미를 부여하게 되는데, 이 의미라는 것은 Test FrameWork에서 접근할수 있는 방식을 말합니다. 즉, composeTestRule.*onNodeWithText(text) 같은 방식으로 Semantic Node에 접근할 수 있는 방식을 말합니다.*

💁‍♀️Example

---

junit4 환경에서 간단한 버튼 테스트를 진행하면서 테스트의 흐름을 짚어보겠습니다.

ComposeTestRule

ComposeTestRule은 component, Activity를 시작하는 방법 및 finder, actions, assertions 등을 제공하는 인터페이스입니다.
특정 액티비티를 지정하고 싶다면 createAndroidComposeRule<ACTIVITY_NAME>() 을 통해 생성할 수 있습니다.

@get:Rule
val composeTestRule = createComposeRule()

SetContent

덕키 디자인 시스템(Quack-Quack) 에서는 각각의 컴포넌트를 테스트 해야하므로, createComposeRule()을 생성하여 노드를 제공해야 합니다.

Semantic Node를 식별하기 위해, Companion Object에 선언한 TEST_TAG를 지정해 줍니다.

composeTestRule.setContent{
	  Button(onClick = { }) {
        Text(TEST_TAG)
    }
}

Finders

Semantic은 UI 요소에 의미를 부여한다고 했습니다.

Finder는, 주어진 어떠한 조건을 통해 의미가 부여된 노드를 찾을 수 있게 해줍니다.

예를들어, argument로 주어진 Text를 가지고 있는 Semantic Node를 찾으려면
composeTestRule.onNodeWithText(TEST_TAG) 를 호출하면 됩니다.
해당 메서드는 SemanticsNodeInteraction 를 반환하고, 찾은 노드에 대한 Interaction을 진행할 수 있습니다.

혹은 onAllNodes 를 사용하여 여러 노드를 선택할 수도 있습니다.

Assertion

특정 요소가 있는지, 화면에 나타났는지 등에 대한 상태를 확인합니다.

composeTestRule.onNodeWithText(TEST_TAG).assertIsDisplayed()

이처럼 Finder, Assertion, Action을 적절히 활용하여 요소를 찾아 속성을 확인하고 Interaction을 실행하는 테스트를 작성하면 됩니다.

https://developer.android.com/jetpack/compose/semantics?hl=ko

https://developer.android.com/jetpack/compose/testing?hl=ko

https://joebirch.co/android/jetpack-compose-accessibility-semantics/