Mock API Responses With a Chrome Extension Called OhMyMock
Most websites today retrieve data by calling (REST) APIs. This also means that when Frontend developers are tasked to create new features, they most likely are dependent on those APIs during their work. This is fine and doesn’t have to be a problem, but if the APIs are slow or unstable, it certainly will not boost development.
In this article I’m going to discuss how to take APIs out of the equation with mocking. Not just mocking, but mocking the easy way using a new Chrome extension called “OhMyMock”.
OhMyMock
The cool thing with Chrome extensions is that they can do basically anything within the browser. OhMyMock takes advantage of that and uses the storage and network traffic monitoring features to mock API calls.
So, how does OhMyMock mock APIs? Well thats easy, the first time an API call is made OhMyMock will let the call pass and the API serves the request.
But OhMyMock will cache the response. The next time when that same request occurs OhMyMock will step in and serve it.
OhMyMock Walkthrough
Although the OhMyMock UI is very intuitive I will walk you through it anyway. The first step of course is to install OhMyMock (source) and click the new extension icon you get in your browser
This will trigger the OhMyMock window
Initially this page is empty, but important to note here is the url in the header. The domain name serves as a context to which all the mocks shown here belong. So if you switch to another domain you won’t see the medium.com mocks anymore, but only the ones for that new domain. So let’s see this in action, enable OhMyMock and click around you probably get something like this
At first each newly stored response is disabled, meaning OhMyMock will not use them and mocking will not take place. But if you click that play button at the end of each row, OhMyMock will start mocking that specific request.
It is also possible to create mocks yourself from scratch, which can be handy if the API does not exist yet. This can be done with the plus button in the bottom right corner.
To stop mocking click the stop or delete button.
To view the response details click on the row itself
At the top of this view you see which status codes are available and which one is active. The one with the green border is active and the details for that mock are shown below. So, if the /users API is called OhMyMock will respond with a status code of 200 and its corresponding response and headers. The plus button that follows lets you create new status codes. Each status code has its own response and headers. They can be modified too if you like!
Each mock that OhMyMock serves is created by a piece of javascript which you can modify too if you click on the “Mocking with code” button
In here you can go beyond static mocking and do whatever magic you need to do. You will have access to a couple of objects, one contains all the mock details
- mock.response — response data (string)
- mock.headers — response headers (Record<string, string>)
- mock.delay — delay of the mocked response in milliseconds (number)
- mock.statusCode — status code of the response (number)
For example, mock.response holds the cached response, but if you change it to mock.response = “yolo”, the mocked response will be “yolo”.
An other one is request, it contains information about the request being made
- request.url — url of the request (string)
- request.method — GET, POST, DELETE or UPDATE (string)
- request.body — the request body (unknown)
- request.headers — request headers (Record<string, string>)
If needed you can even make Fetch or XMLHttpRequest in here. But if you do, make sure to return a promise (or use await) which resolves the above mentioned mock object!!
But there is a lot more you can do. You might have noticed the top-left corner menu button. If you click that you see the following menu
- Reset state — Remove all mocks for the current domain or wipe out everything (all domains)
- Explore state — Explore all mocks cross domain. Here you can clone responses from another domain into the current domain. This can be handy, for example, if you have a bug that only occurs in production. Simply cache the production API calls and clone them back into your development domain!
- JSON export — export mocks as json file. Can be handy to backup your mocks or if you need to share something with a colleague at work.
- JSON import — import json mock files
Contribute
Feel free to create a feature request if you think something is missing!! All code is publicly available on GitHub. A good starting point, if you would like to know more, is the demo-test page. That page supports all request types that OhMyMock supports. Note that pages on GitHub do not have a backend so you need to mock here!!
Thats about all I can think of right now. I would love to hear from you about your experience with this tool, so don’t hesitate to place a comment below or send me a PM.
Cheers
