Karma-pierce-reporter NPM

karma-pierce-reporter

A Karma reporter plugin that watches a coverage report file generated by Istanbul using something like karma-coverage and feeds it to Pierce for browsing.

Installation

npm install --save karma-pierce-reporter

Add the reporter to your karma config (karma.conf.js):

// karma.conf.js

module.exports = function(config) {
  config.set({
    // you can omit the plugin list as karma will load all karma-* plugins in
    // your package.json dependencies automatically
    plugins: [
      "karma-coverage",
      "karma-pierce-reporter"
    ],

    reporters: [ /* "progress", ..., */ "coverage", "pierce" ],

    // In your karma-coverage configuration, make sure you use the "json" 
    // reporter which output we'll feed to Pierce:
    coverageReporter: {
      dir: "coverage",
      subdir: ".",
      reporters: [
        { type: "json", file: "report.json" },
        { type: "text-summary" } // optional, if you want text output as well
      ],
    };

    pierceReporter: {
      // Path to where the output will be generated.
      // 
      // The "dir" is relative to the JSON coverageReporter config dir/subdir
      // config, so in this case the Pierce HTML output will be found at:
      // 
      // "coverage/pierce/index.html"
      dir: "pierce",

      // Number of seconds the plugin is allowed to wait for the JSON coverage
      // report to be generated, in case it wasn't by the time the plugin was
      // run.
      // 
      // This is necessary since we can't chain Karma reporters so the plugin
      // can not tell when karma-coverage is done writing its reports.
      waitSeconds: 5,

      // A string to delimit all (full) file-paths by. This is commonly the 
      // name of the folder that contains your app, or the root folder under
      // which the javascript files reside.
      // 
      // For example, if you have a folder structure like this:
      // 
      //   home
      //     somebody
      //       projects
      //         myapp
      //           package.json
      //           lib
      //             index.js
      //           test
      //             index.test.js
      // 
      // You would specify "myapp" and /home/somebody/projects/myapp will be
      // discarded from the file paths in the UI.
      sourceRoot: null,
      
      // A list of folder names to group the modules by in the UI.
      // An example value of "views/" will group all files under _any_ folder
      // called "views" recursively. So, for a file path like this:
      // 
      //     /views/Users/views/Profile/index.js
      //     
      // The file will be listed under:
      // 
      //   Users
      //     Profile
      //       index.js
      //       
      groupBy: [ "views/" ],

      // If you have specified any groups in the "groupBy" parameter, turning
      // this flag on will keep the group names in the file paths. So, instead
      // of seeing:
      // 
      //   Users
      //     Profile
      //       index.js
      //  
      // You will now see:
      // 
      //   views/Users
      //     views/Profile
      //       index.js
      // 
      // This option is handy when you have multiple groups.
      keepGroupNames: true
    }
  });
};