Angular でカバレッジレポートを出力する

2018/7/15 Angular

Angular でカバレッジレポートを出力する

Angular では標準でkarmaというカバレッジレポートを出力する機能があるようです。

ですが、デフォルトのnpm scriptsコマンド（ng test）ではカバレッジが出力されません。

ng test --code-coverage

1	ng test --code-coverage

と実行すると、srcと同一の階層にcoverageというフォルダが作成され、カバレッジレポートを指定した形式（htmlなど）で見ることができます。（coverage/index.html）

テスト実行が終われば、Chromeでauto-openしてほしいのですが、その機能があるのかよくわかりません。nyc+mochawesomeならあるので、karma.conf.jsの設定次第では可能かもしれません。

karma.conf.js

以下はkarma.conf.jsにdefaultで設定されているプラグインです。

plugins: [
require('karma-jasmine'),// karmaとjasmineでテストする
require('karma-chrome-launcher'), // chromeでkarmaのテストを実行してくれる
require('karma-jasmine-html-reporter'),// debug.htmlに結果をレポートしてくれる
require('karma-coverage-istanbul-reporter'),// coverageIstanbulReporterやreporterの設定ができる
require('@angular-devkit/build-angular/plugins/karma')// よくわかりません
]

plugins: [

require('karma-jasmine'),// karmaとjasmineでテストする

require('karma-chrome-launcher'), // chromeでkarmaのテストを実行してくれる

require('karma-jasmine-html-reporter'),// debug.htmlに結果をレポートしてくれる

require('karma-coverage-istanbul-reporter'),// coverageIstanbulReporterやreporterの設定ができる

require('@angular-devkit/build-angular/plugins/karma')// よくわかりません

]

coverageIstanbulReporterの設定はデフォルトで以下になっています。

coverageIstanbulReporter: {
  dir: require('path').join(__dirname, '../coverage'),
  reports: ['html', 'lcovonly'],
  fixWebpackSourcePaths: true
},

coverageIstanbulReporter: {

dir: require('path').join(__dirname, '../coverage'),

reports: ['html', 'lcovonly'],

fixWebpackSourcePaths: true

これに‘text-summary’を追加します。

coverageIstanbulReporter: {
dir: require('path').join(__dirname, '../coverage'),
reports: ['html', 'lcovonly','text-summary'],
fixWebpackSourcePaths: true
},

coverageIstanbulReporter: {

dir: require('path').join(__dirname, '../coverage'),

reports: ['html', 'lcovonly','text-summary'],

fixWebpackSourcePaths: true

テスト実行後にテキストベースでカバレッジレポートが出力されるようになります。