Angular 2.0.0-rc.1：如何测试视图或内容上的元素（例如@ViewChildren、@ContentChildren）答案

【问题标题】：Angular 2.0.0-rc.1: How to test elements on the view or content (e.g. @ViewChildren, @ContentChildren)Angular 2.0.0-rc.1：如何测试视图或内容上的元素（例如@ViewChildren、@ContentChildren）
【发布时间】：2023-03-10 22:09:01
【问题描述】：

我有一个组件从服务中获取数据，该服务在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 失败。如何测试在 View 或 Content 初始化后创建的东西？

【问题讨论】：

标签： angular angular2-testing

【解决方案1】：

注入组件只会创建组件类的实例，但不会调用生命周期回调，也不会创建视图。

您需要改用TestComponentBuilder：

describe('ComponentToTest', () => {
  let component: ComponentToTest;
  beforeEach(async(inject([TestComponentBuilder], (tcb: TestComponentBuilder) => {
    tcb.createAsync(ComponentToTest).then((fixture: ComponentFixture<ComponentToTest>) => {
      fixture.detectChanges();
      component = fixture.componentInstance;
      // component.ngOnInit(); // called by `fixture.detectChanges()`
    });
  })));

  it('should initialise children', () => {
    expect(component.children).toBeDefined();
  });
});

为了确保在所有异步执行完成之前测试不会结束，还可以使用 async()，就像 Thierry 已经提到的那样。

【讨论】：

【解决方案2】：

我会利用async 函数：

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

来自文档：

在异步测试区域中包装测试函数。当该区域内的所有异步调用都完成时，测试将自动完成。可用于包装注入调用

【讨论】：