Karma - How to point to a source map for typescript coverage

Question

I like to generate a coverage report for my typescript source files with karma-coverage. My unit tests are written in javascript and I'm using the Jasmine Test framework.

My folder structure looks like this:

node_modules/
app/
  app.js
  app.js.map
  app.ts
  components/
  controllers/
      SampleController.ts
  directives/
  filters/
  services/

unittests/
  karma.conf.js
  components/
  controllers/
      SampleControllerTest.js
  directives/
  filters/
  services/

My karma.conf.js

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    plugins: [
          'karma-jasmine',
          'karma-ng-html2js-preprocessor',
          'karma-coverage',
          'karma-phantomjs-launcher',
          'karma-sourcemap-loader'

      ],
    preprocessors: {
        '../app/directives/controls/**/*Template.html' : [ 'ng-html2js' ],

            // source files, that you wanna generate coverage for
            // do not include tests or libraries
            // (these files will be instrumented by Istanbul)
        '../app/app.js' : ['sourcemap', 'coverage' ],

    },
    reporters: ['progress', 'coverage'],

    // web server port
    port: 9876,

    coverageReporter: {
          type : 'html',
          dir : 'coverage/'
      },
    // and some other stuff
  });
};

Currently my coverage report delivers sufficient metrics but not related to the single typescript files but the app.js.

I suppose that I either messed up something with the preprocessor config or that I need to specify the source map.

Anny hints?

Answer 1

Using karma-istanbul-remap does the trick for me.

karma.conf.js:

module.exports = function(config) {
  config.set({
    frameworks: ['jasmine'],
    plugins: [
          'karma-jasmine',
          'karma-ng-html2js-preprocessor',
          'karma-coverage',
          'karma-phantomjs-launcher',
          'karma-remap-istanbul'

      ],
    preprocessors: {
        '../app/directives/controls/**/*Template.html' : [ 'ng-html2js' ],

            // source files, that you wanna generate coverage for
            // do not include tests or libraries
            // (these files will be instrumented by Istanbul)
        '../app/app.js' : ['coverage' ],

    },
    reporters: ['progress', 'coverage', 'karma-remap-istanbul'],

    // web server port
    port: 9876,

    coverageReporter: {
        type : 'json',
        subdir : '.',
        dir : 'coverage/',
        file : 'coverage.json'
    },
    remapIstanbulReporter: {
          src: 'coverage/coverage.json',
          reports: {
              lcovonly: 'coverage/lcov.info',
              html: 'coverage/html/report'
          },
          timeoutNotCreated: 5000, // default value
          timeoutNoMoreFiles: 1000 // default value
    },
    // and some other stuff
  });
};