测试 Jasmine 中是否触发了事件

Question

如果没有jquery-jasmine，如何测试 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();
  });
});

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

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