Testing JavaScript Using Jasmine Test Framework and Chutzpah test Explorer

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.

Jasmine

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

Chutzpah

Chutzpah is an open source JavaScript unit test runner which helps you integrate JavaScript unit testing into your website. It enables you to run JavaScript unit tests from the command line and from inside of Visual Studio. It also supports running in the TeamCity continuous integration client. Chutzpah supports both the QUnit, Jasmine and Mocha testing frameworks.

CONFIGURE THE LOCAL ENVIRONMENT

Step 1. Install Chutzpah

Installed the Chutzpah NuGet using the Package Manager Console.

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

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

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: As you can see, there is a calculator.js JavaScript that want to test: calculator.js.in the Sources folder. Then in the Tests folder, the unit test, calculator.tests.js, written using Jasmine. You can also see the chutzpah. Son file that was added manually. Here Chutzpah that the testing explorer and use is Jasmine Framework, where it can find the necessary references and the path to the tests.

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, 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.

Step 5. Debug (if needed)

The second extension 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. For more information,https://www.ceymplon.lk/service/it-service/tech-consultancy