Setting up an environment for AngularJS testing in Visual Studio

If you don’t like chocolatey, you can always install them manually:
Install Node.js from http://nodejs.org/dist/v0.10.28/x64/node-v0.10.28-x64.msi (v0.10.28)
Download npm – grab zip file from here: http://nodejs.org/dist/npm/ and put it in the same folder as node.exe

Install Node.js Tools for Visual Studio

You can get it from http://nodejstools.codeplex.com
This will bring Node.js and npm integration to Visual Studio and you will see new options to create Node.js projects.

Node.js Tools for Visual Studio has user interface support for installing npm packages but you can do a similar approach with NuGet and command line. To get access to a convenient way to launch the command line for Node.js, install Productivity Power Tools extension for Visual Studio: https://visualstudiogallery.msdn.microsoft.com/dbcb8670-889e-4a54-a226-a48a15e4cace
Now you can right -click on the test project node in Solution Explorer and navigate to Power Commands -> Open Command Prompt

Install AngularJS package

Run the following command in NuGet Package Manager Console:

Install-Package AngularJS.Core

To see a list of potential updates that can be applied, run the folowing:

Update-Package -WhatIf

Install Karma

To install Karma, run following npm commands:

npm install karma --save -dev
npm install karma-jasmine karma-chrome-launcher --save-dev

Also there are packages that can be installed in the Node.js installation folder and they will have global scope, which allows to execute Karma directoly from any Node.js project that has a Karma package installed

npm install -g karma-cli

Configure Karma

Execute following command line:

karma init karma.conf.js

This will create Karma configuration file that will be used to locate the tests and exectue them against browsers you want and produce test output.
Accept all the default answers to series of questions following next in the command window by pressing Enter.

Default testing framework to be used is Jasmine
Use Require.js: No
Browser used to run tests: Chrome
File inclusions: do not specify any
File exclusions: do not specify any
Whether you want to run test each time file is changed: yes

Now open file karma.conf.js in editor and include external files, app code and tests similarly like this:

	// list of files / patterns to load in the browserS
	files: [
		//external files
		'packages/AngularJS.Core.1.3.14/content/scripts/angular.js',
		'packages/AngularJS.Core.1.3.14/content/scripts/angular-mocks.js',

		//App code
		'ng/services/SharedServices.js',
		'ng/modules/List/ListModule.js',
		'ng/modules/List/ListController.js',
		'ng/modules/List/DetailModule.js',
		'ng/modules/List/DetailController.js',        

		//Tests
		'tests/unit/controllers/List.tests.js',
	],

Creating unit tests with Jasmine

Jasmine is Behaviour Driven Development framework wich has built-in functionality to define and execute tests for JavaScript code.
BDD defines tests as desired behaviour, where the test outcome is specified first, followed by the actual test assertion.
Jasmine uses describe/it syntax while others use Given/When/Then. A simple test should be like this:

'use strict';
describe("A basic Javascript multiply operation", function() {
    it("should be correct", function() {
        var result = 2 * 2;
        expect(result).toEqual(4);
    });
});

Run Karma tests

Run Karma tests from the Node.js project command window by executing the command:

karma start karma.conf.js

This will launch Chrome Browser you specified earlier and you will see results in command line console:

Install Visual Studio Adapter for Google’s Karma Test Runner

Use an additional test reporter provided by the karma-xml-reporter npm package which will convert the test results to a Visual Studio friendly format. Download it from https://visualstudiogallery.msdn.microsoft.com/bfe6feb7-7ec4-4e8e-9d90-cf6ea2cd2169 or execute command:

npm install karma-xml-reporter --save-dev

Restart Visual Studio. This will itegrate test results from Karma Test Runner into Visual Studio.

Enable Run Tests After Debug

Go to Visual Studio menu option under TEST | Test Settings and enable Run Tests After Build

Note: test-results.testxml file should be added into your Visual Studio project to display unit tests in Test Explorer window

That’s it folks!

• Share

Ivan Grigoryev's Blog
Living in New Zealand. Blogging about the country, beautiful places, everyday life.
Do a skydive - halfway completed; get 1400 - still working on; reach 300kph - completed by 96.6%