How to merge different karma coverage html reports into single html file?

Question

I am new to TDD. we have already executed the test cases through karma-coverage.. If the test case count increases, the code coverage took more time to complete the job. so i had switched into concurrenlty to implement the parallel test case execution. Before that, the code coverage results are generated as single html file. But now, i had configure the coverage results into separate folders to improve the performance on test cases. But now, the coverage results are generated as separate html report. But i want to combine these separate folder's index.html file into single html report.

so that, i have implemented the parallel execution of my repository using "concurrently". I had configured the gulp generate the separate code coverage reports for each folder. Each folder has set of .spec file The gulp configuration details is given below,

gulp zero:

coverageReporter: {
        dir: './cireports',
        subdir: "codecoverage/zero",
        reporters: [
            { type: 'html', file: "UnitTestCover.html" },
        ]
    }

gulp one:

coverageReporter: {
        dir: './cireports',
        subdir: "codecoverage/one",
        reporters: [
            { type: 'html', file: "UnitTestCover.html" },
        ]
    }

gulp two:

coverageReporter: {
        dir: './cireports',
        subdir: "codecoverage/two",
        reporters: [
            { type: 'html', file: "UnitTestCover.html" },
        ]
    }

gulp three:

coverageReporter: {
        dir: './cireports',
        subdir: "codecoverage/three",
        reporters: [
            { type: 'html', file: "UnitTestCover.html" },
        ]
    }

If I executed following command through command prompt,

concurrently “gulp zero” “gulp one” “gulp two” “gulp three” 

Test case was executed parallel and the coverage reports generated in the specific folder. Each coverage folder has index.html file. So I need to merge the coverage reports from all folders into single index.html file.

I had tried to merge the coverage reports from following package, https://www.npmjs.com/package/gulp-concat. So that I had installed the “gulp-concat” from following command,

npm install  --save -dev gulp-concat

After that, I had configure the gulp.js to merge the coverage reports, The gulp-concat configuration is given below,

gulp-concat:

gulp.task('merge', function () {
return gulp.src(['./cireports/codecoverage/zero/index.html', './cireports/codecoverage/one/index.html', './cireports/codecoverage/two/index.html', './cireports/codecoverage/three/index.html'])
  .pipe(concat('index.html'))
  .pipe(gulp.dest('./dist/'));
});

After test case execution completed, I had executed the “gulp merge” to merge the coverage reports. Expected output was not came. The merged index.html file was generated the series of coverage reports in a single index file

Can anyone tell me whether there is any plan to implement the merging of coverage reports?

Regards,

Thirunavukkarasu G

Answer 1

Finally i had a found a solution to merge multiple coverage reports into single coverage object with istanbul-combine package. For Reference, refer the following link.[https://www.npmjs.com/package/istanbul-combine].

I had generated the coverage reporter output as json objects. After json coverage reports generated in the respective folder, I had merged them with istanbul-combine package. This package used for combining coverage reports from multiple objects into single html coverage report.

My Solution is given below:-

var combine = require('istanbul-combine');
.....
.....
.....
/**
* Generates html code coverage report in folder codecoverage/pack1
*/
gulp.task('generate_coverage1', function () {
     var opts = {
     dir: 'cireports/codecoverage/pack1',                       
     pattern: 'cireports/reporters/pack1/*.json',               
     print: 'none',                                            
     reporters: {
        html: {}
     }
};
combine.sync(opts);
});

/**
 * Generates html code coverage report in folder codecoverage/pack2
*/
gulp.task('generate_coverage2', function () {
    var opts = {
    dir: 'cireports/codecoverage/pack2',                       
    pattern: 'cireports/reporters/pack2/*.json',               
    print: 'none',                                           
    reporters: {
        html: {}
    }
};
combine.sync(opts);
});

Regards,

Creator