Angular CLI run both test report and code coverage report

0
votes

Is it possible, in Angular CLI, to start testing with Karma and return code coverage by the same time?

Explanation

Running ng test starts Chrome and run the tests, so I can see the results on Chrome.

Running ng test -cc starts Chrome, run the tests without displaying tests results and produces code coverage report in coverage directory.

Is it possible to have both? So I could benefit of "live" test-coding experience AND having code report generated along with tests results displayed in Chrome.

Current karma.conf.js

module.exports = function (config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', '@angular/cli', 'intl-shim'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-phantomjs-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-mocha-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma'),
      require('karma-intl-shim')
    ],
    client:{
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    },
    files: [
      { pattern: './src/test.ts', watched: false },
      { pattern: './node_modules/intl/locale-data/jsonp/en-US.js', watched: false }
    ],
    preprocessors: {
      './src/test.ts': ['@angular/cli']
    },
    mime: {
      'text/x-typescript': ['ts','tsx']
    },
    coverageIstanbulReporter: {
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    },
    angularCli: {
      environment: 'dev'
    },
    reporters: config.angularCli && config.angularCli.codeCoverage
              ? ['progress', 'coverage-istanbul']
              : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false
  });
};
1
angularkarma-runner

1 Answers

1
votes

I think you just need to use the html reporter as well when running with coverage:

 reporters: config.angularCli && config.angularCli.codeCoverage
          ? ['progress', 'kjhtml', 'coverage-istanbul']
          : ['progress', 'kjhtml'],

You can basically use different reporters based on the -cc flag.

Note that the 'progress' reporter is the console-based running report.