jimmy keen

on .NET, C# and unit testing

Getting started with JavaScript unit testing – Node, Jasmine, Karma and TDD on Windows

March 12, 2015 | tags: unit-testing javascript karma jasmine node.js windows

Backstory

I’m working on a .NET regex tutorial and I thought it would be nice to have sort of interactive-try-it-yourself examples embedded within blog post. This sounds like a job for JavaScript, right? Simple enough. The only issue is, my JavaScript knowledge and experience are virtually non-existent. What do I do? I’ll start with a test!

JavaScript and unit testing

What are the unit testing options when JavaScript is concerned? To start we need two things - test runner and assertion library. This StackOverflow question provides decent overview on what’s available. It turns out all we need is Jasmine which is both test runner and BDD framework, supporting BDD-style of writing tests (or rather specs).

Installing Jasmine on Windows

  1. Download and install node.js (it comes as standard Windows .msi installer )
  2. Once it’s done, type the following in the command line to see whether node’s package manager (npm) was successfully installed (we’ll use npm to download further modules):

> npm --version

2.5.1

Now we only need few more modules: Yeoman, Bower and Generator-Jasmine. Type following in console:

> npm install -g yo

> npm install -g bower

> npm install -g generator-jasmine

The -g switch tells npm to install packages in node’s global modules directory (rather than locally within your project’s directories).

To finalize testing environment setup, we need to scaffold Jasmine’s tests directory. To do that, we’ll navigate to project directory and use Yeoman’s yo tool:

> yo jasmine

This will create test directory with index.html and spec/test.js files, which will be of your primary interest.

Running first test

The index.html is Jasmine’s test runner – open it in browser and your tests will run. “How? What tests?” you might ask. Let’s take a quick look and index.html:

<!-- include source files here... -->

<!-- include spec files here... -->
<script src="spec/test.js"></script>

We simply need to reference our implementation and test files:

<!-- include source files here... -->
<script src="../regex-highlighter.js"></script>

<!-- include spec files here... -->
<script src="spec/regex-highlighter-tests.js"></script>

What’s next? First test, obviously. Since this is super-fresh environment our first test for highlightMatches function is going to be trivial, requiring the implementation to only return value:

'use strict';

(function () {
    describe('highlightMatches', function () {
        it('should return "Success"', function () {
          expect(highlightMatches('x', 'y')).toBe('Success');
        });
    });
})();

Explanation of Jasmine’s methods and BDD-style can be found at Jasmine Introduction page. Without further due, we add equally simple implementation of highlightMatcher function, refresh index.html and Jasmine is happy to announce that our first JavaScript test is very successful one:

First successful JavaScript test with Jasmine

Introducing Karma

Our current setup is up and working and we might just as well be done here. But there is one more thing that will help us greatly when developing JavaScript code – Karma. It is a test runner which watches over our files and runs all tests whenever we make any changes in source files. Perfect match for TDD/BDD environment! You can view introductory video at Youtube (14:51) (don’t get confused – tutorial talks about Testacular, which was Karma’s original name while ago).

To get it we need to execute the following (the karma-cli is Karma’s command line interface module):

> npm install -g karma

> npm install -g karma-cli

Next, navigate to project directory and initialize configuration. Karma will “ask” few simple questions and basing on your answers it will generate config file (js.config.js):

> karma init jk.config.js

Which testing framework do you want to use ?

Press tab to list possible options. Enter to move to the next question.

> jasmine

...

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.

> ../regex-highlighter.js

> spec/regex-highlighter-tests.js

>

Configuration is ready. All that’s left to do is simply run Karma, passing configuration file name as argument:

> karma start jk.config.js

Everything should be find and we’ll be greeted with message similar to the one below:

Successful Karma setup

Modifying test to make it fail will get noticed immediately:

Failing test

Summary

To get started with JavaScript unit testing you need to:

  1. Install node.js
  2. (optional) Install Jasmine, Yeoman and Bower npm install -g yo bower generator-jasmine (this trio isn’t needed when you use Karma – Karma will take care of dependencies on its own)
  3. (optional) Scaffold Jasmine test directory yo jasmine
  4. (optional) Run first test by opening Jasmine’s index.html
  5. Install Karma npm install -g karma karma-cli
  6. Configure Karma karma init <config>
  7. Start Karma karma start <config>