Angular - 视图的代码覆盖率

Question

在使用 Angular (2,4,5,...) 开发应用程序时，人们经常使用 *ngIf="whatever_condition"，而 ngSwitch 也很少使用

但是，我还没有看到任何工具能够提供有关实际测试了多少代码的信息。..

显然对于 Typescript 文件，有 istanbul loader 来获得覆盖率，但我认为它给出了具有高覆盖率的错误画面，因为大部分逻辑位于没有测量的视图中。即如果我在 Typescript 上的分支覆盖率为 90%，但视图中的分支仍然是原来的两倍，那么实际覆盖率可能在 45% 到 90% 之间。

是否有任何工具能够测量 Angular 视图的代码覆盖率并以有意义的方式显示它？

Answer 1

我没有研究过模板的覆盖率，但是，您可以研究一下组件测试与单元测试。

我通常会做以下事情：

it('',()=>{
  component.whatever_condition = true;
  const el = fixture.debugElement.query(By.css('someElement'));

  fixture.detectChanges();

  expect(el).toBeDefined();
});

我意识到这并没有为您提供覆盖范围，但它为您的模板提供了测试。

注意考虑是否需要 e2e 测试

希望对你有帮助