Angular 5 应用程序中量角器测试的代码覆盖率答案

【问题标题】：Code coverage for Protractor tests in Angular 5 ApplicationAngular 5 应用程序中量角器测试的代码覆盖率
【发布时间】：2018-10-25 08:25:15
【问题描述】：

我有一个带有量角器的 angular-cli 应用程序。我想为量角器生成一份代码覆盖率报告。

有没有办法使用 Angular 5 应用程序为量角器 e2e 测试用例生成代码覆盖率？

【问题讨论】：

为什么？量角器测试正在锻炼 UI。他们不知道底层代码及其所采用的路径。量角器测试应该模拟用户如何与您的应用交互。这意味着黑盒测试。测试不需要了解应用程序内部的任何信息。如果需要，请使用单元和集成测试来获取覆盖信息。

【解决方案1】：

一段时间以来，我一直在寻找相同场景的答案，但对于通过 Angular cli 构建作业 (ng build) 生成的仪器包没有直接的解决方案。

有两种方法可以实现这一点 -

我们可以通过customWebpackConfig 使用istanbul-instrumenter-loader 的webpack 配置——如果您使用的是Angular 8，则适用。
我们可以通过（通过 ng 弹出）生成webpack，然后我们可以借助 webpack 插件 - istanbul-instrumenter-loader 来实现这一点。 - 如果您使用的是 Angular 5，则适用。在 Angular CLI 6 中，ng eject-command 已被删除，并且不会再出现。

步骤：-

使用customWebpackConfig 或webapck 和istanbul-instrumenter-loader 检测用户包
1. 参考-http://opensourceforgeeks.blogspot.com/2018/12/how-to-customize-build-configuration.html
2. 参考-https://webpack.js.org/loaders/istanbul-instrumenter-loader/#with-babel
在仪器包上运行您的 e2e/IT 测试套件
从浏览器上下文中收集您的伊斯坦布尔报道 (window.__ coverage__) json 并将其保存为 coverage.json 文件。
使用istanbul cmetsistanbul report生成可视报告（istanbul应该全局安装），它将生成带有html文件的coverage/lcov-report文件夹，以查看每个文件的代码覆盖率报告。

【讨论】：