Test header components

package.json

@@ -108,6 +108,7 @@
     "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"
   }
 }

src/Header.test.tsx

@@ -0,0 +1,43 @@
+/*
+Copyright 2024 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import { expect, test, vi } from "vitest";
+import { render } from "@testing-library/react";
+import { axe } from "vitest-axe";
+import { TooltipProvider } from "@vector-im/compound-web";
+
+import { RoomHeaderInfo } from "./Header";
+
+global.matchMedia = vi.fn().mockReturnValue({
+  matches: true,
+  addEventListener: () => {},
+  removeEventListener: () => {},
+});
+
+test("RoomHeaderInfo works", async () => {
+  const { container } = render(
+    <TooltipProvider>
+      <RoomHeaderInfo
+        id="!a:example.org"
+        name="Mission Control"
+        avatarUrl=""
+        encrypted
+        participantCount={11}
+      />
+    </TooltipProvider>,
+  );
+  expect(await axe(container)).toHaveNoViolations();
+});

src/Toast.test.tsx

@@ -15,19 +15,12 @@ limitations under the License.
 */
 
 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(
@@ -45,7 +38,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}>
@@ -59,15 +52,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/room/EncryptionLock.tsx

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

src/tile/MediaView.tsx

@@ -110,7 +110,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
                   width={20}
                   height={20}
                   className={styles.errorIcon}
-                  aria-hidden
                 />
               </Tooltip>
             )}

src/vitest.setup.ts

@@ -13,13 +13,14 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
+
 import "global-jsdom/register";
-import globalJsdom from "global-jsdom";
 import i18n from "i18next";
 import posthog from "posthog-js";
 import { initReactI18next } from "react-i18next";
-import { afterEach, beforeEach } from "vitest";
+import { afterEach } from "vitest";
 import { cleanup } from "@testing-library/react";
+import "vitest-axe/extend-expect";
 
 import { Config } from "./config/Config";
 
@@ -35,12 +36,4 @@ i18n.use(initReactI18next).init({
 Config.initDefault();
 posthog.opt_out_capturing();
 
-// We need to cleanup the global jsDom
-// Otherwise we will run into issues with async input test overlapping and throwing.
-
-let cleanupJsDom: { (): void };
-beforeEach(() => (cleanupJsDom = globalJsdom()));
-afterEach(() => {
-  cleanupJsDom();
-  cleanup();
-});
+afterEach(cleanup);

yarn.lock

@@ -3441,6 +3441,11 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+axe-core@^4.7.2:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.10.0.tgz#d9e56ab0147278272739a000880196cdfe113b59"
+  integrity sha512-Mr2ZakwQ7XUAjp7pAwQWRhhK8mQQ6JAaNWSjmjxil0R8BPioMtQsTLOolGYkji1rcL++3dCqZA3zWqpT+9Ew6g==
+
 axe-core@^4.9.1:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.9.1.tgz#fcd0f4496dad09e0c899b44f6c4bb7848da912ae"
@@ -3677,6 +3682,11 @@ chalk@^4.0.0, chalk@^4.1.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+chalk@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385"
+  integrity sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==
+
 check-error@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
@@ -5839,6 +5849,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -8213,6 +8228,15 @@ vite@^5.0.0:
   optionalDependencies:
     fsevents "~2.3.3"
 
+vitest-axe@^1.0.0-pre.3:
+  version "1.0.0-pre.3"
+  resolved "https://registry.yarnpkg.com/vitest-axe/-/vitest-axe-1.0.0-pre.3.tgz#0ea646c4ebe21c9b7ffb9ff3d6dff60b1c5a6124"
+  integrity sha512-vrsyixV225vMe0vGZV0aZjOYez2Pan5MxIx2RqnYnpbbRrUN2lJpQS9ong6dfF5a7BfQenR0LOD6hei3IQIPSw==
+  dependencies:
+    axe-core "^4.7.2"
+    chalk "^5.3.0"
+    lodash-es "^4.17.21"
+
 vitest@^2.0.0:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/vitest/-/vitest-2.0.5.tgz#2f15a532704a7181528e399cc5b754c7f335fd62"