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

Question

在我的Ionic项目文件夹中运行ng test --code-coverage，会生成带有所有需要的html / css / js文件的coverage文件夹。 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,
  });
};

我想念什么吗？

Answer 1

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

我的karma.conf.js：