Web applications

Wallaby.js, the Smart Unit Test Runner

By Anthony Giretti,

August 15, 2016.

Wallaby.js is an intelligent and super fast test runner for JavaScript that continuously runs your tests.It reports code coverage and other results directly to your code editor, immediately as you change your code. We’ll provide an example with Visual Studio and the Jasmine 2.1 framework for tests.

Wallaby.js is an intelligent and super fast test runner for JavaScript that continuously runs your tests.

It reports code coverage and other results directly to your code editor, immediately as you change your code. We’ll provide an example with Visual Studio and the Jasmine 2.1 framework for tests.

Step 1: Installing wallaby.js

In this instance, we’ll use Visual Studio 2013 and download the wallaby.js add-on for Visual Studio, at:http://wallabyjs.com/#download

Be aware that you must have at least Update 4 of Visual Studio 2013 for compatibility.

Step 2: Configuring wallaby.js

Wallaby.js requires you to configure three things:

The access path to the JavaScript function files you wish to test.
The access path to the JavaScript test files.
The JavaScript framework that you wish to use (wallaby.js supports Jasmine, Mocha, qUnit).

To do so, you must create a Json file at the root of your Web project. I recommend the name wallaby-jasmine.json, which allows you to visually identify your configuration file easily.

{
    "files": [
    "Scripts/*.js"
    ],
    "tests": [
    "Scripts/tests/*.spec.js"
    ],
  "testFramework": "jasmine@2.1.3"
}

As files and tests properties are tables, you can insert as many files for testing as you wish, with files for the files containing the functions for testing, and tests for the unit test files to execute.

You can also use * to select all the files in a given folder.

The framework used in wallaby.js’s latest version for Jasmine is version 2.1.3. You can look up the syntax for Jasmine.js 2.1 here: http://jasmine.github.io/2.1/introduction.html.

Note: When using the Jasmine framework, the test file names must end in .spec.js.

Overview of the Web Project

Conversion.js (library to test):

var Conversion = {
    poundToKg: function (pounds) {
        if (isNaN(pounds)) {
            throw "IncorrectPoundValue";
        }
        return pounds / 2.2;
    }
};

Conversion.spec.js (test file):

/// 
// Specs
describe("The Conversion Library", function () {
    describe("Convert pounds to kg", function () {

        it("Should multiply the number of pounds per 2.2", function () {
            expect(Conversion.poundToKg(22)).toBe(10);
        });

        it("Should not multiply the number of pounds per 2.2", function () {
            expect(Conversion.poundToKg(22)).not.toBe(9);
        });

        it("Should throw an exception if the input is not numeric", function () {
            var foo = function () {
                Conversion.poundToKg("abc");
            };
            expect(foo).toThrow("IncorrectPoundValue");
        });

        it("Should throw an exception if the input is not numeric", function () {
            var foo = function () {
                Conversion.poundToKg("1");
            };
            expect(foo).toThrow("IncorrectPoundValue");
        });

    });
});

Step 3: Starting wallaby.js

Position your cursor over wallaby-jasmine.json, right-click and select “Start wallaby.js”:

Should the startup fail, you will receive a notification message. In this case, check the information for your configuration file. A successful start will produce the following message:

Wallaby.js executes unit tests upon startup. Test files will have a green square for successful tests, and a red square and a message in red type in case of failure: