Angular如何对包含了HTTP请求的服务类进行单元测试
本文使用到的所有代码在Github这个文件夹下面:
https://github.com/wangzixi-diablo/angular-sandbox/blob/master/src/app/ngrxdemo/service/unittest-study
服务类实现:
import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest } from '@angular/common/http';
@Injectable()
export class DataService {
url = 'https://jsonplaceholder.typicode.com/users';
constructor(private http: HttpClient) {}
getData() {
const req = new HttpRequest('GET', this.url, {
reportProgress: true
});
return this.http.request(req);
}
}
首先,从@angular/common/http里倒入HttpClientTestingModule,注入到TestBed的TestingModule中去。
将HttpTestingController注入单元测试代码里,用变量httpMock表示:
粉红色小括号包含起的这段代码内,调用了dataService的getData方法。
HttpTestingController.expectOne:
期望一个基于传入参数url的HTTP请求已经被发起,并且返回其mock.
我们可以基于mockReq进行各种断言处理。
expect(mockReq.cancelled).toBeFalsy();
确认该请求没有被cancel
expect(mockReq.request.responseType).toEqual(‘json’);
确保响应类型是JSON
mockReq.flush(mockUsers)
使用flush传入的参数作为HTTP请求的返回参数:
flush执行完之后,才会触发getData返回的Observable的subscribe回调函数。
运行时时序:
(1) 先执行service.getData
真的调用到service的getData代码里了:
此时event.type = 0:
(2) 拿到HTTP请求的mock对象:
准备flush:
一旦flush之后,直接getData返回的Observable的subscribe回调函数会被触发,event.body就为flush传入的mockUsers.
更多Jerry的原创文章,尽在:“汪子熙”:
相关文章
- node、npm 、package.json、Angular Cli、webpack之间的关系(Windows环境下)
- Angular HTTPClient 发送请求的触发方式讨论
- 前端人员该怎么面试 经典Angular面试题有哪些[通俗易懂]
- 关于 Angular 应用的入口
- Angular 项目路径添加指定的访问前缀
- Angular SSR 应用启动时的一些保护措施
- Angular 应用里 ng-package.json 文件的作用是什么?
- Angular 依赖注入错误消息:ERROR Error NullInjectorError No provider for XX
- 备受 Vue、Angular 和 React 青睐的 Signals 演进史
- 服务Linux 下监控HTTP服务的方法(linux监控http)
- 基于豆瓣API+Angular开发的webApp