UI Testing (with Jetpack Compose)

 

 

종속성 추가

dependencies {      [...]          testImplementation 'junit:junit:4.13.2'     androidTestImplementation 'androidx.compose.ui:ui-test-junit4'     debugImplementation 'androidx.compose.ui:ui-test-manifest'   }

 

테스트 클래스 만들기

테스트하려는 기능을 마우스 오른쪽 버튼으로 클릭

UI 요소를 테스트할 예정이므로 androidTest 패키지 에 작성해야함

클래스 생성 완료

 

테스트 작성

아래는 @RunWith(), @Before, @Get, @Text를 사용한 예제이다.

클래스의 첫 번째 주석을 활용하여 JUnit 4로 실행하고, 두 번째 주석을 사용하여 구성 가능한 구성 요소에 액세스하기 위한 구성된 규칙을 설정함

 

// run with JUnit 4 @RunWith(AndroidJUnit4::class) class MainActivityKtTest {      // compose rule to get access to the composable component     @get: Rule     val composeTestRule = createComposeRule() }

 

Activity를 "시작"하기 위해 함수 내에서 @ Before 주석을 사용하고 AppTheme을 호출함

 

// run with JUnit 4 @RunWith(AndroidJUnit4::class) class MainActivityKtTest {      // compose rule is required to get access to the composable component     @get: Rule     val composeTestRule = createComposeRule()      // call the ButtonAdd fuction     @Before     fun setUp() {         composeTestRule.setContent {             TestingAppTheme {                 ButtonAdd(modifier = Modifier.background(Color.Magenta))             }         }     } }

 

마지막으로 구성요소를 테스트하는 함수를 작성함.

• 가장 먼저 테스트할 것은 요소가 레이아웃에 표시되는지 여부

• @Test 함수를 사용 하고 태그를 사용하여 구성 요소를 참조함

 

// onNodeWithTag indicates that a component with testing tag as “ButtonAdd” exists or not. @Test fun verifyIfAllViewsExists(){     composeTestRule.onNodeWithTag("ButtonAdd").assertExists()     composeTestRule.onNodeWithTag("TextAdd", useUnmergedTree = true).assertExists()     composeTestRule.onNodeWithTag("AddIcon", useUnmergedTree = true).assertExists() }

 

onNodeWithTag는 테스트 태그가 "ButtonAdd"인 구성 요소인지 여부를 나타냄

Jetpack Compose의 각 구성 요소에는 아래와 같이 계층 구조가 있다.

 

코드가 이 관계를 이해하도록 하려면 useUnmergedTree 라는 매개변수를 사용해야 한다.

 

• 클래스에 존재하는 모든 기능 테스트를 실행 하려면 클래스 이름 옆에 있는 재생 버튼을 클릭

• 특정 기능을 실행하고 싶다면 해당 기능 옆의 재생 버튼을 클릭

 

추가

• 예를 들어, 구성 요소가 표시되고 있는지 확인하는 함수
  • AssertIsDisplayed 함수를 사용할 수 있음.

@Test fun verifyIfAllViewsIsDisplayed() {     composeTestRule.onNodeWithTag("ButtonAdd").assertExists().assertIsDisplayed()     composeTestRule.onNodeWithTag("TextAdd", useUnmergedTree = true).assertIsDisplayed()     composeTestRule.onNodeWithTag("AddIcon", useUnmergedTree = true).assertIsDisplayed() }

 

• 일부 구성 요소에 " Banana " 가 포함된 콘텐츠 설명이 있는지 확인

@Test fun verifyIfSomeComponentHaveMatchContentDescription() {     composeTestRule.onAllNodesWithContentDescription("Banana").assertCountEquals(4)     composeTestRule.onAllNodesWithContentDescription("Banana").assertAny(hasTestTag("AddIcon"))     composeTestRule.onAllNodesWithContentDescription("Banana").assertAll(hasClickAction()) }

 

AssertCountEquals는 일치하는 노드 수를 확인함.

적어도 하나가 일치하는지 확인하려면 AssertAny

AssertAll은 모든 항목이 일치하는지 확인

 

계층적 일치자:

• hasParent()

• hasAnySibling()

• hasAnyAncestor()

• hasAnyDescendant()

 

@Test fun verifyIfHasChildrenDisplayed() {     composeTestRule.onNode(         hasParent(hasTestTag("ButtonAdd")),         useUnmergedTree = true     ).assertIsDisplayed() }

 

Actions:

• performClick()

• performSemanticsAction(key)

• performKeyPress(keyEvent)

• performGesture { swipeLeft() }

 

@Test fun verifyIfHasClickAction() {     composeTestRule.onNodeWithTag("ButtonAdd").performClick() }

Uploaded by

N2T