测试茉莉花中是否触发了事件

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

基本上创建一个名为“事件”新的​​间谍，将其添加为事件处理程序，我的事件，然后验证它被调用。

如果有更好的方法来做到这一点，我将非常乐意接受不同的答案。