Utilizing UI Testing and Deep Linking in Jetpack Compose Navigation | by Mert Toptas | March 2023

Deep linking is directing customers to particular content material inside the cell app, somewhat than simply the house web page or touchdown display of the app. It permits customers to immediately entry the content material they’re searching for, as an alternative of navigating by means of the menus and screens of the appliance to seek out it.

However, Jetpack Android Navigation is a part of the Android Jetpack library that simplifies the implementation of navigation in Android purposes.

Through the use of Deeplink with Android Jetpack Navigation, builders can present a good smoother consumer expertise by permitting customers to immediately entry particular screens inside the app. On this article, we are going to discover the idea of Deeplink, the fundamentals of Android Jetpack Navigation, and the best way to use Deeplink with Android Jetpack Navigation to boost our cell apps Buddy.

Deep linking on Android is a method of directing customers to a selected location or content material in an app, as an alternative of simply opening the app’s default display. It permits customers to immediately entry the content material they’re focused on, bypassing the necessity to navigate by means of the menus and screens of the appliance.

Technically, deep linking is carried out utilizing a URL scheme that maps a URL to a selected location within the utility. When a consumer clicks on a deep hyperlink, the URL is blocked by the working system, which then launches the appliance and navigates to the related location or content material within the utility.

What’s a Navigation Graph and the way is it created?

Jetpack Compose Navigation Graph is a part of Jetpack Navigation Library helps simplify navigation implementations in Jetpack Compose-based purposes. It’s just like information graph utilized in conventional Android apps, but it surely’s particularly designed to work with Jetpack Compose UI parts.

Jetpack Compose Navigation Graph created utilizing NavHost composable, which is answerable for storing the navigation graph of the appliance. The NavHost composable should be set within the utility’s format and it may be custom-made with numerous parameters like begin vacation spot, again stack habits and animation choices.

For instance, the navigation class of the Residence Web page is as follows. It’s a must to do that for every monitor.

Set your implicit intentions

Jetpack Compose Navigation can deal with implicit intention for you. First, you want a change in AndroidManifest.xml to create intent. Right here it’s worthwhile to specify host and schema with information tag for deep linking in intent filter.

Set up deep linking in your route

To create a deep hyperlink within the Jetpack Navigation Part in Jetpack Compose, observe these steps:

On this instance we deal with navigation utilizing Navigation part library. The NavHost hyperlink the NavController with a navigation chart that specifies the doable locations which you could navigate between them. As you navigate between compilations, the content material NavHost is computerized rewrite. Every composable vacation spot in your navigation graph is related to a route.

Within the above instance, we inform the Jetpack Compose Navigation Library to deal with hyperlinks that may fulfill the given URI sample. You are able to do it in two completely different approaches. First, you’ll be able to inform it to deal with all connections and all parameters in arguments, and deal with these arguments within the ViewModel and handle navigation. Second, you’ll be able to inform it to deal with a connection that may fulfill a screen-specific URI sample.

uriPattern = "instance://compose/dashboard/{title}"

Right here within the uriPattern we outline a selected deep linking sample the place the console show takes a “title” parameter based on the host and schema outlined within the AndroidManifest.

arguments = listOf(
navArgument("title") {
sort = NavType.StringType
defaultValue = ""
}
)

We outline an argument parameter known as “title”. We will additionally optionally, the default worth is the empty string. The truth is, the method is precisely to set a worth that we will encounter on the display. Right here you may get reside deeplink information.

val argument = navBackStackEntry.arguments?.getString("title")
HomeScreenRoute(deepLinkData = argument)

When organising HomeScreen, as a bundle within the navigation, we examine if there are values ​​within the arguments based on title parameter and ship the worth despatched from this deep hyperlink to HomeScreenRoute. State of affairs, if you wish to present id with Residence display deep hyperlink you’ll be able to observe this process and do title parameter you get from right here and show it on the Residence display.

You possibly can move any sort of intent attribute in navDeepLink builder, akin to actions And mimetype.

We show Deeplink information on the Residence display as proven within the instance beneath.

Observe right here that the Jetpack Compose Navigation Parts Library will navigate to essentially the most related deeplink it could actually discover in your navigation graph. If no match is discovered, it can merely navigate to the HomeScreen vacation spot.

You need to use this to strive deep linking;

adb shell am begin -W -a android.intent.motion.VIEW -d "instance://compose/dashboard/dashBoardDeeplink"

Additionally, let’s assume that there’s a SettingsScreen in our situation. State of affairs we direct the consumer to SettingsScreen with a deeplink redirect and show the argument that comes with the deeplink.

You need to use this;

adb shell am begin -W -a android.intent.motion.VIEW -d "instance://compose/settings/sampleArgument"

Half 4: UI Testing with Deeplinks in Jetpack Compose

When constructing a Jetpack Compose utility that makes use of deep linking, it is very important be sure that the navigation movement works accurately for each common app navigation and deep link-based navigation. That is the place UI testing is available in. On this part, we are going to discover the best way to write UI assessments for deep hyperlink based mostly navigation in Jetpack Compose.

To check a Deeplink in Jetpack Compose, you’ll be able to create a UI check that simulates an incoming Deeplink and confirm that the appliance navigates to the right vacation spot. Listed below are the steps you’ll be able to take to create Deeplink UI assessments in Jetpack Compose:

Create a check methodology: In your UI check class, create a check methodology to begin the appliance utilizing simulated Deeplink. You are able to do this utilizing the Motion.View intent methodology from androidx.compose.ui.check.junit4.ComposeTestRule class.

On this instance, the check methodology will launch the appliance with the mock interface Deep linking (e.g. //compose/dashboard/johnDoe) and confirm that the textual content component “That is the Residence display johnDoe” exists on the goal display. If the textual content component is discovered, the check passes. In any other case, the check fails, indicating that the appliance isn’t navigating to the right vacation spot.

On this article, we discovered the best way to use Deeplinks in Jetpack Compose to create a seamless navigation expertise for customers. We lined the best way to create and deep hyperlink processingand the best way to use UI testing to make sure correct operation. Jetpack Compose simplifies Deeplink implementations with a declarative UI framework. By following the steps outlined on this article, you’ll be able to create a clean navigation expertise to your customers and guarantee app high quality with consumer interface testing.

Supply

Github repository: