使用 *ngIf 对 DOM 元素进行角度测试

如何解决使用 *ngIf 对 DOM 元素进行角度测试

为什么这个测试通过

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() 后它会发生变化，但是当您在更改检测之前访问它时，测试失败。