Step-by-Step Guide to UI Testing with Mock APIs Using Mockoon and Maestro

Designing, building, and testing applications consuming third-party APIs can be quite challenging. As developers, we often face bottlenecks such as inter-team dependencies and external API unavailability during testing. API mocking is a solution that helps us overcome these challenges, speeding up development, and making testing more flexible. In this blog post, we will demonstrate how to optimize your UI testing using mock APIs with Mockoon and Maestro.

A Brief Overview of Mockoon

Mockoon is a user-friendly and fast tool for designing and running mock REST APIs. Maestro is a simple, yet powerful mobile UI testing framework. 

In this step-by-step guide, we will demonstrate the powerful combination of Mockoon and Maestro for UI testing with mock APIs. For our TMDB app, employing Mockoon provides numerous benefits:

1. Faster development: Mockoon makes it easier to create, modify, and manipulate API responses during the development process, drastically reducing the time spent handling real API interactions.
2. Isolated testing: By simulating various API responses and error scenarios, developers can effectively test the app’s behavior without affecting the live API. This isolation allows for more comprehensive testing, ensuring that the app behaves correctly under different conditions.
3. Selective mocking: Mockoon’s Proxy mode enables developers to mock specific endpoints while keeping the rest of the app’s interactions with the live API unchanged. This flexibility permits fine-grained control over the testing process, allowing developers to focus on specific app components.
4. CI/CD integration: Mockoon’s CLI support ensures that the development process can be automated and incorporated into CI/CD pipelines.

Setting Up Mockoon and Maestro

Install the Mockoon desktop tool and the CLI tool.

Install Maestro.

For this demonstration, we will use an Android app that connects to The Movie Database (TMDB) API. Note that the principles explained in this post apply to any frontend, including Android, iOS, and the web.

You can optionally set up an Android app to try out! Or just follow the instructions and implement them for your own app! 
GitHub: https://github.com/thekharche/maestro-mockoon-tmdb

App with different states (data, error, loading) made possible with Mock APIs:

Creating Your First Mock Endpoint

To get started with Mockoon, follow these steps:

1. Create a new environment in Mockoon with the name “mock-tmdb.json.”

2. Clear the Path field in the environment settings, as we will be mocking the root (“/”) response.

3. Enter some text in the Body section, such as “Welcome to Maestro Blog!”.

4. Start the server by clicking the “Start” button on the top left corner of the application window.

Note the port displayed in the environment settings (e.g., 3001). Visit http://localhost:3001/ in your browser to see the response: “Welcome to Maestro Blog!”

You have just mocked your first endpoint!

Enhancing the Mocked Endpoint

1. Update the JSON body in the environment settings to replicate the actual response when visiting https://api.themoviedb.org/3/. Use the following JSON:

{
  "status_code": 7,
  "status_message": "Invalid API key: You must be granted a valid key.",
  "success": false
}

2. Check the updated response in your browser by visiting http://localhost:3001/.

Mocking Other TMDB Endpoints

We will now mock three other endpoints used by our app:

1. Now Playing (https://developer.themoviedb.org/reference/movie-now-playing-list)

2. Popular (https://developer.themoviedb.org/reference/movie-popular-list)

3. Top Rated (https://developer.themoviedb.org/reference/movie-top-rated-list)

Mocking the Now Playing Endpoint

1. Create a new route in Mockoon with the following settings:

• Method: GET
• Path: /movie/now_playing
• Status: 200
• Body Type: JSON

2. Copy the JSON response from the actual TMDB endpoint for Now Playing by using tools like Postman. Paste it into the Body section of your new route in Mockoon.

3. Optionally, set a delay (e.g., 5000ms) to simulate loading behavior, especially when testing slow network connections.

4. Confirm that your newly created mock endpoint is working by visiting http://localhost:3001/movie/now_playing in your browser.

Handling Multiple Response Statuses for the Same Endpoint

It is often necessary to handle multiple response statuses for a given path and method combination to test different scenarios (data, error, etc)

To add more response statuses for the same endpoint:

1. Click the Add Route Response (+) button in the appropriate route within Mockoon.

2. Select the Response Status Code.

Utilizing Rules for Advanced Control

For endpoints that require different responses based on query parameters, you can use rules. To create a rule:

1. Click on the Add Rule button in the Route settings.

2. Create a condition for the rule, such that Query “page” equals “2”.

3. Adjust the response settings accordingly, such as updating the JSON body. For example, let’s say our TMDB API returns different responses for page=1 and page=2. We can create a rule within the Now Playing route to return different JSON bodies based on the page query parameter.

Simulating Error Statuses using Mockoon

Simulating error statuses can help ensure your application handles errors correctly. To simulate an error status:

1. Choose the endpoint you would like to test, such as the Top Rated endpoint.

2. Set the status code to an HTTP error (e.g. 404, 500).

3. Update the JSON body to provide an appropriate error message.

Testing your app against this error status will help you evaluate how well it handles errors during UI testing.

Using Proxy Mode for Selective Endpoint Mocking

Proxy mode allows you to mock specific endpoints while leaving the rest of the app’s interactions with the original API unaffected.

To enable proxy mode:

1. In the Mockoon environment settings, click on the Proxy mode checkbox.
2. Enter the target URL (e.g., https://api.themoviedb.org/3/).

Using Mockoon CLI

To use Mockoon in Continuous Integration and Continuous Deployment (CI/CD) pipelines, you’ll need to use the Command Line Interface (CLI).

1. Install the Mockoon CLI using the following command:

npm install -g @mockoon/cli

2. Get your JSON file by right-clicking on your environment and then clicking on “Show in folder”. Copy the JSON file to your working directory.

3. Start the Mockoon CLI by running the following command in your terminal:

mockoon-cli start -d ~/mock-tmdb.json -p 3001

You can find the mock-tmdb.json I have used in the GitHub repo.

At this point, your server is started using the CLI, allowing you to automate your UI testing processes in CI/CD pipelines.

Since localhost is started with“http” and not “https”, you need to ensure your Mobile app allows clear text traffic for testing purposes.

For iOS App: https://stackoverflow.com/a/32560433

For Android: https://stackoverflow.com/a/64907472

Also, for Android in the base URL, remember to replace localhost with 10.0.2.2 Learn more.

If you use a different framework, please web search accordingly to allow http domains for testing!

UI Testing with Maestro with Mock API Setup

This Mock setup requires no changes to your UI Testing! Just run your tests like you would normally!

We used Mockoon for Mocking APIs and used Maestro for UI Testing!

Reference

Mockoon: https://mockoon.com/

Maestro: https://maestro.mobile.dev/

Code: https://github.com/thekharche/maestro-mockoon-tmdb