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