static/shared/keyboard/keyboard.test.ts

/**
 * @license
 * Copyright 2021 The Go Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style
 * license that can be found in the LICENSE file.
 */

import { keyboard } from './keyboard';

describe('KeyboardController', () => {
  const fn = jest.fn();
  const create = (el: string) => document.body.appendChild(document.createElement(el));
  const target = create('div');
  const input = create('input');
  const select = create('select');
  const textarea = create('textarea');
  const editableDiv = create('div');
  editableDiv.contentEditable = 'true';
  const bubbleDiv = create('div');
  const nonTargetDiv = create('div');

  keyboard
    .on('y', 'default event', () => fn())
    .on('m', 'meta required', () => fn(), { withMeta: true })
    .on('t', 'target required', () => fn(), { target: target });

  beforeEach(() => {
    jest.resetAllMocks();
  });

  it('fires a callback when a key is down', () => {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'y' }));
    expect(fn).toBeCalled();
  });

  it('skips callback when a meta key is used', () => {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'y', metaKey: true }));
    expect(fn).not.toBeCalled();
  });

  it('fires callback when a meta key is required', () => {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm', metaKey: true }));
    expect(fn).toBeCalled();
  });

  it('skips callback when a meta key is missing', () => {
    document.dispatchEvent(new KeyboardEvent('keydown', { key: 'm' }));
    expect(fn).not.toBeCalled();
  });

  it('skips callback when target is an input element', () => {
    input.dispatchEvent(new KeyboardEvent('keydown', { key: 'y' }));
    expect(fn).not.toBeCalled();
  });

  it('skips callback when target is a select element', () => {
    select.dispatchEvent(new KeyboardEvent('keydown', { key: 'y' }));
    expect(fn).not.toBeCalled();
  });

  it('skips callback when target is a textarea element', () => {
    textarea.dispatchEvent(new KeyboardEvent('keydown', { key: 'y' }));
    expect(fn).not.toBeCalled();
  });

  it('skips callback when target is a an editable element', () => {
    editableDiv.dispatchEvent(new KeyboardEvent('keydown', { key: 'y' }));
    expect(fn).not.toBeCalled();
  });

  it('fires callback when event bubbles from target', () => {
    bubbleDiv.dispatchEvent(new KeyboardEvent('keydown', { key: 'y', bubbles: true }));
    expect(fn).toBeCalled();
  });

  it('fires callback when event matches target', () => {
    target.dispatchEvent(new KeyboardEvent('keydown', { key: 't', bubbles: true }));
    expect(fn).toBeCalled();
  });

  it('skips callback when event does not match target', () => {
    nonTargetDiv.dispatchEvent(new KeyboardEvent('keydown', { key: 't', bubbles: true }));
    expect(fn).not.toBeCalled();
  });
});