Post
Ask Question

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
     
    ATDD1.jpg
     
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
 
ATDD2.jpg
 
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:
 
ATDD3.jpg
 
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
  1. MyTestCase=TesCase("MyTestCase");  
  2. MyTestCase.prototyp.testA=function( ) {  
  3. };  
  4. MyTestCase.prototype.testB=function( ) {  
  5. }; 
Using the inline declaration
  1. TestCase("MyTestCase", {  
  2. MyTestCase.prototype.testA=function( ) {  
  3. };  
  4. MyTestCase.prototype.testB=function( ) {  
  5. }; 
Screen spec of my JavaScript test case file:
 
ATDD4.jpg
  1. TestCase("GreeterTest", {  
  2.    
  3.             testGreet: function(){  
  4.                         var greeter = new myapp.Greeter();  
  5.                         assertEquals("Hello Vivek", greeter.greet('Vivek'));  
  6.             }  
  7. }); 
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
  1. Visual Studio 2012
  2. Java Runtime
  3. 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.
  1. Open Visual Studio 2010 and above.
  2. On the File menu, choose "New Web Site".
  3. Create a "js" folder for client scripts in the root of the web site.
  4. 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.
     
  5. Put production scripts in the "production" folder. For example "Greeter.js" with the following contents:
  6. Put tests into the "testing/tests" folder. For example "GreeterTest.js" with the following contents:
  7. 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:
 
ATDD5.jpg
 
Configure JsTestDriver tests runner external application
  1. Open Visual Studio
  2. On the Tools menu, choose External Tools.
  3. In the External Tools dialog box, choose "Add", and enter the name "JsTestDriver Run" in the Title box.
  4. In the Command box, enter the path to the Java Runtime. For example "C:\Program Files\Java\jre6\bin\java.exe".
  5. 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"
  6. Select "Use output window" and then choose "OK".
     
    ATDD6.jpg
     
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 
 
ATDD7.jpg


Similar Articles