Question

我有一个我正在测试的组件，它有很多子组件。在我的测试中，我想获得对这些子组件的一些对象的引用，我可以检查它们的属性，看它们是否正常运行并交互式地导致它们发生变化。（例如：检查段按钮组件处于什么状态或手动强制它进入不同的状态）

我一直在查看角度的测试文档，但我看不到这样做的方法。我原本以为我可以对灯具debugElement进行查询，找到子组件的调试元素，然后访问它componentInstance，但这似乎总是如此null。

例如，查看文档：{{3}}

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

我想要一种方法来获取DashboardHeroComponent内TestHostComponent的引用。有谁知道怎么做？

Answer 1

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

的原因

要让componentInstance使用适当的选择器（在这种情况下是标记名称 - 您可以在selector注释的属性@Component中找到它：

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

或使用By.directive

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

测试：如何查找子组件

1 个答案: