Angular 2 http存根

时间:2017-08-07 18:09:32

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

Angular Experts,

我正在测试我的应用程序,我正在尝试一点。

具体来说,我想通过模拟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{}

哪里出错?

1 个答案:

答案 0 :(得分:0)

我通过使用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