As I described before having a DOM available to RhinoUnit would carry a number of advantages. One of the great things about RhinoUnit is that it runs headless, and thanks to the speed of Rhino, tests can run very quickly. It's problem is that it doesn't have a DOM available to it, and so it means that testing view logic is very difficult.
This does have a big advantage that it encourages developers to separate their business logic and view logic, and to have good, loosely coupled testing around their business logic. However it does also mean that the view logic goes basically untested at the unit level. This is less than ideal. It also means that any interactions with frameworks like jQuery and their plugins also cannot be tested by RhinoUnit.
This is where env.js comes in. Env.js is a javascript implementation of the browser, which would allow RhinoUnit to interact with DOM provided they can be made to play nice together. As it turns out, both needed some minor tweaking in order to work with each other.
RhinoUnit uses javascript object
self for logging, however env.js overrides this and therefore breaks RhinoUnit's logging. To fix RhinoUnit, self needs to be assigned to a variable and all references to self need to be updated.Env.js also needs some minor changes. In order to run RhinoUnit in this example, Rhino is hooked into the Bean Scripting Framework for java. This does not provide all the rhino shell commands that env.js expects, specifically the
print function. By simply replacing all calls to print with the self instance variable's log function, env.js can be made to work.Finally, RhinoUnit will fail if it thinks you've polluted the global namespace. This an extremely useful rule, however env.js does rather break that, with the dozens of ways javascript can interact with a browser. As a result RhinoUnit needs to be configured to ignore a rather long list of global variables, including but not limited to:
rhinounit window closed defaultStatus event frames innerHeight innerWidth clientHeight clientWidth name opener outerHeight outerWidth pageXOffest pageYOffset parent screenLeft screenTop screenX screenY status top open close NodeList Node CharacterData Text DOMText CDATASection Comment DocumentType Attr Element DocumentFragment ProcessingInstruction $domparser DOMParser DOMImplementation Document HTMLDocument HTMLElement HTMLCollection HTMLAnchorElement Anchor HTMLAreaElement HTMLBaseElement HTMLQuoteElement HTMLButtonElement HTMLTableColElement HTMLModElement HTMLFieldSetElement Form HTMLFormElement HTMLFrameElement HTMLFrameSetElement HTMLHeadElement HTMLIFrameElement HTMLImageElement HTMLInputElement HTMLLabelElement HTMLLegendElement Link HTMLLinkElement HTMLMapElement HTMLMetaElement HTMLObjectElement HTMLOptGroupElement HTMLOptionElement HTMLParamElement HTMLScriptElement HTMLSelectElement HTMLStyleElement HTMLTableElement HTMLTableCellElement HTMLTableRowElement Event CSS2Properties CSSRule CSSStyleSheet location $currentHistoryIndex $history history navigator setTimeout setInterval clearTimeout clearInterval addEventListener removeEventListener dispatchEvent onerror XMLHttpRequest getComputedStyle screen moveBy moveTo resizeBy resizeTo scroll scrollBy scrollTo alert confirm prompt $profiler $profile document node iRet nodeList
Once you have RhinoUnit and env.js behaving, you can write tests as follows:
eval(loadFile('env-js/dist/env.rhino.js'));
eval(loadFile('example/lib/adminUtils.js'));
eval(loadFile('example/src/TagPickerInputView.js'));
var templateRenderer;
var view;
testCases(test,
function setUp() {
templateRenderer = {};
view = new rhinounit.example.tagpicker.TagPickerInputView(templateRenderer, 'first-tag-picker');
},
function shouldShowLoadMessage() {
document.loadXML('<div id="first-tag-picker">' +
'<form>' +
'<label for="tagPickerInput1">Please select the first tag</label>' +
'<input id="tagPickerInput1" type="text" class="tag-picker-input" name="tagPickerInput" autocomplete="off"/>' +
'<div id="loadMessage" class="tag-picker-load-message hidden">Loading...</div>' +
'<div class="tag-picker-matched-tags"></div>' +
'</form>' +
'</div>');
document.getElementById('loadMessage').style.display = 'none';
view.showLoadMessage();
assert.that(document.getElementById('loadMessage').style.display, eq('block'));
});
Although env.js also apparently supports jQuery, my attempts to integrate the two with RhinoUnit have so far been fruitless. This may be due to the fact that although env.js does offer a high proportion of the features available in your average browser, the holes in functionality are still too great at the time of writing to satisfy the recent versions of jQuery.
Footnote: There are a couple of branches of env.js. This is the one that I used: link.
