Angular 2如何測試顯示/隱藏的內容* ngIf

我在單元測試中遇到了一些困難，它正在讀取一些使用* ngIf從DOM中添加/刪除的html。Angular 2如何測試顯示/隱藏的內容* ngIf

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

這是被調用的第一個div的點擊事件的組件功能：

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

最後，這是規範：

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

正如你所看到的，我已經包裝了代碼，它搜索那些僅在第e * ngIf在setTimeout中是如此How to check whether ngIf has taken effect，但我仍然沒有得到任何東西。

此外，如果您想知道是否在該測試中調用了點擊，它會這樣做，因爲組件函數中的console.log顯示在Karma控制檯中。 setTimeout中的console.log顯示一個NodeList（0），基本上沒有找到類.detailHeader的節點。

來源

2017-06-06 Hazerd

好了，更多的試驗和錯誤之後，我發現，如果你調用fixture.detectChanges()的setTimeout的裏面會顯示* ngIf DOM

來源

2017-06-06 14:25:55 Hazerd

你不需要'setTimeout'電話都沒有。如果手動調用'detectChanges'，它將全部同步發生。 – ChrisG

Angular 2如何測試顯示/隱藏的內容* ngIf

回答

相關問題