Erik Hanson's blog
Interesting Things
- We've started to run across this in one of our projects: Javascript DOM methods can be a nice way to create a DOM tree (with some practice, you can write clear, reusable JS UI components), but it's slow. You probably won't notice it if you're only creating a few DOM nodes, but if you're drawing thousands of them then it can turn into a performance bottleneck. The generally-accepted solution is to push a bunch of strings into an array, use Array#join("") to create a single string, then stick it in an element's innerHTML. Quirksmode has some numbers and Joseph Smarr has a related presentation.
Desert Fixes
Desert has been upgraded to work with Rails 2, solving problems with ActionMailer templates and Rails load paths.
Nested Describes in RSpec
A reminder: RSpec supports nested describe blocks. This can be useful for sharing setup and also for organization (one describe per method being tested, with multiple it blocks). Some people reported that there are some issues when using nested describe blocks with fixture scenarios. There was also a report of some flakiness around a single it block being run more than once.
Yay NetBeans
One of our projects has reported that they have been using NetBeans and are happy with it.
The Bad News
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 });