I have a hybrid Angular App (mix between 1.7.5 and 8.2.10) which uses a mix between TypeScript and JavaScript.
To run the unit tests, I have two separate npm scripts, one for the ngX tests and one for the ng1 tests.
My issue is that when I run my ng1 tests for debugging, the typescript code always has the code coverage enabled, meaning it is minified and has extra lines of code to count which lines/branch/statements/functions I am hitting. This obviously makes debugging a major annoyance. This is my npm script to run the tests
"test:ng1": "karma start ./src/karma.ng1.conf.js",
And below is an example of a config I ran with all coverage plugins removed in an attempt to prevent the coverage code being applied to my typescript:
module.exports = function(config) {
var reporters = ['mocha', 'kjhtml'];
// Only implement coverage if the coverage argument was set
if(config.coverage){
reporters.push('coverage-istanbul');
console.log('Coverage enabled');
}
else{
console.log('Coverage not enabled');
}
config.set({
// base path, that will be used to resolve files and exclude
basePath: '../',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine', 'karma-typescript'],
preprocessors: {
'src/app/**/*.ts': ['karma-typescript'],
'src/test/spec/**/*.ts': ['karma-typescript'],
// 'src/app/modules/ng1/**/*.js': ['karma-coverage-istanbul-instrumenter'],
// 'src/app/modules/ng1/**/*.ts': ['karma-typescript', 'karma-coverage-istanbul-instrumenter'],
'**/*.html': ['ng-html2js']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
// list of files / patterns to load in the browser
files: [
.... all the files
],
// list of files / patterns to exclude
exclude: [
'src/app/modules/ngX/**/*.spec.ts'
],
// web server port defaults to 9876
browsers: [
'ChromeHeadless'
],
browserNoActivityTimeout: 60000,
// Code coverage report
reporters: reporters,
mochaReporter: {
ignoreSkipped: true
},
// coverageIstanbulReporter: {
// reports: ['text-summary', 'html'],
// fixWebpackSourcePaths: true,
// dir: 'target/coverage/ng1',
// subdir: '.'
// },
// Which plugins to enable
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
// 'karma-coverage-istanbul-reporter',
'karma-jasmine-html-reporter',
// 'karma-coverage-istanbul-instrumenter',
'karma-mocha-reporter',
'karma-ng-html2js-preprocessor',
'karma-typescript'
],
tsconfig: 'tsconfig.spec.json',
colors: true,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO
});
};
With this config, the typescript code still has coverage code embedded in it when debugging. How can I disable this?
For anyone who comes across this, the problem was that karma-typescript automatically enables code-coverage so I just had to add a setting to disable it and enable source maps
In my karma config
karmaTypescriptConfig = {
bundleOptions:{
sourceMap: true
},
coverageOptions:{
instrumentation : false
}
};