Ionic 4 Karma 代码覆盖生成没有数据的 HTML 文件

Posted 2023-03-16

【中文标题】Ionic 4 Karma 代码覆盖生成没有数据的 HTML 文件

【英文标题】：Ionic 4 Karma code coverage generates HTML file with no data

【发布时间】：2020-05-04 04:12:32

【问题描述】：

在我的 Ionic 项目文件夹中运行 ng test --code-coverage 会生成包含所有需要的 html/css/js 文件的覆盖文件夹。 lcov.info 文件包含测试数据 - 但 html 文件中没有值。

index.html 中的一个示例行：

<tr>
    <td class="file high" data-value="src"><a href="src/index.html">src</a></td>
    <td data-value="" class="pic high"><div class="chart"><div class="cover-fill" style="width: 0%;"></div><div class="cover-empty" style="width:100%;"></div></div></td>
    <td data-value="" class="pct high">%</td>
    <td data-value="" class="abs high">/</td>
    <td data-value="" class="pct high">%</td>
    <td data-value="" class="abs high">/</td>
    <td data-value="" class="pct high">%</td>
    <td data-value="" class="abs high">/</td>
    <td data-value="" class="pct high">%</td>
    <td data-value="" class="abs high">/</td>
</tr>

这是浏览器中的文件：

样式似乎从 lcov 数据中获取信息，因为颜色与我通过终端获取的数据相匹配：

----------------------------------------------------|----------|----------|----------|----------|-------------------|
File                                                |  % Stmts | % Branch |  % Funcs |  % Lines | Uncovered Line #s |
----------------------------------------------------|----------|----------|----------|----------|-------------------|
All files                                           |    49.75 |    10.77 |    38.67 |    48.13 |                   |
 src                                                |      100 |      100 |      100 |      100 |                   |
  polyfills.ts                                      |      100 |      100 |      100 |      100 |                   |
  test.ts                                           |      100 |      100 |      100 |      100 |                   |
  zone-flags.ts                                     |      100 |      100 |      100 |      100 |                   |
 src/app                                            |      100 |      100 |      100 |      100 |                   |
  app.component.ts                                  |      100 |      100 |      100 |      100 |                   |
 src/app/calendar                                   |    16.56 |        0 |     8.89 |    16.44 |                   |
  calendar.page.ts                                  |    16.56 |        0 |     8.89 |    16.44 |... 24,425,426,427 |
 src/app/calendar/assignment                        |      100 |      100 |      100 |      100 |                   |
  assignment.component.ts                           |      100 |      100 |      100 |      100 |                   |
 src/app/calendar/resource                          |      100 |      100 |      100 |      100 |                   |
  resource.component.ts                             |      100 |      100 |      100 |      100 |                   |
 src/app/calendar/resource-selection                |       75 |      100 |       40 |    72.73 |                   |
  resource-selection.component.ts                   |       75 |      100 |       40 |    72.73 |          32,34,35 |
[...]

这是我的业力配置：

module.exports = function(config) 
  config.set(
    basePath: '',
    frameworks: ['jasmine', '@angular-devkit/build-angular'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: 
      clearContext: false, // leave Jasmine Spec Runner output visible in browser
    ,
    coverageIstanbulReporter: 
      dir: require('path').join(__dirname, './coverage'),
      reports: ['html', 'lcovonly', 'text'],
      fixWebpackSourcePaths: true,
    ,
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
  );
;

我错过了什么吗？

【问题讨论】：

我遇到了同样的问题。 'coverage' 报告器确实以文本格式生成完整的详细报告，但不是 HTML。我得到了像你一样的所有空白字段。

@Alex.A 你有解决办法吗？它仍然不适合我。

请检查我的回答。

@HugoB.，你的 karma-coverage-istanbul-reporter 版本是多少？

@AriLinn "karma-coverage-istanbul-reporter": "~2.1.1"

【参考方案1】：

问题是由车把库引起的。回归是在最近的版本中引入的。因此，为了解决这个问题（作为一种解决方法，直到车把库修复） - 您可以手动安装车把的工作版本并将其添加到您的 devDependencies 中，如下所示：npm i -D handlebars@4.1.2 或将车把版本更改为正确的版本npm-shrinkwrap.json/package-lock.json 像这样：

         "handlebars": 
-            "version": "4.7.3",
-            "integrity": "sha1-js4nl4Johs+AgtFyb/IdKgIlUO4=",
+            "version": "4.1.2",
+            "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==",
             "requires": 

【参考方案2】：

很遗憾，我无法生成完整代码覆盖结果的 HTML 表示。但是，我能够生成文本格式以及用于 CI/CD 集成的 cobertura(Junit)。

我的 karma.conf.js：

【讨论】：

感谢您的回答。但这并不能回答或解决我的问题。

使用 cobertura XML，您可以将其输入到许多 CI/CD 框架中，以将代码覆盖率结果呈现到 HTML 仪表板中。它只是不在本地机器上。

【参考方案3】：

删除package-lock.json。 rm -rf node_modules。 运行npm install。

【讨论】：

不需要删除 package-lock.json。