angularjs-directive - Jasmine 测试中角度元素的调度事件不起作用

Question

在我的测试用例中，我正在尝试这样的事情:

element = angular.element('<div></div>')
element.trigger('mouseenter');

但是，有错误说“未定义不是函数”。我认为这是因为我没有使用 jquery。我也试过这个:

goog.events.dispatchEvent(element[0], 'mouseenter');

但是，它说“断言失败:不能将 goog.events.dispatchEvent 与非 goog.events.Listenable 实例一起使用”

有什么解决办法吗？

Answer 1

您所追求的是以编程方式触发鼠标事件。为此，不需要任何变通方法或库。要使用的对象或方法取决于您要定位的环境。

以编程方式触发事件涉及创建自定义事件。由于您控制此自定义事件，因此您还可以决定它是可取消的还是冒泡的。请注意 mouseenter on IE does not bubble .

下面的元素事件目标没有被任何 DOM 库包装——它只是对名为 targetEl 的 DOM 元素的引用。 .

当前规范 : 使用 MouseEvent 构造函数。

var event = new MouseEvent('mouseenter', { 
  'view': window, 
  'bubbles': true, 
  'cancelable': true 
});
targetEl.dispatchEvent(event);

旧规范 : 使用 document.createEvent 和 event.initEvent .

var event = document.createEvent('MouseEvents');
event.initEvent('mouseenter', true /*bubbles*/, true /*cancelable*/);
targetEl.dispatchEvent(event);

IE 8 及以下 : 使用 document.createEventObject 和 fireEvent .

var event = document.createEventObject();
targetEl.fireEvent('onmouseenter', event);

JSFiddle

对于涉及关闭的部分问题: goog.events.dispatchEvent不会将原始 DOM 元素作为事件目标，因为它需要一个实现特定接口(interface)的对象( Listenable)。至于 Angular，它的 jqLit​​e 实现不包括 jQuery 的 .trigger()方法。

除非您专门评估库在测试环境中触发自定义事件(与响应它们相比)的能力，否则上述方法是可行的方法。