Il existe une histoire distincte écrite sur la façon d'ajouter un composant de navigation dans Compose. Dans cette histoire, nous allons l'étendre davantage pour ajouter des tests d'interface utilisateur en veillant à ce que la logique de navigation fonctionne comme prévu.

Vous pouvez obtenir le projet à partir d' ici et le parcourir

Testabilité

Pour rendre le code testable, nous avons découplé la logique de navigation de Composable/s, ce qui permet la testabilité des fonctions composables séparément des tests NavHost , car nous n'avons pas besoin de passer navController dans les fonctions composables, mais les fonctions composables exposent un lambda qui sera appelé lors de la navigation.

Dépendance

androidTestImplementation "androidx.navigation:navigation-testing:2.5.3"

Pour tester les fonctions composables, nous devons ajouter une balise de test pour le composant ui que nous voulons tester. La balise de test est une chaîne que vous affectez à un composant d'interface utilisateur composable à l'aide de Modifier. Par exemple, nous avons ajouté une balise de test pour l'écran d'accueil via un modificateur en tant que Modifier.testTag ("test_tag_home_screen").

Vous accéderez au composant d'interface utilisateur à l'aide de la balise de test dans nos tests d'interface utilisateur et vérifierez la visibilité et les clics dessus.

Préparer les épreuves

Le cadre de test de navigation nous fournit TestNavHostController, qui sera utilisé pour tester le contrôleur de navigation.

Le code ci-dessous montre comment nous allons configurer composeTestRule en utilisant TestNavHostController

@get:Rule
val composeTestRule = createComposeRule()
private lateinit var navController: TestNavHostController

@Before
fun setupAppNavHost() {
    composeTestRule.setContent {
        navController = TestNavHostController(LocalContext.current)
        navController.navigatorProvider.addNavigator(ComposeNavigator())
        MainNavigation(navController = navController)
    }
}

Cas 1 : Vérifiez la destination de départ de NavHost

Nous devons vérifier quand le composant de navigation est créé HomeScreen apparaît. Comme mentionné ci-dessus, nous avons attribué la balise de test pour HomeScreen en tant que Modifier.testTag("test_tag_home_screen").

ComposeTestRule fournit une méthode pour obtenir des composants d'interface utilisateur à l'aide de la balise de test onNodeWithTag(“<testtag>”) . Une fois que nous avons obtenu le nœud avec la méthode, nous vérifions la visibilité de ce nœud en utilisant assertIsDisplayed . Voir le code ci-dessous

@Test
    fun appNavHost_verifyStartDestination() {
        composeTestRule.onNodeWithTag("test_tag_home_screen").assertIsDisplayed()
    }

Cas 2 : vérifier les actions de navigation

Nous devons vérifier que le bouton Aller aux chansons se ferme sur l'écran d'accueil et que vous appuyez dessus pour ouvrir l'écran des chansons.

Pour obtenir le bouton Aller aux chansons dans nos tests, nous attribuerons une balise de test à ce bouton en utilisant Modifer.testTag comme ci-dessous

Button(
    modifier = Modifier.testTag("test_tag_go_to_songs"),
    onClick = { onNavigateToSongs() },
) {
    Text(text = "Go to Songs")
}

@Test
    fun appNavHost_verifyGoToSongsButton() {
        composeTestRule.onNodeWithTag("test_tag_go_to_songs").performClick()
        val route = navController.currentDestination?.route
        Assert.assertEquals(route, Screen.Songs.route)
    }

class NavigationTests {

    @get:Rule
    val composeTestRule = createComposeRule()
    private lateinit var navController: TestNavHostController

    @Before
    fun setupAppNavHost() {
        composeTestRule.setContent {
            navController = TestNavHostController(LocalContext.current)
            navController.navigatorProvider.addNavigator(ComposeNavigator())
            MainNavigation(navController = navController)
        }
    }

    @Test
    fun appNavHost_verifyStartDestination() {
        composeTestRule.onNodeWithTag("test_tag_home_screen").assertIsDisplayed()
    }

    @Test
    fun appNavHost_verifyGoToSongsButton() {
        composeTestRule.onNodeWithTag("test_tag_go_to_songs").performClick()
        val route = navController.currentDestination?.route
        Assert.assertEquals(route, Screen.Songs.route)
    }
}

• Le cadre de test fournit TestNavHostController qui est utilisé pour tester le composant de navigation
• Attribuez une balise de test au composant d'interface utilisateur sur lequel vous souhaitez effectuer des tests à l'aide de Modifer.testTag
• Obtenez le composant d'interface utilisateur dans votre test à l'aide de la balise correspondante à l'aide de la méthode onNodeWithTag, puis effectuez des actions et affirmez le résultat souhaité

Autres histoires dans la série de tests

• Rédaction d'un test instrumenté à l'aide de Hilt et Jetpack Compose
• Activité du conteneur Hilt pour le test