Góc 2 cách kiểm tra nội dung được hiển thị/ẩn bởi * ngIf

Question

Tôi đang gặp một số khó khăn với thử nghiệm đơn vị đang đọc một số html đang được thêm/xóa khỏi DOM với * ngIf.

Đây là 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> 

Đây là chức năng thành phần mà được kêu gọi sự kiện click của div đầu tiên:

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

Và cuối cùng này được 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); 
})); 

Như bạn có thể thấy tôi đã gói mã tìm kiếm các phần tử DOM được hiển thị chỉ khi thứ e * ngIf là đúng trong một setTimeout như trong này How to check whether ngIf has taken effect nhưng tôi vẫn không nhận được bất cứ điều gì.

Ngoài ra, nếu bạn tự hỏi liệu nhấp chuột có được gọi trong thử nghiệm đó hay không, điều đó có nghĩa là vì console.log đó trong hàm thành phần được hiển thị trong bảng điều khiển Karma. Console.log bên trong setTimeout hiển thị một NodeList (0), về cơ bản không có nút nào với lớp .detailHeader nơi tìm thấy.

Answer 1

Ok, vì vậy sau khi thử nghiệm nhiều hơn và lỗi tôi phát hiện ra rằng nếu bạn gọi fixture.detectChanges() bên trong setTimeout nó sẽ hiển thị * ngIf DOM