I had the same issue and I found a simple workaround that does the trick for me without any big configuration.
- In your app folder, create a file app.module.spec.ts
- In this file add an import to your app module.
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.
Answer from tom van green on Stack OverflowVideos
I had the same issue and I found a simple workaround that does the trick for me without any big configuration.
- In your app folder, create a file app.module.spec.ts
- In this file add an import to your app module.
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
clientsection to yourkarma.conf.jslike this:plugins: [ ... ], client: { codeCoverage: config.angularCli.codeCoverage }, files: [ ... ],Change your
test.tsto require files according tocodeCoverageparameter: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.jsonaddtsconfig-cc.spec.jsonfile with the following content:{ "extends": "./tsconfig.spec.json", "include": [ "**/*.ts" ] }In your
angular-cli.jsonadd the following toappsarray:{ "root": "src/", "polyfills": "polyfills.ts", "test": "test.ts", "testTsconfig": "tsconfig-cc.spec.json" }In your
karma.conf.jsadd the following toangularClisection: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.
The simplest solution that worked for me on Angular(v6) was just adding a app.module.spec.ts file to compliment your app.module.ts and within that .spec include the following code
import './app.module';
Apparently due to the fact app.module.ts is the root of your application including a .spec for that module will result in the inclusion of all your files during code coverage (ng test --code-coverage)
Solution provided by Narm is really great, however still not ideal, as requires importing manually at least all the lazy loaded modules + root one to the tests and also on big projects there are almost always some non-used/forgotten components which are not part of any production code and which will leave in the source code for ever untested/undiscovered.
Solution:
https://github.com/kopach/karma-sabarivka-reporter.
To use it → install npm install --save-dev karma-sabarivka-reporter
And update karma.conf.js as described here https://github.com/kopach/karma-sabarivka-reporter#-usage
After this – all files matching pattern will be included into final coverage result
Inside your src folder configure your test.js to point only the folder you want to run test
// Then we find all the tests.
const context = require.context('./app/folderyouwantoruntestcas', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
As @Chellappan pointed out, the framework was including a library in the code coverage. Because it was referenced in one of my components. I was able to exclude it from code coverage through the following in angular-cli.json
"test": {
"codeCoverage": {
"exclude": [
"src/assets/jqwidgets/**/*",
"src/assets/jqwidgets-ts/**/*"
]
},
If you want to see overall test coverage statistics than of course in Angular CLI you can just type, and see the bottom of your command prompt window
ng test --code-coverage
result:

if you want to see component's individual coverage of tests follow these steps.
npm install --save-dev karma-teamcity-reporterAdd
require('karma-teamcity-reporter')to list of plugins in karma.conf.jsng test --code-coverage --reporters=teamcity,coverage-istanbul
note that list of reporters is comma-separated, as we have added a new reporter, teamcity.
after running this command you can see the folder coverage in your dir and open index.html for a graphical view of test coverage.

You can also set the coverage threshold that you want to achieve, in karma.conf.js, like this.
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true,
thresholds: {
statements: 90,
lines: 90,
branches: 90,
functions: 90
}
},
First install the dependencies.
npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter
Then run ng test.
ng test --code-coverage
Then run the server that shows you your report.
http-server -c-1 -o -p 9875 ./coverage
You should see something like this:

I wrote a blog post about this here.