javascript.UnitTestingWithJsTestDriver

Overview

I’m learning JavaScript (again, and for real this time, I hope). After reading JavaScript: The Good Parts and several online pages, I set out to try some basic TDD in JavaScript. For these instructions (and the soon to be created instructional video), I’m using the following tool set:

Chrome (configured for auto updating)
Terminal (OS X Lion)
Java (to execute use the test runner)
Eclipse (to edit my files)
ViPlugin in Eclipse

This is my first stab at this and I hope to both get a better workflow and better at JavaScript.

Getting Setup

Setup JsTestDriver. Instructions summarized here for convenience.

Download the jar
Create basic project structure:

% mkdir -p RpnCalcDemo/src
% mkdir -p RpnCalcDemo/src-test
% cd RpnCalcDemo

For convenience, I copied the downloaded JsTestDriver jar to this directory. The name of the version I downloaded is: JsTestDriver-1.3.3d.jar
Create basic configuration file:
jsTestDriver.conf

server: http://localhost:9876

load:
  - src/*.js
  - src-test/*.js

In a separate terminal instance, start the test runner:

% java -jar JsTestDriver-1.3.3d.jar --port 9876

Open up browser/create a tab and then browse to localhost:9876.
Click on the Capture This Browser link. You’ll see a window with the following information:

                 JsTestDriver
Last:1326495229968 | Next:1997 | Server:Waiting...

First Test: Initial X Value is 0

Create a first test in the src-test directory:
src-test/rpn_calculator_test.js

rpn_calculator_test = TestCase("rpn_calculator");

rpn_calculator_test.prototype.testShouldInitiallyBe0 = function() {
	var calc = rpn_calculator();
	assertEquals(0, calc.x());
};

Run your tests (they fai):

% java -jar JsTestDriver-1.3.3d.jar --tests all
java.lang.IllegalArgumentException: The patterns/paths /Users/Thoughtworks/src
/workspaces/ RpnCalcDemo/src (/Users/Thoughtworks/src/workspaces/RpnCalcDemo/
src)  used in the configuration file didn't match any file, the files patterns/
paths need to be relative /Users/Thoughtworks/src/workspaces/RpnCalcDemo
	at com.google.jstestdriver.PathResolver.expandGlob(PathResolver.java:170)
	at com.google.jstestdriver.PathResolver.resolve(PathResolver.java:109)
	at com.google.jstestdriver.config.ParsedConfiguration.resolvePaths(
ParsedConfiguration.java:98)
	at com.google.jstestdriver.config.Initializer.initialize(Initializer.java:84)
	at com.google.jstestdriver.JsTestDriver.runConfigurationWithFlags(
JsTestDriver.java:259)
	at com.google.jstestdriver.JsTestDriver.runConfiguration(
JsTestDriver.java:211)
	at com.google.jstestdriver.JsTestDriver.main(JsTestDriver.java:144)
Unexpected Runner Condition: The patterns/paths /Users/Thoughtworks/src/
workspaces/RpnCalcDemo/src (/Users/Thoughtworks/src/workspaces/RpnCalcDemo/src)
 used in the configuration file didn't match any file, the files patterns/
paths need to be relative /Users/Thoughtworks/src/workspaces/RpnCalcDemo
 Use --runnerMode DEBUG for more information.

The system complains that the pattern “- src/*.js” does not match any files. So fix that:
src/rpn_calculator.js

var rpn_calculator = function() {
	var that = {};
	that.x = function() {
		return 0;
	};
	return that;
};

Make a directory called logs and send (JUnit-formated XML-based) test output results there:

% mkdir logs
% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
.
Total 1 tests (Passed: 1; Fails: 0; Errors: 0) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 1 tests (Passed: 1; Fails: 0; Errors 0) (1.00 ms)
% ls logs
TEST-Chrome_16091275_Mac_OS.rpn_calculator.xml

The resulting log file on my machine:

<?xml version="1.0" encoding="UTF-8"?>
<testsuite name="Chrome_16091275_Mac_OS.rpn_calculator" errors="0" failures="0" tests="1" time="0.0010">
<testcase classname="Chrome_16091275_Mac_OS.rpn_calculator" name="testShouldInitiallyBe0" time="0.0010"/>
</testsuite>

Next Test: Last Value Entered is X

Add a second test:

append to src-test/rpn_calculator_test.js

rpn_calculator_test.prototype.testXShouldBeLastValueEntered = function() {
  var calc = rpn_calculator();
  calc.enter(42);
  assertEquals(42, calc.x());
};

See the tests fail:

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
.E
Total 2 tests (Passed: 1; Fails: 0; Errors: 1) (0.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 2 tests (Passed: 1; Fails: 0; Errors 1) (0.00 ms)
    rpn_calculator.testXShouldBeLastValueEntered error (0.00 ms): TypeError: 
Object #<Object> has no method 'enter'
      TypeError: Object #<Object> has no method 'enter'
          at [object Object].testXShouldBeLastValueEntered (http://localhost:9876/test
/src-test/rpn_calculator_test.js:10:7)

Tests failed: Tests failed. See log for details.

Add the missing method (and update the implementation a touch):

src/rpn_calculator.js

var rpn_calculator = function() {
	var that = {};
	that.value = 0;
	that.x = function() {
		return that.value;
	};
	that.enter = function(value) {
		that.value = value;
	};
	return that;
};

Run the tests, see the pass:

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (0.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (0.00 ms)

Refactor the rpn_calculator function, hide value:

var rpn_calculator = function() {
	var that = {};
	var value = 0;
	that.value = 0;
	that.x = function() {
		return value;
	};
	that.enter = function(newValue) {
		value = newValue;
	};
	return that;
};

Check, tests still pass?

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (1.00 ms)

Refactor the tests, remove duplication (this is multiple refactorings on my end):

rct = {};
rpn_calculator_test = TestCase("rpn_calculator", {
	setUp : function() {
		rct.calc = rpn_calculator();
	},
	tearDown : function() {
		rct.calc = undefined;
	}
});

rpn_calculator_test.prototype.testShouldInitiallyBe0 = function() {
	assertEquals(0, rct.calc.x());
};

rpn_calculator_test.prototype.testXShouldBeLastValueEntered = function() {
	rct.calc.enter(42);
	assertEquals(42, rct.calc.x());
};

Verify the tests still pass:

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (1.00 ms)

Can Handle Multiple Numbers Entered

Now create a new test:

Appended to src-test/rpn_calculator_test.js

rpn_calculator_test.prototype.testStoresMultipleValues = function() {
  rct.calc.enter(42);
  rct.calc.enter(9);
  rct.calc.drop();
  assertEquals(42, rct.calc.x());
};

This test will fail because there is no drop() method nor is this functionality supported.

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
..E
Total 3 tests (Passed: 2; Fails: 0; Errors: 1) (0.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 3 tests (Passed: 2; Fails: 0; Errors 1) (0.00 ms)
    rpn_calculator.testStoresMultipleValues error (0.00 ms): TypeError: Object #<Object> 
has no method 'drop'
      TypeError: Object #<Object> has no method 'drop'
          at Object.testStoresMultipleValues (http://localhost:9876/test/src-test/
rpn_calculator_test.js:23:11)

Tests failed: Tests failed. See log for details.

After a little effort, we have this:

src/rpn_calculator.js

var rpn_calculator = function() {
	var that = {};
	var values = [0];
	that.value = values;
	that.x = function() {
		return values[values.length-1];;
	};
	that.enter = function(newValue) {
		values.push(newValue);
	};
	that.drop = function() {
		values.pop()
	};
	return that;
};

And the test are back to passing:

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (1.00 ms)

One More Check

Notice the feature envy in the x function? I uses values the variable, the length of values and also has direct knowledge that the size is 0-based. This is not a huge deal, but there are defects in the system as written. Here’s a test to demonstrate a problem:

rpn_calculator_test.prototype.testCalculatorAlwaysHasValues = function() {
  rct.calc.drop();
  rct.calc.drop();
  assertEquals(0, rct.calc.x());
};

Notice the failing test:

java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
...F
Total 4 tests (Passed: 3; Fails: 1; Errors: 0) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 4 tests (Passed: 3; Fails: 1; Errors 0) (1.00 ms)
    rpn_calculator.testCalculatorAlwaysHasValues failed (0.00 ms): AssertError: expected 0 
but was [undefined]
      AssertError: expected 0 but was [undefined]
          at Object.testCalculatorAlwaysHasValues (http://localhost:9876/test/src-test/
rpn_calculator_test.js:30:2)

On both of my 2 HP calculators, I can drop all day long and nothing much happens (somewhat simplified, but reasonable for this demonstation. Conceptually, the so-called (by the documentation) “operand stack” is never empty. Here’s a way to implement that:

Update x method

  that.x = function() {
    if(values.length > 0)
      return values[values.length-1];;
    return 0;
  };

This gets the job done but now this method is exhibiting feature envy even stronger:
- It checks the length twice
- It knows that the array is 0-based
- It uses “value.” twice and values 1, so values three times.
A typical fix for feature envy is to push the responsibility into the object that has the data. To do that, we’ll introduce a new object: rpn_stack.

rpn_stack

We’ll begin with a few TDD cycles:

rpn_stack_test.js

rpn_stack_test = TestCase("rpn_stack");

rpn_stack_test.prototype.testPopOnNewStackReturns0 = function() {
	assertEquals(0, rpn_stack().pop());
};

This fails (there’s no rpn_stack() function:

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
....E
Total 5 tests (Passed: 4; Fails: 0; Errors: 1) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 5 tests (Passed: 4; Fails: 0; Errors 1) (1.00 ms)
    rpn_stack.testPopOnNewStackReturns0 error (1.00 ms): ReferenceError: rpn_stack
 is not defined
      ReferenceError: rpn_stack is not defined
          at [object Object].testPopOnNewStackReturns0 (http://localhost:9876/test/
src-test/rpn_stack_test.js:4:18)

Fix this by making one and giving it an implementation:

var rpn_stack = function() {
	that = {};
	that.pop = function() {
		return 0;
	};
	return that;
};

Now the tests pass:

% java -jar JsTestDriver-1.3.3d.jar --tests all --testOutput logs
.....
Total 5 tests (Passed: 5; Fails: 0; Errors: 0) (1.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 5 tests (Passed: 5; Fails: 0; Errors 0) (1.00 ms)

Next, we want to make sure that the last value entered is the one that pop returns:

Append new test to rpn_stack_test.js

rpn_stack_test.prototype.testPopReturnsLastValuePushed = function() {
  var values = rpn_stack();
  values.push(42);
  assertEquals(42, values.pop());
};

This fails, so fix it:

var rpn_stack = function() {
  that = {};
  var values = [0];
  that.pop = function() {
    return values.pop();
  };
  that.push = function(value) {
    values.push(value);
  };
  return that;
};

Check that it works:

......
Total 6 tests (Passed: 6; Fails: 0; Errors: 0) (0.00 ms)
  Chrome 16.0.912.75 Mac OS: Run 6 tests (Passed: 6; Fails: 0; Errors 0) (0.00 ms)

Do these tests seem familiar? They are almost straight out of src-test/rpn_calculator_test.js. Along those lines, here’s a check similar to the last one we wrote on rpn_calculator:

rpn_stack_test.prototype.testSeveralDropsAndPopIsStill0 = function() {
  var values = rpn_stack();
  values.drop();
  values.drop();
  values.drop();
  assertEquals(0, values.pop());
};

Run the tests, you’ll notice you the result is undefined instead of 0. This is a quick fix:

var rpn_stack = function() {
  that = {};
  var values = [];
  that.pop = function() {
    if(values.length > 0)
      return values.pop();
    return 0;
  };
  that.push = function(value) {
    values.push(value);
  };
  return that;
};

Run the tests, you should be back to passing.
A quick check of rpn_calculator.js and you’ll notice that while there’s a use of “.length”, this has been pushed into the new rpn_stack class. However, there’s also a need to get the top without removing it. So two more TDD cycles:

rpn_stack_test.prototype.testTopOfNewStack0 = function() {
  assertEquals(0, rpn_stack().top());
};

And top version 1:

  that.top = function() {
    return 0;
  };

Then something similar to what we did for pop:

rpn_stack_test.prototype.testTopReturnsLastValuePushed = function() {
  var values = rpn_stack();
  values.push(19);
  assertEquals(19, values.top());
};

And a fix:

  that.top = function() {
    if(values.length > 0)
      return values[values.length-1];
    return 0;
  };

Notice that there’s some duplication between top and pop. When I know JavaScript well enough, I’ll remove it. Until then, let’s use this new object in rpn_calculator.

Using rpn_stack in rpn_calculator

Make a few updates to the rpn_calculator class:

var rpn_calculator = function() {
  var that = {};
  var values = rpn_stack();
  that.value = values; 
  that.x = function() {
    return values.top();
  };
  that.enter = function(newValue) {
    values.push(newValue);
  };
  that.drop = function() {
    values.pop()
  };  
  return that;
};

Run the tests, everything should be passing. Here’s the full version of rpn_stack.js:

src/rpn_stack.js

var rpn_stack = function() {
  that = {}; 
  var values = [];
  that.pop = function() {
    if(values.length > 0)
      return values.pop();
    return 0;
  }
  that.push = function(value) {
    values.push(value);
  };
  that.top = function() {
    if(values.length > 0)
      return values[values.length-1];
    return 0;
  };
  return that;
};

Overview

Getting Setup

jsTestDriver.conf

First Test: Initial X Value is 0

src-test/rpn_calculator_test.js

src/rpn_calculator.js

Next Test: Last Value Entered is X

append to src-test/rpn_calculator_test.js

src/rpn_calculator.js

Can Handle Multiple Numbers Entered

Appended to src-test/rpn_calculator_test.js

src/rpn_calculator.js

One More Check

Update x method

rpn_stack

rpn_stack_test.js

Append new test to rpn_stack_test.js

Using rpn_stack in rpn_calculator

src/rpn_stack.js

Comments