testing custom events in components

component.js

import { addNumberEvent } from './custom-event.js';

/**
 * Returns a number input with your initial value set.
 *
 * @param {number} initialValue - The initial value for this input.
 * @returns {HTMLInputElement} - The rendered input element.
 * @fires CustomEvent#addNumber
 */
export const numberInputComponent = (initialValue = 0) => {
  const inputEl = document.createElement('input');
  inputEl.type = 'number';
  inputEl.value = initialValue;
  inputEl.addEventListener('change', event => {
    event.stopPropagation();
    const newNumber = Number(inputEl.value);
    const newNumberEvent = addNumberEvent(newNumber);
    inputEl.dispatchEvent(newNumberEvent);
  });
  return inputEl;
};

component.spec.js

import { numberInputComponent } from './component.js';
import { testEventEmitted } from './test-event-emitted.js';

describe('testing custom events', () => {
  it('dispatches an event 0', async () => {
    const el = numberInputComponent();
    await testEventEmitted(el, 'change', 'addNumber', { number: 0 });
  });
  it('dispatches an event 1', async () => {
    const el = numberInputComponent(1);
    await testEventEmitted(el, 'change', 'addNumber', { number: 1 });
  });
  it('dispatches an event 2', async () => {
    const el = numberInputComponent(2);
    await testEventEmitted(el, 'change', 'addNumber', { number: 2 });
  });
  it('dispatches an event 3', async () => {
    const el = numberInputComponent(3);
    await testEventEmitted(el, 'change', 'addNumber', { number: 3 });
  });
});

custom-event.js

/**
 * Returns a new `addNumber` event containing the number to add.
 *
 * @param {number} newNumber - The number to add.
 * @returns {CustomEvent#addNumber} - An `addNumber` event with your number.
 */
export const addNumberEvent = (newNumber = 0) => {
  return new CustomEvent('addNumber', {
    bubbles: true,
    detail: { number: newNumber },
  });
};

test-event-emitted.js

export const testEventEmitted = async (
  component = document.createElement('div'),
  dispatched = '',
  emitted = '',
  detail = {}
) =>
  new Promise((res, rej) => {
    const parent = document.createElement('div');
    parent.appendChild(component);

    let didEmit = false;

    parent.addEventListener(dispatched, e => {
      didEmit = true;
      try {
        expect(e.type).toEqual(dispatched);
      } catch (err) {
        rej(err.message);
      }
    });

    parent.addEventListener(emitted, e => {
      didEmit = true;
      try {
        expect(e.detail).toEqual(detail);
      } catch (err) {
        rej(err.message);
      }
      res();
    });

    component.dispatchEvent(new Event(dispatched));

    setTimeout(() => {
      if (!didEmit) {
        rej(`component did not dispatch "${emitted}" event`);
      }
    }, 1000);
  });