问题描述
为什么这个测试通过
it ('should hide datatable if data is undefined',() => {
component.DATA = undefined;
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('app-datatable'))).toBeNull();
});
但这没有
it ('should hide datatable if data is undefined',() => {
component.DATA = undefined;
const datatable = fixture.debugElement.query(By.css('app-datatable'));
fixture.detectChanges();
expect(datatable).toBeNull();
});
对于第二个测试套件,我收到以下错误
错误:预期 DebugElement__POST_R3__({ nativeNode: }) 为空。
这是DOM的代码
<app-datatable *ngIf="DATA"></app-datatable>
解决方法
这与您运行 Angular 的更改检测的方式有关:
-
在第一个测试中,您在更改
fixture.detectChanges()
之后运行component.DATA
,我认为这会在视图中进行一些更改。 -
在第二个测试中,您首先查询
app-datatable
元素,然后调用fixture.detectChanges()
。有了这个安全性,我假设datatable
有一些内容,然后在您调用detectChanges()
后它会发生变化,但是当您在更改检测之前访问它时,测试失败。