测试：如何查找子组件的组件实例

Question

我正在测试一个包含大量子组件的组件。在我的测试中，我想获得对其中一些子组件的对象的引用，以便我可以检查它们的属性以查看它们的行为是否正确并以交互方式使它们发生变化。（例如：检查分段按钮组件处于什么状态或手动强制其进入不同状态）

我一直在查看 angular 的测试文档，但我找不到执行此操作的方法。我原以为也许我可以查询夹具的 debugElement 以找到子组件的调试元素，然后访问它的 componentInstance，但似乎总是 null.

例如查看文档：https://angular.io/docs/ts/latest/guide/testing.html#!#component-inside-test-host

beforeEach( async(() => {
  TestBed.configureTestingModule({
   declarations: [ DashboardHeroComponent, TestHostComponent ], //     declare both
 }).compileComponents();
}));

beforeEach(() => {
  // create TestHostComponent instead of DashboardHeroComponent
  fixture  = TestBed.createComponent(TestHostComponent);
  testHost = fixture.componentInstance;
  heroEl   = fixture.debugElement.query(By.css('.hero')); // find hero
  fixture.detectChanges(); // trigger initial data binding
});

我想要一种方法来获取对 TestHostComponent 中 DashboardHeroComponent 的引用。有人知道怎么做吗？

Answer 1

Class .hero 不是在组件上设置的，而是在组件视图的内部 div 上设置的。这就是为什么它没有附加 componentInstance

要获得 componentInstance 使用适当的选择器（在本例中为标记名称 - 您可以在 @Component 注释的属性 selector 中找到它）：

heroEl = fixture.debugElement.query(By.css('dashboard-hero')); // find hero

或使用By.directive

heroEl = fixture.debugElement.query(By.directive(DashboardHeroComponent));

测试：如何查找子组件的组件实例

Testing: How to lookup component instance for sub-component

angular2-testing

angular