JsTestDriver Design, Configuration and Writing First Test

Introduction

JsTestDriver (JSTD) is unique of the best dominant and efficient JavaScript unit testing frameworks. JSTD is not simply a JavaScript unit testing framework but as well a complete test runner. That may run other JavaScript unit testing frameworks, for example Jasmine, YUI Test, and QUnit. JSTD delivers a simple syntax for making JavaScript test cases. Those cases may run either from the browser or from the command line. JSTD make available a clean mechanism for testing asynchronous (Ajax) JavaScript code. We will find ourselves acquainted with the JSTD syntax if we are used to with the syntax of xUnit frameworks. In this post, the JSTD framework will be presented in detail.

Structural Design

We need to first know how it works before understanding how to configure JSTD. The below figure displays the architecture of JsTestDriver:

The server is launched initially. Then, the server loads the test runner code in the diverse browsers once they are captured. A browser may be taken through the command line and with entering the server URL in the browser's address bar. It is named a slave browser and can be organized from the command line once the browser is captured. The server loads the JavaScript code with directing commands to slave browsers. That performs the test cases on every slave browser. Finally returns the results to the client.

We can provide the two following key inputs to the client or command line:

• JavaScript files: The JavaScript source and test files. Also other helper files.

• A configuration file, JsTestDriver.conf: Just before consolidate the loading of the JavaScript source and test files

This architecture is adoptable. It permits a single server to capture any number of browsers. Even they are on the same machine or on different machines on the network. For instance, this may be valuable if our code is running on a Linux environment and we want to run our JavaScript tests against Microsoft Internet Explorer on another Windows machine.

Configuration

We need to follow the subsequent steps in order to configure JSTD:

1. Download the framework from http://code.google.com/p/js-testdriver/ downloads/list. 2. The second step is to generate the JSTD test configuration file, jsTestDriver. conf, by way of shown in the following code snippet: server: http://localhost:9876 load:

