Code coverage on angular application

Posted on Updated on


The goal of this post is to speak about code coverage on angular application
We define set of steps permit you to add code coverage after executing on angular application
1. We have to define configuration karma on application, browser etc.
2. And add karma reporter,
3. We have to also add script build, we write PowerShell permit you to add behavior.

For development need I suggest you to download visual studio code (https://code.visualstudio.com/ ) and install angular application (https://angular.io/guide/quickstart).

We speak also around build continuous.
After creating application, modify karma.conf.js file by adding requirements on section .

config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require( 'karma-phantomjs-launcher' ),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma'),
require('karma-coverage')
],

Register reporters

reporters: ['progress', 'kjhtml', 'coverage'],

Modify preprocessors node
preprocessors: {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
'src/**/*.js': ['coverage']
},

Add coverage reporter node
coverageReporter: {
type : 'html',
dir : 'coverage/'
},

Delete Chrome browser, and add PhatomJS, without this browser, it’s not possible to launch your tests, without blocking.
browsers: ['PhantomJS'],

Define attribute singleRun to true value.
singleRun: true

Full file :

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require( 'karma-phantomjs-launcher' ),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma'),
require('karma-coverage')
],
client:{
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
reports: [ 'html', 'lcovonly' ],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters: ['progress', 'kjhtml', 'coverage'],
preprocessors: {
// source files, that you wanna generate coverage for
// do not include tests or libraries
// (these files will be instrumented by Istanbul)
'src/**/*.js': ['coverage']
},
coverageReporter: {
type : 'html',
dir : 'coverage/'
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: true
});
};

Don’t forget to uncomment lines of polyfil.ts

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

Now we write script permitting you to launch code coverage :

param (
[Parameter(Mandatory=$true)][string]$rootApplication
)
function Test-Front([string] $rootApplication)
{
Write-Host 'Angular Front - Begin testing' -Verbose
if([string]::IsNullOrEmpty($rootApplication))
{
throw [System.ArgumentNullException] "$rootApplication"
}

Set-Location -Path $rootApplication

Write-Host 'Launch of command : npm i --save-dev karma-phantomjs-launcher'
npm i --save-dev karma-phantomjs-launcher

Write-Host 'Launch of command : ng test'
Write-Host 'angular tests are hosted by PhantomJS browser, you can check config into karma.conf'
ng test --code-coverage

Write-Host 'Angular Front - End testing' -Verbose
}

Test-Front -rootApplication "$rootApplication"

ng test –code-coverage : command permit to launch executing of tests and generate code coverage.

After executing, we have as result folder artefact containing metrics under the application (similar to dist folder after building process)

below screen describing results.

Untitled1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s