Angular 2 mock Http get()返回本地json文件

时间:2016-05-30 13:14:40

标签: javascript angularjs json rest angular

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

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

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

3 个答案:

答案 0 :(得分:2)

您需要使用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
          })));
      });
    });
}));

答案 1 :(得分:1)

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

您可以在此处阅读更多详细信息:https://angular.io/docs/ts/latest/guide/server-communication.html.

答案 2 :(得分:0)

你可以使用通过核心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);

    }));
  });
}