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.

传统的SAP Commerce Cloud数据类型扩展工具，需要首先编辑items.xml, 增添新属性，然后重新build，花费的时间较长。而如今在Backoffice运行时可以直接给一个类型增添新属性了，步骤如下：

假设我们想在CustomerReview这个类型上新增一个名为processed的属性，类型为布尔值：

登录Backoffice：

进入Systems菜单，选择Types：

找到CustomerReview类型：

点击上图的"Create new Attribute":

Qualifier即这个新建属性的名称，取名为processed:

保存，创建完毕。