test(web): RelativeModal

web/package.json

@@ -24,6 +24,7 @@
  "@snowpack/plugin-postcss": "^1.1.0",
  "@testing-library/jest-dom": "^5.11.9",
  "@testing-library/preact": "^2.0.1",
+ "@testing-library/user-event": "^12.7.1",
  "autoprefixer": "^10.2.1",
  "cross-env": "^7.0.3",
  "eslint": "^7.19.0",

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();
+ });
+});