☰

Unit Testing JavaScript (Jasmine, Karma Test Runner, Visual Studio)

on JavaScript

Testing your front-end is just as essential as testing your back-end, that's what I always say. In an ideal system you want to have test coverage on both of those ends, regardless of how many testers you got or how many manual test hours you put in. The matter of fact is, we are human, and humans tend to make mistakes and miss out on things. Automating your tests is key, even on the front-end.

So how do we unit test JavaScript code? In the following guideline, you'll see how you can configure unit testing for JavaScript using the Jasmine testing framework, Karma test runner and Visual Studio on a Windows environment.

Step 1: Setup your Karma test runner

There are several test runners out there for JavaScript, we'll use Karma. Now, setting up this test runner on a Windows environment can be a daunting task. But, if you simply go through the steps I have outlined below then you should be okay:

1. Install Python 2.7

2. Install Node Packet Manager

3. Target browser in environment (user) variables

You need to set a target browser (we'll use Chrome) for Karma to use when running your JavaScript tests, you do this by accessing Environment Variables (Control Panel -> Advanced System Settings -> Advanced), and under User Variables create the following:

CHROME_BIN=%HOME%\AppData\Local\Google\Chrome\Application\chrome.exe

4. Start up admin cmd and run the following:

npm install karma

This will install Karma through Node Packet Manager, make sure that NPM is added to your global path (this should be added automatically once you've installed NPM). The Karma install may generate some errors, check the console and see if you got any "socket.io" errors. If that's the case, then run the following commands:

npm install node-gyp
npm install socket.io
npm install ws
npm install karma

5. Navigate to the following path and copy the folder:

C:\Windows\SysWOW64\node_modules\

To:

%HOME%\AppData\Roaming\npm\node_modules\

Your Karma test runner is now all set.

PS: If you cannot find the "SysWOW64" folder, try to search for "node_modules" else where on your machine. It should contain the stuff that you installed through NPM.

Step 2: Setup your Jasmine testing framework

Now that we have a test runner, we need a testing framework so we can write JavaScript test syntax. We'll use Jasmine for this. Simply start up Visual Studio, create a new Web project and in the Package Manager Console type:

install-package jasminetest

That's it, you now have Jasmine installed in your project (you'll also get some sample JS files). Pretty straight forward compared to the previous step, huh?

Step 3: Configure Karma to run your tests

Karma needs to be configured in order to locate and run your tests. Create a folder in your Visual Studio project called "spec" and add it to "Scripts", navigate to this folder. Make sure that Karma is added to your global path (this should be added automatically once you've installed Karma), start cmd and type:

karma init

Now you'll get some questions, answer with the following:

../jquery-1.8.2.js
../jquery-ui-1.8.24.js
../app/logic.js
../spec/logicSpec.js

Karma is now configured, a "karma.conf" file is now generated - with the information that you answered - in your "spec" folder.

Step 4: Write and run your first Canary Test

Now that Karma is configured, we are ready to write and run our first canary test. In Visual Studio, in your "spec" folder, add a new JavaScript file called "logicSpec.js". In this file, write the following canary test:

describe(Testing the logic, function () {
    it(Should be true, function () {
        expect(true).toBe(true);
    });
});

Start cmd, and start Karma by typing:

karma start

Karma will now parse the "karma.conf" file, launch Chrome and run your test. A green execution means the test passed, red means it failed. Karma runs your tests each time you save your test file. You should get the following:

karma_success

You have successfully run your first Canary Test. How about testing some logic? Create a folder in Visual Studio called "app" and add it to "Scripts", then add a "logic.js" in this folder. Create the following add function in your "logic.js":

function add(a, b) {
    return a + b;
}

Now test this function by adding the following test in your "logicSpec.js":

it(Should return 5 when 2 and 3 are passed, function() {
    var result = add(2, 3);
    expect(result).toEqual(5);
});

Save your test file, you should now see that Karma successfully executed both of your tests. That's it! Jasmine is rich with functionality, so you can do lots of stuff. You can check out their site for more here.