Generating istanbul code coverage reports for jasmine tests run (via grunt) on a browserify bundle in phantomjs

Question

The title says it all really. Despite trawling the internet I haven't found a single example of a solution to this problem.

Here are some near misses

• https://github.com/amitayd/grunt-browserify-jasmine-node-example - grunt, browserify and jasmine
• https://github.com/gotwarlost/istanbul/issues/59#issuecomment-18799734 - browserify and istanbul

Here is my in-progress code https://github.com/wheresrhys/on-guard/tree/browserify (note it's the 'browserify' branch - Gruntfile.js is a bit of a mess but will tidy it up shortly). My initial investigations using console.log indicate that somehow bundle.src.js is being loaded in the page but when the tests are run (and passed!) the code in bundle.src.js isn't being run, so I have a feeling it might be an aliasing problem... though one that's limited to phantomjs as when I open the specrunner in chrome the code is getting run.

Answer 1

I'm using grunt-browserify + browserify-istanbul + grunt-contrib-jasmine + grunt-template-jasmine-istanbul as solution. This solution has also excluded third party libraries when building source files using browserify.

Show the code first, I'll explain later,

grunt.initConfig({
browserify: {
  // build specs using browserify
  specs: {
    src: ["spec/**/*Spec.js"],
    dest: "spec/build/specs.js",
    options: {
      debug: true
    }
  },
  // build source files using browserify and browserify-istanbul
  dev: {
    options: {
      debug: true,
      browserifyOptions: {
        standalone: 'abc'
      },
      transform: [['browserify-istanbul', {
        ignore: ['**/node_modules/**'], // ignore third party libs
        defaultIgnore: true
      }]]
    },
    src: ['abc.js'],
    dest: 'dist/abc.js'
  }
},
connect: {
  server: {
    options: {
      port: 7000
    }
  }
},
// test using jasmine, generate coverage report using istanbul
jasmine: {
  coverage: {
    src: ['dist/abc.js'],
    options: {
      junit: {
            path: 'bin/junit'
        },
      host: 'http://localhost:7000/',
      specs:  'spec/build/specs.js',
      keepRunner: true,
      summary: true,
      template: require('grunt-template-jasmine-istanbul'),
      templateOptions: {
        replace: false, // *** this option is very important
        coverage: 'bin/coverage/coverage.json',
        report: [
          {
          type: 'html',
          options: {
            dir: 'spec/coverage/html'
          }
        }]
      }
    }
  }      
}

  grunt.registerTask('specs', ['browserify:specs', 'browserify:dev', 'connect', 'jasmine']);

The steps of generating istanbul coverage report can be concluded into three:

1. Instrument code
2. Run test
3. Generate coverage report

In our solution, we use browerify-istanbul in step 1, grunt-contrib-jasmine and runt-template-jasmine-istanbul in step 2 and 3.

browserify-istanbul will let you instrument code in browserify building step, in this way, we can easily ignore third party libs. But the grunt-template-jasmine-istanbul will instrument code again. To avoid this, you can set replace to false in the options.

Refs:

1. Istanbul steps
2. broswerify-istanbul
3. grunt-contrib-jasmine
4. grunt-template-jasmine-istanbul -- replace option