Question

我正在编写单元测试，我需要触发一个mouseenter以确保处理程序附加到某个元素，并且它在回调中执行正确的操作。但是，我花了很多时间在它上面，并意识到它似乎只是鼠标事件......我想。 http://jsbin.com/EZIriqA/1/edit

它应该发出两个警报。一个用于“双击”，一个用于“鼠标输入”。它只会发射一个。代码是相同的（我确保通过复制和粘贴它，只是更改事件名称）。

以下是代码：

$('foo').addEvent('mouseenter:relay(li[data-type])', function () {
  alert('Mouse Enter');
});

$('foo').fireEvent('mouseenter', {
  target: $$('li[data-type]')[0]
});

$('foo').addEvent('dblclick:relay(li[data-type])', function () {
  alert('Double Click');
});

$('foo').fireEvent('dblclick', {
  target: $$('li[data-type]')[0]
});

如果无法触发鼠标，我将如何测试鼠标中的代码？我可以将所有代码移动到类上的方法，在这里分配它们，但是我没有写这个代码，因为我正在编写单元测试是为了安全地重构所有代码。

Answer 1

免责声明：醉酒。但是：这是因为mootools在它是原生事件之前就开创了mouseenter（以及原型）。 mouseenter实际上是在polyfill中扩展mouseover。委派mouseenter实际上并不是一个好习惯 - 它一直是错误的，并且被认为是使用mouseover:relay()的更好主意。

这是最近添加的ish（1.4.4 / 5） - https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.Event.js#L156-L162 - Element.NativeEvents.mouseenter = 2;位。不确定它是否已在委托级别上工作。

无论如何 - 因为mouseenter以mouseover为基础，你可以parentel.fireEvent('mouseover', { target: el })并且没关系。

我知道这是伪代码，但你仍然没有按照最佳做法使用mootools。

document.id('the-sandbox').set('html', '<ul id="foo"><li data-type="foo">Foo</li><li data-type="bar">Bar</li></ul>');
var t = document.getElement('li[data-type]'),
    foo = document.id('foo');

foo.addEvents({
  'mouseenter:relay(li[data-type])': function () {
    console.log('Mouse Enter'); 
  },
  'dblclick:relay(li[data-type])': function () { 
    console.log('Double Click');
  }  
});

foo.fireEvent('mouseover', { 
  target: t
}).fireEvent('dblclick', {
  target: t
});

差异：即使$返回el，也请使用元素api。新元素/素数选择器不会返回元素，将被包装。选择器应该被缓存。应该缓存$$，但最好使用document.getElement - ＆gt; querySelector vs $$ - ＆gt; querySelectorAll()[0]。

另外，如果你想对这些进行测试，我建议像Syn（合成事件库，在github上）这样的东西 - 它真的像一个迷你网络驱动程序，你可以告诉鼠标悬停，点击，类型等非常方便如果你不介意在单元和end2end /集成测试之间跨越测试边界。

无法在MooTools中以编程方式触发mouseenter

1 个答案: