중첩 요소를 테스트하는 방법은 무엇입니까?

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()가 호출 된 후 쿼리를 수행해야한다.