Angular-cli check coverage of all files

Question

I run the following command for unit test and generate a code coverage report.

ng test --code-coverage 

He writes a code coverage report in the coverage folder.

I need to see the scope of the entire project, 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 }); }; 

Answer 1

I had the same problem and I found a simple workaround that does the trick for me without any big configuration.

• In the folder of your application, create the file app.module.spec.ts
• In this file, add import to your application module.

import './app.module';

What is it;)

The fact is that your application 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 specification file, everything that is included in your module should also be included in the test report.

I am not 100% sure if this works with lazy loaded modules. If not, you can simply import those lazy loadable modules into your app.module.spec.ts or create a specification file on the module where you import the module.

Answer 2

Here's how to do it:

• Add the client section to your karma.conf.js as follows:

   plugins: [ ... ], client: { codeCoverage: config.angularCli.codeCoverage }, files: [ ... ], 

• Modify your test.ts to require files according to the 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:

3. Next to tsconfig.spec.json add the tsconfig-cc.spec.json with the following contents:

    { "extends": "./tsconfig.spec.json", "include": [ "**/*.ts" ] } 

4. In angular-cli.json add the following to the apps array:

    { "root": "src/", "polyfills": "polyfills.ts", "test": "test.ts", "testTsconfig": "tsconfig-cc.spec.json" } 

5. In karma.conf.js add the following to the angularCli section:

    app: config.angularCli.codeCoverage ? '1' : '0' 

   in the end it should look something like this:

    angularCli: { environment: 'dev', app: config.angularCli.codeCoverage ? '1' : '0' }, 

   ---

So what is going on here?

Apparently they installed the Angular compiler plugin and now it accepts globs files from tsconfig.spec.json . So far, we only include **/*.spec.ts in tsconfig.spec.json , these are the only files that will be included in the coverage area.

The obvious solution is to include tsconfig.spec.json all files (in addition to require.context ). However, this will slow down all tests, even if they work without coverage (which we don’t want).

One solution is to use the angular-cli to work with multiple applications.
By adding another entry to the apps array, we are adding a different configuration for the “different” (actually the same) application.
We discard all non-essential information in this configuration, leaving only the test configuration and add another tsconfig , which includes all the ts files.
Finally, we inform the angular-cli karma plugin to run tests with the configuration of the second application (index 1 ), if it works with code coverage and starts with the configuration of the first application (index 0 ), if it works without code coverage.

Important note: in this configuration, I assume that you have only one application in .angular-cli.json . If you have more, you need to adjust indexes accordingly.

Answer 3

1) in./src/test.ts set / Then we will find all the tests.

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

instead of the standard 2) update src / tsconfig.spec.json

 "include": [ "**/*.ts" 

3) in angular.json set

 "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "codeCoverage": true, "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "src/tsconfig.spec.json", "karmaConfig": "src/karma.conf.js", "styles": [ "src/styles.scss" ], "scripts": [], "assets": [ "src/favicon.ico", "src/assets", "src/config", "src/manifest.json" ] } } 

I mean add this parameter "codeCoverage": true

And for me, this includes all the files

I mean add this parameter "codeCoverage": true

And for me, this includes all the files

Answer 4

karma.conf.js should be like this. No other configuration is required. Ng cli takes care of everything. stop the previous ng test run and run ng test --code-coverage .

 module.exports = function (config) { config.set({ basePath: '', frameworks: ['jasmine', '@angular/cli'], plugins: [ require('karma-jasmine'), require('karma-chrome-launcher'), require('karma-jasmine-html-reporter'), require('karma-coverage-istanbul-reporter'), require('@angular/cli/plugins/karma') ], client:{ clearContext: false // leave Jasmine Spec Runner output visible in browser }, coverageIstanbulReporter: { reports: [ 'html', 'lcovonly' ], fixWebpackSourcePaths: true }, angularCli: { environment: 'dev' }, reporters: ['progress', 'kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: true, browsers: ['Chrome'], singleRun: false }); }; 

Answer 5

Use the command below to check for code coverage:

 ng test -cc