Javascript karma code coverage configuration for browserify and jasmine

Oscar Brito

Hey Oscar how was your weekend?

Was good thanks for asking. Did a little bit of shopping, cleaning, cooking, reading and some generic chill out time.

This weekend I was working on ticket #31 of my divhide nodejs library. The intent of this library is to be an isomorphic/universal javascript library that you can use on your javascript enabled devices.

The project uses Jasmine as a test framework and the reason for this is mainly to avoid nodejs-browser shims.

This article describes how you can enable code coverage for your browserify packages. When code coverage is enabled you'll have the following views at your disposal.

Remember that you can see the full configuration on github.

Code coverage summary

File code coverage

In summary, this configuration will compile a browserify bundle with code coverage support; then Karma is used to run the tests and create the code coverage report.

browserify configuration

npm i grunt-browserify browserify-istanbul --save-dev

The browserify build configuration follows. You should exclude external libraries otherwise they will be added to the coverage report!

{
    "test": {

        files: {
            'test/divhide.js': [
                'src/SpecIndex.js'
            ]
        },

        options: {

            exclude: [ "src/**/*Spec.js" ],

            external: [
                "lodash"
            ],

            browserifyOptions: {
                transform: [ 
                    require("browserify-istanbul") 
                ],
                standalone: "Divhide",
                debug: true
            }

        }
    }

}

karma configuration

npm i grunt-karma karma-coverage karma-jasmine karma-phantomjs-launcher karma-threshold-reporter --save-dev  

I'm using grunt to run all my development tasks and so I'm using grunt-karma to trigger karma from grunt.

{
    test: {
        configFile: 'karma.conf.js',
    }
}

The karma configuration file, described next, contains the frameworks, reporters and files. Remember that the browserify file already contains the code coverage support, so karma is only used to create the test code coverage report.

There's also a threshold for code coverage set to 90% of the code. This means that 90% of all code should be executed when running the tests. This doesn't mean that the code is fine!

"use strict";

module.exports = function(config) {

    config.set({

        basePath : './',

        frameworks : [ 
            "jasmine"
        ],

        reporters: [
            'progress', 
            'dots', 
            'coverage', 
            'threshold'
        ],

        files : [
            'test/divhide-libs.js',
            'test/divhide.js',
            'src/**/*JasmineSpec.js',
        ],

        browsers : ['PhantomJS'],

        autoWatch : true,
        logLevel: "LOG_DEBUG",
        singleRun: true,

        coverageReporter: {
            dir: 'test/',
            reporters: [
                { type: 'text-summary' },
                { type: 'lcov', subdir: './' }
            ]
        },

        thresholdReporter: {
            statements: 90,
            branches: 90,
            functions: 90,
            lines: 90
        }

    });

};

As you can see on the picture bellow, three things happened: test run, generate code coverage report and generate code coverage threshold report.
karma example

Conclusion

It's pretty cool to have an idea on how many lines of our code were evaluated during test execution. There's a lot of fun conclusions that we can take after evaluating the reports.

Let me know your thoughts by comment or tweet.

Oscar out.