Karma Chameleon

Browser Selection

The browsers keyword is followed by all the browsers in which you want Karma to test the code. Table 1 shows which names to add to the configuration file to cover the most important browsers. For browsers added in this way, a corresponding launcher is usually available. You also need the appropriate plugin.

To test the code in Firefox, you would add

browsers: ['Chrome', 'Firefox']

to the configuration file and then install the appropriate launcher from the command line:

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

Table 1 shows the plugin required for each browser. Many more launchers can be found online [8]. As a headless browser, PhantomJS is particularly useful for quick initial tests during development. Because it does not start a GUI, it delivers the results significantly faster, which will not necessarily match those for Chrome, Firefox, and others.

Web developers can also launch any other browser by simply specifying the complete path to its binary file in the configuration file:

browsers: ['/usr/local/bin/<Exotic_Browser>.sh']

Another option simply controls the web server started by Karma with a browser. In this way, you can additionally test the browsers on mobile devices, tablet PCs, and other operating systems.

The test frameworks to be used follow frameworks. By default this is only jasmine; all available frameworks can be found online [9]. Web developers can also discover which adapter plugins they need to install with npm.

Covered

Karma can send the JavaScript code through preprocessors before the test run. In this way, for example, the test coverage can be determined with the Istanbul tool [10]. First, install a suitable plugin for Istanbul with the

npm install karma-coverage --save-dev

command. Then, you need to tell Karma to launch in Istanbul with the following settings in the configuration file:

preprocessors: {
    'js/*.js': 'coverage'
},

To prevent the results from Istanbul needlessly disappearing without a trace, you need to process them with a reporter:

reporters: ['progress', 'coverage'],

Further adjustments to the configuration file are usually not necessary – with one exception. The web server launched by Karma later listens on port 9876 by default. If this is already occupied, you will need to adjust the port setting. If you need or want to make further changes, you will find a detailed reference for all variables or settings on the Karma website [11].

Lift Off!

The only thing missing now is the code to be tested and the test cases. For your first steps with Karma, the simple addition program in Listing 1 is a good choice. The function there "accidentally" only adds the two numbers if they are equal. Listing 2 shows a suitable test for Jasmine.

01 function add(x, y) {
02   if (x === y) {
03     return x + y;
04   }
05 }

01 describe('Add-Function', function() {
02
03   it('adds two odd numbers', () => {
04     expect(add(2, 3)).toEqual(5);
05   });
06
07 });

Now, launch Karma with the command:

karma start karma.conf.js

The name of the configuration file can be left out if it is karma.conf.js, karma.conf.coffee, or karma.conf.ts. Karma first launches the web server, then launches the corresponding browsers, and finally executes all the tests.

Karma finally displays the results in the console, with the test in Figure 3 obviously failing. If Istanbul is also included, information about the test coverage is sent to the project directory's coverage subfolder (Figure 4).

Figure 3: Karma first launches the web server, then Firefox, which runs the test in Listing 2.

Figure 4: As Istanbul shows in the coverage report, the test coverage is not yet perfect.

To fix the reported error, the web developer only has to remove the query in Listing 1. The active Karma instance detects the changes to the corresponding file and immediately re-runs the test.