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

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

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