首页 > 解决方案 > 如何在使用 Angular 的 Electron 应用程序中使用代码覆盖率?

问题描述

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

npm run ava

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

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

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

标签: angularelectronavaspectronnyc

解决方案


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

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

仪器仪表

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

这意味着您需要自己检测您的应用程序代码。对于 Angular 应用程序,这通常意味着您需要一个自定义构建器。这是一篇很棒的文章,解释了如何做到这一点(他们谈论赛普拉斯测试 - 但仪器部分是相同的)。或者,您可以nyc instrument在运行ng build. 这种方法在我搜索的另一篇文章中有介绍。

报告

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

听起来我们最好的尝试是自己实现它。window可以从 Spectron访问对象BrowserWindow(例如,在这个 SO 答案中)。并在每次测试后将其__coverage__属性的内容存储在一个文件中。您可以使用@cypress/code-coverage源代码作为这种方法的示例(显然它是针对赛普拉斯的,而不是针对 Spectron 的——但总体思路是相同的)。


推荐阅读