remap-istanbul and karma or browserify

[ghost]

I have a TypeScript project which I would like to generate coverage reports for. Karma is set up to use browserify as preprocessor (using karma-browserify). By adding browserify-istanbul as browserify transform, I managed to generate coverage reports which display the TypeScript code, but with (what it seems to be) coverage for the generated JavaScript:

Can remap-istanbul be used to correct the coverage mapping? Any pointers how I can integrate it with karma and/or browserify?

karma.conf.js:

module.exports = function(config) {
  config.set({
    frameworks: ['browserify', 'source-map-support', 'mocha', 'chai'],
    files: [
      'typings/tsd.d.ts',
      'test/**/*.ts',
      'src/**/*.ts'
    ],
    preprocessors: {
      'typings/tsd.d.ts': ['browserify'],
      'test/**/*.ts': ['browserify'],
      'src/**/*.ts': ['browserify']
    },
    browserify: {
      debug: true,
      plugin: ['tsify'],
      transform: [require('browserify-istanbul')]
    },
    browsers: [
      'Chrome'
    ],
    client: {
      mocha: {
        reporter: 'html',
        ui: 'bdd'
      }
    },
    reporters: ['progress', 'coverage'],
    coverageReporter: {
      type: 'html',
      dir: 'coverage',
      subdir: function (browser) {
        return browser.toLowerCase().split(/[ /-]/)[0];
      }
    }
  });
};

[kitsonk]

I suspect there are two sets of source-maps, something we never really considered in the design of the project initially. I am not familiar with the details of Karma or Browserify, but I suspect you have something like this with your emitted files...

source.ts outputs to source.js and source.js.map then you use Browserify and you take several of your emitted JS files and get something like bundle.js and bundle.js.map (or the map is inlined into bundle.js). Is that a correct assumption?

[ghost]

I'm also not familiar with the inner working of Karma or Browserify. I'm just trying to set up code coverage for my TypeScript project. From what I see, the source map is inlined into bundle.js.

@devongovett or @smrq, would remap-istanbul be usable to get proper code coverage for TypeScript? Is it possible to combine the browserify-istanbul transform and tsify plugin (and remap-istanbul) to fix the coverage report? Do you have any pointers how we can get this working?

[kitsonk]

I suspect the source map in bundle.js maps back to the emitted JavaScript, which then contains the source map back to the original TypeScript file. While we thought about this eventuality, we didn't implement this sort of "recurse until you can't find a source map" logic. While waiting for any more feedback, I will mark this as an enhancement and think about how difficult or challenge it might be to recurse the source maps.

If there is a way for the inlined source map in the emitted Browserify bundle to map back directly to the original TypeScript locations then "it should just work®"...

[ghost]

I managed to set up code coverage for TypeScript by first transpiling the code to JavaScript in a temporary directory, then running Karma configured with Browserify and Istanbul to generate a coverage JSON report, and finally using remap-istanbul to generate the HTML report from the JSON file.

I have created a test project using this setup here: stijnvn/typescript-browserify-istanbul