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.config.ts
file, provide 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.