如何测试嵌套元素？

Question

我试图测试一个元素是否在HTML中。

我的HTML看起来像这样：

<div class="title-text">
  <h1>
    Event Timeline
  </h1>
</div>

<div class="alert-section" *ngIf="showError">
  <div class="row">
    <div class="col-xs">
      <p>Error</p>
    </div>
  </div>
</div>

<div class="timeline-section" *ngIf="events">                     
  <step-navigation [sequential]="true" activeAccent="accent-0-dark" incompleteAccent="accent-0-dark">
    <p>Test timeline</p>
  </step-navigation>
</div>

我想测试step-navigation元素的存在。我该怎么做呢？我已经尝试了

  it('should have the timeline-section element', () => {
    const timelineSectionDebugElement = fixture.debugElement.query(By.css('div step-navigation'));
    const timelineSectionElement = timelineSectionDebugElement.nativeElement;

    expect(timelineSectionElement).toBeTruthy();
  });

但它无法找到该元素。

Answer 1

应该像原始帖子中所示那样完成。

由于元素位于ngIf内，events应该存在并且是真实的，并且在设置 events并且{{1}之后应该执行查询被叫了。