Javascript TDD using Qunit and Karma

karma Karma is a Javascript Test Runner created by the AngularJS team(mainly Vojta Jína) in order to run your Javascript unit tests in multiple Browsers and devices at the same time.

Installing all the prerequisites

Because Karma is an NPM Package, you have to make sure that you’ve installed Node.js already. Personally I like to install Karma and all the dependent plugins locally in my project folder. To install Karma type this command in your Terminal:

npm install karma --save-dev

In order to run Karma directly from your terminal you have to install the command-line Interface

npm install -g karma-cli

Now karma will be saved as a global environement path command One of the most powerful feature of Karma is: it can run any unit test written in any framework like Qunit, Jasmine, Mocha… You just have to install the appropriate plugin for the chosen unit testing framework. In our case we’ll use Qunit so we have to install the Qunit NPM module.

npm install -g karma-qunit --save-dev

Remember that Karma will use real browsers to run unit tests in, so remember to install any browser you want with its Karma NPM module

  • Internet Explorer : karma-ie-launcher
  • Mozilla Firefox: karma-firefox-launcher
  • Google Chrome: karma-chrome-launcher
  • Opera: karma-opera-launcher
  • Safari: karma-safari-launcher

In our case, we’re going to use all the 4 major browsers

npm install karma-ie-launcher --save-dev
npm install karma-firefox-launcher --save-dev
npm install karma-chrome-launcher --save-dev
npm install karma-safari-launcher --save-dev

Configuring Karma

After installing Karma and all its plugins, we need to generate the configuration file that will work as the entry point of Karma. Because we’ve installed the Karma command-line interface, generate this config file will be very easy. Just type this command in the Terminal and the karma utility will guide you throughout the process of crating this file. By default this file will be named: karma.conf.js


E:\Karma>karma init

Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> qunit

Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no

Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next quest
ion.
> Chrome
> Firefox
> Safari
> IE
>

What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> tests/*.js
>

Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>

Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes

Config file generated at "E:\Karma\karma.conf.js".

E:\Karma>

this is how the karma config file should look like

// Karma configuration
// Generated on Sun May 11 2014 15:48:37 GMT+0100 (Paris, Madrid)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',

    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['qunit'],

    // list of files / patterns to load in the browser
    files: [
      'tests/*.js',
    ],

    // list of files to exclude
    exclude: [

    ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {

    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],

    // web server port
    port: 9876,

    // enable / disable colors in the output (reporters and logs)
    colors: true,

    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,

    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,

    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome', 'Firefox', 'Safari', 'Opera', 'IE'],

    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false
  });
};

Running Karma

After completing all the installations and configurations steps, we’re ready to start Karma, it will launch all the browsers listed in the config file, inject all the tests into the browsers and finally show the final results of the executed unit tests


E:\Karma>karma start
INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [launcher]: Starting browser Firefox
INFO [launcher]: Starting browser Safari
INFO [launcher]: Starting browser IE
INFO [IE 11.0.0 (Windows)]: Connected on socket JXR1RXSDyQ5T6VIa1zgO with id 311
16291
INFO [Firefox 29.0.0 (Windows)]: Connected on socket QQdeMtQ_n3m7z7Wh1zgQ with i
d 55784201
INFO [Chrome 34.0.1847 (Windows)]: Connected on socket VX5lZ8MsCaeFcZfe1zgP with
 id 93084558
INFO [Safari 5.1.7 (Windows 8)]: Connected on socket rSyJtA1-Bhl5XWIH1zgR with i
d 65345920
WARN [Safari 5.1.7 (Windows 8)]: Adapter did not report total number of specs.
Safari 5.1.7 (Windows 8): Executed 20 of 0 SUCCESS (0.026 secs / 0.003 secs)
WARN [Chrome 34.0.1847 (Windows)]: Adapter did not report total number of specs.
Safari 5.1.7 (Windows 8): Executed 20 of 0 SUCCESS (0.026 secs / 0.003 secs)
Safari 5.1.7 (Windows 8): Executed 20 of 0 SUCCESS (0.026 secs / 0.003 secs)
Safari 5.1.7 (Windows 8): Executed 20 of 0 SUCCESS (0.026 secs / 0.003 secs)
Chrome 34.0.1847 (Windows): Executed 20 of 0 SUCCESS (0.031 secs / 0.003 secs)
IE 11.0.0 (Windows): Executed 20 of 0 SUCCESS (0.025 secs / 0.003 secs)
Firefox 29.0.0 (Windows): Executed 20 of 0 SUCCESS (0.025 secs / 0.003 secs)
TOTAL: 80 SUCCESS

Summary

As you can see, Karma is easy to use and configure and for a developer who used to run all his unit tests manually in every browser, this is the solution that will improve his productivity and save his time. Karma is an open source project, so feel free to contribute to its success by submitting any issue or bug you find or even contribute in the developement of its source code. For more informations about Karma or anything related to it please visit the official website http://karma-runner.github.io/

Advertisements

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s