Add tests for Modal (#2731)

* Add Modal tests.

* fix type

* apply review feedback

* lint

* remove act

src/Modal.test.tsx

@@ -0,0 +1,73 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { expect, test } from "vitest";
+import { render } from "@testing-library/react";
+import { ReactNode, useState } from "react";
+import { afterEach } from "node:test";
+import userEvent from "@testing-library/user-event";
+
+import { Modal } from "./Modal";
+
+const originalMatchMedia = window.matchMedia;
+afterEach(() => {
+  window.matchMedia = originalMatchMedia;
+});
+
+test("that nothing is rendered when the modal is closed", () => {
+  const { queryByRole } = render(
+    <Modal title="My modal" open={false}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toBeNull();
+});
+
+test("the content is rendered when the modal is open", () => {
+  const { queryByRole } = render(
+    <Modal title="My modal" open={true}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toMatchSnapshot();
+});
+
+test("the modal can be closed by clicking the close button", async () => {
+  function ModalFn(): ReactNode {
+    const [isOpen, setOpen] = useState(true);
+    return (
+      <Modal title="My modal" open={isOpen} onDismiss={() => setOpen(false)}>
+        <p>This is the content.</p>
+      </Modal>
+    );
+  }
+  const user = userEvent.setup();
+  const { queryByRole, getByRole } = render(<ModalFn />);
+  await user.click(getByRole("button", { name: "action.close" }));
+  expect(queryByRole("dialog")).toBeNull();
+});
+
+test("the modal renders as a drawer in mobile viewports", () => {
+  window.matchMedia = function (query): MediaQueryList {
+    return {
+      matches: query.includes("hover: none"),
+      addEventListener(): MediaQueryList {
+        return this as MediaQueryList;
+      },
+      removeEventListener(): MediaQueryList {
+        return this as MediaQueryList;
+      },
+    } as unknown as MediaQueryList;
+  };
+
+  const { queryByRole } = render(
+    <Modal title="My modal" open={true}>
+      <p>This is the content.</p>
+    </Modal>,
+  );
+  expect(queryByRole("dialog")).toMatchSnapshot();
+});

src/Modal.tsx

@@ -89,6 +89,7 @@ export const Modal: FC<Props> = ({
               styles.drawer,
               { [styles.tabbed]: tabbed },
             )}
+            role="dialog"
             // Suppress the warning about there being no description; the modal
             // has an accessible title
             aria-describedby={undefined}
@@ -114,9 +115,14 @@ export const Modal: FC<Props> = ({
           <DialogOverlay
             className={classNames(overlayStyles.bg, overlayStyles.animate)}
           />
-          {/* Suppress the warning about there being no description; the modal
-          has an accessible title */}
-          <DialogContent asChild aria-describedby={undefined} {...rest}>
+          <DialogContent
+            asChild
+            // Suppress the warning about there being no description; the modal
+            // has an accessible title
+            aria-describedby={undefined}
+            role="dialog"
+            {...rest}
+          >
             <Glass
               className={classNames(
                 className,

src/__snapshots__/Modal.test.tsx.snap

@@ -0,0 +1,75 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`the content is rendered when the modal is open 1`] = `
+<div
+  aria-labelledby="radix-:r4:"
+  class="overlay animate modal dialog _glass_1x9g9_17"
+  data-state="open"
+  id="radix-:r3:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="header"
+    >
+      <h2
+        class="_typography_yh5dq_162 _font-heading-md-semibold_yh5dq_121"
+        id="radix-:r4:"
+      >
+        My modal
+      </h2>
+    </div>
+    <div
+      class="body"
+    >
+      <p>
+        This is the content.
+      </p>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`the modal renders as a drawer in mobile viewports 1`] = `
+<div
+  aria-labelledby="radix-:ra:"
+  class="overlay modal drawer"
+  data-state="open"
+  id="radix-:r9:"
+  role="dialog"
+  style="pointer-events: auto;"
+  tabindex="-1"
+  vaul-drawer=""
+  vaul-drawer-direction="bottom"
+  vaul-drawer-visible="true"
+>
+  <div
+    class="content"
+  >
+    <div
+      class="header"
+    >
+      <div
+        class="handle"
+      />
+      <h2
+        id="radix-:ra:"
+        style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; word-wrap: normal;"
+      >
+        My modal
+      </h2>
+    </div>
+    <div
+      class="body"
+    >
+      <p>
+        This is the content.
+      </p>
+    </div>
+  </div>
+</div>
+`;

src/useMediaQuery.ts

@@ -13,7 +13,7 @@ import { useEventTarget } from "./useEvents";
  * React hook that tracks whether the given media query matches.
  */
 export function useMediaQuery(query: string): boolean {
-  const mediaQuery = useMemo(() => matchMedia(query), [query]);
+  const mediaQuery = useMemo(() => window.matchMedia(query), [query]);
 
   const [numChanges, setNumChanges] = useState(0);
   useEventTarget(