Angular5项目如何合并单元测试与E2E测试的代码覆盖率报告？

我之前帮不少开发者解决过Angular 5里合并单元测试和E2E覆盖率的问题，其实是可以通过几个工具配合实现的。核心思路是先让两种测试分别生成标准的LCOV覆盖率报告，再用工具合并后生成统一的可视化页面，下面是具体步骤：

1. 安装必要依赖 #

首先安装用于合并LCOV报告和处理覆盖率的工具：

npm install lcov-result-merger istanbul --save-dev

2. 配置单元测试生成覆盖率报告 #

Angular 5 CLI（版本1.x）默认支持单元测试生成覆盖率，你可以直接在运行测试时加参数，或者在.angular-cli.json里提前配置：

{
  "test": {
    "codeCoverage": true,
    "coverageDirectory": "./coverage/unit"
    // 其他测试配置保持不变
  }
}

运行单元测试生成覆盖率：

ng test --code-coverage

执行后会在coverage/unit目录下生成单元测试的lcov.info报告文件。

3. 配置Protractor E2E测试生成覆盖率 #

Protractor默认不会生成覆盖率，需要修改protractor.conf.js添加收集逻辑：

const istanbul = require('istanbul');
const path = require('path');

exports.config = {
  // 原有配置（比如spec文件路径、浏览器配置等）
  onPrepare() {
    // 初始化Istanbul报告器，指定E2E覆盖率输出目录
    const reporter = new istanbul.Reporter(null, path.join(__dirname, './coverage/e2e'));
    reporter.add('lcov');
    reporter.addAll(['text']);

    // 在所有E2E测试结束后收集覆盖率数据
    jasmine.getEnv().afterAll(() => {
      browser.executeScript('return window.__coverage__').then(coverage => {
        if (coverage) {
          reporter.write(coverage, true, () => {
            console.log('E2E覆盖率报告已生成到 coverage/e2e 目录');
          });
        }
      });
    });
  },
  capabilities: {
    'browserName': 'chrome',
    'chromeOptions': {
      args: ['--no-sandbox']
    }
  }
};

另外，需要确保构建项目时生成sourcemap（方便覆盖率关联源码），在package.json里加一条构建命令：

"scripts": {
  "build:e2e": "ng build --prod --sourcemaps=true"
}

现在先构建带sourcemap的版本，再运行E2E测试：

npm run build:e2e && ng e2e

执行后会在coverage/e2e目录下生成E2E测试的lcov.info。

4. 合并覆盖率并生成统一报告 #

在package.json的scripts里添加合并和生成可视化报告的命令：

"scripts": {
  // 原有命令保留，新增以下三条
  "coverage:merge": "lcov-result-merger ./coverage/unit/lcov.info ./coverage/e2e/lcov.info ./coverage/combined/lcov.info",
  "coverage:report": "istanbul report --dir ./coverage/combined lcov html",
  "coverage:all": "npm run test:coverage && npm run build:e2e && ng e2e && npm run coverage:merge && npm run coverage:report"
}

现在只需要运行一条命令，就能完成所有测试、覆盖率合并和可视化报告生成：

npm run coverage:all

合并后的HTML报告在coverage/combined/html目录下，打开index.html就能看到整体的覆盖率统计，包括单元测试和E2E测试共同覆盖的代码情况。

注意事项 #

• E2E测试的覆盖率只会统计实际被浏览器访问执行的代码路径，如果某些逻辑只有单元测试覆盖，合并报告里会正常显示单元测试的覆盖数据。
• 确保你的Angular 5 CLI是1.x的稳定版本，避免配置不兼容问题。
• 如果遇到覆盖率收集失败的情况，可以检查sourcemap是否正确生成，或者尝试降级istanbul到适配Angular 5的版本（比如0.4.x系列）。

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