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

【问题标题】：How best to unit-test an events abstraction?如何最好地对事件抽象进行单元测试？
【发布时间】：2022-02-14 16:50:42
【问题描述】：

我有两个问题：

如何最好地对事件侦听器进行单元测试？
我是否正确理解isHostMethod？

我正在尝试对事件侦听器抽象进行单元测试，但我想测试它的唯一方法是针对窗口 load 事件。

我这里有一个代码示例：https://gist.github.com/1502326

另外，我正在使用 David Mark (@cinsoft) isHostMethod 来检测相关的主机对象支持，但想知道我是否正确理解了这些概念？因此，例如，我认为宿主对象/方法应该在以下条件下可用（尽管我理解这些“条件”不可靠）是正确的：

如果typeof 返回function（适用于大多数浏览器）
如果typeof 返回unknown（对于 IE
如果typeof 返回object 并且值不是null（因为ES3 规范允许null 返回object，这是不正确的行为）

如果这些条件中的任何一个为真，那么（同样，不可靠）应该意味着指定的主机方法可以使用。

但即使宿主对象/方法的实现方式可能与规范规定的方式不同，因此在我创建对象并查看是否触发事件的地方进行完整的“特征检测”会更准确（或一些类似的测试）？

感谢您对这两个问题的任何建议。

【问题讨论】：

代码不能在没有上下文的情况下存在。您所谓的抽象是根据环境映射到相同名称的 3 个不同函数。如您所知，这些替代方案会做不同的事情（执行顺序、this、多个侦听器），即使您仔细检查它们的存在，它们也会继续这样做。

标签： javascript dom-events host

【解决方案1】：

最简单的方法是使用合成点击事件。鉴于您的要点中的代码，您可以使用以下代码进行测试：

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 ); 
}

见：http://jsfiddle.net/rwaldron/CR4FC/

测试于：IE6,7,8；铬 17；火狐10； Safari 5.1.2；歌剧 11

【讨论】：