Angular 组件测试 - 按组件查询

Question

测试 @Component 的 DOM 表示时，您可以通过其 fixture

查询其嵌套元素

fixture.debugElement.queryAll(By.css('.example'));

您还可以按 @Directive

进行筛选

fixture.debugElement.queryAll(By.directive(RouterLinkDirectiveStub));

---

现在，假设你有一个内部 @Component NzButtonComponent 像这样使用

<button nz-button>Example</button>

如何精确查询？没有By.component(...).

Answer 1

如果您使用 nativeElement 而不是 debugElement，则可以通过 CSS 属性 select:

fixture.debugElement.nativeElement.querySelector('[nz-button]') as HTMLButtonElement;

对于多个元素，可以使用 querySelectorAll 方法。

Answer 2

查询类指令

也许你可以使用

fixture.debugElement.query(By.directive(AnyComponent)) 它 returns DebugElement 该组件

之所以可行，是因为在 Angular 中，组件在指令

之后继承