Question

我在单元测试中遇到一些困难，正在读取一些用* 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的click事件中调用的组件函数：

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

正如你所看到的那样，我已经包装了代码，这些代码搜索那些只有当* ngIf在setTimeout中为真时显示的DOM元素，就像在这个How to check whether ngIf has taken effect中一样，但我仍然没有得到任何东西。

此外，如果您想知道是否在该测试中调用了click，那么因为组件函数中的console.log显示在Karma控制台中。 setTimeout中的console.log显示一个NodeList（0），基本上没有找到类.detailHeader的节点。

Answer 1

好的，经过更多的反复试验，我发现如果你在setTimeout中调用fixture.detectChanges()，它会显示* ngIf DOM

Angular 2如何测试* ngIf显示/隐藏的内容

1 个答案: