2

上に子を作成するサービスからデータを取得するコンポーネントがありますView。これらの子は、 が作成されたときにのみ使用できますView。以下の私の例では、Viewはテストに到達する前に作成されていないため、テスト 2 は失敗します。

成分:

@Component({
  selector: 'component-to-test',
  providers: [Service],
  directives: [NgFor, ChildComponent],
  template: `
    <child [data]="childData" *ngFor="let childData of data"></child>
})

export class ComponentToTest implements OnInit {
  @ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
  private data: any;

  public ngOnInit() {
    this.getData();
  }

  private getData() {
    // async fetch data from a service
  }
}

仕様:

describe('ComponentToTest', () => {
  beforeEach(inject([ComponentToTest], (component: ComponentToTest) => {
    component.ngOnInit();
  }));


  it('should initialise data', inject([ComponentToTest], (component: ComponentToTest, service: Service) => {
    return service.getData().toPromise().then(() => {
      expect(component.data).toBeDefined();
    })
  }));

  it('should initialise children', inject([ComponentToTest], (component: ComponentToTest, service: Service) => {
    return service.getData().toPromise().then(() => {
      expect(component.children).toBeDefined();
    })
  }));
});

テスト 1 は成功し、テスト 2 は失敗します。VieworContentが初期化された後に作成されたものをどのようにテストしますか?

4

2 に答える 2

0

私は関数を活用しasyncます:

it('should initialise children', async(inject([ComponentToTest], (component: ComponentToTest, service: Service) => {
  return service.getData().toPromise().then(() => {
    expect(component.children).toBeDefined();
  });
})));

ドキュメントから:

テスト関数を非同期テスト ゾーンにラップします。このゾーン内のすべての非同期呼び出しが完了すると、テストは自動的に完了します。注入呼び出しをラップするために使用できます

于 2016-06-03T12:41:39.213 に答える