Angular 5单元测试http响应

Question

我正在尝试对我的http.get / post / etc响应进行单元测试。

我发现这个教程非常有用：https://medium.com/spektrakel-blog/angular-testing-snippets-httpclient-d1dc2f035eb8

通过并遵循这一点，我已经配置了我的单元测试，并且我能够使一切正常工作，但是我有一个与教程不一致的部分......

在本教程中，它显示了测试服务登录功能，如下所示：

 it(`should emit 'true' for 200 Ok`, async(inject([HttpClientFeatureService, HttpTestingController],
    (service: HttpClientFeatureService, backend: HttpTestingController) => {
      service.login('foo', 'bar').subscribe((next) => {
        expect(next).toBeTruthy();
      });

      backend.expectOne('auth/login').flush(null, { status: 200, statusText: 'Ok' });
  })));

这是正在测试的服务的实际方法：

login(user: string, password: string): Observable<boolean> {
    const body = new HttpParams()
      .set(`user`, user)
      .set(`password`, password);
    const headers = new HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded' });

    return this.http.post(`auth/login`, body.toString(), { headers, observe: 'response' })
      .map((res: HttpResponse<Object>) => res.ok)
      .catch((err: any) => Observable.of(false));
  }

这是我的登录功能：

login(username: string, password: string): Observable<any> {
    this.loggingService.log('LoginService | login | username: ' + username + '; password: xxxxx');

    return this.http.post(this.loginUrl, { username: username, password: password })
        .map((response: any) => {
            console.log('response: ' + JSON.stringify(response));

            if (response && response.length > 0) {
                return response;
            } else {
                return this.parseErrorResponse(response);
            }
        });
}

这是我的单元测试：

it('login should return a valid JWT', async(inject([LoginService, HttpTestingController], (service: LoginService, backend: HttpTestingController) => {
    service.login('user', 'password').subscribe((next) => {
        expect(next).toEqual('asdfasdfasdf');
    });

    backend.expectOne(environment.authenticationServiceBaseUrl + 'api/login')
        .flush('asdfasdfasdf', { status: 200, statusText: 'Ok' });
})));

您会注意到这里的区别在于地图响应部分。我的版本只是从单元测试的http.post调用中获取一个字符串，而示例显示它正在返回一个HttpResponse对象，并且只是检查statusText属性是否等于'Ok'。

为什么我的版本只返回字符串，而示例版本返回实际的HttpResponse（包括status和statusText）？我想在这里学习教程......

该示例显示它通过flush函数调用在响应体中返回null，而我必须在其中添加我的虚拟JWT值以便让我的测试通过。即使我指定null像测试一样，那么我在单元测试中得到的响应是null。

我在哪里错了？

Answer 1

本教程使用observe: 'response'，这意味着返回的observable发出的事件是响应，而不仅仅是正文。

这在the http guide中有所涉及。