useModalClose: update to typescript & add test

Author: clairep94

client/common/useModalClose.test.tsx

@@ -0,0 +1,65 @@
+import React, { useRef, useEffect } from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import useModalClose from './useModalClose';
+import useKeyDownHandlers from './useKeyDownHandlers';
+
+jest.mock('./useKeyDownHandlers');
+
+describe('useModalClose', () => {
+  let onClose: jest.Mock;
+
+  beforeEach(() => {
+    onClose = jest.fn();
+    jest.clearAllMocks();
+  });
+
+  function TestModal({ handleClose }: { handleClose: () => void }) {
+    const ref = useModalClose(handleClose);
+    return (
+      <div>
+        <div data-testid="outside">Outside</div>
+        <div
+          data-testid="modal"
+          ref={ref as React.RefObject<HTMLDivElement>}
+          tabIndex={-1}
+          style={{ border: '1px solid black' }}
+        >
+          Modal content
+        </div>
+      </div>
+    );
+  }
+
+  function rerender() {
+    return render(<TestModal handleClose={onClose} />);
+  }
+
+  it('calls onClose when clicking outside the modal', () => {
+    const { getByTestId } = rerender();
+
+    fireEvent.click(getByTestId('outside'));
+
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('does not call onClose when clicking inside the modal', () => {
+    const { getByTestId } = rerender();
+
+    fireEvent.click(getByTestId('modal'));
+
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it('returns a ref that is focused on mount', () => {
+    const { getByTestId } = rerender();
+    const modal = getByTestId('modal');
+
+    expect(document.activeElement).toBe(modal);
+  });
+
+  it('calls useKeyDownHandlers with escape handler', () => {
+    rerender();
+
+    expect(useKeyDownHandlers).toHaveBeenCalledWith({ escape: onClose });
+  });
+});

client/common/useModalClose.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, MutableRefObject } from 'react';
 import useKeyDownHandlers from './useKeyDownHandlers';
 
 /**
@@ -14,21 +14,24 @@ import useKeyDownHandlers from './useKeyDownHandlers';
  *
  * Returns a ref to attach to the outermost element of the modal.
  *
- * @param {() => void} onClose
- * @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
- * @return {React.MutableRefObject<HTMLElement | null>}
+ * @param onClose - Function called when modal should close
+ * @param passedRef - Optional ref to the modal element. If not provided, one is created internally.
+ * @returns A ref to be attached to the modal DOM element
  */
-export default function useModalClose(onClose, passedRef) {
-  const createdRef = useRef(null);
-  const modalRef = passedRef || createdRef;
+export default function useModalClose(
+  onClose: () => void,
+  passedRef?: MutableRefObject<HTMLElement | null>
+): MutableRefObject<HTMLElement | null> {
+  const createdRef = useRef<HTMLElement | null>(null);
+  const modalRef = passedRef ?? createdRef;
 
   useEffect(() => {
     modalRef.current?.focus();
 
-    function handleClick(e) {
+    function handleClick(e: MouseEvent) {
       // ignore clicks on the component itself
-      if (modalRef.current && !modalRef.current.contains(e.target)) {
-        onClose?.();
+      if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
+        onClose();
       }
     }