javascript - 自定义事件参数未在测试中正确传递

Question

我开发了一个 JavaScript 库来处理游戏 handle /操纵杆生成的事件，我还使用 Jest 开发了一系列针对不同测试用例的测试。但是我在测试时遇到了问题:我不知道如何模拟 gamepadconnected 和 gamepaddisconnected 事件。

这是我的代码的简化版本:

const gameControl = {
  // ...
  init: function() {
    window.addEventListener('gamepadconnected', e => {
      console.log('gamepad detected');
      if (!window.gamepads) window.gamepads = {};
      if (e.gamepad) {
        if (!window.gamepads[e.gamepad.index]) {
          window.gamepads[e.gamepad.index] = e.gamepad;
          // ...
        }
      }
    });
    window.addEventListener('gamepaddisconnected', e => {
      console.log('gamepad disconnected');
      if (e.gamepad) {
        delete window.gamepads[e.gamepad.index];
        // ...
      }
    });
  }
  // ...
};

gameControl.init();

export default gameControl;

gamepadconnected 和 gamepaddisconnected 是分别在游戏 handle /操纵杆连接或断开连接时触发的 native 事件。作为参数，它们会收到一个带有 gamepad 属性的事件对象，该对象包含有关已连接/已断开连接的游戏 handle 的信息。

我尝试在测试中手动调度事件，creating my own custom event with the parameter I want (下面的 gamepads 是一个包含游戏 handle 模拟数据的数组)。像这样:

describe('gameControl', () => {

  // ...

  test('trigger gamepadconnected event', () => {
    const event = new CustomEvent('gamepadconnected', {
      detail: { gamepad: gamepads[0] }
    });
    global.dispatchEvent(event);
  });

  test('trigger gamepaddisconnected event', () => {
    const event = new CustomEvent('gamepaddisconnected', {
      detail: { gamepad: gamepads[0] }
    });
    global.dispatchEvent(event);
  });

  // ...

});

但是，尽管事件被正确派发并且事件监听器被触发，但是参数并没有通过。例如，gamepadconnected 已处理，我在控制台中看到“已检测到游戏 handle ”，但对象 e 不包含属性 gamepad 我需要。

我做了一个 console.log(e) 来查看事件对象的属性，但是我的参数无处可见。这是所有 console.log 显示:

CustomEvent { isTrusted: [Getter] }

我做错了什么？我怎样才能实现我想要的并测试 gamepadconnected 和 gamepaddisconnected 的事件处理程序的完整代码？

作为替代方案，我尝试将 gamepad 属性移动到顶层，或者使用 Event 而不是 CustomEvent，但问题仍然存在。

test('trigger gamepaddisconnected event', () => {
  const event = new CustomEvent('gamepaddisconnected', {
    gamepad: gamepads[0]
  });
  global.dispatchEvent(event);
});

test('trigger gamepaddisconnected event', () => {
  const event = new Event('gamepaddisconnected', {
    gamepad: gamepads[0]
  });
  global.dispatchEvent(event);
});

Answer 1

想到一个懒惰的 hack:只要检查是否定义了 e.detail.gamepad，然后将 e.gamepad 设置为 e.detail.gamepad

window.addEventListener('gamepadconnected', e => {
   if(e.detail && e.detail.gamepad) { e.gamepad = e.detail.gamepad }
...