Code coverage for Angular 2 scaffold #1193

New Issue

fergalmoran · 2025-08-09T17:19:13Z

fergalmoran commented

2025-08-09 17:19:13 +00:00

Originally created by @ManuelDeLeon on 12/9/2016

You might want to consider adding code coverage to the Angular 2 scaffold.

Here's how I did it:

1) Modify package.json
1.1) Add the following to devDependencies:

    "http-server": "^0.9.0",
    "karma-remap-istanbul": "^0.2.1",
    "sourcemap-istanbul-instrumenter-loader": "^0.2.0"

http-server to easily show the generated html files. Running npm run coverage is easier than navigating to the root html file of the code coverage result.
karma-remap-istanbul to generate the report.
sourcemap-istanbul-instrumenter-loader to show original TypeScript files, not the transpiled ones.

1.2) Add the scripts to show the code coverage (the report is generated when you run the tests).

  "scripts": {
    "test": "karma start ClientApp/test/karma.conf.js",
    "test-single": "karma start ClientApp/test/karma.conf.js --single-run",
    "show-coverage": "npm run test-single && http-server -c-1 -o -p 9875 ClientApp/test/coverage"
  },

2) Modify ClientApp/test/boot-tests.ts to load all .ts files, othewise it will only show the code coverage for the components touched by test files.

const context = require.context('../app', true, /\.ts$/);

3) Modify ClientApp/test/karma.conf.js to generate the code coverage:
3.1) Update webpack config to use sourcemap-istanbul-instrumenter-loader:

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

3.2) Add the reporter and use our modified webpack config:

webpack: webpackConfig,
reporters: ['progress', 'karma-remap-istanbul'],
remapIstanbulReporter: {
    reports: {
        html: 'ClientApp/test/coverage'
    }
}

4) Update .gitignore so it ignores the coverage results:

/ClientApp/test/coverage/**

Result:

Sample repo:

https://github.com/ManuelDeLeon/jss-angular-code-coverage

Hope it helps.

*Originally created by @ManuelDeLeon on 12/9/2016* You might want to consider adding code coverage to the Angular 2 scaffold. Here's how I did it: **1)** Modify `package.json` **1.1)** Add the following to devDependencies: ``` "http-server": "^0.9.0", "karma-remap-istanbul": "^0.2.1", "sourcemap-istanbul-instrumenter-loader": "^0.2.0" ``` - `http-server` to easily show the generated html files. Running `npm run coverage` is easier than navigating to the root html file of the code coverage result. - `karma-remap-istanbul` to generate the report. - `sourcemap-istanbul-instrumenter-loader` to show original TypeScript files, not the transpiled ones. **1.2)** Add the scripts to show the code coverage (the report is generated when you run the tests). ``` "scripts": { "test": "karma start ClientApp/test/karma.conf.js", "test-single": "karma start ClientApp/test/karma.conf.js --single-run", "show-coverage": "npm run test-single && http-server -c-1 -o -p 9875 ClientApp/test/coverage" }, ``` **2)** Modify `ClientApp/test/boot-tests.ts` to load all `.ts` files, othewise it will only show the code coverage for the components touched by test files. ``` const context = require.context('../app', true, /\.ts$/); ``` **3)** Modify `ClientApp/test/karma.conf.js` to generate the code coverage: **3.1)** Update webpack config to use `sourcemap-istanbul-instrumenter-loader`: ``` var path = require('path'); var webpackConfig = require('../../webpack.config.js').filter(config => config.target !== 'node')[0]; webpackConfig.module.postLoaders = [{ test: /\.ts$/, include: [path.resolve(__dirname, "../app")], loader: 'sourcemap-istanbul-instrumenter-loader?force-sourcemap=true', exclude: [/\.spec\.ts$/] }]; ``` **3.2)** Add the reporter and use our modified webpack config: ``` webpack: webpackConfig, reporters: ['progress', 'karma-remap-istanbul'], remapIstanbulReporter: { reports: { html: 'ClientApp/test/coverage' } } ``` **4)** Update `.gitignore` so it ignores the coverage results: ``` /ClientApp/test/coverage/** ``` **Result:** ![image](https://cloud.githubusercontent.com/assets/4257750/21061306/f56b2a52-be08-11e6-860b-7b4b366569cf.png) ![image](https://cloud.githubusercontent.com/assets/4257750/21061348/385845d4-be09-11e6-9093-b552b57cab95.png) **Sample repo:** https://github.com/ManuelDeLeon/jss-angular-code-coverage Hope it helps.

fergalmoran closed this issue

2025-08-09 17:19:13 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/JavaScriptServices#1193