关于angular:Angular如何对包含了HTTP请求的服务类进行单元测试

本文应用到的所有代码在 Github 这个文件夹上面：
https://github.com/wangzixi-d…

服务类实现：

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 的原创文章，尽在：” 汪子熙 ”: