Пропустить mock событие DOM для директивного обработчика без jQuery

У меня очень простая директива, целью которой является простое событие dragstart:

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

Как я могу проверить это в тесте Жасмин? У меня есть следующий тест, который пытается заглянуть в объект 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();
});

Но тест терпит неудачу. Вы можете видеть это в этом Plunker.. Как я могу проверить это (/refactor директива, чтобы сделать его проверяемым)?

Изменить: Идеально без включения jQuery. Изменить: измененные теги

Ответы

Ответ 1

В текущей стабильной версии Angular, 1.3.14 вы можете сделать это без jQuery, передав событие как первый и единственный параметр triggerHandler, поэтому вместо того, что было предложено в вопросе

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

Вы можете видеть, как это работает в этом Plunker. Вместо этого вы можете просто использовать простой объект с ключом type, поэтому в этом случае

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

который можно увидеть работающий в этом Plunker

Я полагаю, что это было добавлено к ветки 1.3 в этой фиксации.

Ответ 2

вы можете включить jquery и создать объект события jquery. этот объект можно легко передать:

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

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

Я использовал эту версию jquery в вашем plunkr://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js