如何在使用 Angular 的 Electron 应用程序中使用代码覆盖率？

Question

我编写了一个 Electron 应用程序（在 TypeScript 中），我通过 AVA 进行测试（在其测试中我使用 Spectron 与应用程序通信）。我的应用程序的（浏览器）内容是使用Angular 生成的。我通过以下方式执行测试：

npm run ava

所有这些都很棒！现在我想把代码覆盖放在上面。如上所述，我使用了各种不同的框架，几乎每个框架都提供了自己的解决方案。

• AVA 推荐nyc。
• Electron 有一些使用 jest + 覆盖范围的用户教程？
• Angular 引入了他们自己的 coverage，AFAIK 只能由 ng test 调用，所以这也被淘汰了（我猜）因为我有一个电子应用程序

我试过nyc，但在其默认配置中，它只记录“主进程”，但更重要的是应用程序的（浏览器）内容。 AFAIK nyc 可以检测所有 *.ts 文件以添加覆盖信息，但将其与 Angular 构建工具结合起来似乎并不容易/不可能。

解决此任务的好方法是什么？有这方面的经验吗？

Answer 1

让我们看看测试覆盖是如何工作的。它通常由两部分组成：检测和报告。

• 检测基本上是用额外的计数器包装源代码行，每次执行该行代码时递增计数器
• 报告正在读取这些计数器并以某种报告的形式呈现/存储。

仪表

nyc 自动检测它执行的节点进程（及其子进程）。但是，在您的情况下，您要测量的实际代码是在浏览器中运行的编译的 Angular 应用程序，而不是带有测试运行程序本身的 Node 进程。

这意味着您需要自己检测您的应用代码。对于 Angular 应用程序，这通常意味着您需要一个自定义构建器。这是a great article，它解释了如何做到这一点（他们谈论赛普拉斯测试 - 但仪器部分是相同的）。或者，您可以在运行ng build 之前预处理您的源文件（通过nyc instrument）。这种方法在another article 中有特色，我用谷歌搜索过。

报告

如上检测的代码将跟踪其运行指标并将它们以特定于伊斯坦布尔的格式存储在 window.__coverage__ 中。但是我们如何提取它呢？ Spectron 似乎没有内置支持来提取这些指标（我很乐意学习其他方法，但是...... github issues/40, issues/261）。

听起来我们最好的尝试是自己实现它。可以从 Spectron 的 BrowserWindow 访问 window 对象（例如，在 this SO answer 中）。并在每次测试后将其__coverage__ 属性的内容存储在一个文件中。您可以使用@cypress/code-coverage source code 作为这种方法的一个示例（显然它适用于 Cypress，而不适用于 Spectron - 但总体思路是相同的）。