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（包括状态和状态文本）？我想要这里的教程版本...

该示例显示它 returns null 通过 flush 函数调用在响应主体中，而我必须在其中添加虚拟 JWT 值才能进行测试经过。即使我将其指定为 null 就像测试一样，我在单元测试中得到的响应也是 null.

我哪里错了？

Answer 1

本教程使用 observe: 'response'，这意味着返回的可观察对象发出的事件是响应，而不仅仅是主体。

the http guide.

中对此进行了介绍

Angular 5 单元测试 http 响应

Angular 5 unit testing http response

unit-testing

mocking

angular5