web-dev-qa-db-ja.com

Angular 2 * ngIfで表示/非表示のコンテンツをテストする方法

* ngIfを使用してDOMから追加または削除されるHTMLを読み取る単体テストで問題が発生しています。

これは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);  
}));

ご覧のとおり、setTimeoutで* ngIfがtrueの場合にのみ表示されるDOM要素を検索するコードを次のようにラップしました ngIfが有効になっているかどうかを確認する方法 しかし、まだ何も取得しません。

また、そのテストでクリックが呼び出されるかどうか疑問に思っている場合は、コンポーネント関数のconsole.logがKarmaコンソールに表示されるためです。 setTimeout内のconsole.logにはNodeList（0）が表示され、基本的に.detailHeaderクラスのノードは見つかりませんでした。

angularunit-testingjasminekarma-runner
9
Hazerd

では、試行錯誤の末、setTimeout内でfixture.detectChanges()を呼び出すと、* ngIf DOMが表示されることがわかりました

3
Hazerd