UI Testing for Compose
date
Apr 10, 2024
slug
ui-testing-for-compose
status
Published
tags
Programming
summary
如何幫 Jetpack Compose 寫 UI 測試。
type
Post
簡介
最近修一堂課需要找一個 Android 專案寫測試，想到最近有一個 Side Project 是用 Jetpack Compose 寫的，所以藉此研究一下怎麼測 Compose 的 UI。
HushKeyboard
ricky9667 • Updated Apr 24, 2024
測試你的 Jetpack Compose UI
前置設定
加入 Dependency
首先要先在
build.gradle.kts 加上這兩個 implementation：建立 Compose Rule
接下來我們可以透過
createComposeRule() 裡面建立一個 ComposeTestRule 的 instance，到時候我們會用這個 Test Rule 來測試 Compose 的 UI：如果你需要 Activity 相關的資訊，可以改成用
createActivityComposeRule()：設定測試 UI
最後你可以透過
setContent 設定你想要測試的 UI：撰寫 UI 測試
ComposeTestRule 有三種類型的 Method：- Finder：讓你在 Compose 的元件樹裡面選擇你想要測試的元件，例如
onNode()或onNodeWithText()。
- Action：對你選擇的元件進行操作，例如
performClick()或performGesture()。
- Assertion：檢測你選擇的元件狀態是不是你預期的，例如
assertIsEnabled()或assertHasClickAction()。
Finder
我們測試 UI 的第一步需要選擇我們要測的某個元件或區塊，我們會在
onNode() 裡面提供你元件的篩選條件，這個篩選條件稱為一個 Matcher。如果你需要一次選擇多個元件，可以改成用
onAllNodes()。另外，有一些常用的 Finder 會直接跟 Matcher 合併，例如：
onNodeWithText("Button")→onNode(hasText(”Button”))
onNodeWithContentDescription("Button")→onNode(hasContentDescription(”Button”))
Assertion
選擇 UI 之後，我們可以針對 Finder 選取到的 UI，檢測他是否符合我們的預期。這時候用的會是
assert()，並在裡面提供一個 Matcher。另外，Assertion 同樣也會有跟 Matcher 合併的方法，像是 assertHasClickAction() 或 assertHasContentDescription()。Action
除此之外，我們可以針對自己用 Finder 選取的 UI 做一些行為，通常都是
perform…() 類型的方法。