Charles Tips and Tricks for iOS Devs: Mocking
Note: Almost everything in this post is usable for any platform iOS, Android, Web or whichever technology you are working with.
In the first post Charles: Tips and Tricks for iOS Devs (Vol. 1) I made a friendly step by step guide on how to configure and get started with Charles. As I mention in there post Charles opens a door to another world, from visualizing simple request to mocking data on the fly to fake an unexisting endpoint. In this post I will show you how to use Charles to mock data from an existing or non-existing endpoint.
Rewrites
Let’s start with a simple trick. I want to change the Explore section in Meetups App and change my location using Charles to see how it looks. As an example I´m going to change some parameters in the endpoint to fake my location in Japan.
For the section Explore, they use a endpoint call api.meetup.com/self/home we can add some parameters are related to the location, we ara going to changing the latitude and longitude and specify which city we want to explore.
Charles enables us to manipulate any data in a HTTP transaction with the Rewrite tool, located in Tools > Rewrite. This tool enable us to change different parts of the request before it is executed or even manipulate the response. Make sure to check the Enable Rewrite indicator.
For this example we want to manipulate the latitude and longitude parameters, so we need to add a new rewrite item. We are going to call it: Meetup home location mock.
The location refers to the URL you want to mock. Sice we want to make a reusable Mock for multiple locations, let’s specify https://api.meetup.com/self/home as our URL. It’s faster if you just paste the full url in the host file, Charles automatically will parse the URL and fill for you other fields.
Let’s continue to add some rules for rewriting the location parameters. Add a new rule and select what you whant to change in the Type dropdown. For this example use Modify Query Param. Since we just want to manipulate the request select Request in the Where section. In the Match section specify which parameter are you’re looking for and for what value you want to change it in the Replace section. Considering that 139.77 and 35.67 are the longitude and latitude for Tokyo the rules look like this.
Before we test make sure you press Apply.
This is our rewrite in action. I recommend you take the time to mess around with more locations or different url parameters to see how the app handles different responses.
Manipulate response body
As you can see in the Rewrite Rules window, we have a lot of options to manipulate data. Often in my job I need to test some behavior that just shows up with an specific user or data that the server doesn’t return usually, like some state or an error message. So let’ use Charles to manipulate the Category section of the Meetup App by mocking a brand new Category.
I noticed that the home endpoint responds with a list of categories which conform the following structure:
{
“id”: 242,
“shortname”: “outdoors-adventure”,
“name”: “Outdoors & Adventure”,
“sort_name”: “Outdoors & Adventure”,
“photo”: {
“id”: 450131943,
“highres_link”: “https://secure.meetupstatic.com/photos/event/2/e/a/7/highres_450131943.jpeg",
“photo_link”: “https://secure.meetupstatic.com/photos/event/2/e/a/7/600_450131943.jpeg",
“thumb_link”: “https://secure.meetupstatic.com/photos/event/2/e/a/7/thumb_450131943.jpeg",
“type”: “event”,
“base_url”: “https://secure.meetupstatic.com"
}We can write manually our own model and add it to the list. Just add a new rewrite item, add the same location as in the last example and finally add a new Rewrite Rule. This time make sure to manipulate the Body in the Response and then, in the Replace section paste the new response. As an example I added this new item to the current response:
{
“id”: 12345678,
“shortname”: “mock-element”,
“name”: “Mock Category”,
“sort_name”: “Mock Category”,
“photo”: {
“id”: 450131943,
“highres_link”: “https://secure.meetupstatic.com/photos/event/2/e/a/7/highres_450131943.jpeg",
“photo_link”: “https://secure.meetupstatic.com/photos/event/2/e/a/7/600_450131943.jpeg",
“thumb_link”: “https://secure.meetupstatic.com/photos/event/2/e/a/7/thumb_450131943.jpeg",
“type”: “event”,
“base_url”: “https://secure.meetupstatic.com"
},
“category_ids”: [3, 23]
}
Share and import mocks
Sometimes other team members needs to mock exactly the same data that you mocked, with Charles you can share the rewrites that you made or import rewrites from other people. Just select the mock that you want to share and select Export, it will generate a XML file. If you need to import, ask for the XML file and press Import, select the correct file and that’s all.
This are the mocks that we made in the previous example: https://github.com/migueloruiz/Charles-Tips-and-Tricks/blob/master/Charles%20Tips%20and%20triks%20Vol%202.xml
Consume local files as an endpoint
If you are working with large files and mocking different arguments in the JSON, using rewrite tool could get pretty messy and slow. Thats where Map Local comes in, this tool helps us to mock a service with a local file.
For example, we are going to manipulate again the Explore screen using the Map Local tool. Just open Tools > Map Local, make sure Enable Map Local is checked.
Press Add and configure the URL, we are going to mock again https://api.meetup.com/self/home but this time in the section Map To select a local path to the file you want to map.
You can copy the content of a previous call and generate a local .json or use this file: https://github.com/migueloruiz/Charles-Tips-and-Tricks/blob/master/Home.json
If you combine this tool with some text editor, the proces of changing data is as fast and easy as you can see.
Rewrite vs Map Local
This tools have a lot in common and work perfectly with simple mocks but with more complex mocks consider the following:
Rewrite tool provides a granular way to manipulate all kind of request data (URL, Path, HTTP Code, Header, Body, etc). It’s perfect when you need a little changes but with a large amount of data it can be a little bit messy and slow. So I recommend to split all data changes in different rules.
Map Local tool can’t manipulate data in an specific way as Rewrite tool. Also consider that this method always is going to mock a 200 HTTP status so you can’t mock errors. But it’s perfect in cases where you are developing a new feature and the endpoint that you need to consume isn’t ready. So this tool helps you to fake a server with a few clicks.
Conclusion
As we explored in this post, Charles is an excellent tool not just for debugging, it’s also an excellent tool for smoke testing and speed up our develop time.
As a good practice, I like to have a shared folder or repo with my team (also can be shared with Android and Web teams) with all the mocks we made. It helps us to test different cases in seconds and keeps and extended pseudo-documentations of how the endpoints works.
In the next post we are going to talk about Networking and show how to use Charles to test your app in different network conditions and make us aware of possible pain point in our apps.
