Angular-cli测试覆盖所有文件

Question

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

ng test --code-coverage

它正在coverage文件夹中编写代码覆盖率报告。

我需要看到整个项目的覆盖率，而不仅仅是有测试的文件。

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
  });
};

Answer 1

我也遇到了同样的问题，我找到了一个简单的解决方法，它不需要任何大的配置就能解决我的问题。

在您的应用程序文件夹中，创建一个文件app.module.spec.ts

• In

1. 将导入添加到您的应用程序模块。

import './app.module';

就是这样;)

重点是，你的应用程序模块很可能是你的应用程序的中心部分，它直接或间接地导入任何其他使用的文件。既然您已经创建了spec文件，那么您的模块所包含的所有内容都应该包含在测试覆盖率报告中。

我不能百分之百确定这是否适用于延迟加载的模块。如果没有，您也可以简单地在app.module.spec.ts中导入这些延迟加载的模块，或者为每个模块创建一个spec文件，在其中导入模块。

Answer 2

下面是实现这一点的方法：

1. 将client部分添加到您的karma.conf.js，如下所示：

插件：...，客户端：{ codeCoverage: config.angularCli.codeCoverage }，文件：...，

• 根据codeCoverage参数将您的test.ts更改为所需文件：

让context；if (__karma__.config.codeCoverage) { context = require.context('./app/'，true，/.ts/)；} else { context = require.context('./app/'，true，/.spec.ts/)；} context.keys().map(context);

更新：

由于Angular CLI 1.5.0需要额外的步骤：

1. 旁边的tsconfig.spec.json添加包含以下内容的扩展文件：{“tsconfig-cc.spec.json”："./tsconfig.spec.json"，"include"："**/*.ts“}
2. In your angular-cli.json将以下内容添加到apps数组中：

{“根”："src/"，"polyfills"："polyfills.ts"，“”："test.ts"，"testTsconfig"："tsconfig-cc.spec.json“} karma.conf.js中的

• 将以下内容添加到angularCli部分:app: config.angularCli.codeCoverage？'1‘：’0‘最终应该是这样的：

环境：{ angularCli：'dev'，应用: config.angularCli.codeCoverage？'1‘：'0’}，

那么这里发生了什么呢？

显然，他们已经修复了Angular编译器插件，它现在可以从tsconfig.spec.json获取文件globs。只要我们在tsconfig.spec.json中只包含**/*.spec.ts，这些文件就是唯一包含在覆盖率中的文件。

显而易见的解决方案是让tsconfig.spec.json包含所有的文件(除了require.context之外)。然而，这会减慢所有测试的速度，即使在没有覆盖的情况下也是如此(我们不希望如此)。

其中一个解决方案是使用angular-cli的能力与多个应用程序一起工作。

通过将另一个条目添加到apps数组中，我们为“另一个”(实际上是同一个)应用程序添加了另一个配置。

我们去掉了这个配置中所有不相关的信息，只留下了测试配置，并放置了另一个包含所有ts文件的tsconfig。

最后，我们告诉angular-cli karma插件使用第二个应用程序(索引1)的配置运行测试，以防它在代码覆盖率下运行，如果它运行时没有代码覆盖率，则使用第一个应用程序(索引0)的配置运行。

重要提示:在此配置中，我假设您在.angular-cli.json中只有一个应用程序。如果您有更多的索引，您必须相应地调整索引。

Answer 3

我刚刚创建了karma插件，它将项目中的所有文件添加到coverage statistic - https://github.com/kopach/karma-sabarivka-reporter中。

要使用它，请安装npm install --save-dev karma-sabarivka-reporter→

并像这样更新karma.conf.js：

reporters: [
  // ...
  'sabarivka'
  // ...
],
coverageReporter: {
    include: 'src/**/!(*.spec|*.module|environment*).ts', // glob patter which  matchs all the files you want to be included into the coverage result
    exclude: 'src/main.ts',
    // ...
},

这解决了问题，而不需要任何其他操作。很容易添加到现有项目和新项目中。