Question

我有一个非常简单的指令，其目的只是取消dragstart事件：

link: function(scope, element) {
  element.on('dragstart', function(e) {
    e.preventDefault();
  })
}

如何在Jasmine测试中测试？我有以下测试试图窥探一个Event对象，并将其传递给处理程序：

var mockEvent; 

beforeEach(function() {
  mockEvent = new Event('dragstart');
  spyOn(mockEvent,'preventDefault');
});

it('should call preventDefault', function () {
  element.triggerHandler('dragstart', mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalled();
});

但测试失败了。你可以see this at this Plunker.。我如何测试这个（/重构指令以使其可测试）？

编辑：理想情况下不包含jQuery。编辑：更改标签

Answer 1

您可以包含jquery并创建一个jquery事件对象。这个对象很容易传递：

beforeEach(function() {
  mockEvent = $.Event('dragstart');
  spyOn(mockEvent,'preventDefault');
});

it('should call preventDefault', function () {
  element.triggerHandler(mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalled();
});

我在你的plunkr中使用了这个jquery版本：//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js

Answer 2

在Angular 1.3.14的当前稳定版本中，您可以通过将事件作为triggerHandler的第一个也是唯一的参数传递而不使用jQuery，因此而不是问题中建议的内容

element.triggerHandler('dragstart', new Event('dragstart'));

你可以写

element.triggerHandler(new Event('dragstart'));

要根据原始问题在preventDefault功能上添加间谍，您可以执行以下操作

var mockEvent; 

beforeEach(function() {
  mockEvent = new Event('dragstart');
  spyOn(mockEvent, 'preventDefault');
});

it('should call preventDefault', function () {
  element.triggerHandler(mockEvent);
  expect(mockEvent.preventDefault).toHaveBeenCalled();
});

你可以see this working in this Plunker。您也可以使用至少具有type键的普通对象，因此在这种情况下

mockEvent = {
  type: 'dragstart',
  preventDefault: jasmine.createSpy('preventdefault')
};

可以看到working in this Plunker

我相信这已添加到this commit中的1.3分支。

将模拟DOM事件传递给没有jQuery的指令处理程序

2 个答案: