AngularJS html 模板的代码覆盖率答案

【问题标题】：Code coverage for AngularJS html templatesAngularJS html 模板的代码覆盖率
【发布时间】：2014-12-22 21:34:16
【问题描述】：

我们在业力测试中使用istanbul 进行代码覆盖。这对于跟踪我们在 JavaScript 中的单元测试的代码覆盖率非常有用。但是，这不会跟踪我们 HTML 模板中的代码覆盖率。

我们的模板中几乎没有逻辑，但我们仍然希望跟踪并确保我们在测试中正确涵盖了复杂性。确保正确覆盖所有 HTML 模板的最佳实践是什么？在我们的特殊情况下，我们使用 ng-if 和 ng-switch。我们希望确保正确覆盖所有分支。

【问题讨论】：

标签： html angularjs code-coverage istanbul

【解决方案1】：

虽然您可以通过第三方插件 (https://www.npmjs.com/package/protractor-istanbul-plugin) 从伊斯坦布尔获取覆盖率报告，但问题是，与 React 或其他将模板 (JSX) 转换为 javascript DOM 操作的库不同，Angular 不会公开生成的 DOM以一种对于生成覆盖率报告所需的仪器可行的方式。

【讨论】：

【解决方案2】：

不幸的是，istanbul 和 karma 是为测试 JavaScript 而开发的，而不是 HTML 模板。由于您的 ng-if 和 ng-switch 语句可能会影响页面上显示/未显示的内容，因此您可能需要考虑使用 Angular 的端到端套件Protractor。据我所知，没有用于端到端测试的覆盖工具。

【讨论】：

谢谢，我们正在使用量角器进行某些类型的测试。它们面向前端+后端的集成测试。这些测试用于测试用户场景，而不是单元测试。代码覆盖率与这些测试无关（场景覆盖率是）。我们有单元测试来测试与 DOM 的交互（后端被剔除）。我们会跟踪我们的 JS 代码覆盖率，但我们无法跟踪我们的模板覆盖率。
我理解这个问题。我目前不知道任何解决方案。测试 html 将是一个有趣的 istanbul 开源分支。
是的，它必须深入研究 Angular 的模板系统，因为它需要在编译的模板上运行覆盖，然后以某种方式将覆盖映射回原始文件。不容易。