AngularJs: Unit Testing with Karma, Jasmine, Chutzpah

In this post I will explain how to set up javascript unit testing for an AngularJs project and utalizing the best visual studio has to offer.

first set up a web project and create folders to hold your angularJs files and your javascript test files. these folder directories have to later be set up in the karma config files to tell karma where to find our tests and their associated script files.

AngularJs
If you install AngularJs through nuget then it will add all the AngularJs project files including the translation files to your solution. create another folder inside the scripts folder called angular and move all the added files into it.
add a reference in the bundle configs to this folder.

Jasmine
Jasmine is a javascript behavior driven testing framework which you can install through nuget. you don't necessarily need to use the jasmine framework for testing purposes but this is the framework used in the documentations in the angular site itself.
after installing add a reference to jasmine script file in the bundle configs of your app.

Chutzpah
Chutzpah is a test runner which allows you to run your javascript tests from inside visual studio. you can install cutzpah through nuget.
There is also an extension for chutzpah that can be installed using the extension manager which integrates with the test explorer in visual studio 2012/2013.

Node.Js and Karma
Karma is a test runner for javascript. In this post I will go through the steps required to set up karma on windows. Karma runs on NodeJs and is available through the node package manager which you will be able to get access to after you install NodeJs.

After installing NodeJs open up the command prompt as an administrator, navigate to the project folder and enter the following command to tell the node package manager to install karma.

the -g identifier above tells the node package manager to install Karma globally. this means that all projects will use the same version of karma. if you need to use a different version of karma for different projects you can install karma into the current directory.

 npm install -g karma

now enter the following command to install the module required for using karma through the command interface.

 npm install -g karma-cli

before proceeding with the next step you must make sure that you have javascript files in both the source folder and the test folders other files you will get an error.
now that karma is installed we can begin to configure it by entering the following command

 karma init

in the following steps you will have to configure karma, such as setting the location of the source and test files, the default browser etc.

after the configuration has finished karma creates a javascript file called  karma.conf.js in the project directory which holds the configs.
now we have to make sure that the needed AngularJs files are refrenced in the karma config file.

now that we have finished configuring karma we can start it by using the following command.

 karma start

and we would see karma running in the command line, and returning the results of any tests that were run.