html - Jasmine-Tests - 获取 中的元素( Angular )

Question

我想在 ng-tamplate 中测试 HTML 元素。

<ng-template>
  <button class="create"></button>
</ng-template>

Jasmine 测试:

fixture = TestBed.createComponent(SomeComponent);
const htmlElement: HTMLElement = fixture.nativeElement;
// Does not work:
const p = htmlElement.querySelector('.create');

如何获取 ng-template 中的 html 元素？如果我将按钮放在 ng-template 标签之外，它就可以工作。我认为这与 shadow dom 有关。

版本:Jasmine 2.8.0； Angular 5.2.9

Answer 1

我忘了调用 fixture.detectChanges();。只有当您调用此方法时，组件才会完全渲染到 DOM(包括影子 DOM 元素)中。以下代码有效:

fixture = TestBed.createComponent(SomeComponent);
fixture.detectChanges();
const htmlElement: HTMLElement = fixture.nativeElement;
const p = htmlElement.querySelector('.create');

参见 https://angular.io/guide/testing#detectchanges了解更多详情。