Damir's Corner.

Continuous Testing of JavaScript Code

Unit testing is a crucial part of development in any language, but its even more important in dynamically typed and interpreted languages such as JavaScript because there's no compiler doing at least basic validation of the code. Just like in .NET development, quick feedback is very valuable, and nothing can beat continuous testing in this field.

Command Line Setup

I'm going to focus on using Jasmine test framework and Karma test runner. Basic continuous testing setup is actually really to achieve: just keeping the default settings is enough:

• Let's install the required npm packages first:

    npm install jasmine
    npm install karma
    npm install karma-jasmine
    npm install karma-chrome-launcher
  

• Now we can initialize the default Karma configuration:

    node node_modules/karma/bin/karma init
  

• After answering all the questions by just pressing Enter, we only need to specify the files to monitor in the generated karma.conf.js file:

    files: [
        './src/*.js',
        './test/*.js'
    ],
  

• Time to create the source file to test - src/add.js:

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

• And the test file - test/test-add.js:

    describe('add method', function() {
        it('adds 2 numbers', function() {
            expect(add(2, 5)).toBe(7);
        });
    });
  

• Everything is set up. Karma can be run now:

    node node_modules/karma/bin/karma start .\karma.conf.js
  

This will run Karma in so-called auto watch mode which makes it run continuously monitoring the files, until the process is interrupted by pressing Ctrl+C. Every time any of the files changes, the tests are automatically re-run and a report is output in the console, including the number of tests run and details about any potentially failing tests:

Chrome 47.0.2526 (Windows 10 0.0.0) add method adds 2 numbers FAILED
        Expected 8 to be 7.
            at Object.<anonymous> (D:/Users/Damir/Temp/Karma/test/test-add.js:3:27)
Chrome 47.0.2526 (Windows 10 0.0.0): Executed 1 of 1 (1 FAILED) (0.026 secs / 0.005 secs)
09 01 2016 16:38:00.513:INFO [watcher]: Changed file "D:/Users/Damir/Temp/Karma/src/add.js".
Chrome 47.0.2526 (Windows 10 0.0.0): Executed 1 of 1 SUCCESS (0.007 secs / 0.002 secs)

WebStorm Setup

WebStorm from JetBrains has great Karma support and is also very easy to set up:

• Open the file as a new project by clicking on File > Open... and selecting the root folder with all the files.
• Karma runner can be configured in Run > Edit Configurations....
• A new configuration is added by clicking on the + drop down and selecting Karma.
• Only 2 things to change in the default settings:
  • Set Name to e.g. Karma
  • Select the path to the karma.conf.js from the Configuration file.
• Running the created Karma configuration will run the tests and display the results in a nice tree view display.

WebStorm by default doesn't run the tests automatically. Instead you need to press Shift+Alt+R. You can enable automatic rerun of tests by clicking the icon below the green arrow to the left of the tree view. This will cause the tests to be automatically run again whenever the files change. You don't even need to save the file in WebStorm to trigger them. There is a Set AutoTest delay setting in the dropdown with the gear icon to change how long you need to be idle before the tests are run again.

If you debug the Karma configuration instead of running it, you can set breakpoints in your source or test code to break into the debugger when tests are run. You need to have a special Chrome extension installed, though.

Visual Studio Difficulties

in Visual Studio 2015 I had no luck getting to run Karma tests properly with the free Karma Tast Adapter. Chrome browser started, but the progress indicator in Test Explorer window kept spinning indefinitely with the list of tests shown or even without it. Judging form the Q and A section on the gallery page for the extension I'm not the only one with these issues.

ReSharper from JetBrains also has support for Karma tests, but even getting this to work required additional effort. It seems that ReSharper doesn't depend on the karma.conf.js file included in the project and creates configuration on its own instead. Because of this the test file must reference the source file with the following line added at the top:

/// <reference path="../src/add.js"/>

The tests can be run from the same Unit Test Explorer window as any other tests in ReSharper. I couldn't find a way to debug them, though. The option was always disabled.

It might be worth mentioning that Karma testing in ReSharper works in any project containing the JavaScript test files, no matter the project type. Typically this would be an ASP.NET project or a Node.js project.