Mock API

MockAPI is a helper library developed specifically for Fuse to mock API endpoints and provide data to your app without having to create an actual backend application. This way, you can focus on your frontend app and once you finish with the frontend, you can create your backend application to provide real API endpoints with real data.

This not only makes you progress faster and put together your app very quickly but you will also know exactly what you will be needing from your API.

While MockAPI is not suitable for every use case or for every project, there are some cases that using it would make your life easier. These cases are but not limited to:

MockAPI is NOT a database or a backend replacement! It works on memory. As soon as you reload your app, all the changes you have made using Mock API endpoints will go away and replaced with defaults.

How it works?

MockAPI module provides an HttpInterceptor which intercepts all outgoing http requests to return a mock response based on user provided callback functions. While it intercepts all requests, if the MockAPI module cannot find a callback function for the request type and url, it will let the request to pass through. This way, you can use the MockAPI along with your real API endpoints.

FuseMockApiService

The FuseMockApiService is the core of the MockAPI module. This singleton service is used to register API endpoints and callbacks. This is the only thing you will need to mock API endpoints.

Methods

All methods return an instance of FuseMockApiHandler.

.onGet(url: string, delay?: number): FuseMockApiHandler
Registers a url for GET requests. Delay (milliseconds) can be set to delay the response.
.onPatch(url: string, delay?: number): FuseMockApiHandler
Registers a url for PATCH requests. Delay (milliseconds) can be set to delay the response.
.onPost(url: string, delay?: number): FuseMockApiHandler
Registers a url for POST requests. Delay (milliseconds) can be set to delay the response.
.onPut(url: string, delay?: number): FuseMockApiHandler
Registers a url for PUT requests. Delay (milliseconds) can be set to delay the response.
.onDelete(url: string, delay?: number): FuseMockApiHandler
Registers a url for DELETE requests. Delay (milliseconds) can be set to delay the response.

FuseMockApiHandler

This is the return type of all methods from the service. This class instance is not directly accessible. It can only be accessed through the FuseMockApiService allowing method chaining. It has 2 methods:

.reply(callback: FuseMockApiReplyCallback): void
.replyCount(count: number): void

These methods can be used to register the callback function for the request. The callback has an access to the outgoing HttpRequest which can be used to access anything from the request such as form data and headers.

You can limit the reply by chaining the .replyCount and providing the number of times this request should be handled. After the limit has reached, the request handler will throw an error and won't let the request to pass through. It can be useful for creating one-time-use endpoints to test "Reset Password" links or testing an unreachable API endpoints and etc.

The callbacks must return either an array [number, any | string] or an observable that returns the said array. The number represents the HTTP status code of the response while the any | string represents the actual response.

Basic usage

Step by step guide to start using FuseMockApi

It's pretty easy and straightforward to setup the MockAPI module for mocking API endpoints and their responses. Once you understand the underlying mechanic, you will be able to mock API endpoints in no time.

Please keep in mind that the following step-by-step guide assumes you are doing everything from scratch for the MockAPI like creating directories, adding files, exporting via barrels etc. Majority of these already setup in both Demo and Starter apps for you so it's a bit easier to start working with the MockAPI.

1. Prepare the files

Choose a location to store your mocks. By default the Demo app uses src/app/mock-api/ directory. You can use the same directory or choose another one. For this guide, we will assume you are going to use the default directory.

It's important to keep all mock related files in the same directory because we will create a barrel file that exports all the mock classes and provide that to the FuseMockApiModule so it can register and use them.

After choosing the location, create a sub-directory relevant to your endpoint and create 2 files in it; one for the mock class and one for the data json:

src/app/mock-api/
 └─ navigation/
    └─ data.ts
    └─ api.ts

2. Create the class

Edit the api.ts file and inside create an injectable class.

The FuseMockApi requires one public method called registerHandlers() and it must be implemented. It also needs to be called within the constructor of your mock class:

3. Create the data

Edit the data.ts file and add your default data as an exported const value. You can have more than one const per file, just remember to export all of them:

3. Import the data into the Mock class

Return back to api.ts file, import your data and set them as class properties so they can be accessible within the class:

4. Register the endpoints and callbacks

Inside the registerHandlers() method, define your endpoints and callbacks to provide data:

5. Create a barrel file and import FuseMockApiModule

Navigate back to the root of your mock data directory, by default it's the src/app/mock-api/ directory, and create an index.ts file.

src/app/mock-api/
 └─ auth/
 └─ navigation/
 └─ user/
 └─ index.ts

Edit the index.ts file to create a barrel from the services. Only import the services and not the data files, create an array from them and then export that array:

After that, head to the app.module.ts file, import the FuseMockApiModule and supply the array of services you have exported:

6. (Optional) Set a global delay

You can also set a global delay (ms) to all of your Mock API endpoints to simulate a slow connection, a server that's under attack or failing, some kind of service interruption and etc.

7. Consume the mock API endpoints

Now you can consume your mock API endpoints anywhere from your app using Angular's HttpClient and the MockAPI module will catch the requests. If there is a matching url and a request type, the MockAPI will provide the response from the provided callback. If there isn't one, then the MockAPI will let the request to pass through allowing you to use a real API endpoints along with the mocked ones.