Angular 6 单元测试 http 获取请求

Question

我有一个组件，我在一个函数中有一个请求，例如:

getData():Observable<any>{
    return this._http.get('/app/data', {observe: 'response'});
}

它在订阅中返回我一个对象数组，例如:

[{name: 'a'}, {name: 'b'}]

或类似的东西。

我想编写一个测试，确保 getData() 使用正确的 url 调用一次 http GET 并且订阅返回类似数组的东西。

我的代码:

...
    it('getData() should http GET names', () => {
        inject([HttpTestingController], (httpMock: HttpTestingController) => {

          const names = [{name: 'a'}, {name: 'b'}];

          component.getData().subscribe((res) => {
            expect(res).toEqual(names);
          });

          const req = httpMock.expectOne('/app/data');
          expect(req.request.method).toEqual("GET");
          req.flush(names);

          httpMock.verify();
        });
      });
...

我没有通过以下消息进行测试:“预期没有打开的请求，发现 1:GET/app/data”

Answer 1

首先，对于良好实践，您应该将组件与发出请求本身分开并使用服务，因为随着您的应用程序增长以处理 API 请求的服务，您会发现它在较长时间内更清洁。

这是另一种让它与 HttpTestingController 一起工作的方法，因为我不太确定为什么你的 Controller 注入(inject)不起作用。

只需测试服务，或者使用此解决方法在组件测试中使用相同的方法构建组件。

通过将数据注入(inject)组件来从服务中获取数据。

零件:

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private service: TestService)
}

服务:

@Injectable()
export class TestService {

  constructor(private http: HttpClient) { }

  getData(): Observable<any>{
    return this.http.get('/app/data');
  }

}

然后以这种方式测试服务，就像您的组件测试一样，只是使用服务

测试:

describe('TestService', () => {

  let httpMock: HttpTestingController;
  let testService: TestService;

  beforeEach(() => {

    TestBed.configureTestingModule({
        imports: [ HttpClientTestingModule ],
        providers: [ TestService ]
    });

    testService = TestBed.get(TestService);
    httpMock = TestBed.get(HttpTestingController);

  });

  it('getData() should http GET names', () => {

    const names = [{name: 'a'}, {name: 'b'}];

    testService.getData().subscribe((res) => {
      expect(res).toEqual(names);
    });

    const req = httpMock.expectOne('/app/data');
    expect(req.request.method).toEqual("GET");
    req.flush(names);

    httpMock.verify();
  });

});

这是 test在行动