test(web): RelativeModal

web/src/components/RelativeModal.jsx

@@ -41,10 +41,11 @@ export default function RelativeModal({
 
       if (event.key === 'Escape') {
         setShow(false);
+        handleDismiss();
         return;
       }
     },
-    [ref]
+    [ref, handleDismiss]
   );
 
   useLayoutEffect(() => {
@@ -96,7 +97,7 @@ export default function RelativeModal({
 
   const menu = (
     <Fragment>
-      <div key="scrim" className="absolute inset-0 z-10" onClick={handleDismiss} />
+      <div data-testid="scrim" key="scrim" className="absolute inset-0 z-10" onClick={handleDismiss} />
       <div
         key="menu"
         className={`z-10 bg-white dark:bg-gray-700 dark:text-white absolute shadow-lg rounded w-auto h-auto transition-all duration-75 transform scale-90 opacity-0 overflow-scroll ${

web/src/components/__tests__/RelativeModal.test.jsx

@@ -0,0 +1,63 @@
+import { h, createRef } from 'preact';
+import RelativeModal from '../RelativeModal';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '@testing-library/preact';
+
+describe('RelativeModal', () => {
+  test('keeps tab focus', async () => {
+    const ref = createRef();
+    render(
+      <div>
+        <label for="outside-input">outside</label>
+        <input id="outside-input" tabindex="0" />
+        <div ref={ref} />
+        <RelativeModal relativeTo={ref}>
+          <input data-testid="modal-input-0" tabindex="0" />
+          <input data-testid="modal-input-1" tabindex="0" />
+        </RelativeModal>
+      </div>
+    );
+
+    const inputs = screen.queryAllByTestId(/modal-input/);
+    expect(document.activeElement).toBe(inputs[0]);
+    userEvent.tab();
+    expect(document.activeElement).toBe(inputs[1]);
+    userEvent.tab();
+    expect(document.activeElement).toBe(inputs[0]);
+  });
+
+  test('pressing ESC dismisses', async () => {
+    const handleDismiss = jest.fn();
+    const ref = createRef();
+    render(
+      <div>
+        <div ref={ref} />
+        <RelativeModal onDismiss={handleDismiss} relativeTo={ref}>
+          <input data-testid="modal-input-0" tabindex="0" />
+        </RelativeModal>
+      </div>
+    );
+
+    const dialog = screen.queryByRole('dialog');
+    expect(dialog).toBeInTheDocument();
+
+    fireEvent.keyDown(document.activeElement, { key: 'Escape', code: 'Escape' });
+    expect(handleDismiss).toHaveBeenCalled();
+  });
+
+  test('clicking a scrim dismisses', async () => {
+    const handleDismiss = jest.fn();
+    const ref = createRef();
+    render(
+      <div>
+        <div ref={ref} />
+        <RelativeModal onDismiss={handleDismiss} relativeTo={ref}>
+          <input data-testid="modal-input-0" tabindex="0" />
+        </RelativeModal>
+      </div>
+    );
+
+    fireEvent.click(screen.queryByTestId('scrim'));
+    expect(handleDismiss).toHaveBeenCalled();
+  });
+});