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

【问题标题】：Angular 2 mock Http get() to return local json fileAngular 2 mock Http get() 返回本地 json 文件
【发布时间】：2016-09-28 08:10:16
【问题描述】：

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

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

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

【问题讨论】：

不知道为什么你认为配置Backend 是晦涩难懂的。 DI 是 Angular2 的主要和基本构建块，这正是 DI 的用例。 MockBackend, provide(XHRBackend, {useExisting: MockBackend}) 有什么复杂之处。它简单明了。
@GünterZöchbauer 软件工程师有很多种。仅仅因为前 50% 的人容易做某事，但后 50 人的事情并不容易。如果没有真正站在他们的立场上，就对他人的 POV 如此不屑一顾，这绝不是一件好事。
@KaMok 我的评论并非轻视。如果有人想要解决方案，他需要提供有关问题所在的信息。这是我的评论。 “为 Http 配置后端对象的文档对于这样一个简单的任务来说似乎有些晦涩和过于复杂。”只是无用的咆哮。如果他提供了一个链接或发布了他发现过于复杂的代码，那么就有一些事情可以讨论，但事实上，这并不是一个真正的问题。我只是想了解更多信息。

标签： javascript angularjs json rest angular

【解决方案1】：

您需要用MockBackend 覆盖XhrBackend 提供程序。然后，您需要创建另一个注入器才能执行真正的 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
          })));
      });
    });
}));

【讨论】：

经过研究，我发现答案要简单得多：只需使用本地 json 文件 (app/data.json) 的位置作为 url 而不是 http 地址
太棒了！有兴趣了解更多详细信息；-) 请求是如何实际执行的？
@ThierryTemplier 请求的执行与来自真实服务器的任何 GET 请求一样，但对于更细微的过程，例如测试不成功的请求或 PUT 请求的行为将需要 MockBackend。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

您可以使用通过核心 TestBed 提供的 HttpTestingController，因为对我来说感觉更直观（当然，每个人都有自己的感觉）。未经测试的sn-p：

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);

    }));
  });
}

【讨论】：