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 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.
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.
All methods return an instance of 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:
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.
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.
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.
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
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:
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:
Return back to api.ts
file, import your data and set them as class properties so they can be accessible within the class:
Inside the registerHandlers()
method, define your endpoints and callbacks to provide data:
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:
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.
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.