测试 Jasmine 中是否触发了事件

Question

如何在没有 jquery-jasmine 的情况下测试 Jasmine 中是否触发了事件？

我正在做一个不使用 jQuery 的项目（哇哦），我正在尝试为我的菜单触发功能编写单元测试。它是这样工作的：

你点击一个按钮
然后我的可测试组件运行 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();
  });
});

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

如果有更好的方法，我会很乐意接受不同的答案。

测试 Jasmine 中是否触发了事件

Testing if an event has been triggered in Jasmine

javascript

testing

unit-testing

jasmine

jquery-events