Angular 2 testowanie zawartości pokazanej/ukrytej przez * ngIf

Question

Mam trudności z testem jednostkowym, który czyta jakiś HTML, który jest dodawany/usuwany z DOM za pomocą * ngIf.

To DOM:

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

Jest to funkcja składowa, która jest wywoływana na zdarzenie click pierwszego Gr:

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

I wreszcie jest to spec:

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); 
})); 

Jak widać, opakowałem kod, który wyszukuje elementy DOM, które są wyświetlane tylko wtedy, gdy e * ngIf jest prawdziwe w setTimeout, jak w tym How to check whether ngIf has taken effect, ale nadal nic nie dostaję.

Również jeśli zastanawiasz się, czy kliknięcie zostanie wywołane w tym teście, robi to, ponieważ ten console.log w funkcji komponentu zostanie wyświetlony w konsoli Karma. Console.log wewnątrz setTimeout pokazuje NodeList (0), w zasadzie żadnych węzłów z klasy .detailHeader, gdzie znaleziono.

Answer 1

Ok, więc po więcej prób i błędów odkryłem, że jeśli zadzwonisz fixture.detectChanges() wewnątrz setTimeout pokaże * ngIf DOM