Açısal 2 Gösterilen/gizlenen içeriğin test edilmesi * ngIf

Question

* ngIf ile DOM'dan eklenen/kaldırılan bir html okuyan bir birim testi ile bazı zorluklar yaşıyorum. Spec nihayet bu

private showDet() { 
    console.log('show called'); 
    this.showHideDet = !this.showHideDet; 
} 

Ve edilir:

<div class="detailacc" (click)="showDet()">  
    <i class="fa" [class.fa-caret-right]="!showHideDet " [class.fa-caret-down]="showHideDet " aria-hidden="true"></i> 
    <h4>Expandable</h4> 
</div> 
<div *ngIf="showHideDet"> 
    <p class="detailHeader">Details header</p> 
</div> 

bu ilk div click olayı çağrılan bileşen fonksiyonudur:

Bu

DOM

it('should show the header when the expandable elem is clicked', async(() => 
{ 
    const fixture = TestBed.createComponent(DetailsComponent); 
    const compiled = fixture.debugElement.nativeElement; 
    let detPresent: boolean = false; 
    for (let node of compiled.querySelectorAll('.detailacc')) { 
     node.click(); 
    } 

    setTimeout(() => {   
     console.log(compiled.querySelectorAll('.detailHeader')); 
     for (let node of compiled.querySelectorAll('.detailHeader')) { 
      if (node.textContent === 'Details header') { 
       detPresent = true; 
       break; 
      } 
     } 
     expect(detPresent).toBeFalsy(); 
    }, 0); 
})); 

Gördüğünüz gibi yalnızca th olduğunda gösterilen DOM öğelerini arayan kodları ekledim e * ngIf, setTimeout'ta bu How to check whether ngIf has taken effect'daki gibi doğrudur, ancak hala hiçbir şey alamıyorum.

Ayrıca, bu sınamanın bu sınamada çağrılıp çağrılmadığını merak ediyorsanız, bunun nedeni, kompleman işlevindeki bu konsol.log'un Karma konsolunda gösterilmesidir. SetTimeout içindeki console.log bir NodeList (0), temelde bulunamadı .detailHeader sınıfıyla düğümleri gösterir.

Answer 1

Tamam

, bu nedenle daha fazla deneme yanılma sonra ben setTimeout içeride fixture.detectChanges() çağırırsanız o * ngIf DOM