通模擬DOM事件處理程序的指令沒有jQuery的

Question

我有一個非常簡單的指令，其目的僅僅是取消dragstart事件：

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

我怎樣才能在茉莉花試驗測試呢？我有以下測試，試圖偵察事件對象，並將其傳遞給處理程序：

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

在折角當前穩定版本，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

我相信這是加入1.3分公司this commit。

Answer 2

你可能包括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