Testing your JavaScript using Chutzpah and Visual Studio Team Services

From your local IDE to the Build Definition, JavaScript is and must be testable
By Alex Calbajos Posted 12 August 2016

Testing your JavaScript using Chutzpah and Visual Studio Team Services

To test or not to test? This shouldn’t be the question. When, where and how; that’s something open for discussion, but testing is close to mandatory nowadays. Even more so in a continuous delivery environment where changes get in production, or in the hands of the users, quicker and quicker by each passing day.

It should also be taken into account that modern Web Apps have large parts of logic implemented in diverse JavaScript libraries that also need to be unit tested and integrated in Build Definitions.

This being said, the solution proposed below aims to do just that: unit test JavaScript code and integrate those tests in the Build Definitions. For this, I am using Chutzpah, Jasmine and the tools offered by VS and VSTS.

Configure the local environment

Step 1. Install Chutzpah

I installed the Chutzpah NuGet to my project using the Package Manager Console.

Install Chutzpah

Chutzpah is an open source JavaScript test runner which enables you to run unit tests using QUnit, Jasmine, Mocha, CoffeeScript and TypeScript.

I found out it's useful to install both extensions 'Chutzpah Test Adapter for the Test Explorer' and 'Chutzpah Test Runner Context Menu Extention' offered by Chutzpah, from the Visual Studio Extensions browser.

Chutzpah Extensions

The first is the Test adapter, used to run tests in the Visual Studio Test Explorer. With a light configuration, the test adapter will see the JavaScript unit tests and will pick them up in the explorer.

The second extension is a context menu extension that allows us to run the tests with only two mouse clicks. This plugin also provides additional functionality such as code coverage results and debugging which can be done directly from Visual Studio.

Step 2. Install Jasmine

Install Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code. The great thing about Jasmine is that it does not depend on any other JavaScript frameworks and it does not require a DOM.

Step 3. Configure Chutzpah

Here is a sample of my Solution where all of this was tested:

Solution Explorer

As you can see, in the Sources folder I put the JavaScript that I want to test: calculator.js.

Calculator

Then in the Tests folder, the unit test, calculator.tests.js, written using Jasmine.

Calculator Test

You can also see the chutzpah.json file that I added manually. Here I am telling Chutzpah that the testing framework I use is Jasmine, where it can find the necessary references and the path to my tests.

Chutzpah JSON

Though I only used these three properties (Framework, References and Tests), the chutzpah.json file supports a lot more properties that can be used to properly configure the way Chutzpah handles your solution and tests.

Run the tests locally

Step 4. Run

Because I already installed the Test Adapter, the tests are now available in the test explorer. Chutzpah actually contains PhantomJS as a dependency, so running the tests from Test Explorer will do so in a headless way.

Test Explorer

Step 5. Debug (if needed)

As I already said, the second extension I installed allows us to debug the tests. Just right click the test and select Run Chutzpah with Debugger. This will actually start your browser and get Visual Studio in debug mode.

Calculator Test Debug

Configure the VSTS Build Definition

Step 6. Add a “Test” task

Add Task

Step 7. Configure the “Test” task

First I set the test assembly to match the JavaScript test naming convention e.g. __***.tests.js__. Suffixing all test in a similar fashion can help especially in this step, but also when configuring Chutzpah.

Then I make sure that I point to the Chutzpah test adapter, the NuGet package that I installed earlier. In my case this path was $(Build.SourcesDirectory)\packages.

Task Options

And that should be it. Now all is left to do is queue a new build and check that the tests are executed accordingly.

Hopefully this step by step presentation will help you make your first steps in testing JavaScript code and making use of the tools VSTS offers for doing this.

Alex Calbajos
Alex Calbajos
Developer