AngularJS + Karma + Jasmine + Karma-Coverage: Empty coverage report

Question

I'm trying to integrate my current AngularJS project with Karma Coverage. Please find below the package.json and my karma-config.

Package.json

{
  "name": "Project",
  "description": "Description",
  "repository": "https://www.repo.com",
  "devDependencies": {
    "karma": "~0.10.9",
    "karma-junit-reporter": "~0.2.1",
    "karma-jasmine": "~0.1.5",
    "karma-ng-scenario": "~0.1",
    "karma-script-launcher": "~0.1.0",
    "karma-chrome-launcher": "~0.1.3",
    "karma-firefox-launcher": "~0.1.3",
    "karma-phantomjs-launcher": "~0.1.4",
    "karma-ng-html2js-preprocessor": "~0.1",
    "karma-coverage": "~0.1"
  }
}

Karma config

'use strict';

module.exports = function (config) {
  config.set({
    basePath: '../../public/',
    logLevel: config.LOG_DEBUG,
    frameworks: ['jasmine'],
    singleRun: true,
    files: [
        'libs/jquery/jquery-1.9.0.js',
        'libs/angular/1.2.10/angular.js',
        'libs/angular/**/*.js',
        'libs/angular/*.js',
        'libs/vendor/*.js',
        'libs/test/**/*.js',

        // fixtures
        {pattern: 'test/mock-data/helloworld/*.json', watched: true, served: true, included: false},

        'apps/helloworld/**/*.js',
        'apps/helloworld/*.js',
        'test/helloworld/unit/**/*.js',
        'test/helloworld/*.js',
        'views/helloworld/directives/*.html'
    ],

    exclude: [
        'libs/angular/1.2.10/*.min.js',
        'libs/angular/angular-animate.js'
    ],

    browsers: ['PhantomJS'],

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

    preprocessor: {
        'apps/helloworld/**/*.js': ['coverage'],
        '*.html': ['ng-html2js']
    }
  })
};

When I try to run "node_modules/.bin/karma start conf/advisor/karma.conf.js" all the tests run successfully but the karma-coverage report is completely empty. I've tried a couple of options but I cannot make the reports to appear.

The console output never runs the preprocessor for the coverage. I can see that it actually runs for html2js.

DEBUG [plugin]: Loading karma-* from /Users/alansouza/workspace/helloworld/node_modules
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-chrome-launcher.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-coffee-preprocessor.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-    coverage.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-firefox-launcher.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-html2js-preprocessor.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-jasmine.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-junit-reporter.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-ng-html2js-preprocessor.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-ng-scenario.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-phantomjs-launcher.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-requirejs.
DEBUG [plugin]: Loading plugin /Users/alansouza/workspace/helloworld/node_modules/karma-script-launcher.
INFO [karma]: Karma v0.10.10 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
DEBUG [launcher]: Creating temp dir at /var/folders/8_/vw105h0j3vn66cgzttktdjmm0000gn/T/karma-29140367
DEBUG [launcher]: /Users/alansouza/workspace/helloworld/node_modules/karma-phantomjs-launcher/node_modules/phantomjs/lib/phantom/bin/phantomjs  /var/folders/8_/vw105h0j3vn66cgzttktdjmm0000gn/T/karma-29140367/capture.js
DEBUG [watcher]: Excluded file  "/Users/alansouza/workspace/helloworld/public/libs/angular/1.2.10/angular-animate.min.js"
DEBUG [watcher]: Excluded file "/Users/alansouza/workspace/helloworld/public/libs/angular/1.2.10/angular-resource.min.js"
DEBUG [watcher]: Excluded file "/Users/alansouza/workspace/helloworld/public/libs/angular/1.2.10/angular-route.min.js"
DEBUG [watcher]: Excluded file "/Users/alansouza/workspace/helloworld/public/libs/angular/1.2.10/angular-sanitize.min.js"
DEBUG [watcher]: Excluded file "/Users/alansouza/workspace/helloworld/public/libs/angular/1.2.10/angular.min.js"
DEBUG [preprocessor.html2js]: Processing "/Users/alansouza/workspace/helloworld/public/views/advisor/directives/av-product-total.html".
DEBUG [preprocessor.html2js]: Processing "/Users/alansouza/workspace/helloworld/public/views/advisor/directives/av-product.html".
DEBUG [preprocessor.html2js]: Processing "/Users/alansouza/workspace/helloworld/public/views/advisor/directives/av-select-product.html".
DEBUG [watcher]: Resolved files:

Question: Am I doing something wrong here? How to make karma coverage to load my src js files?

Answer 1

You are missing the preprocessors property and the coverageReporter property.

Add this section to your karma config file:

preprocessors: {
      'apps/helloworld/**/*.js':['coverage']
   },
coverageReporter:{
      type:'html',
      dir:'C:/Dev/coverage/'
   },

You can change the coverageReporter output directory to whatever you want.

Answer 2

I was able to fix the problem. It was a missing "s". My karma config was initially preprocessor where is supposed to be preprocessors. Please find below the correct karma config:

'use strict';

  module.exports = function (config) {
  config.set({
    basePath: '../../public/',
    logLevel: config.LOG_DEBUG,
    frameworks: ['jasmine'],
    singleRun: true,
    files: [
        'libs/jquery/jquery-1.9.0.js',
        'libs/angular/1.2.10/angular.js',
        'libs/angular/**/*.js',
        'libs/angular/*.js',
        'libs/vendor/*.js',
        'libs/test/**/*.js',

        // fixtures
        {pattern: 'test/mock-data/helloworld/*.json', watched: true, served: true, included: false},

        'apps/helloworld/**/*.js',
        'apps/helloworld/*.js',
        'test/helloworld/unit/**/*.js',
        'test/helloworld/*.js',
        'views/helloworld/directives/*.html'
    ],

    exclude: [
        'libs/angular/1.2.10/*.min.js',
        'libs/angular/angular-animate.js'
    ],

    browsers: ['PhantomJS'],

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

    preprocessors: {
        'apps/helloworld/**/*.js': ['coverage'],
        '*.html': ['ng-html2js']
    }
    })
  };

The most interesting point here is: it was working before with preprocessor for ng-html2js (my directives testing were passing). When I introduced coverage then the problem started to happen.