Code coverage for Angular 2 and webpack 2

[aaltotsky]

Does anyone have suggestions how to implement the code coverage for webpack2?

I tried https://github.com/aspnet/JavaScriptServices/wiki/Angular2SpaCodeCoverage, with some fixes:

var path = require('path');
var webpackConfig = require('../../webpack.config.js')().filter(config => config.target !== 'node')[0];
webpackConfig.module.loaders = [{
test: /.ts$/,
include: [path.resolve(__dirname, "../app/")],
loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true',
exclude: [/.spec.ts$/],
enforce: 'post'
}];

but I was not able to produce the coverage report. The report is empty. Any suggestions or recommendations? Thank you.

[etimesg]

Hi Alexander,

I have code coverage working in a setup similar than yours. Apart from the instructions from Angular2SpaCodeCoverage, we also had to replace the old module.loaders with the new module.rules from Webpack 2. Here's the relevant passage from our code base:

var webpackConfig = require('../../webpack.config.js')().filter(config => config.target !== 'node');
webpackConfig[0].module.rules = [...webpackConfig[0].module.rules, { 
   /* loader settings here */
}] 

I hope that helps.

Best,
E

[aaltotsky]

Hi @etimesg,

Thank you for your comments. I added your suggested changes, but still - no result (empty) in my cover report. Here is my karma.conf.js:

var path = require('path');
var webpackConfig = require('../../webpack.config.js')().filter(config => config.target !== 'node');
webpackConfig[0].module.loaders = [...webpackConfig[0].module.rules, {
    test: /.ts$/,
    include: [path.resolve(__dirname, "../app/")],
    loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true',
    exclude: [/.spec.ts$/],
    enforce: 'post'
}];

module.exports = function (config) {
    config.set({
        basePath: '.',
        frameworks: ['jasmine'],
        files: [
            '../../wwwroot/dist/vendor.js',
            './boot-tests.ts'
        ],
        preprocessors: {
            './boot-tests.ts': ['webpack']
        },
        reporters: ['progress'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        mime: { 'application/javascript': ['ts','tsx'] },
        singleRun: false,
        webpackMiddleware: { stats: 'errors-only' },
        webpack: webpackConfig,
        reporters: ['progress', 'karma-remap-istanbul'],
        remapIstanbulReporter: {
            reports: {
                html: 'ClientApp/test/coverage'
            }
        }
    });
};

Also, I upgraded some components to the latest in my package.config:

  "devDependencies": {
    "@types/chai": "^3.4.34",
    "@types/jasmine": "^2.5.37",
    "chai": "^3.5.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chai": "^0.1.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-webpack": "^1.8.0",
    "http-server": "^0.9.0",
    "karma-remap-istanbul": "^0.6.0",
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0"
  }

All tests are working fine (no errors).

Thanks.

[etimesg]

@aaltotsky I think you are still referring the old module.loaders. Could you please try to replace webpackConfig[0].module.loaders = [...webpackConfig[0].module.rules, { with webpackConfig[0].module.rules = [...webpackConfig[0].module.rules, { and see if that works?

The rest of our karma config and package.json are the same, with the exception of "@types/jasmine": "^2.5.40" and "karma-remap-istanbul": "^0.2.1"

[aaltotsky]

@etimesg Aha. That's it. The code coverage is working now. Here are my final changes:

var path = require('path');
var webpackConfig = require('../../webpack.config.js')().filter(config => config.target !== 'node');
webpackConfig[0].module.rules = [...webpackConfig[0].module.rules, {
    test: /.ts$/,
    include: [path.resolve(__dirname, "../app/")],
    loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true',
    exclude: [/.spec.ts$/],
    enforce: 'post'
}];

I lest the "karma-remap-istanbul": "^0.6.0" as it is working with this version. Thanks a lot.

This issue can be close.

[SteveSandersonMS]

Thanks everyone!

[aherrick]

How exactly is "show-coverage" supposed to work? I do npm run show-coverage it fires up Chrome (http://127.0.0.1:9875) and never generates a HTML file in client/tests?

[aherrick]

Looks like I was just missing:

reporters: ['progress', 'karma-remap-istanbul']

Seems to be working now!

[kadamgreene]

I am attempting to follow the instructions here and I am getting:

webpack: wait until bundle finished:
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\app.module.browser.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\app.module.browser.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\app.module.server.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\app.module.shared.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\components\app\app.component.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\components\counter\counter.component.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\components\home\home.component.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\components\fetchdata\fetchdata.component.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\components\navmenu\menuitem.component.ts
Failed to parse file: C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\ClientApp\app\components\navmenu\navmenu.component.ts

WARNING in ./ClientApp/app/app.module.server.ts
Module build failed: Error: Line 7: Unexpected token
at constructError (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:2407:21)
at createError (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:2426:17)
at unexpectedTokenError (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:2500:13)
at tolerateUnexpectedToken (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:2509:21)
at parseStatementListItem (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:3973:21)
at parseScriptBody (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:5490:25)
at parseProgram (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:5506:16)
at Object.parse (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\esprima\esprima.js:5690:23)
at Object.instrumentSync (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\istanbul\lib\instrumenter.js:459:31)
at Object.module.exports (C:\Users\adam.greene\source\repos\WebApplication2\WebApplication2\node_modules\sourcemap-istanbul-instrumenter-loader\index.js:41:25)
@ ./ClientApp .ts$
@ ./ClientApp/test/boot-tests.ts

the stack trace is repeated for each file that failed to parse with basically the same message.

My karma.conf.js is:

// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html

module.exports = function (config) {
    var path = require('path');
    var webpackConfig = require('../../webpack.config.js')().filter(config => config.target !== 'node')[0];
    webpackConfig.module.rules = [...webpackConfig.module.rules, {
        test: /.ts$/,
        include: [path.resolve(__dirname, "../app/")],
        loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true',
        exclude: [/.spec.ts$/],
        enforce: 'post'
    }];


    config.set({
        basePath: '.',
        frameworks: ['jasmine'],
        files: [
            '../../wwwroot/dist/vendor.js',
            './boot-tests.ts'
        ],
        preprocessors: {
            './boot-tests.ts': ['webpack']
        },
        reporters: ['progress', 'karma-remap-istanbul'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['Chrome'],
        mime: { 'application/javascript': ['ts', 'tsx'] },
        singleRun: false,
        webpack: webpackConfig,
        webpackMiddleware: { stats: 'errors-only' },
        remapIstanbulReporter: {
            reports: {
                html: 'ClientApp/test/coverage'
            }
        }
    });
};

[lucipacurar]

I am getting the same errors as @kadamgreene

[kadamgreene]

I really need this solved for a project at work. Any help would be greatly appreciated.

[ThomasOrtiz]

I'm also interested in seeing if this was solved. I've scoured the internet trying to find solutions and these resources are the closest I've come.

Thanks for any help!

[ThomasOrtiz]

@kadamgreene @lucassp : I fixed the issue with failure to parse by adding the following line marked in the picture. Now I get a coverage report and I CAN view it BUT I can't drill into files because my mapping is messing up :(

I can't drill into each file to see what lines are hit/not hit. So this is as far as I can really go.

If you all figure out how to map files appropriately tell me!

[ThomasOrtiz]

I changed my loader from sourcemap-istanbul-instrumenter-loader to istanbul-instrumenter-loader and now the coverage is working perfectly and I can view my files in the output html :D