Jasmine-Tests - 获取<ng-template>中的元素（Angular）

Question

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

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

茉莉花测试：

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

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

版本：Jasmine 2.8.0; Angular 5.2.9

Answer 1

我忘了拨打fixture.detectChanges();。只有在调用此方法时，组件才会完全呈现到DOM中（包括shadow-DOM元素）。以下代码有效：

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

有关详细信息，请参阅https://angular.io/guide/testing#detectchanges。