Android UI Test with mocked API

UI Testing in Android is very important and very useful. It makes sure the application itself runs without any issue when separated from external dependency such as an API.

TL;DR you can go straight to my repository on GitHub run the application and the UI test.

There are many different ways we can do UI test on android. In this article, I would like to approach it using espresso and mockwebserver. Espresso is the default framework for Android UI Test. Mockwebserver is a library that we use to start a web server in the android test environment.

Let’s make an app

I will use a very simple example to explain how we can make mockwebserver work on Android. We are going to create an android app with one button and that button will call an API. Open Android Studio and let’s create a new project. Choose empty activity on the Create New Project window.

create new project window

While waiting for the gradle sync to be finished, we can check the project structure. Make sure it has the MainActivity on AndroidManifest.xml and the file exists on src/main/java.

Let’s add the button: Go to res/layout/activity_main.xml click the button on component option then drag it to the screen design. After that we can open the Text tab since as default it is using ConstraintLayout then we will not change it for simplicity. The next step is adding an id to the textview and then make textview as a constraint of the new button. The complete code will look like this:

Before we move forward let’s run the application to make sure everything is in the right place. If everything is alright then this is what you should see on your emulator’s screen:

Congratulations give a pat on your back. Take a 5-minute break to drink coffee or tea.

So we can continue. Now, we are going to call API with HttpUrlConnection which is an android built-in library. This is not a best practice to call API but used here for the sake of simplicity. We start with adding new permission in AndroidManifest.xml to access internet and access network state:

Next step is calling the API. Click the Call API button then display the result on the textView on top of the button. We are going to use the public API provided by Postman. This API will provide us with current GMT date time then we will display it on textView. Once again by the name of simplicity we are going to put everything on the activity which is not a best practice. The MainActivity code would be like this:

Alright all done for our application. You can run it and click the Call API button. It will be like this :

Nice, you deserve a cookie (said Hugh of Netflix final space). We just finished the entrée. We are going to the main course now: The Android UI test and mockwebserver.

Let’s write some tests

I know some of you will yell at me that this is not TDD so it’s not a best practice. In my opinion, TDD tests need to be run quickly (under 1 minute) to make the development process efficient. This is not the purpose of the UI test. UI test execution time is a second priority compared to the comprehensiveness of the test.

Moving forward, please check your build.gradle of our project that you have espresso dependency installed:

androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.1'
androidTestImplementation 'androidx.test:rules:1.1.0'

If you have it already, then go to file ExampleInstrumentedTest.kt. We need to update this file so it clicks the Call API button then wait to it get the result from the API. It would look like this:

Now you can click green arrow beside class ExampleInstrumentedTest on Android Studio and the app will be running and execute the test. Looks good so far.

Let’s mock it

Here is the interesting and important part of this article. We would like to mock the return value of API. Let’s say rather than GMT we would like to put fix date: Wed, 29 Jan 2020 23:19:51 +1000

The first step is we need to install mockwebserver dependency in build.gradle and it looks like this:

androidTestImplementation 'com.squareup.okhttp3:mockwebserver:4.3.0'

Then we sync the project’s gradle so it will grab the dependency. The webmock server will run on http://127.0.0.1:8080. However, we are currently pointing the URL to https://postman-echo.com/time/now. So we need to update the URL to use build config based on build type (you can use build flavours too). Once the sync process is finished, we can update the build.gradle to be like this:

Then we need to put the configuration and mock in ExampleInstrumentedTest. The update of the file will look like this:

Pay attention to the before and after annotations. As it is presented, we put the mocked result. When we run the test (using the green arrow) then it will fail.

For sure we cannot leave it in a failed state. So we need to update the contains string to look for +1000 like this:

onView(ViewMatchers.withId(R.id.hello_world))
 .check(ViewAssertions.matches(ViewMatchers.withText(StringContains.containsString("+1000"))))

Run it again and it will be green.

Congratulations you are successfully mocked the API for your android application.

What’s after this?

When your application is growing, the complexity of the API could be growing as well. Mockwebserver can use the dispatcher to map the request and response based on the path or parameter of the request and use assets to return more complex structure like JSON.

That’s all for now.

Sharing is caring and love your neighbor like you love yourself.