Angular 2 个 http 存根

Question

Angular 专家，

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

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

Angular 2: verson 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{}

哪里错了？

Answer 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

Angular 2 个 http 存根

Angular 2 http stub

unit-testing

karma-jasmine

angular2-services

angular