1

我正在编写单元测试，我需要触发 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]
});

如果我不能让它触发，我将如何在 mouseenters 中测试代码？我可以将所有代码移动到类上的方法中，在此处分配它们，但我没有编写此代码，我编写单元测试的原因是为了安全地重构所有代码。

4

1 回答 1

2

免责声明：喝醉了。但是：这是因为 mootools 在它成为本地活动之前就已经开创了先河mouseenter（连同原型）。mouseenter实际上是mouseover在 polyfill 中扩展。委托mouseenter实际上不是一个好习惯——它有问题，被认为是一个更好的主意mouseover:relay()。

这是最近添加的（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-> querySelectorvs $$-> querySelectorAll()[0]。

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

于 2013-10-10T01:27:45.733 回答