Acceptance Test Driven Development (ATDD) With JavaScript

Introduction

Since the role of JavaScript is increasing day by day in my recent projects, currently we are using Dojo and Angular JS part SOA based projects. My managers are forcing me to use a TDD style of development including JavaScript code. I have been able to find a few interesting tools to support Test Driven Development (TDD) with JavaScript and that are also well integrated with Visual Studio 2012. I want to share that with you in this article.

Currently used tools in my projects:

Jasmine: BDD, framework independent, easy integration with Ruby projects and continuous builds.
Js-test-driver: The goal of JsTestDriver is to build a JavaScript test runner that easily integrates with continuous builds systems and allows running tests on multiple browsers quickly to ease TDD style development.

Acceptance Test-Driven Development (ATDD)

TDD is extremely valuable, but you need more to get great unit test coverage and still not deliver value to the customer. ATDD focuses on the following complete features and functionality:

ATDD: macro view
TDD: micro view

JsTestDriver is a powerful framework for running unit tests for JavaScript code. The main advantage of it is that it can be executed from the command line on automated continuous integration environments, part of your unit testing framework. I usually use Visual Studio 2012 and JsTestDriver to be attached to it using the "External Tools" mechanism.

Overview of how JsTestDriver works at runtime

Part 1: How to run JavaScript test cases using JsTestDriver without any plugins (Visual Studio and Eclipse)

The file structure as shared in code files with the folder name "js-test-driver" is:

Steps to setup and run the JavaScript tests

Step 1: Download the JsTestDriver jar file from "http://code.google.com/p/js-test-driver/downloads/list" and place it in your local machine.

Step 2: For small projects just create two folders named "src" and "tests" including a configuration file named "jsTestDriver.conf".

Step 3: Place your JavaScript code files in the folder named "src" and created TestCases either using a prototype or using an inline declaration and place in the folder "tests". Find the detailed description as given below related to how to write Test Cases in JstestDriver and the details of the command line options in JsTest Driver as given below.

Step 4: Just to create bat files named "run-server.bat" (to start the server on a specified port) and "run-tests.bat" (to run various tests on the specified browsers).

Step 5: Run the server "run-server.bat" to start the server and later run "run-tests.bat" containing tests with specified command-line switches. Or call the same to execute from the command line on an automated continuous integration environment, currently, we are using Team City for that.

run-server.bat

java -jar JsTestDriver-1.3.5.jar --port 1234

run-tests.bat

java -jar JsTestDriver-1.3.5.jar --tests all --browser "C:\Program Files\Mozilla Firefox\firefox.exe"

How to write Test Cases in JsTestDriver?

There are two ways to declare tests in the TestCase.

Using prototype

MyTestCase=TesCase("MyTestCase");
MyTestCase.prototyp.testA=function( ) {
};
MyTestCase.prototype.testB=function( ) {
};

Using the inline declaration

TestCase("MyTestCase", {
MyTestCase.prototype.testA=function( ) {
};
MyTestCase.prototype.testB=function( ) {
};

Screen spec of my JavaScript test case file:

TestCase("GreeterTest", {
testGreet: function(){
var greeter = new myapp.Greeter();
assertEquals("Hello Vivek", greeter.greet('Vivek'));
}
});

Used configuration files as shared name with ( jsTestDriver.conf )

As mentioned below the JavaScript code and tests folders paths with the "load:" switch and used referenced file paths inside JavaScript libraries with "serve:" switch part of the configuration file. On a nutshell mention, all base paths of JavaScript files including used libraries in the "load:" and all referenced JavaScript libraries paths should be in "serve:".

Server: http://localhost:4321

load:

- src/*.js

- tests/*.js

- src \work\dojo\dojo.js

- src \work\openlayers\OpenLayers.js

- src\test\js\mock\mock4js.js

- src\test\js\mock\jsUnitMockTimeout.js

serve:

- src/test/json/*.json

run-server.bat

java -jar JsTestDriver-1.3.5.jar --port 1234

run-tests.bat

java -jar JsTestDriver-1.3.5.jar --tests all

Output window: .

Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (1.00 ms)

Safari 528.16: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1.00 ms)

ConsoleTest.testGreet passed (1.00 ms)

[LOG] JsTestDriver Hello World!

[LOG] Browser Hello World!

Part 2: How Run JsTestDriver with Visual Studio 2012

The code files are attached with this article in the folder named "JS-TestDriver-VS2012Plugin-Code".

Prerequisites

Visual Studio 2012
Java Runtime
JsTestDriver ("http://code.google.com/p/js-test-driver/downloads/list"). Just download it and place in a local directory. On my machine, it is in "D:\builds\js-test-driver\JsTestDriver-1.3.5.jar".

Sample ASP.Net solution with JavaScript unit tests

For the purpose of demonstration let's create a small sample project, that contains some JavaScript unit tests.

Open Visual Studio 2010 and above.
On the File menu, choose "New Web Site".
Create a "js" folder for client scripts in the root of the web site.
Create "production" and "testing" folders within the "js" folder. The first one is for production scripts and the second one is for unit tests, test doubles, and test configuration files.

Note: Do not forget to configure build scripts to delete the "testing" folder and the "jsTestDriver.conf" file from the final release; it is not acceptable to have testing code in production.
Put production scripts in the "production" folder. For example "Greeter.js" with the following contents:
Put tests into the "testing/tests" folder. For example "GreeterTest.js" with the following contents:
Put the configuration file "jsTestDriver.conf" into the "testing" folder with the following contents:

After all operations you will have an ASP.Net solution with a structure like this:

Configure JsTestDriver tests runner external application

Open Visual Studio
On the Tools menu, choose External Tools.
In the External Tools dialog box, choose "Add", and enter the name "JsTestDriver Run" in the Title box.
In the Command box, enter the path to the Java Runtime. For example "C:\Program Files\Java\jre6\bin\java.exe".
In the Arguments box, enter the arguments in the following format: "-jar {Enter Path to Jar here}JsTestDriver-1.3.5.jar --tests all". For example, from my machine:

-jar d:\builds\js-test-driver\JsTestDriver-1.3.5.jar --port 9876 --browser "C:\Program Files\Mozilla Firefox\firefox.exe"

in the Initial directory, enter "$(ProjectDir)\js" For example - "$(ProjectDir)\js"
Select "Use output window" and then choose "OK".

If you want, now just assign a keyboard shortcut to run "JsTestDriver Run" (in the example below it is assigned to "Ctrl + F9"): Happy Coding 