Angular 2 mock Http get（）返回本地json文件

Question

在Angular 2中模拟Http get()返回的响应的最简单方法是什么？

我在我的工作目录中有本地data.json文件，我希望get()返回包含该数据作为有效负载的响应，模拟其余的api。

用于为Backend配置Http对象的文档对于这样一个简单的任务来说似乎有点模糊和过于复杂。

Answer 1

您需要使用XhrBackend覆盖MockBackend提供程序。然后，您需要创建另一个注入器才能执行真正的HTTP请求。

这是一个示例：

beforeEachProviders(() => {
  return [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: MockBackend }),
    SomeHttpService
  ];
});

it('Should something', inject([XHRBackend, SomeHttpService], (mockBackend, httpService) => {
  mockBackend.connections.subscribe(
    (connection: MockConnection) => {
      var injector = ReflectiveInjector.resolveAndCreate([
        HTTP_PROVIDERS
      ]);
      var http = injector.get(Http);
      http.get('data.json').map(res => res.json()).subscribe(data) => {
        connection.mockRespond(new Response(
          new ResponseOptions({
            body: data
          })));
      });
    });
}));

Answer 2

顺便说一句，你需要模拟XHRBackend并使用createDb方法在类中提供模拟数据。 createDb方法返回模拟的JSON对象。要加载该数据，请向URL提供正确的http.get，例如，如果JSON对象包含在变量mockedObject中，则URL应为"app\mockedObject"。

你可以在这里阅读更多细节：https://angular.io/docs/ts/latest/guide/server-communication.html.

Answer 3

您可以使用通过核心TestBed提供的HttpTestingController对我来说感觉更直观（当然，每个都是他们自己的）。未经测试的片段：

import { TestBed, async } from '@angular/core/testing';
import { HttpTestingController } from '@angular/common/http/testing';

import { MyApiService } from './my-api.service';

export function main() {
  describe('Test set', () => {
    let httpMock: HttpTestingController;

    beforeEach(() => {

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

      httpMock = TestBed.get(HttpTestingController);
    });

    it('should call get', async(() => {

      const data: any = {mydata: 'test'};
      let actualResponse: any = null;
      MyApiService.get().subscribe((response: any) => {
        actualResponse = response;
      });

      httpMock.expectOne('localhost:5555/my-path').flush(data);
      expect(actualResponse).toEqual(data);

    }));
  });
}