Angular2 http调用使测试执行两次

Question

我有一个带有简单组件的 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)：执行 0 of 6 SUCCESS (0 secs / 0 secs)

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

Answer 1

我认为您的问题来自 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。