乐趣区

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

退出移动版