ngx-mock-interceptor
This library is intended for facilitating mocking http request using the Angular HttpClient
and was born out of the repeated creation of similar interceptors in projects where the frontend development was ahead of the backend development. After agreeing a basic API for a backend request the frontend developers can mock the missing requests by simply using json files.
The main intent for this library was to facilitate the quick development of features in the frontend without having to wait for the backend to be completed.
Installation and Setup
To install run:
npm install ngx-mock-interceptor
After installing NgxMockInterceptorModule
should be imported into app.module and a config provided to its forRoot
function.
For the library to work correctly Angular's HttpClientModule
needs to be imported before NgxMockInterceptorModule
.
import { HttpClientModule, HttpParams } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxMockInterceptorModule } from 'ngx-mock-interceptor';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
NgxMockInterceptorModule.forRoot({
requestPaths: [
{
path: 'https://jsonplaceholder.typicode.com/posts/1',
method: 'POST',
mockPath: ' /assets/test.json',
httpParams: new HttpParams({
fromString: 'param1=123',
}),
},
],
enableMocking: true,
}),
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
For the mock interceptor to work the enableMocking
property in the provided config needs to be set to true
. This is to avoid accidental mocking being enable in production environments.
Now you can use the Angular HttpClient
as you normally would and it will load the data from the mocked path.
this.httpClient
.post(
'https://jsonplaceholder.typicode.com/posts/1',
{ body: 'real data ment to be sent to the backend' },
{
params: new HttpParams({ fromString: 'param1=123' }),
}
)
.subscribe((response) => {
// ... do something with the response data from test.json
});
test.json
{
"responseData": "response data example"
}
Configuration
The configuration has the following API:
export interface MockConfig {
// this provides a list of all the requests that should be mocked
requestPaths?: RequestPath[];
// this needs to be set to true for the mocking to be enabled
enableMocking?: boolean;
}
export interface RequestPath {
// corresponds to the HttpRequest.url
path: string;
// the new path to a json file for example
mockPath: string;
// parameters included in the original request
httpParams?: HttpParams;
// method of the original request
method:
| 'DELETE'
| 'GET'
| 'HEAD'
| 'JSONP'
| 'OPTIONS'
| 'POST'
| 'PUT'
| 'PATCH';
}
The request paths provided in the configuration need to exactly match the HttpRequest used by the Angular HttpClient. This means that the url/path, method and HttpParams for both need to be the same as otherwise the request will not be mocked.
Example/Demo
A minimal example can be found under the projects/demo
folder which shows a very basic usage of the library in a
Bugs and Suggestions
If you found a bug or have a suggestion for improvements please open an issue in this GitHub repo.