Karma – Spectacular Test Runner for Javascript

karma-logo

Karma is a test-runner javascript tool that executes source code against test code for each of the browsers connected. The results for each test against each browser are examined and displayed via the command line to the developer such that they can see which browsers and tests passed or failed.

Basic Setup without Grunt or Gulp

Karma needs to know about your project in order to test it and this is done via a configuration file karma.conf.js (usually named). Configuration files can be created automatically using the command karma init. An example is shown below with comments for understanding its configuration:


// Karma configuration
// http://karma-runner.github.io/0.12/config/configuration-file.html
// Generated on 2016-02-17 using
// generator-karma 1.0.1

module.exports = function(config) {
 'use strict';
 config.set({
  // enable/disable watching file/executing tests whenever any file changes
  autoWatch: false,

  // base path, that will be used to resolve files and exclude
  basePath: '../',

  // testing framework to use (jasmine/mocha/qunit/...)
  // as well as any additional frameworks (requirejs/chai/sinon/...)
  frameworks: [
    "jasmine"
  ],

  // list of test files / patterns to load in the browser
  files: [
    // bower:js
    'bower_components/jquery/dist/jquery.js',
    'bower_components/angular/angular.js',
    'bower_components/bootstrap/dist/js/bootstrap.js',
    'bower_components/angular-mocks/angular-mocks.js',
    // endbower
    "app/scripts/**/*.js",
    "test/spec/**/*.js"
  ],

  // list of files / patterns to exclude
  exclude: [
  ],

  // web server port
  port: 8090,

  // Start these browsers, currently available:
  // - Chrome
  // - Firefox
  // - PhantomJS
  browsers: [
    "PhantomJS",
    "Chrome"
  ],

  // Which plugins to enable
  plugins: [
    "karma-phantomjs-launcher",
    "karma-jasmine",
    "karma-coverage",
    "karma-chrome-launcher"
  ],

  // Continuous Integration mode
  // if true, it capture browsers, run tests and exit
  singleRun: true,

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

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

  // Uncomment the following lines if using grunt's server to run the tests
  // proxies: {
  //   '/': 'http://localhost:9000/'
  // },
  // URL root prevent conflicts with the site root
  // urlRoot: '_karma_'


  // progress is the default report (format on how to print test report)
  // For Code Coverage we add karma-coverage that uses Instanbul
  reporters: ['progress', 'coverage'],
  preprocessors: {
    // source files, that you wanna generate coverage for
    // do not include tests or libraries
    // (these files will be instrumented by Istanbul)
    'app/scripts/**/*.js': ['coverage']
   },

   // optionally, configure the reporter
   coverageReporter: {
     type : 'html',
     dir : 'coverage/'
   },
   // to avoid DISCONNECTED messages when connecting to slow virtual machines
   browserDisconnectTimeout : 10000, // default 2000
   browserDisconnectTolerance : 1, // default 0
   browserNoActivityTimeout : 4*60*1000 //default 10000
 });
};

In order to run and install Karma you need firstly to install globally
npm install -g karma-cli
Then in your project root directory add a package.json similar to the following:
(depending on the plugins declared in the config file and their dependencies)

{
  "name": "angular2",
  "devDependencies": {
    "karma-jasmine": "0.3.7",
    "karma": "0.13.21",
    "karma-phantomjs-launcher": "1.0.0",
    "jasmine-core": "2.4.1",
    "phantomjs-prebuilt": "2.1.4",
    "karma-coverage": "0.5.3",
    "karma-chrome-launcher": "0.2.2"
  },
  "engines": {
    "node": ">=5.6.0"
  }
}

and run npm install on the root directory. In order to start your tests give karma start karma.conf.js

Test are written with Jasmine and all the information you need to get started with it, is here. For getting instances of Angular controllers, services etc. you need to include angular-mocks dependency and examples can be found here.

Karma – Spectacular Test Runner for Javascript

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.