如何在 Angular 2 Karma Jasmine 中使用 httpheaders 为 http 编写单元测试？答案

【问题标题】：How to write unit test for http with httpheaders in Angular 2 Karma Jasmine?如何在 Angular 2 Karma Jasmine 中使用 httpheaders 为 http 编写单元测试？
【发布时间】：2020-02-26 10:37:40
【问题描述】：

我尝试对我的服务进行一些测试。这主要是休息电话。但是我的一些 Rest-calls 有 HttpHeaders。如何进行包含标头参数的测试？

我想对此进行测试：

public getAllNodes(): Observable<any> {
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Content-Type', 'application/json');
    headers = headers.append('Authorization', 'someTokenABC');
    headers = headers.append('subscriptionId', 'aaa111');
    headers = headers.append('organizationId', 'bbb222');
    return this.http.get('https://someUrl/getall', {headers: headers, observe: 'response'})
      .map(response => {
        return response;
      })
      .catch(this.handleError);
  }

这是我目前的测试：

describe('#getAllNodes', () => {
  let injector: TestBed;
  let service: MyService;
  let httpMock: HttpTestingController;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [MyService]
    });
    injector = getTestBed();
    service = injector.get(MyService);
    httpMock = injector.get(HttpTestingController);
  });

  it('should return an Observable<any>', () => {
    var dummyNodes = [{
          "contentId": "111-222-333",
          "title": "some title",
          }];

    service.getAllNodes().subscribe(nodes => {
      expect(nodes.length).toBe(1);
      expect(nodes).toEqual(dummyNodes);
   });

   const req = httpMock.expectOne('https://someUrl/getall');
   expect(req.request.method).toBe("GET");
   req.flush(dummyNodes);
   httpMock.verify();
});
});

就我而言，我收到此错误：应有一个针对条件“匹配 URL：https://someUrl/getall”的匹配请求，但没有找到。

但我想这与httpheader有关。我没有添加这个，因为我不知道如何将它们包含在测试中。

有人知道我该如何解决这个测试吗？

编辑：

或者我可以做这样的事情吗？（nodes 是一个节点数组，在调用 getAllNodes() 时被填满）

describe('#getAllNodes', () => {
  let injector: TestBed;
  let service: MyService;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [MyService]
    });

    injector = getTestBed();
    service = injector.get(MyService);
  });

  it('should have no nodes at startup', () => {
    expect(service.nodes.length).toBe(0);
  })

  it('should have more than 1 node', () => {
    service.getAllNodes();
    expect(service.nodes.length).toBeGreaterThan(0);
  })

});

但在最后一次测试中，它返回 0 次命中。即使 service.getAllNodes() 应该返回多个命中。

【问题讨论】：

你在哪里通过你的测试用例中的httpMock？什么时候调用它的request 方法？我看到您添加了预期的调用，但应该使用哪个服务？
基本上，错误状态：此模拟未按预期进行交互，因此它抛出。但是您想在代码中的哪个位置使用 httpMock？
好吧，我想测试我是否从 getAllNodes() 得到任何响应。显然我在这里做错了/不了解测试过程。

标签： angular unit-testing karma-jasmine

【解决方案1】：

使用 spyon 进行虚假服务电话。还导入运算符。

import { of } from 'rxjs';



describe('#getAllNodes', () => {
it('should return an Observable<any>', () => {
  const dummyNodes = [{
        "contentId": "111-222-333",
        "title": "some title",
        }];
  spyOn(httpMock, 'get').and.returnValue(of(dummyNodes));
  service.getAllNodes().subscribe(nodes => {
    expect(nodes.length).toBe(1);
    expect(nodes).toEqual(dummyNodes);
 });

 expect(httpMock.get).toHaveBeenCalledWith(url, paramsObj);
});

【讨论】：

这不会测试任何东西。它只是设置模拟和测试，这些模拟已按照设置进行交互。

【解决方案2】：

我看到的唯一“问题”是更推荐使用 rxjs `pipe' as ：

    return this.http.get('https://someUrl/getall', { headers: headers, observe: 'response' }).pipe(
      map((response: any) => {
        return response;
      }),
    );

【讨论】：