Sending mouse events such as click and mouseover in JsUnit tests can be really hard.

More Bad News

Prototype doesn’t make it any easier. Sam Stephenson says:

We would very much like to support it in the future. It’s fairly complicated to implement native event firing across all supported browsers, so in 1.6.0, fire works with custom events only.

YUI To The Rescue

YAHOO.util.UserActions can simulate some user actions. Unfortunately, calls to YUI can look a bit clunky in a Prototype-heavy codebase:

var element = new Element("div").insert("Hi");
var offset = element.cumulativeOffset();
YAHOO.util.UserAction.click(element, { shiftKey: true });

YUI + Prototype FTW

A little mixin magic:

Element.addMethods({
  simulateClick: YAHOO.util.UserAction.click.bind(YAHOO.util.UserAction),
  simulateDblClick: YAHOO.util.UserAction.dblclick.bind(YAHOO.util.UserAction),
  simulateMousedown: YAHOO.util.UserAction.mousedown.bind(YAHOO.util.UserAction),
  simulateMouseup: YAHOO.util.UserAction.mouseup.bind(YAHOO.util.UserAction),
  simulateMouseover: YAHOO.util.UserAction.mouseover.bind(YAHOO.util.UserAction),
  simulateMouseout: YAHOO.util.UserAction.mouseout.bind(YAHOO.util.UserAction),
  simulateMousemove: YAHOO.util.UserAction.mousemove.bind(YAHOO.util.UserAction)
});

and now our test code looks nicer:

var element = new Element("div").insert("Hi");
var offset = element.cumulativeOffset();
myElement.simulateClick({ shiftKey: true });

So in IE, JsUnit has to resort to searching the text of all scripts for strings that look like test function names. Unfortunately, it doesn’t understand comments so commented-out test functions will end up running anyway.

Recently, Dean McNamee and Dan Pupius alerted Edward Hieatt and me to an undocumented Internet Explorer Javascript function called RuntimeObject and suggested JsUnit might be able to use it to discover test functions.

I replaced the text searching with RuntimeObject and tagged it as version 2.2 alpha 25. (I also added an assertEqualsIgnoringOrder function while I was making changes.)

Browse the new version at SourceForge or check it out like this:

Try it out and let us know if there are any problems.

Show Log

There’s now a “Show Log” button that opens a window with a log of what JsUnit has been up to.

New log button (click image for larger view)

New log window (click image for larger view)

New URL Parameters

There are three new URL parameters:

• suppressDialogs=true will suppress JsUnit’s dialogs in interactive mode
• setupPageTimeout=n will change the timeout for the setupPage call
• pageLoadTimeout=n will change the page load timeout

Easier Suite Creation

The jsUnitTestSuite constructor now accepts test pages and subsuites as parameters. So instead of this:

function suite() {
  var suite = new jsUnitTestSuite();
  suite.addTestPage("/foo/barTest.html");
  suite.addTestPage("/foo/bazTest.html");
  return suite;
}

you can do this:

function suite() {
  return new jsUnitTestSuite("/foo/barTest.html", "/foo/bazTest.html");
}

Also, I wanted to be able to view any test page so I could debug the tests with Firebug (as explained here).

I also didn’t want to run a web server all the time, so I wanted a script that would create a static HTML file.

Here’s what I came up with. It’s not configurable, so you’ll have to modify it for your own needs.

JsUnitSuiteBuilder.rb

FireBug has a nice debugger, but I couldn’t get it to work with the JsUnit test runner. I could set breakpoints in JsUnit itself, but any breakpoints in my test would be ignored.

And then it hit me: ditch the test runner. I opened my test page directly in Firefox, opened FireBug, clicked the Debugger tab, and chose my test from the “Scripts” menu. Here’s a simplified version:

function testUpdate() {
  var listPanel = new ListPanel();
  listPanel.update(["one", "two", "three"]);

  var children = $("content").childNodes;
  assertEquals("one", children[0]);
  assertEquals("two", children[1]);
  assertEquals("three", children[2]);
}

I put a breakpoint at the first assertEquals and switched to the Console tab and typed testUpdate(). I saw the ListPanel getting drawn in the browser (something you don’t see in the JsUnit test runner) and in the Debugger tab I could inspect all my variables.

But even better, I could go back to the Console tab and start evaluating Javascript.

>>> children.length
3

Good.

>>> children[0]
div

Bad.

>>> children[0].firstChild
[Text] "one"

Better.

>>> children[0].firstChild.nodeValue
"one"

Perfect.