Testing With AngularJS Part 1: Setting up Unit Testing With Karma

AngularJS is certainly growing in popularity as a framework to accelerate front-end web development. The good news is automated testing with Angular is great once it is all properly configured. The not-so-good news is there aren’t many resources to help you get there. I just recently struggled through this process for a client and want to share what I learned so others can benefit from my experience.

In this series of posts, I will explain how to set up and configure Karma and Protractor to run your unit and end-to-end (E2E) tests. I will also explain how to use Karma and Protractor with Grunt to run your tests.

This series will explain the configuration for Angular testing, so I will not cover how to write unit tests. There are some example tests in the example project or see the Sources section at the end of this post for more about writing tests.

In this post, I will explain how to configure Karma to run your unit tests.

EXAMPLE PROJECT

Before we get started, a complete example project can be found on GitHub. I updated the Unit tests and added some E2E tests to the TodoMVC AngularJS app. After cloning the repository, run grunt unit-test in the app directory to run the unit tests.

WHAT IS KARMA?

Karma is a JavaScript test runner that works by launching different browsers and running tests against each of them. It records the status of each test so you know which tests failed in certain browsers, making cross-browser compatibility testing incredibly easy. Note that you will need to use Karma with Windows to test in Internet Explorer.

STEP 1: INSTALLATION

Install Karma and the necessary plugins using NPM.

# Install Karma using Node npm install karma --save-dev

You also need to install a few required plugins before you can start using Karma. First download the correct plugin for your chosen testing framework (Jasmine, Mocha, etc.).

# Install Karma plugin for your chosen testing framework npm install karma-jasmine --save-dev

Also install the launcher plugins for the browsers you want to execute your tests against. There are launcher plugins for all major browsers.

# Install Karma browser launcher plugins npm install karma-chrome-launcher --save-dev npm install karma-ie-launcher --save-dev

*Note: The –save-dev option saves the package as a dev dependency to the package.json file

STEP 2: CONFIGURATION

Create a file called karma-conf.js in your test directory. Add the following configuration options to the file. Karma has a complete list of the configuration options available in the documentation.

module.exports = function(config){ config.set({ // root path location that will be used to resolve all relative paths in files and exclude sections, should be the root of your project basePath : '../',   // files to include, ordered by dependencies files : [ // include relevant Angular files and libs 'app/lib/angular/angular.js', 'test/lib/angular/angular-mocks.js',   // include js files 'app/js/app.js',   // include unit test specs 'test/unit/*.js' ], // files to exclude exclude : [ 'app/lib/angular/angular-loader.js' , 'app/lib/angular/*.min.js' , 'app/lib/angular/angular-scenario.js' ],   // karma has its own autoWatch feature but Grunt watch can also do this autoWatch : false,   // testing framework, be sure to install the karma plugin frameworks: ['jasmine'],   // browsers to test against, be sure to install the correct karma browser launcher plugin browsers : ['Chrome', 'PhantomJS', 'Firefox'],   // progress is the default reporter reporters: ['progress'],   // map of preprocessors that is used mostly for plugins preprocessors: {   },   // list of karma plugins plugins : [ 'karma-junit-reporter', 'karma-chrome-launcher', 'karma-firefox-launcher', 'karma-jasmine', 'karma-phantomjs-launcher' ]})}

Note: PhantomJS is a headless WebKit browser meaning no browser window pops up when tests are running. A headless browser is usually necessary for running unit tests on a server such as with continuous integration workflows. You can install Phantom and the associated Karma plugin with the following commands:

npm install phantomjs --save-dev npm install karma-phantomjs-launcher --save-dev

STEP 3: RUNNING TESTS USING THE KARMA COMMAND LINE INTERFACE

You can execute your tests using the Karma command line interface (CLI). Install it globally using Node.

npm install -g karma-cli

Now you can execute tests with the karma command and passing in the location of your config file. There are a few ways to run your tests.

• Run all your unit tests once

karma start test/karma-conf.js --single-run

• Start the Karma server then execute tests against the server using a different console window. Use this method if you are connecting external devices.

karma start test/karma-conf.js karma run test/karma-conf.js

• Re-run tests when changes are made to JavaScript or test spec files

karma start test/karma-conf.js --auto-watch

Note: If you are using Grunt with your application, see part three in this series for an explanation on setting up Karma and Grunt.

CONNECTING OTHER DEVICES AND BROWSERS 

Another nice feature of Karma is you can connect other devices to the running Karma server and run your tests in that device’s browser. If you are running Karma with the autoWatch flag or you are using Grunt watch, Karma will automatically re-run all the unit tests in each connected browser and device when you make changes.

To do this, start the Karma server with the karma start test/karma-conf.js command. Point your device’s browser to the machine and port running Karma. This is port 9876 by default. You can find the port by looking at the URL of any open browser window running Karma (see screenshot). Karma will also provide the test results of these browsers. If you are running locally, your devices will need to be on the same network. Now run the karma run test/karma-conf.js command and you should see the new browser listed in the test results

CONCLUSION

Karma is a powerful tool that can be used to automate testing across browsers and devices. You should now understand how to configure Karma in your project to run unit tests. In the next post, I will explain how to use a few additional Karma plugins to help with your testing.

SOURCES 

• Unit Testing With Angularjs, Grunt, Karma, and Travisci

• Full-Spectrum Testing With AngularJS and Karma

Updated on 10/12/2015 to use the correct karma phantomjs package.

• AngularJS
• Iterate
• Unity In Leadership
• Award