• src/*.js
• tests/*.js

The configuration file is in YAML format. YAML is a recursive acronym for YAML Ain't Markup Language. Visit the http://yaml.org for more information about the YAML format. The server instruction talks about to the JSTD server URL. The server URL would be required to be stated at the command line if the server instruction is not specified. The load instruction speaks of to the JavaScript files to be loaded by the JSTD test runner in order. The load directive expresses the test runner to load all JavaScript source files. Those are loaded with the extension pattern (*.js) under the src folder. Then to load all the JavaScript test files with the same extension pattern, however under the tests folder.

3. We can at this instant start the server from the command line using the following command after creating the JSTD test configuration file:

java –jar JsTestDriver-1.3.4.b.jar --port 9876

The server starts up on port 9876 by using this command. We may capture the browsers by entering the following server URL in the browser's address bar once the server starts:

http://localhost:9876/capture

We have the choice of launching captured or slave browsers in the server startup command as follows:

java -jar JsTestDriver-1.3.4.b.jar --port 9876 --browser [firefoxp ath],[iepath],[chromepath]

We can launch now captured browsers for the server to perform the JavaScript tests on using the browser argument.

4. We may perform the JSTD tests from the command line after we start the server and capture the browsers using the following command:

java -jar JsTestDriver-1.3.4.b.jar --tests all

We will observe the following result in the console if we have executed three successful tests after executing the JSTD tests:

.......

Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (2.00 ms)

Firefox 15.0 Windows: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (2.00

ms)

• Other browsers here …

How to write first JSTD test?

A JSTD test may hold test cases and test functions. A JSTD test case is a collection of allied test functions. Every test function should comprise one or more assertions in order to execute the test and verify the outputs. The JSTD TestCase object is liable for making the JSTD test case. Every test function should start with the word test acceptable to create the test functions inside the test case. Each JSTD assertion signifies a function that authenticates a condition that can return true or false. All of the assertions inside the test function have to be true in order to pass the test function. The test function fails if one or more assertions inside a test function are false. The below code extract displays an instance of two JSTD test cases with test functions:

TestCase1 = TestCase("Testcase1");

TestCase1.prototype.testFunction1 = function() {

// One or more assertion(s)

};

TestCase1.prototype.testFunction2 = function() {

// One or more assertion(s)

};

TestCase2 = TestCase("Testcase2");

TestCase2.prototype.testAnotherFunction = function() {

// One or more assertion(s)

};

Two test cases are created as shown in the erstwhile code snippet. The first test case is called Testcase1. It covers two test functions testFunction1 and testFunction2. The second test case is called Testcase2.It holds a single test function named testAnotherFunction.

Now, let's come to testing the SimpleMath JavaScript object. The below code snippet reminds us with the code of the SimpleMath object:

SimpleMath = function() {

};

SimpleMath.prototype.getFactorial = function (number) {

if (number 0. {

return 1;

} else if (number == 0) {

return 0;

} else {

return -1;

}

}

SimpleMath.prototype.average = function (number1, number2) {

return (number1 + number2) / 2;

}

The following three test scenarios would be developed for the getFactorial method:

• A positive number

• Zero

• A negative number

The following code snippet displays how to test calculating the factorial of a positive number (3), 0, and a negative number (-10) by using JSTD:

FactorialTestCase = TestCase("Factorial Testcase");

FactorialTestCase.prototype.setUp = function() {

this.simpleMath = new SimpleMath();

};

FactorialTestCase.prototype.tearDown = function() {

delete this.simpleMath;

};

FactorialTestCase.prototype.testPositiveNumber = function() {

assertEquals("Factorial(3)", 6,

this.simpleMath.getFactorial(3));

};

FactorialTestCase.prototype.testZero = function() {

assertEquals("Factorial(0)", 1,

this.simpleMath.getFactorial(0));

};

FactorialTestCase.prototype.testNegativeNumber = function() {

var localThis = this;

assertException("Factorial(-10)", function() {

localThis.simpleMath.getFactorial(-10)

}, "Error");

};

The TestCase object states a new test case called Factorial Testcase. The setUp method is used to make ready the test functions in the test case. The simpleMath object is shaped using new SimpleMath () in the setUp method. Quite the reverse, the tearDown method is used to de-initialize the test functions in the test case.

We come to a new test case that tests the functionality of the signum method given by the SimpleMath object after confirming the getFactorial test case. The below code snippet shows the signum test case:

SignumTestCase = TestCase("Signum Testcase");

SignumTestCase.prototype.setUp = function() {

this.simpleMath = new SimpleMath();

};

SignumTestCase.prototype.tearDown = function() {

delete this.simpleMath;

};

SignumTestCase.prototype.testPositiveNumber = function() {

assertEquals("Signum(3)", 1, this.simpleMath.signum(3));

};

SignumTestCase.prototype.testZero = function() {

assertEquals("Signum(0)", 0, this.simpleMath.signum(0));

};

SignumTestCase.prototype.testNegativeNumber = function() {

assertEquals("Signum(-1000)", -1, this.simpleMath.signum(-1000));

}

We have three test functions for the signum method:

• The testPositiveNumber function tests getting the signum of a positive number,

• The testZero function tests getting the signum of zero,

• The testNegativeNumber function tests getting the signum of a negative number.

The following code snippet displays the test case of the average method:

AverageTestCase = TestCase("Average Testcase");

AverageTestCase.prototype.setUp = function() {

this.simpleMath = new SimpleMath();

};

AverageTestCase.prototype.tearDown = function() {

delete this.simpleMath;

};

AverageTestCase.prototype.testAverage = function() {

assertEquals("Average(3, 6)", 4.5, this.simpleMath.average(3, 6));

};

It makes sure that the average is calculated properly by calling the average method in average Testcase. Using the two parameters 3 and 6 we expect the result to be 4.5.

We need to create the JSTD test configuration file that points to the source in order to run the SimpleMath JSTD tests. Test JavaScript files and the server URL as follows:

server: http://localhost:9876

load:

• src/*.js
• tests/*.js

At that time, start the server from the command line by using the following command:

java –jar JsTestDriver-1.3.4.b.jar --port 9876

At that moment, capture the browsers for example, IE and Firefox by entering the following URL in the browser's address bar:

http://localhost:9876/capture

Lastly, we can perform the tests after we start the server and capture the browsers manually by using the following command:

java -jar JsTestDriver-1.3.4.b.jar --tests all

Next executing the test cases, we would find the following results in the console:

..............

Total 14 tests (Passed: 14; Fails: 0; Errors: 0) (8.00 ms)

Microsoft Internet Explorer 8.0 Windows: Run 7 tests (Passed: 7; Fails:

0; Errors 0) (0.00 ms)

Firefox 15.0.1 Windows: Run 7 tests (Passed: 7; Fails: 0; Errors 0) (8.00

ms)

Mansoor Ahmed Chemical Engineer,Web developer