Merge pull request #2629 from robintown/test-call-vm

Test CallViewModel

package.json

@@ -108,7 +108,8 @@
     "vite": "^5.0.0",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^4.0.0",
-    "vitest": "^2.0.0"
+    "vitest": "^2.0.0",
+    "vitest-axe": "^1.0.0-pre.3"
   },
   "resolutions": {
     "strip-ansi": "6.0.1"

public/locales/en-GB/app.json

@@ -161,8 +161,8 @@
   "video_tile": {
     "always_show": "Always show",
     "change_fit_contain": "Fit to frame",
-    "exit_full_screen": "Exit full screen",
-    "full_screen": "Full screen",
+    "collapse": "Collapse",
+    "expand": "Expand",
     "mute_for_me": "Mute for me",
     "volume": "Volume"
   }

src/Header.test.tsx

@@ -0,0 +1,30 @@
+/*
+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, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { RoomHeaderInfo } from "./Header";
+
+test("RoomHeaderInfo is accessible", async () => {
+  const { container } = render(
+    <TooltipProvider>
+      <RoomHeaderInfo
+        id="!a:example.org"
+        name="Mission Control"
+        avatarUrl=""
+        encrypted
+        participantCount={11}
+      />
+    </TooltipProvider>,
+  );
+  expect(await axe(container)).toHaveNoViolations();
+  // Check that the room name acts as a heading
+  screen.getByRole("heading", { name: "Mission Control" });
+});

src/Modal.tsx

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

src/Toast.test.tsx

@@ -6,19 +6,12 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { describe, expect, test, vi } from "vitest";
-import { render, configure } from "@testing-library/react";
+import { render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import { Toast } from "../src/Toast";
 import { withFakeTimers } from "./utils/test";
 
-configure({
-  defaultHidden: true,
-});
-
-// Test Explanation:
-// This test the toast. We need to use { document: window.document } because the toast listens
-// for user input on `window`.
 describe("Toast", () => {
   test("renders", () => {
     const { queryByRole } = render(
@@ -36,7 +29,7 @@ describe("Toast", () => {
   });
 
   test("dismisses when Esc is pressed", async () => {
-    const user = userEvent.setup({ document: window.document });
+    const user = userEvent.setup();
     const onDismiss = vi.fn();
     render(
       <Toast open={true} onDismiss={onDismiss}>
@@ -50,15 +43,14 @@ describe("Toast", () => {
   test("dismisses when background is clicked", async () => {
     const user = userEvent.setup();
     const onDismiss = vi.fn();
-    const { getByRole, unmount } = render(
+    const { getByRole } = render(
       <Toast open={true} onDismiss={onDismiss}>
         Hello world!
       </Toast>,
     );
     const background = getByRole("dialog").previousSibling! as Element;
     await user.click(background);
     expect(onDismiss).toHaveBeenCalled();
-    unmount();
   });
 
   test("dismisses itself after the specified timeout", () => {

src/input/StarRating.test.tsx

@@ -0,0 +1,29 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { test, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import userEvent from "@testing-library/user-event";
+
+import { StarRatingInput } from "./StarRatingInput";
+
+test("StarRatingInput is accessible", async () => {
+  const user = userEvent.setup();
+  const onChange = vi.fn();
+  const { container } = render(
+    <StarRatingInput starCount={5} onChange={onChange} />,
+  );
+  expect(await axe(container)).toHaveNoViolations();
+  // Change the rating to 4 stars
+  await user.click(
+    (
+      await screen.findAllByRole("radio", { name: "star_rating_input_label" })
+    )[3],
+  );
+  expect(onChange).toBeCalledWith(4);
+});

src/room/EncryptionLock.tsx

@@ -31,7 +31,6 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
         height={16}
         className={styles.lock}
         data-encrypted={encrypted}
-        aria-hidden
       />
     </Tooltip>
   );

src/room/InviteModal.test.tsx

@@ -0,0 +1,35 @@
+/*
+Copyright 2024 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only
+Please see LICENSE in the repository root for full details.
+*/
+
+import { render, screen } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+import { Room } from "matrix-js-sdk/src/matrix";
+import { axe } from "vitest-axe";
+import { BrowserRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+
+import { InviteModal } from "./InviteModal";
+
+// Used by copy-to-clipboard
+window.prompt = (): null => null;
+
+test("InviteModal is accessible", async () => {
+  const user = userEvent.setup();
+  const room = {
+    roomId: "!a:example.org",
+    name: "Mission Control",
+  } as unknown as Room;
+  const onDismiss = vi.fn();
+  const { container } = render(
+    <InviteModal room={room} open={true} onDismiss={onDismiss} />,
+    { wrapper: BrowserRouter },
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+  await user.click(screen.getByRole("button", { name: "action.copy_link" }));
+  expect(onDismiss).toBeCalled();
+});