5

Desarrollé una biblioteca en JavaScript para controlar los eventos generados por un mando de consola o joystick, y tengo una serie de tests en Jest para probar diferentes casos, pero me encuentro con un problema: no puedo simular los eventos gamepadconnected y gamepaddisconnected de forma correcta.

Mi código tiene algo como esto (simplificado):

const gameControl = {
  // ...
  init: function() {
    window.addEventListener('gamepadconnected', e => {
      console.log('gamepad conectado');
      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 desconectado');
      if (e.gamepad) {
        delete window.gamepads[e.gamepad.index];
        // ...
      }
    });
  }
  // ...
};

gameControl.init();

export default gameControl;

Los eventos nativos gamepadconnected y gamepaddisconnected son lanzados en la ventana cuando se conecta o desconecta (respectivamente) un mando/joystick. Reciben como parámetro un evento con la propiedad gamepad que contiene los datos del mando/joystick conectado.

Intento lanzar los eventos de forma manual en Jest, creando un evento propio, con los parámetros que quiero (gamepads es un array con datos de prueba (mocks) válidos). Más o menos de este modo:

describe('gameControl', () => {

  // ...

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

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

  // ...

});

El problema viene cuando esos eventos se lanzan correctamente pero el parámetro no se pasa de forma correcta. Por ejemplo, se detecta que gamepadconnected se lanzó, se muestra por consola "gamepad conectado", pero luego el objeto de evento e no contiene la propiedad gamepad.

Hice un console.log(e) para ver qué propiedades tenía, pero me encuentro que mi parámetro no aparece por ningún lado. Esto es lo que obtengo con el console.log:

CustomEvent { isTrusted: [Getter] }

¿Por qué sucede esto? ¿Cómo puedo lanzar un evento con el parámetro que yo quiera para poder probar esos eventos?

4
  • Nota que un CustomEvent capturado tiene una propiedad detail tal cual cuando la declaras. Deberías acceder con e.detail.gamepad.
    – gugadev
    Commented el 3 sept. 2019 a las 11:56
  • No puedo reproducir el problema, mira esto jsfiddle.net/a3ef7kgh/1
    – Emeeus
    Commented el 3 sept. 2019 a las 12:11
  • @takedafront pon eso como respuesta, porque es la alternativa que acabé usando. Como poco te llevarás mi positivo.
    – Alvaro Montoro
    Commented el 3 sept. 2019 a las 12:25
  • @Emeeus en ese ejemplo estás leyendo e.detail en lugar de e.gamepad que es lo que viene del evento real. Como alternativa puse en mi código que lea e.gamepad || e.detail.gamepad, pero eso es algo hacky (básicamente es adaptar el código para los tests). Idealmente no tendría que cambiar el código, sino lanzar el evento "nativo" (o un mock) desde los tests.
    – Alvaro Montoro
    Commented el 3 sept. 2019 a las 12:29

1 respuesta 1

1

Como dices en los comentarios, si quieres acceder directamente a e.gamepad sin pasar por .detail se puede hacer esto:

const ev = new CustomEvent('gamepadconnected');

ev.gamepad = "mi valor personalizado";

document.addEventListener("gamepadconnected", (e) => {
  console.log(e.gamepad)
})


document.dispatchEvent(ev);

o bien añadir ambas propiedades, detail:{gamepad} y gamepad. Lo que sucede es que el constructor de CustomEvent() solo admite modificar detail lo demás lo hereda de Event().

1
  • Útil gracias, yo lo utilizo en éste formato: ``` ( ev = new CustomEvent('gamepadconnected') ).gamepad = "mi valor personalizado"; document.addEventListener("gamepadconnected", (e) => { console.log(e.gamepad) }); document.dispatchEvent(ev); ``` mis datos y también incluyo cancelable: detail: por si luego lo necesito.
    – Triplex
    Commented el 23 ene. 2023 a las 12:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.