使用 Angular 7 进行单元测试答案

【问题标题】：Unit Testing with Angular 7使用 Angular 7 进行单元测试
【发布时间】：2019-02-14 00:40:25
【问题描述】：

我正在尝试为这个 Angular 脚本编写单元测试：

export class DataService {
  private csrfToken: string = '';

  private isContentShow: BehaviorSubject<boolean> = new BehaviorSubject(true);

  constructor(private http: HttpClient, private cookieService: CookieService) {
    this.token = this.cookieService.get('token');
  }

  public createData(data: Data) {
    try {
       this.http.post(  url,
                        data,
                        {
                          headers: new HttpHeaders({
                              'Content-Type':  'application/json',
                              'Authorization': this.token
                          })
                        })
      .subscribe(
        data => {
                this.isContentShow.next(true);
                },
        err => {
        this.showError();
        },
        () => console.log('Request Complete')
      );
      return true;
    } catch {
      this.showError();
      }
    }

  public getIsContentShow(): Observable<boolean> {
    return this.isContentShow.asObservable();
  } 
}

到目前为止我进行的测试以及它按预期运行。

 it('#getIsContentShow should return value from observable',
    (done: DoneFn) => {
    service.getIsContentShow().subscribe(value => {
      expect(value).toBe(true);
      done();
    });
  });

但是我正在尝试为createData() 函数编写测试

我可以使用HttpClientTestingModule 模拟HttpClient，但是我不知道如何处理CookieService 和令牌？

谢谢

【问题讨论】：

您需要在创建用于测试的服务之前设置您的模拟，因为您在构造函数中调用了 cookieService.get()。然后，当服务创建时，它将命中模拟并返回您设置的值以设置token。
@dmcgrandle 你认为我应该将讲师内部的 this.token 移动到 createData() 函数吗？不确定哪种方式更好。谢谢
我不知道您的应用程序的要求，所以我无法回答哪种方式“更好”。它可能使测试更直接。如果您愿意接受代码重写建议，那么我建议在服务中进行订阅不是最佳实践 - 尝试将其推送到组件或更好地推送到模板。

标签： javascript angular unit-testing angular7

【解决方案1】：

您可以使用间谍来监视 cookieService 的 get 方法。这样，您可以编写单元测试来测试您所说的 cookieService 可以提供的返回组合。

This link 说你可以窥探方法的原型，以便在构造函数中按照你喜欢的方式处理它。

it(
  "should call #getGeneralStats in the constructor",
  inject(
    [CookieService, HttpClient],
    (cookieService: CookieService, http: HttpClient) => {
      let mySpy = spyOn(cookieService, 'get').and.returnValue(<your value>);

      dataService = new DataService(http, cookieService);

      expect(mySpy).toHaveBeenCalled();
    }
  )
);

对您而言，这可能取决于您编写测试的方式。该示例显示了像new ServiceName 一样实例化的服务，但也可以使用依赖注入来获取服务。如果您将 DI 用于您正在测试的服务，我将不得不研究更多如何做到这一点（如果您知道如何做到这一点，其他人请随时添加您的答案）！

【讨论】：