Using Wiremock with XCUITest to write better functional automated tests.
Going with XCTest as your native tool for automating your UI tests is such a great way to build up a test automation solution and a great way to have both your test engineers and app engineers connected under the same code base and same programming language.
But it came with some challenges, which is a challenge for the nature of UI tests itself and XCUITest being a black box tool.
One of these challenges is the slowness of the tests, of course this could be solved or mitigated with many ways but what we will be talking here is how to mock the network calls our mobile app makes and speed up the ui tests without depending on any issue that come from network or the Backend.
There are many tools for mocking but I will focus on a great tool here which is WireMock
- It is flexible and we can have stubbed files that we can mock network responses with
- it can be used for Android as well so to keep alignment between two platforms
Mobile App: Notes App
I would like having notes app as my example that we want to add the UI tests for. Let’s pretend we have a notes app that could have couple of scenarios and network calls as follows:
- Notes Viewing (ex: list view ) — call to GET all notes
- Notes Management (ex: create, edit, or delete notes) — call to either to CREATE, POST, or DELETE a note
WireMock: Build up the mocking environment
By following the steps in the above link, we can work with Wiremock as a standalone process
2- Build up the mocks
Then we need to decide which API calls we are gonna mock and build up the file structure for Wirmock to be able to mock our network API responses.
- __files folder: Folder that holds all the json stub files that has the responses for each API that will be mocked, Wiremock will map each response to some request with the folders stored in mappings folder
- mappings folder: Folder that contains json files but they are used to create the request and response matching that Wiremock needs so that it mocks the API correctly with specific response that gets called from one of the json files under __files folder
GET all notes:
CREATE a note:
3- Run WireMock and enjoy the magic!
Now will be the time to run our wiremock as a standalone process in your environment and while we are running the UI tests, the magic will happen automatically on a localhost server started by wiremock
This step require that you manage your app to run against localhost not your main domain endpoint while running the ui tests, this could happen by playing with the launch arguments.
That seems magic 🪄 , but?:
This setup for our iOS UI tests are great until there could be a case when you are trying to mock very similar endpoint or even what we have here the same endpoint but with different http method and different mapping file in the same test.
As a solution for this, we could add a mock helper that is responsible on interacting with WireMock API and sending the stub files content only when needed in tests.
1- WireMockHelper
First, we create our stub files only and make sure it is under the UITest target. We create a class that is responsible to encode and decode our data from either request data given during the test and the response stub files
2- Run WireMock server
Now will be the time to run our wiremock as a standalone process, but this time the server is not having any mocked responses, but rather it waits until the test sends the data.
3- POST a request to WireMock
By posting a request to WireMock API, with the required request data, body, and/or headers
http://localhost:9999/__admin/mappings4- Use the new method for interacting with the server
GET all notes:
CREATE a note:
and Voila 🎉
To be honest this was one of the best tools I have been using so far as it is so flexible and it gives me lots of customization to work on different ways to mock our responses. Also it could be used on both Mobile platforms, and also on backend side.
P.S: there is also a great feature by WireMock which is “Stateful Behavior”, please have a look on it as it is so powerful, but it was not the solution I wanted in my case because first it puts some dependency on when to run the tests and also I need these different mappings for same endpoint in different test files.
If you want more tips and tricks for Wiremock + iOS UI Tests, I will add more soon 👀
