我有一个Angular2应用程序,它有一个简单的组件

@Component({
  selector: 'Techs',
  template: '',
  providers: [HTTP_PROVIDERS]
})
export class Techs {
  public techs: Tech[];

  constructor(http: Http) {
    http
      .get('src/app/techs/techs.json')
      .map(response => response.json())
      .subscribe(result => this.techs = result);
  }
}

我的测试执行了两次:
chrome 49.0.2623(mac os x 10.11.4):执行6次成功中的0次(0秒/0秒)
log:'测试结束'
Chrome 49.0.2623(Mac OS X 10.11.4):执行6/6成功(0.182秒/0.153秒)
但是,如果删除http调用,则测试只执行一次
Chrome 49.0.2623(Mac OS X 10.11.4):执行6/6成功(0.182秒/0.153秒)
这是我的测试
describe('techs component', () => {
  it('should render 3 elements <tech>', injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    return tcb
      .createAsync(Techs)
      .then(fixture => {
        fixture.componentInstance.techs = [{}, {}, {}];
        fixture.detectChanges();
        const techs = fixture.nativeElement;
        expect(techs.querySelectorAll('tech').length).toBe(3);
      });
  }));
});

最佳答案

我认为您的问题来自http调用的异步方面。我想有两种方法来解决这个问题:
另一种方法是模拟http对象以模拟http调用。这可以使用MockBackend类来完成。
下面是针对XHRBackend类配置它:

beforeEachProviders(() => {
  return [
    HTTP_PROVIDERS,
    provide(XHRBackend, { useClass: MockBackend }),
 ];
});

以及一种在响应中返回所需内容的方法:
it('Should return a list of dogs', inject([XHRBackend, HttpService, Injector], (mockBackend, httpService, injector) => {
  mockBackend.connections.subscribe(
    (connection: MockConnection) => {
      connection.mockRespond(new Response(
        new ResponseOptions({
          body: [ { name: 'test' }, ... ]
      })));
    }
    (...)

也许您可以使用Angular2的假异步支持。这样,你就能够以同步的方式控制异步处理…见https://angular.io/docs/ts/latest/api/testing/fakeAsync-function.html

10-01 17:55
查看更多