我有一个 Angular 6 应用程序,并编写了一些单元测试,尝试仅基于 *ngIf
指令的布尔结果来确定元素是否可见。
标记:
<div class="header" *ngIf="show">
<div>...</div>
</div>
规格文件:
it('should hide contents if show is false', () => {
const button = debugElement.query(By.css('button')).nativeElement;
button.click(); // this will change show to false
fixture.detectChanges();
expect(debugElement.query(By.css('.header')).nativeElement.style.hidden).toBe(true);
});
我似乎无法获取div的hidden
属性。 Angular是否使用另一种方法使用*ngIf
指令将元素隐藏在DOM中? 我需要从nativeElement
获取另一个属性吗?
谢谢!
toBeNull()
函数来检查节点是否为null,而不是检查undefined
。这对我起作用了。 - J-manfixture.debugElement.query
和expect(...)
的时候要小心。这可能会导致浏览器出现内存不足的错误。我曾经遇到过这种情况。请参考 https://dev59.com/DFcP5IYBdhLWcg3wf6Kb#48606192。 - joecrackerChangeDetectionStrategy.OnPush.
。在浏览器中,元素会自动被移除,但在单元测试中,我必须手动调用 `ChangeDetectorRef.detectChanges()' 才能让它运行。 - Michel