Angular-CLI测试覆盖所有文件 [英] Angular-cli test coverage all files

问题描述

我正在运行以下命令来进行单元测试并生成代码代码覆盖率报告.

I am running the following command to unit test and generate code code coverage report.

ng test --code-coverage

正在将代码覆盖率报告写入覆盖率文件夹中.

It is writing code coverage report in coverage folder.

我需要查看整个项目的覆盖范围，而不仅仅是查看有测试的文件.

I need to see the coverage of the whole project and not just the file for which there are tests.

karma.conf.js

karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'angular-cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-jasmine-html-reporter'),
      require('karma-chrome-launcher'),
      require('karma-remap-istanbul'),
      require('angular-cli/plugins/karma'),
      require('karma-coverage'),
      require('karma-sourcemap-loader')

    ],
    files: [
      { pattern: './src/test.ts', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['angular-cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    remapIstanbulReporter: {
        reports: {
          html: 'coverage',
        lcovonly: './coverage/coverage.lcov'
      }
    },
    angularCli: {
      config: './angular-cli.json',
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'karma-remap-istanbul']
              : ['progress', 'kjhtml'],
    coverageReporter: {
      includeAllSources: true
    },
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};

推荐答案

我遇到了同样的问题，并且发现了一个简单的解决方法，无需任何大的配置即可为我解决问题.

I had the same issue and I found a simple workaround that does the trick for me without any big configuration.

1. 在您的应用文件夹中，创建一个文件app.module.spec.ts
2. 在此文件中，将导入添加到您的应用模块.

import './app.module';

import './app.module';

就这样;)

重点是，您的应用程序模块很可能是应用程序的中心部分，该模块直接或间接导入任何其他使用的文件.现在，您已经创建了规范文件，模块所包含的所有内容也应包含在测试覆盖率报告中.

The point is, your app module is most likely the central part of your application which imports any other used files directly or indirectly. Now that you have created the spec file, everything that is included by your module should also be included in the test coverage report.

我不确定100％是否适用于延迟加载的模块.如果没有，您也可以将那些延迟加载的模块也导入到app.module.spec.ts中，或者为每个模块创建一个规范文件，并在其中导入模块.

I am not 100% sure if this works with lazy loaded modules. If not, you can simply import those lazy loaded modules in your app.module.spec.ts as well, or create a spec file per module, where you import the module.

这篇关于Angular-CLI测试覆盖所有文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！