如何在 Jetpack Compose 测试中创建页面/屏幕对象模型

Question

对于基本测试，如果我创建一个如下所示的测试类，它就可以正常工作。

class MyComposeTest {

    @get:Rule
    val composeTestRule = createAndroidComposeRule<MainActivity>()

    @Test
    fun myTest() {

        composeTestRule.onNodeWithText("Login").performClick()

        composeTestRule.onNodeWithText("Home").assertIsDisplayed()
    }
}

但是如果我想将其中一些抽象为单独的类以进行端到端测试怎么办？

例如我想创建一个登录页面类，其中包含用于登录的所有定位器以及类似的主页，并将我的测试简化为

@Test
fun myTest() {
   val login = LoginPage() 
   val home = HomePage()

   login.loginBtn.performClick() 
   home.homeTxt.assertIsDisplayed()
}

我不确定我的页面类（带有定位器）应该是什么样子才能实现这一点。

Answer 1

您应该在页面的构造函数中传递 composeTestRule。代码如下所示：

class BaseTestSuite {
    @get:Rule
    val composeTestRule = createAndroidComposeRule<MainActivity>()
}

class LoginPage(composeTestRule: ComposeContentTestRule) {
    val loginBtn = onNodeWithText("Login")

    fun tapLoginButton() {
        loginBtn.performClick() 
    }
}

class MyTestSuite() : BaseTestSuite {
    val loginPage = LoginPage(composeTestRule) 

    @Test
    fun myTest() {
        loginPage.tapLoginButton()
    
        // rest of the code
    
    }
}

Answer 2

简而言之，让我们看看 Kakao Compose DSL 是什么样子的：

// Screen class
class ComposeMainScreen(semanticsProvider: SemanticsNodeInteractionsProvider) :
    ComposeScreen<ComposeMainScreen>(
        semanticsProvider = semanticsProvider,
        // Screen in Kakao Compose can be a Node too due to 'viewBuilderAction' param.
        // 'viewBuilderAction' param is nullable.
        viewBuilderAction = { hasTestTag("ComposeMainScreen") }
) {

    // You can set clear parent-child relationship due to 'child' extension
    // Here, 'simpleFlakyButton' is a child of 'ComposeMainScreen' (that is Node too)
    val simpleFlakyButton: KNode = child {
        hasTestTag("main_screen_simple_flaky_button")
    }
}

// This annotation is here to make the test is appropriate for JVM environment (with Robolectric)
@RunWith(AndroidJUnit4::class)
// Test class declaration
class ComposeSimpleFlakyTest : TestCase(
    kaspressoBuilder = Kaspresso.Builder.withComposeSupport()
) {

    // Special rule for Compose tests
    @get:Rule
    val composeTestRule = createAndroidComposeRule<JetpackComposeActivity>()

    // Test DSL. It's so similar to Kakao or Kautomator DSL
    @Test
    fun test() = run {
        step("Open Flaky screen") {
            onComposeScreen<ComposeMainScreen>(composeTestRule) {
                simpleFlakyButton {
                    assertIsDisplayed()
                    performClick()
                }
            }
        }

        step("Click on the First button") {
            onComposeScreen<ComposeSimpleFlakyScreen>(composeTestRule) {
                firstButton {
                    assertIsDisplayed()
                    performClick()
                }
            }
        }

        // ...
    }
}

它的工作方式与使用 Espresso 的页面对象模式相同。了解更多