如何为 Angular 项目“在 sonarqube 中启用前端代码覆盖率”

Question

这是我的 Bamboo 仪表板，与 Sonarqube 相关：https ://imgur.com/a/yOq6iGp

项目构建结果页面如下所示：https : //imgur.com/Z126mr7

所以，我想以某种方式在 Bamboo 中启用测试覆盖率以查看单元测试报告。我提到我们对我的 angular 项目有本地覆盖。

你能帮我解决这个问题吗？

Answer 1

您需要将结果转换为 SonarQube 可以解释的格式。假设您使用的是 Jasmine/Karma，这将是 LCOV 格式。

1. 修改您的构建脚本以包含以下行：

   ng test --code-coverage

2. 这应该在您的 angular 项目中创建一个覆盖文件夹。但是，它将采用 html 格式。您还需要更改 Karma runner，以便它生成一个 lcov.info 文件：

   // karma.conf.js
   // ....
   覆盖伊斯坦布尔记者：{
      dir: require('path').join(__dirname, '../coverage'),
      报告：['lcovonly']，
      fixWebpackSourcePaths: true
   },
   // ....
   

3. 最后，使用以下行更新 sonar-project.properties 文件，以便 SonarQube 知道在哪里可以找到覆盖范围：

   sonar.typescript.lcov.reportPaths=coverage/lcov/lcov.info