18.0.0 • Published 7 months ago
@yunzhi/ng-mock-api v18.0.0
Yunzhi NgMockApi
An embedded mock REST service for Angular development and Unit test.
install
$ npm install -s @yunzhi/ng-mock-api
Quick Start
- Create a mock api file, for example:
user.api
import {MockApiInterface, ApiInjector, RequestOptions} from '@yunzhi/ng-mock-api'
import {Observable} from 'rxjs';
import {HttpErrorResponse, HttpResponse} from '@angular/common/http';
export class UserApi implements MockApiInterface {
/**
* implement getInjectors() function and return ApiInjector Array.
*/
getInjectors(): ApiInjector[] {
return [
new ApiInjector(
{
method: 'DELETE',
url: 'user/:id',
description: 'delete user with id',
// when result type is HttpResponse, the NgMockApi will return the HttpResponse immediate.
result: new HttpResponse<void>()
}
),
new ApiInjector({
method: 'GET',
url: `user/getCurrentUsername`,
// when result type is string | number | Object | ... the NgMockApi will return a HttpResponse which contains the result with a 0.5S - 3.0S's delay.
result: 'mock user'
}),
new ApiInjector({
method: 'GET',
url: 'user/login',
description: '用户登录',
// the result type is also can be function
result: () => {
// can return an Observable<HttpErrorResponse> in the function.
return new Observable<HttpErrorResponse>(ob => {
ob.error(new HttpErrorResponse({status: 401}));
ob.complete();
});
}
}),
new ApiInjector (
{
method: 'PUT',
url: `user/:id`,
// can set params with result's function, the first params type is `{[key: string]: string}`, and the second is RequestOptions.
result: (params: {id: string}, options: RequestOptions) => {
const id = +params.id; // get path param with params.
const body = options.body; // get request body with options.
body.id = id;
return new HttpResponse<any>({body});
// can return body directly also.
// return body;
}
})
];
}
}
Development
- Set UserApi to MockApiInterceptor.forRoot function, and set HTTP_INTERCEPTORS
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideHttpClient(
withInterceptorsFromDi()
),
{
provide: HTTP_INTERCEPTORS, useClass: MockApiInterceptor.forRoot([UserApi]), multi: true
}
]
};
Filter request example:
useClass: MockApiInterceptor.forRoot([UserApi], {
// only enable Interceptor when url not startsWith 'assets'
filter: (req: HttpRequest<any>) => !req.url.startsWith('assets')
})
- Use HttpClient for http request:
// get current user name
this.httpClient.get<string>(`user/getCurrentUsername`)
.subscribe(user => {
console.log(user);
});
unit test
https://www.npmjs.com/package/@yunzhi/ng-mock-api-testing
dev
nvm use 20
ng build mock-api
cd ../../dist/mock-api
npm login
npm publish