Latest news about Bitcoin and all cryptocurrencies. Your daily crypto news habit.
Do you ever hear any of these statements at your workplace:
- I can’t. The API is down again.
- I’m blocked. I’m need updates to the API before I can continue.
- I wasn’t able to get much done. The VPN was down, and I couldn’t connect to the API.
- I spent half my day getting the APP into one, specific state over and over again. Shoot me.
Dependence on a functioning API is a drag. It slows development down. It forces you work where you have a network connection. It can make getting your app into a specific state really difficult. And, if the API goes down, you’re hosed.
You can solve all these problems by using a Mock API. A Mock API is a utility that intercepts XHR and/or fetch requests, and returns mock data. By introducing a Mock API to your application you will:
- never be blocked by a broken or unavailable APIÂ again.
- never need to wait for feature updates to your API before beginning development. You can work in parallel with the API team, once you agree on an API contract with them.
- make it easy for you to simulate specific states in your application.
Sound awesome? It is!
A Mock API in Four Steps
Setting up a Mock API is super easy. Here’s how you do it:
- Install a fetch and/or XHR mock utility — what you install will depend on the needs of your app.
- Create mock data.
- Configure APIÂ Mocking.
- Configure your application to turn API mocking on and off.
One bit of terminology: Fixture. A fixture is a tool that allows you to work with sample data. We’ll use the term fixtures to refer to both the Mock API, and the data it returns.
The Sample App
In this tutorial, we’ll take an existing application — Contact Manager — and add fixtures to mock its API. Contact Manager only uses fetch.. We’ll use fetchMock, a utility for mocking http requests made using fetch.
Contact Manager uses the users resource of the publicly available JSONPlaceholder API. You can see https://jsonplaceholder.typicode.com/ for more details.
You can clone the app from here: https://github.com/joe-crick/contact-manager. Once you’ve cloned it, download the dependencies by running:
yarn or npm i
Installation
Installation of fetchMock is standard:yarn add fetchMock -D or npm i fetchMock -D
Note: The -D flag saves the module as a devDependency.
Create Mock Data
Your mock data must match the data definition for results returned from your API. Contact Manager utilizes one resource — users. The users resource returns an array of user objects.
First, we’ll create a folder called fixtures to hold both the fixture data and the API mocks. Inside that folder, we’ll create a file called users.js. users.js will contain a small set of user data that matches the form of the data defined by the users re
Disclaimer
The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.