Angular 5应用中如何生成Protractor E2E测试的代码覆盖率报告？

我之前帮不少开发者解决过Angular 5里Protractor E2E覆盖率的问题，你遇到的插件兼容TS的问题确实挺常见的。下面这套基于nyc（Istanbul的新一代工具）的方案亲测可行，不需要依赖那些兼容性差的老插件：

1. 安装必要依赖 #

首先在项目里安装这些开发依赖：

npm install nyc @istanbuljs/nyc-config-typescript source-map-support http-server --save-dev

2. 配置NYC（覆盖率工具） #

在项目根目录创建一个.nycrc配置文件，用来指定覆盖率的规则：

{
  "extends": "@istanbuljs/nyc-config-typescript",
  "include": ["src/**/*.ts"],
  "exclude": [
    "src/**/*.spec.ts",
    "src/test.ts",
    "src/polyfills.ts",
    "src/environments/*"
  ],
  "reporters": ["html", "lcov", "text-summary"],
  "sourceMap": true,
  "instrument": true
}

• include：指定要统计覆盖率的TS文件范围
• exclude：排除测试文件、环境配置等不需要统计的内容
• reporters：指定生成的报告格式（html是可视化报告，方便查看）

3. 配置Angular构建（生成带SourceMap的代码） #

修改angular.json，给你的应用添加一个专门用于覆盖率的构建配置：

"projects": {
  "你的应用名称": {
    "architect": {
      "build": {
        "configurations": {
          "coverage": {
            "sourceMap": {
              "scripts": true,
              "styles": false,
              "vendor": false
            },
            "optimization": false,
            "buildOptimizer": false,
            "vendorChunk": true,
            "namedChunks": true
          }
        }
      }
    }
  }
}

关闭优化和构建器优化，同时开启脚本的SourceMap，这样后续才能把JS的覆盖率映射回TS文件。

4. 构建并Instrument代码 #

先构建带SourceMap的应用：

ng build --configuration=coverage

然后用nyc把构建后的JS代码instrument（注入覆盖率收集逻辑）：

npx nyc instrument dist/你的应用名称 dist/你的应用名称-instrumented

5. 修改Protractor配置 #

更新protractor.conf.js，添加覆盖率收集的逻辑，并指向instrumented的代码：

exports.config = {
  // 原有配置保持不变
  baseUrl: 'http://localhost:4200/',
  onComplete: async function() {
    // 从浏览器中获取覆盖率数据
    const coverageData = await browser.executeScript('return window.__coverage__;');
    if (coverageData) {
      // 将覆盖率数据写入NYC的输出目录
      require('fs').mkdirSync('.nyc_output', { recursive: true });
      require('fs').writeFileSync('.nyc_output/out.json', JSON.stringify(coverageData));
      // 生成覆盖率报告
      await require('nyc').report();
    }
  }
};

6. 启动服务并运行测试 #

首先用http-server启动instrumented的代码目录：

npx http-server dist/你的应用名称-instrumented -p 4200

然后运行Protractor测试：

npx protractor protractor.conf.js

测试完成后，项目根目录会生成coverage文件夹，打开里面的index.html就能看到可视化的TS代码覆盖率报告了。

注意事项 #

• E2E覆盖率统计的是测试中实际触发的代码路径，和单元测试覆盖率侧重点不同，只会统计用户操作到的部分
• 如果后续要正常开发，记得切换回普通的构建配置，不要一直用instrumented的代码

内容的提问来源于stack exchange，提问作者Chetan Laddha