This repository was archived by the owner on Apr 8, 2020. It is now read-only.
- Notifications
You must be signed in to change notification settings - Fork 517
Angular2SpaCodeCoverage
Steve Sanderson edited this page Dec 13, 2016 · 2 revisions
Instructions provided by @ManuelDeLeon - thanks!
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-serverto easily show the generated html files. Runningnpm run coverageis easier than navigating to the root html file of the code coverage result. -
karma-remap-istanbulto generate the report. -
sourcemap-istanbul-instrumenter-loaderto 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.