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.
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 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:
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:
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 runtimePart 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 testsStep 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.batjava -jar JsTestDriver-1.3.5.jar --port 1234run-tests.batjava -jar JsTestDriver-1.3.5.jar --tests all --browser "C:\Program Files\Mozilla Firefox\firefox.exe"How to write Test Cases in JsTestDriverThere are two ways to declare tests in the TestCase.Using prototypeMyTestCase=TesCase("MyTestCase");MyTestCase.prototyp.testA=function( ) {};MyTestCase.prototype.testB=function( ) {};Using inline declarationTestCase("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 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:4321load:- 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.jsserve:- src/test/json/*.jsonrun-server.batjava -jar JsTestDriver-1.3.5.jar --port 1234run-tests.batjava -jar JsTestDriver-1.3.5.jar --tests allOutput 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 2012The code files are attached with this article in the folder named "JS-TestDriver-VS2012Plugin-Code".Prerequisites
Sample ASP.Net solution with JavaScript unit testsFor the purpose of demonstration let's create a small sample project, that contains some JavaScript unit tests.
After all operations you will have an ASP.Net solution with a structure like this:Configure JsTestDriver tests runner external application
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
Voice of a Developer: JavaScript From Scratch