Jasmine and Karma

Let's talk about testing again, and will surely again in the future :) Last time I introduced the JavaScript Testing with Jasmine and we ran a few specs, however it seemed some how half baked - you were required to create a special page and open it in the browser to see the results. I you wanted to check in various browsers, you should have iterated the same procedure on each browser again and again.

This is not how we do things in 2014! We want to streamline the process! This is where Karma comes. It is built on Node.js and allows you to run the tests of your front end code automatically on various browsers.

Installation

In order to install Karma on your computer, run the following npm command. If you're not familiar with the tool, please read the JavaScript Developer Toolkit article first:

npm install -g karma

After you try to call karma though, you'll get unknown command error, which can be easily solved by installing karma command-line interface (CLI):

npm install -g karma-cli

To initiate the framework, just run karma init and follow the steps.

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

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
>

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.
> spec/*.js
> src/*.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

Please notice the positive answer for the last question. If you running Karma stand alone, it should be set to true. On contrary it can be integrate with IDE and be executed from there, for instance WebStorm. Watch a very short tutorial about the integration of Karma with WebStorm. In the end of the initiation process, a configuration file karma.conf.js will be created, which will be used to run our tests. If you didn't specify the browsers or wanted to add another one, on which you'd like to run your tests, you can install them later from the list of supported browser launchers. To add Firefox support, run the following command to install it and add Firefox key to the browsers array in the configuration file:

npm install -g karma-firefox-launcher

Last touch is needed to be completely ready to go. Karma is a framework, which executes Jasmin's spec using karma-jasmine plugin. Once you specify it in the initiation process, the plugin is downloaded and installed in the global repository. However it installs 1.3 version and not the latest 2.0. To fix this, we'll download the correct version manually:

npm install -g karma-jasmine@2_0

Running the tests

We'll be using our test specs from our previous Jasmine article and the source code can be found in GitHub.

karma start karma.conf.js

INFO [karma]: Karma v0.12.21 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Windows 8.1)]: Connected on socket DOFTiS5FuL20HriB6iUZ
with id 19929084
Chrome 36.0.1985 (Windows 8.1): Executed 5 of 5 SUCCESS (0.021 secs / 0.006 secs

Pardon my using Windows 8 - I had to give my Ubuntu laptop for repair :) Anyway, you'll notice your browser being stuck and closing it will just rerun all the tests. To fix this, set singleRun property in your configuration file to true. Also be aware of the localhost:9876 address. It is used by Karma to run the specs, which means you can test it on any device connected to your network. Try pointing your phone’s browser to Karma by looking at the URL of one of the browser windows running the tests. Because Karma is running an instance of Node.js, your test machine is acting like a server and will send the tests to any browser that is pointed to it.

We'll talk about using Jasmine with your server side using jasmine-node package in the next article.