如何最好地对事件抽象进行单元测试？

Question

I have two questions:

1.) How best to unit-test an event listener? 2.) Have I properly understood isHostMethod?

I'm trying to unit-test an event listener abstraction but the only way I can think to test it is against the window 'load' event.

I've a code example here: https://gist.github.com/1502326

Also, I'm using David Mark's (@cinsoft) isHostMethod to detect the relevant host object support but was wondering if I had properly understood the concepts or not? So for example, am I right in thinking that a host object/method should be available under the following conditions (although I understand that these 'conditions' are unreliable):

• if typeof returns 'function' (for majority browsers)
• if typeof returns 'unknown' (for IE < 9 where its implementation used ActiveX objects for native Functions)
• if typeof returns 'object' and the value isn't 'null' (because ES3 specs have allowed null to return 'object' which is incorrect behaviour)

If any of these conditions are true then that (again, unreliably) should mean that the specified host method is available to use.

But even still the host object/method might be implemented differently to how the specification dictates it should be and so it would be more accurate to do full 'feature detection' where I create the object and see if an event is triggered (or some similar test)?

Thanks for any advice regarding both these enquiries.

Answer 1

The simplest way is to use a synthetic click event. Given the code in your gist, you could test with:

var evt;

events.add( document.body, "click", function() {
    // swap this for an assert(true, "message");
    console.log( true, "supported" );
});

// IE nodes support a click() method
if ( document.body.click ) {
    document.body.click();
} else {
// Standards based events have to be created, initialized and dispatched.    

  evt = document.createEvent("MouseEvents");
  evt.initMouseEvent( 
      "click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null 
  );

  document.body.dispatchEvent( evt ); 
}

See: http://jsfiddle.net/rwaldron/CR4FC/

Tested in: IE6,7,8; Chrome 17; Firefox 10; Safari 5.1.2; Opera 11