I am running the following command to unit test and generate code code coverage report.
ng test --code-coverage
It is writing code coverage report in coverage folder.
I need to see the coverage of the whole project and not just the file for which there are tests.
karma.conf.js
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-jasmine-html-reporter'),
require('karma-chrome-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma'),
require('karma-coverage'),
require('karma-sourcemap-loader')
],
files: [
{ pattern: './src/test.ts', watched: false }
],
preprocessors: {
'./src/test.ts': ['angular-cli']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress', 'kjhtml'],
coverageReporter: {
includeAllSources: true
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
});
};
I had the same issue and I found a simple workaround that does the trick for me without any big configuration.
import './app.module';
That's it ;)
The point is, your app module is most likely the central part of your application which imports any other used files directly or indirectly. Now that you have created the spec file, everything that is included by your module should also be included in the test coverage report.
I am not 100% sure if this works with lazy loaded modules. If not, you can simply import those lazy loaded modules in your app.module.spec.ts as well, or create a spec file per module, where you import the module.
Here is the way to do this:
Add client
section to your karma.conf.js
like this:
plugins: [
...
],
client: {
codeCoverage: config.angularCli.codeCoverage
},
files: [
...
],
Change your test.ts
to require files according to codeCoverage
parameter:
let context;
if (__karma__.config.codeCoverage) {
context = require.context('./app/', true, /\.ts/);
} else {
context = require.context('./app/', true, /\.spec\.ts/);
}
context.keys().map(context);
UPDATE:
Since Angular CLI 1.5.0
additional steps are required:
Next to tsconfig.spec.json
add tsconfig-cc.spec.json
file with the following content:
{
"extends": "./tsconfig.spec.json",
"include": [
"**/*.ts"
]
}
In your angular-cli.json
add the following to apps
array:
{
"root": "src/",
"polyfills": "polyfills.ts",
"test": "test.ts",
"testTsconfig": "tsconfig-cc.spec.json"
}
In your karma.conf.js
add the following to angularCli
section:
app: config.angularCli.codeCoverage ? '1' : '0'
eventually it should look something like this:
angularCli: {
environment: 'dev',
app: config.angularCli.codeCoverage ? '1' : '0'
},
So what's happening here?
Apparently they have fixed Angular compiler plugin and it takes the file globs from tsconfig.spec.json
now. As long as we include only **/*.spec.ts
in tsconfig.spec.json
these are the only files that will be included in coverage.
The obvious solution is making tsconfig.spec.json
include all the files (in addition to require.context
). However, this will slow down all the tests even when running without coverage (which we don't want to).
One of the solutions is using the ability of angular-cli
to work with multiple apps.
By adding another entry into apps
array, we're adding another configuration for "another" (which is actually the same one) app.
We strip out all the irrelevant information in this config, leaving just the test configuration, and put another tsconfig
which includes all the ts
files.
Finally, we're telling angular-cli
karma
plugin to run the tests with the configuration of the second app (index 1
) in case it is running with code coverage and run with the configuration of the first app (index 0
) if it is running without code coverage.
Important note: in this configuration I assume you have only one application in .angular-cli.json
. In case you have more you have to adjust indexes accordingly.
I've just created karma plugin, which adds all the files in the project to coverage statistic - https://github.com/kopach/karma-sabarivka-reporter.
To use it → install npm install --save-dev karma-sabarivka-reporter
And update karma.conf.js
like this:
reporters: [
// ...
'sabarivka'
// ...
],
coverageReporter: {
include: 'src/**/!(*.spec|*.module|environment*).ts', // glob patter which matchs all the files you want to be included into the coverage result
exclude: 'src/main.ts',
// ...
},
This solves issue without any other manipulation. Easy to add to existing projects as well as to new ones.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With