Testing AngularJS Code Using Karma

In this tutorial, we will do basic testing of an AngularJS controller from scratch. By scratch, I mean, I will install all the software necessary.

We will use Karma as the test runner. It will read test suites defined using the Jasmine API and run them in your browser of choice.

Install Software

We will need these software installed:

  • Node.js. This includes npm.
  • Karma npm module.
  • Various plugins for Karma.

First install NodeJS using its installer.

Open a command prompt window and enter this command to install Karma:

npm install karma --save-dev

Then, run this to install the Jasmine plugin for Karma

npm install karma-jasmine --save-dev

Next, run this to install the Firefox launcher. You must have Firefox browser already installed. If you have Chrome installed, the package name will be “karma-chrome-launcher”.

npm install karma-firefox-launcher --save-dev

Finally, run:

npm install -g karma-cli

Generate Karma Configuration File

A Karma configuration file must be present in the folder from where we will run Karma. This is usually the root folder of your application.

Create a folder where all our application and test JavaScript code will reside. For example, “My Documents/angular”.

Now we will generate the configuration file. Open a command prompt window and go to the root folder of your application (“My Documents/angular” in our example). Then run:

karma init

Pretty much accept all the default. Except for the browser use the arrow key to choose Firefox (or Chrome, if you have that installed).

One the karma.conf.js file is generated, open it in an editor. The files array lists the JavaScript files that will be loaded during a test. For example, this list should contain AngularJS, jQuery, your own code or anything else that you code depends on. For now, set it as follows:

    files: [

In future, we will add AngularJS script to this list. But, for now that is enough. Save and close the file.

Run Karma

From the root of your application folder, where karma.cof.js is created, run:

karma start

This will launch your browser of choice (Firefox in our case).

Running a Very Simple Test

Before we test an AngularJS controller, let’s validate our installation by running a very basic test. We will define the test logic using Jasmine API.

In the root of your application folder, create a new file called my_test.js. Enter the following Jasmine test suite code:

describe("Basic test suite", function() {
    it("Boolean test", function() {

Save changes. Karma will run the test immediately. It will print out the success message:


Now, let’s cause the test to fail. Change the suite code as follows:


Save changes. Now, the test will fail.


Testing an AngularJS Controller

Getting Setup

Testing a controller needs a little bit of more setup. We will need to add angular-mocks.js to our folder. This script will mock out various AngularJS operations like injection. The test script is also responsible for:

  1. Loading your application module.
  2. Creating a controller object.
  3. Injecting necessary variables to the controller.

In other words, these are some of the operations that our test script needs to perform that are otherwise performed by AngularJS in a real application. Fortunately, they are easy to achieve.

First, download the angular-mocks.js file from the additional modules page (https://code.angularjs.org/1.2.25/angular-mocks.js) and save it in the same folder as where we have been creating JavaScript files.

Next, copy the regular angular.min.js file in that folder.

Create a Controller

In the same folder, create a new JavaScript file called my_code.js. Add a controller like this:

angular.module("myApp", [])
    .controller("MyCtrl", function($scope) {
        $scope.message = "Hello";
        $scope.updateMessage = function(msg) {
            $scope.message = msg;

Configure Karma

Open karma.conf.js and change the files array so that we can strictly set the order in which JS files are loaded:

files: [

Save changes.

Stop Karma by hitting Control+C. Start it again by entering:

karma start

Write Test Script

Open the test script file my_test.js. Add a new test suite like this:

describe("Controller test suite", function() {
    var $scope;
    //Load our module
    //Create the controller
    beforeEach(inject(function ($rootScope, $controller) {
        $scope = $rootScope.$new();
        var myCtrl = $controller('MyCtrl', { $scope: $scope });
    //Run tests
    it("Should test for initial state", function() {

A function registered with beforeEach() is called before every test. We have two such functions. The first one loads the myApp module. The second one creates a new MyCtrl controller. To do this, we need to have access to the $controller and $rootScope service. We get them by the use of the inject() method. The rest should be pretty straightforward.

Testing for a controller method is no more complex:

it("Should test for updateMessage", function() {

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 )


Connecting to %s