Karma Chameleon

Thanks to Karma [1], test-driven development should be "easy, fast and fun." The tool launches a web application written in JavaScript and automatically executes the tests specified by the developer in several browsers at the same time while logging the results. The browsers can even run on external devices such as smartphones or tablets, which lets you test your own code under real conditions.

For initial testing, Karma also launches the code, if so required, in a PhantomJS instance running without a GUI (headless operation). Karma also monitors the code and automatically re-executes the stored tests every time a change is made.

Delivered

Karma itself comprises several plugins, each of which solves a specific task, typically with the use of additional software. Karma also delegates the tests to established test frameworks, such as Jasmine [2], Mocha [3], or QUnit [4], relying on plugins to do so and negating the need for web developers to learn new software. You can also integrate in-house test frameworks as DIY plugins. On the same principle, Karma plugins support continuous integration with Jenkins [5], Travis [6], or Semaphore [7].

After launching, Karma first loads all the plugins and parses its configuration file before launching a web server in the background that serves up the web application to be tested. Karma then runs the browsers against the web server URL.

If required, web developers can also control the web server manually in the browser. Karma detects this action in the background and automatically adds these browsers to the tests.

The web server delivers a specially prepared page that uses web sockets in the browser to communicate with the web server. The page contains an iframe into which the web server injects another subpage that contains the code to be tested, the tests to be executed, and more code that controls the test execution itself. The code is part of an adapter plugin that passes the tests to the corresponding test framework. If, for example, the web developer chooses the Jasmine framework, the Jasmine adapter ensures that these tests run in the browsers.

The test results are fed back to the server via the web socket and are intercepted there by reporter plugins that process all results and return them in the desired format. In the simplest case, the reporter displays progress as a message on the command line.

On Call

The developers recommend installing Karma and all necessary plugins in the project directory of the web application to be tested. The only requirements are Node.js and its NPM package manager. The following two commands fetch Karma and drop it into the current project directory:

npm install karma --save-dev
npm install karma-jasmine jasmine-core karma-chrome-launcher --save-device

The second command loads three plugins: The test adapter karma-jasmine lets you use Jasmine as a test framework, jasmine-core fetches the Jasmine framework and drops it on your disk, and karma-chrome-launcher ensures that Karma can start Chrome independently. The packages ultimately end up in the project directory's node_modules subfolder. After the install, you can launch Karma by calling:

./node_modules/karma/bin/karma

To save typing, you can install the karma-cli package globally with

sudo npm install -g karma-cli

which sets up the karma command-line program that acts as an alias for the unwieldy command above, automatically invoking the currently available Karma version.

Questionable

Although you now have Karma on your hard drive, it still does not know what it is supposed to test – or how and where. A configuration file created by the

karma init karma.conf.js

command, gives the tool the exact details. You can choose the name of the configuration file to suit your needs.

As the extension indicates, this is a JavaScript file. Karma simply imports it when launched and evaluates the variables set there. Alternatively, the configuration can also exist in CoffeeScript or TypeScript format. In this case, simply give the configuration file a .coffee or .ts extension.

In all cases, you need to answer a few questions about the project posed by the wizard (Figure 1), including the test framework used and the browsers to be used. The storage location of the source code files can be added manually later, if required.

Figure 1: In this example, Karma will use the Jasmine framework, run the tests (only) in Chrome, and include all JavaScript files from the js folder, constantly monitoring them for changes.

Within the configuration file, module.export points to a function that expects a configuration object. The function then sets the appropriate variables in the object (Figure 2). Their significance is explained by detailed comments. In the following example, Karma would load all JavaScript files from the folders js and tests:

files: [
        'js/*.js',
        'tests/*.js'
],

Figure 2: The configuration file uses JavaScript code that Karma loads when it starts. Here, it lists the files that the browser must load for its tests.

The files command lists all the files the browser has to load, including all tests. Wildcards like the asterisk encompass several files at once.