測試茉莉花中是否觸發了事件

Question

如何測試茉莉花中是否發生了事件而沒有jquery-jasmine？

我正在研究一個我們不使用jQuery（wohoo）的項目，並且我正在嘗試爲我的菜單觸發函數編寫一個單元測試。它的工作原理是這樣的：

• 你點擊一個按鈕
• 我可測試的組件，然後運行document.dispatchEvent(new CustomEvent('menu.toggle'))
• 我想測試該組件確實派出了自定義事件。

我該如何測試？

Answer 1

玩過了一下週圍，發現行之有效的解決方案：

import triggerEvent from 'trigger-event'; 
import component from './components/site-menu'; 

describe('triggering menu button',() => { 
    let menuToggleSpy; 
    beforeEach(() => { 
    menuToggleSpy = jasmine.createSpy('event'); 
    component(); 
    }); 

    it('dispatches menu.toggle event',() => { 
    document.addEventListener('menu.toggle', menuToggleSpy); 

    const $trigger = document.querySelector('.js-trigger-main-menu'); 
    triggerEvent($trigger, 'click'); 

    expect(menuToggleSpy).toHaveBeenCalled(); 
    }); 
}); 

基本上創建一個名爲「事件」新的​​間諜，將其添加爲事件處理程序，我的事件，然後驗證它被調用。

如果有更好的方法來做到這一點，我將非常樂意接受不同的答案。