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

我遇到了同样的问题,我发现了一个简单的解决方法,无需任何大配置就能解决这个问题.

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

import './app.module';

而已 ;)

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

我不是100%确定这是否适用于延迟加载的模块.如果没有,您只需在app.module.spec.ts中导入这些延迟加载的模块,或者在每个模块中创建一个spec文件,然后导入模块.

Answer 2

这是这样做的方法:

1. 添加client部分,将karma.conf.js是这样的:

   plugins: [
       ...
   ],
   client: {
       codeCoverage: config.angularCli.codeCoverage
   },
   files: [
       ...
   ],
   

2. test.ts根据codeCoverage参数更改您的要求文件:

   let 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需要额外的步骤:

3. 在下一步tsconfig.spec.json添加tsconfig-cc.spec.json包含以下内容的文件:

   {
     "extends": "./tsconfig.spec.json",
     "include": [
       "**/*.ts"
     ]
   }
   

4. 在您angular-cli.json添加以下apps数组:

   {
     "root": "src/",
     "polyfills": "polyfills.ts",
     "test": "test.ts",
     "testTsconfig": "tsconfig-cc.spec.json"
   }
   

5. 在您karma.conf.js添加以下angularCli部分:

   app: config.angularCli.codeCoverage ? '1' : '0'  
   

   最终它应该看起来像这样:

   angularCli: {
       environment: 'dev',
       app: config.angularCli.codeCoverage ? '1' : '0'
   },
   

那么这里发生了什么？

显然他们已经修复了Angular编译器插件,它从tsconfig.spec.json现在开始采用文件globs .只要我们只**/*.spec.ts在tsconfig.spec.json这些中包含将包含在coverage中的唯一文件.

显而易见的解决方案是tsconfig.spec.json包含所有文件(除此之外require.context).但是,即使在没有覆盖的情况下运行(我们不想这样做),这也会减慢所有测试的速度.

其中一个解决方案是使用angular-cli多个应用程序的能力.
通过在apps数组中添加另一个条目,我们将为"另一个"(实际上是同一个)应用添加另一个配置.
我们删除了此配置中的所有无关信息,只留下测试配置,并放入tsconfig包含所有ts文件的另一个.
最后,我们告诉angular-cli karma插件使用第二个应用程序(索引1)的配置来运行测试,以防它运行代码覆盖率并运行第一个应用程序(索引0)的配置(如果它在没有代码覆盖率的情况下运行).

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

Answer 3

使用下面给出的命令来检查代码覆盖率：

ng test -cc