In this part I’ll dive into unit testing your AngularJS code. Not so much on the test specs details, as there are enough documentation on those. I’ll show how to set up a nice workflow which will set up tests as they’re added, and run them automatically when you edit you javascript code, and create code coverage reports.

NPM packages used

Add the following packages to the package.json file :

  • grunt-contrib-watch
  • grunt-karma
  • karma
  • karma-chrome-launcher
  • karma-coverage
  • karma-ie-launcher
  • karma-jasmine
  • karma-phantomjs-launcher
  • phantomjs

The key packages here are grunt-contrib-watch, grunt-karma and karma-coverage.

Watch task

Create a new task in gruntfile.js for reacting on file change events. This will trigger injection of JS files, or test running.

watch: {
	// adding or removing a js file trigger injections
	injections: {
		files: ['<%= paths.app %>/app/**/*.js'],
		tasks: ['wiredep', 'injector'],
		options: {
			event: ['added', 'deleted'],
		},
	},
	
	// changing an application file triggers automated tests
	tests: {
		files: ['<%= paths.app %>/app/**/*.js'],
		tasks: ['karma:unit']
	}
},

Karma grunt task

The karma task is quite simple as well, this one has two sub-tasks, to run unit tests into phantomjs, reporting results in a console; or runs tests directly into IE and Chrome browsers.

karma: {
    allBrowsers: {
        configFile: 'test/karma.conf.js',
        browsers: ['Chrome', 'IE']
    },
    unit: {
        configFile: 'test/karma.conf.js',
        browsers: ['PhantomJS']
    },
}

Will produce the following in task runner explorer console :

Karma runner

Code coverage

Producing code coverage reports is also simple, just add the relevant reporters, preprocessors and plugins to the karma.conf.js file.

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

// process application files (not test !) for coverage
preprocessors: { '../wwwroot/app/**/!(*.spec).js': ['coverage'] },

plugins: [
	'karma-jasmine',
	'karma-chrome-launcher',
	'karma-ie-launcher',
	'karma-phantomjs-launcher',
	'karma-coverage'
],

And see output in test/artifacts/coverage-html folder :

Code coverage

HTML test runner

Finally, should you want to debug your tests, you can add the Jasmine html runner to the project, and inject JS files into it.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Jasmine Spec Runner v2.3.4</title>
    <link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
    <link rel="stylesheet" href="lib/jasmine-2.3.4/jasmine.css">
    <script src="lib/jasmine-2.3.4/jasmine.js"></script>
    <script src="lib/jasmine-2.3.4/jasmine-html.js"></script>
    <script src="lib/jasmine-2.3.4/boot.js"></script>
    <!-- bower:js -->
    <!-- endbower -->
    <!-- injector:js -->
    <!-- endinjector -->
</head>
<body>
</body>
</html>

Then you can just run it from the file system :

Html runner

The source repository for this article is on Github.