Angular 2 http存根答案

【问题标题】：Angular 2 http stubAngular 2 http存根
【发布时间】：2018-01-15 03:06:40
【问题描述】：

角度专家，

我正在对我的应用程序进行单元测试，并且正在做一些试验。

具体来说，我想通过模拟 Http 对象来使用真实的服务对组件进行单元测试。现在我正在尝试自己存根对象，所以我在下面创建了 StubHttp 类。

Angular 2：版本 2.4.7 + Karma，Jasmine。

这是它的简化版：

let mockTest = '{"name":'John', // ...};

export class StubHttp {
  public post(url: string, body: any, options?: RequestOptionsArgs) 
            :Observable<Response> {
    let response = new ResponseOptions({body: JSON.stringify(mockTest)});
    return Observable.of(new Response(response));
  }
}

如果我在控制器中输入日志：

this.UsersService.getAll().subscribe(( data: any ) => {
   console.log('data = ', data);
});

和服务：

getAll( event: LazyLoadEvent) {
    return this.http.post( this.url + this.params, JSON.stringify( this.body ),new RequestOptions({headers: this.header}) )
        .map( response => response.json() )
        .catch( this.handleError );
}

这是输出：

LOG: 'data = ', Promise{}

错在哪里？

【问题讨论】：

在您的 Stub 实现中，我只看到了帖子，但在您为控制器展示的示例中，您调用了一个名为 getAll() 的方法。 getAll() 是执行 HTTP POST 还是 GET？
对不起！帖子已更新。

标签： angular unit-testing karma-jasmine angular2-services

【解决方案1】：

我通过使用 XHRBackend 和 mockBackend 而不是我的 Http Stub 解决了问题。

  it('Should show a list of 10 feed',
    inject([XHRBackend], (mockBackend) => {

      mockBackend.connections.subscribe((connection) => {
        connection.mockRespond(new Response(new ResponseOptions({
          body: {id: 55}
        })));
      });

      // ... 
    }));

https://blog.thoughtram.io/angular/2016/11/28/testing-services-with-http-in-angular-2.html

【讨论】：