How to test a page that use ramcosta dependency in Jetpack compose

Question

I'm beginner in UI Test with Jetpack Compose, and I want to Test my page that uses ramcosta Library for navigation. With Navcontroller everything is fine and I can use that. But with this library I don't know what should I do. I Added the Navigation Interface in my setup function but I don't know how should I fill it. This is my page:

@ExperimentalPermissionsApi
@RootNavGraph(start = true)
@Destination
@Composable
fun MainPageScreen(
    navigator:DestinationsNavigator,
){
    val context = LocalContext.current
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(color = colorResource(id = R.color.yellow)),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {

        Row {
            IconButton(onClick = {
                navigator.navigate(
                    ShoppingScreenDestination()
                )
            }) {
                Icon(
                    imageVector = Icons.Default.ShoppingBasket,
                    contentDescription = "Shop"
                )
            } //IconButton

            Spacer(modifier = Modifier.width(16.dp))//Spacer

            IconButton(onClick = {
                Toast.makeText(context, "Search", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(
                    imageVector = Icons.Default.Search,
                    contentDescription = "Search"
                )
            }//IconButton
        }//Row
        Spacer(modifier = Modifier.height(16.dp))//Spacer
        Row {
            IconButton(onClick = {
                Toast.makeText(context, "Add", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(
                    imageVector = Icons.Default.AddShoppingCart,
                    contentDescription = "Add"
                )
            }//IconButton
            Spacer(modifier = Modifier.width(16.dp))//Spacer
            IconButton(onClick = {
                Toast.makeText(context, "Settings", Toast.LENGTH_SHORT)
                    .show()
            }) {
                Icon(
                    imageVector = Icons.Default.Settings,
                    contentDescription = "Settings"
                )
            }
        }//Row
    }//Column
} 

SO when I want to setup the page, I have an Error. This is my setup for Test:

@HiltAndroidTest
@UninstallModules(AppModule::class)
@ExperimentalPermissionsApi
class MainPageScreenTest{


    @get:Rule(order = 0)
    val hiltRule = HiltAndroidRule(this)

    @get:Rule(order = 1)
    val composeRule = createAndroidComposeRule<MainActivity>()

    lateinit var mockNavigator:DestinationNavigator

    @Before
    fun setup(){
        hiltRule.inject()
mockNavigator = object : DestinationsNavigator{
            override fun clearBackStack(route: String): Boolean {
                TODO("Not yet implemented")
            }

            override fun navigate(
                route: String,
                onlyIfResumed: Boolean,
                builder: NavOptionsBuilder.() -> Unit
            ) {
                TODO("Not yet implemented")
            }

            override fun navigateUp(): Boolean {
                TODO("Not yet implemented")
            }

            override fun popBackStack(): Boolean {
                TODO("Not yet implemented")
            }

            override fun popBackStack(
                route: String,
                inclusive: Boolean,
                saveState: Boolean
            ): Boolean {
                TODO("Not yet implemented")
            }

        }
        composeRule.activity.setContent {
            GroceryCostTheme {

                MainPageScreen(navigator = mockNavigator)
            }
        }
    }

}

As I said I don't know what should I write for that implementation functions

Answer 1

Finally I found the Solution

At first I deleted the object from setup function and created a class like this in my androidTest root:

import androidx.navigation.NavHostController
import androidx.navigation.NavOptions
import androidx.navigation.NavOptionsBuilder
import com.ramcosta.composedestinations.navigation.DestinationsNavigator

class MyNavigator(private val navController: NavHostController):DestinationsNavigator {
    override fun clearBackStack(route: String): Boolean {
        TODO("Not yet implemented")
    }

    override fun navigate(
        route: String,
        onlyIfResumed: Boolean,
        builder: NavOptionsBuilder.() -> Unit
    ) {
        val navOptions = NavOptions.Builder().apply {
            builder
        }.build()


        navController.navigate(route,navOptions,null)
    }

    override fun navigateUp(): Boolean {
        TODO("Not yet implemented")
    }

    override fun popBackStack(): Boolean {
        TODO("Not yet implemented")
    }

    override fun popBackStack(route: String, inclusive: Boolean, saveState: Boolean): Boolean {
        TODO("Not yet implemented")
    }
}

Then I used that class like this in my Test:

@HiltAndroidTest
@UninstallModules(AppModule::class)
@ExperimentalPermissionsApi
class MainPageScreenTest{

    @get:Rule(order = 0)
    val hiltRule = HiltAndroidRule(this)

    @get:Rule(order = 1)
    val composeRule = createAndroidComposeRule<MainActivity>()


    lateinit var mockNavigator: DestinationsNavigator

    @Before
    fun setup(){
        hiltRule.inject()
        composeRule.activity.setContent {
            val navController = rememberNavController()
            mockNavigator = MyNavigator(navController)
            MainPageScreen(navigator = mockNavigator)
            ShoppingScreen(navigator = mockNavigator)
        }
    }

    @Test
    fun clickOnAddGrocery_navigateToAddGroceryPage(){
        composeRule.onNodeWithContentDescription("Shop").performClick()
        composeRule.onNodeWithTag("Column").assertIsDisplayed()
    }

}

Anyway if you see something wrong or you know something better than this Solution please tell me