iT邦幫忙

2021 iThome 鐵人賽

DAY 27
0
Mobile Development

認真學 Compose - 對 Jetpack Compose 的問題與探索系列 第 27

D27 / 怎麼測試? - Testing Compose

今天大概會聊到的範圍

  • Testing

Compose 的 Test 屬於 UI Test ,在執行時需要啟動模擬器或是 run 在實機上。在使用上,就像其他的 UI Test 工具( ex. Espresso, Selenium) 很像:先在畫面上找到目標、對目標進行操作、檢查操作結果

環境配置

在開始 Compose Test 之前,別忘了引入相關的 library

androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
debugImplementation "androidx.compose.ui:ui-test-manifest:$compose_version"

ui-test-junit4 是主要的測試 library。另外當 Compose test 執行時,會將要測試的 Composable 放入 "ComponentActivity" 並用 Intent 將其啟動。所以我們要在 Manifest 中加上 ComponentActivity 的定義,因此我們加上 ui-test-manifest 來幫忙完成這個任務。

/androidTest 中,我們建立一個測試 class

class SimpleCompTest {
    
    // 1    
    @get:Rule
    val composeTestRule = createComposeRule()
    
    @Test
    fun test_when_SimpleComp_click_should_display() {
        // 2
        composeTestRule.setContent {
            SimpleComp()
        }
        
        composeTestRule.onNodeWithText("Click Me", ignoreCase = true).performClick()
        composeTestRule.onNodeWithText("Perfect").assertIsDisplayed()
    }
    
    
}
  1. Compose Test 使用 createComposeRule() 來建立一個 TestRule
  2. 在測試開始前,先用 composeTestRule.setContent 定義要測試的內容。setContent 做的事情就和 Activity.setContent 一樣,將畫面擺進 Activity 中。這邊使用的 Activity 就是前面提到的 ComponentActivity。若希望使用自己的 Activity,則改用 createAndroidComposeRule 並定義要使用的 Activity:
@get:Rule
val composeTestRule = createAndroidComposeRule<MyActivity>()

找到目標

compose test 提供一系列的工具,方便我們在畫面上找尋我們要互動的元件。主要分成 Finder 和 Matcher 兩個角色:

  • Finder:負責找到元件的,可以定義要找的是一個 or N 個元件
  • Matcher:查找的條件
@Composable
fun TestComp() {
    Text("One", color = Color.Red)
    Text("Two", color = Color.Blue)
    Text("Three", color = Color.Green)
    Text("Four", color = Color.Cyan)
}

@Test
fun test_TestComp() {
    composeTestRule.setContent {
        TestComp()
    }
    
    composeTestRule.onNodeWithText("One")     // 1. 
    
    composeTestRule.onNode(hasText("One"))    // 2.
    
}
  1. onNodeWithText 就是一個常用的 Finder,他可以找到 Text or TextField 包含對應的字樣
  2. onNode 是泛用的 Finder,他可以吃一個 Matcher。hasText 就是一個負責找到包含對應文字的元件的 Matcher

對目標進行操作

找到目標後,我們可以對他進行操作:

onNode(...).performClick()        // 對找到的 Node 進行點擊
onNode(...).perforTextInput(...)    // 輸入文字

除了進行一些常見的操作外,還可以對 Node 進行一個 or N 個手勢操作

onNode(...).performGesture { 
    click()
    swipeUp()
    ...
}

檢查操作結果

最後要提到的 assertion,最基本的檢查是檢查元件是否存在

onNode(...).assertIsDisplayed()

當然,還有很多 assertion 可以使用。例外還有通用的 assert() function

onNode(...).assert( <matcher> ) 

Cheat Sheet

有這麼多的 Finder、Matcher、Action 和 Assertion ,誰記得了那麼多啊?好加在 Google 很貼心的將這個 Compose Testing framework 的常用功能整理成一張小抄,方便我們在開發的時候對照:


上一篇
D26 / 要怎麼放 Compose 進我的專案? - Compose View
下一篇
D28 / Compose 可以用來做 Desktop App? - Compose JB
系列文
認真學 Compose - 對 Jetpack Compose 的問題與探索30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言