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

Question

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

npm run ava

所有这一切都很棒!现在我想把代码覆盖率放在它上面。如上所述，我使用了各种不同的框架，几乎每个框架都带来了自己的解决方案。

• AVA推荐nyc .
• Electron 有一些使用 jest 的用户教程+ 他们的报道？
• Angular 带来了自己的 coverage哪个 AFAIK 只能由 ng test 调用所以这也是(我猜)因为我有一个 Electron 应用程序

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

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

Answer 1

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

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

检测

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

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

报告

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

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