useKeyDownHandler: migrate to typescript and add unit test

Author: clairep94

.eslintrc

@@ -29,8 +29,8 @@
         "tsx": "never"
       }
     ],
-    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "default-param-last": 0,
     "no-else-return" :0,

client/common/useKeyDownHandlers.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import useKeyDownHandlers from './useKeyDownHandlers';
+import { isMac } from '../utils/device';
+
+jest.mock('../utils/device');
+
+function fireKeyboardEvent(key: string, options: Partial<KeyboardEvent> = {}) {
+  const event = new KeyboardEvent('keydown', {
+    key,
+    code: `Key${key.toUpperCase()}`,
+    bubbles: true,
+    cancelable: true,
+    ...options
+  });
+  document.dispatchEvent(event);
+}
+
+// Component for testing the hook
+const HookConsumer = ({
+  handlers
+}: {
+  handlers: Record<string, jest.Mock>;
+}) => {
+  useKeyDownHandlers(handlers);
+  return null;
+};
+
+describe('useKeyDownHandlers', () => {
+  let handlers: Record<string, jest.Mock>;
+
+  beforeEach(() => {
+    handlers = {
+      f: jest.fn(),
+      'ctrl-f': jest.fn(),
+      'ctrl-shift-f': jest.fn(),
+      'ctrl-alt-n': jest.fn()
+    };
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('calls "ctrl-f" handler on Windows (isMac false)', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { ctrlKey: true });
+
+    expect(handlers['ctrl-f']).toHaveBeenCalled();
+    expect(handlers.f).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-f" handler on Mac (isMac true)', () => {
+    (isMac as jest.Mock).mockReturnValue(true);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { metaKey: true });
+
+    expect(handlers['ctrl-f']).toHaveBeenCalled();
+    expect(handlers.f).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-shift-f" handler with both ctrl and shift keys', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('f', { ctrlKey: true, shiftKey: true });
+
+    expect(handlers['ctrl-shift-f']).toHaveBeenCalled();
+  });
+
+  it('calls "ctrl-alt-n" handler with ctrl and alt', () => {
+    (isMac as jest.Mock).mockReturnValue(false);
+
+    render(<HookConsumer handlers={handlers} />);
+    fireKeyboardEvent('n', { ctrlKey: true, altKey: true, code: 'KeyN' });
+
+    expect(handlers['ctrl-alt-n']).toHaveBeenCalled();
+  });
+});

client/common/useKeyDownHandlers.ts

@@ -1,18 +1,19 @@
 import { mapKeys } from 'lodash';
-import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
+import { isMac } from '../utils/device';
+
+/** Function to call upon keydown */
+export type KeydownHandler = (e: KeyboardEvent) => void;
+/** An object mapping from keys like 'ctrl-s' or 'ctrl-shift-1' to handlers. */
+export type KeydownHandlerMap = Record<string, KeydownHandler>;
 
 /**
  * Attaches keydown handlers to the global document.
- *
  * Handles Mac/PC switching of Ctrl to Cmd.
- *
- * @param {Record<string, (e: KeyboardEvent) => void>} keyHandlers - an object
- * which maps from the key to its event handler.  The object keys are a combination
- * of the key and prefixes `ctrl-` `shift-` (ie. 'ctrl-f', 'ctrl-shift-f')
- * and the values are the function to call when that specific key is pressed.
+ * @param keyHandlers - an object which maps from the key to its event handler. The object keys are a combination of the key and prefixes `ctrl-` `shift-`
+ * (ie. 'ctrl-f', 'ctrl-shift-f') and the values are the function to call when that specific key is pressed.
  */
-export default function useKeyDownHandlers(keyHandlers) {
+export default function useKeyDownHandlers(keyHandlers: KeydownHandlerMap) {
   /**
    * Instead of memoizing the handlers, use a ref and call the current
    * handler at the time of the event.
@@ -30,8 +31,7 @@ export default function useKeyDownHandlers(keyHandlers) {
    */
   const handleEvent = useCallback((e) => {
     if (!e.key) return;
-    const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
-    const isCtrl = isMac ? e.metaKey : e.ctrlKey;
+    const isCtrl = isMac() ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
       handlers.current[
         `ctrl-shift-${
@@ -53,20 +53,3 @@ export default function useKeyDownHandlers(keyHandlers) {
     return () => document.removeEventListener('keydown', handleEvent);
   }, [handleEvent]);
 }
-
-/**
- * Component version can be used in class components where hooks can't be used.
- *
- * @param {Record<string, (e: KeyboardEvent) => void>} handlers
- */
-export const DocumentKeyDown = ({ handlers }) => {
-  useKeyDownHandlers(handlers);
-  return null;
-};
-DocumentKeyDown.propTypes = {
-  handlers: PropTypes.objectOf(PropTypes.func)
-};
-
-DocumentKeyDown.defaultProps = {
-  handlers: {}
-};