docbrown/app/javascript/shared/components/__tests__/useKeyboardShortcuts.test.jsx

import { h } from 'preact';
import { renderHook } from '@testing-library/preact-hooks';
import { fireEvent, render } from '@testing-library/preact';
import { KeyboardShortcuts, useKeyboardShortcuts } from '../useKeyboardShortcuts';

describe('Keyboard shortcuts for components', () => {
  describe('useKeyboardShortcuts', () => {
    it('should fire a function when keydown is detected', () => {
      const shortcut = {
        KeyK: jest.fn()
      };

      renderHook(() =>
        useKeyboardShortcuts(shortcut, document),
      );
      fireEvent.keyDown(document, { code: "KeyK" });

      expect(shortcut.KeyK).toHaveBeenCalledTimes(1);
    });
    
    it('should fire a function when chained keydown is detected', () => {
      const shortcut = {
        "KeyA~KeyB": jest.fn()
      };

      renderHook(() =>
        useKeyboardShortcuts(shortcut, document),
      );
      fireEvent.keyDown(document, { code: "KeyA" });
      fireEvent.keyDown(document, { code: "KeyB" });

      expect(shortcut["KeyA~KeyB"]).toHaveBeenCalledTimes(1);
    });
    
    it('should not fire a function when chained keydown is missed, timeout should only be 0ms', async () => {
      const shortcut = {
        "KeyA~KeyB": jest.fn()
      };
      
      const timeout = 0;

      renderHook(() =>
        useKeyboardShortcuts(shortcut, document, { timeout }),
      );
      fireEvent.keyDown(document, { code: "KeyA" });
      
      await new Promise(resolve => setTimeout(() => {
        fireEvent.keyDown(document, { code: "KeyB" });
        resolve();
      }, 25));

      expect(shortcut["KeyA~KeyB"]).not.toHaveBeenCalled();
    });
    
    it('should not add event listener if shortcut object is empty', () => {
      HTMLDocument.prototype.addEventListener = jest.fn();

      renderHook(() =>
        useKeyboardShortcuts({}, document),
      );

      expect(HTMLDocument.prototype.addEventListener).not.toHaveBeenCalled();
    });

    it('should add event listener to window', () => {
      HTMLDocument.prototype.addEventListener = jest.fn();
      
      const shortcut = {
        KeyK: null
      }

      renderHook(() =>
        useKeyboardShortcuts(shortcut, document),
      );

      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
    });

    it('should not fire a function when keydown is detected in element', () => {
      const shortcut = {
        KeyK: jest.fn()
      };
      const eventTarget = document.createElement('textarea') // eventTarget set since the default is window

      renderHook(() =>
        useKeyboardShortcuts(shortcut, document),
        eventTarget,
      );
      fireEvent.keyDown(eventTarget, { code: "KeyK" });

      expect(shortcut.KeyK).not.toHaveBeenCalled();
    });

    it('should remove event listener when the hook is unmounted', () => {
      HTMLDocument.prototype.addEventListener = jest.fn();
      HTMLDocument.prototype.removeEventListener = jest.fn();
      
      const shortcut = {
        KeyK: null
      }

      const { unmount } = renderHook(() =>
        useKeyboardShortcuts(shortcut, document),
      );

      unmount();

      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
      expect(HTMLDocument.prototype.removeEventListener).toHaveBeenCalledTimes(1);
    });
  });

  describe('<KeyboardShortcuts />', () => {
    it('should not add event listener if shortcut object is empty', async () => {
      HTMLDocument.prototype.addEventListener = jest.fn();

      render(
        <KeyboardShortcuts eventTarget={document} />,
      );

      expect(HTMLDocument.prototype.addEventListener).not.toHaveBeenCalled();
    });

    it('should add event listener to window', async () => {
      HTMLDocument.prototype.addEventListener = jest.fn();

      render(
        <KeyboardShortcuts eventTarget={document} shortcuts={{ KeyK: null }} />,
      );

      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
    });

    it('should remove event listener when the hook is unmounted', async () => {
      HTMLDocument.prototype.addEventListener = jest.fn();
      HTMLDocument.prototype.removeEventListener = jest.fn();

      const { unmount } = render(
        <KeyboardShortcuts eventTarget={document} shortcuts={{ KeyK: null }} />,
      );

      unmount();
      expect(HTMLDocument.prototype.addEventListener).toHaveBeenCalledTimes(1);
      expect(HTMLDocument.prototype.removeEventListener).toHaveBeenCalledTimes(1);
    });
  });
});