入れ子要素のテスト方法は？

Question

要素がHTMLにあるかどうかをテストしようとしています。

私のHTMLは次のようになります。私はstep-navigation要素が存在するかどうかをテストしたい

<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> 

。これはどうすればいいですか？私はすでに試しました

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が存在しtruthyこと、およびクエリがeventsを設定し、fixture.detectChanges()が呼び出された後を行うべきであるべきです。