From d9333d68294628aa56b72524946beefec1889b26 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 5 Sep 2024 16:23:44 -0400 Subject: [PATCH] Test RoomHeaderInfo --- package.json | 3 ++- src/Header.test.tsx | 45 +++++++++++++++++++++++++++++++++++++++++++++ src/Toast.test.tsx | 14 +++----------- src/vitest.setup.ts | 15 ++++----------- yarn.lock | 24 ++++++++++++++++++++++++ 5 files changed, 78 insertions(+), 23 deletions(-) create mode 100644 src/Header.test.tsx diff --git a/package.json b/package.json index a02ac4f5..bce1ead7 100644 --- a/package.json +++ b/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" } } diff --git a/src/Header.test.tsx b/src/Header.test.tsx new file mode 100644 index 00000000..aff15a45 --- /dev/null +++ b/src/Header.test.tsx @@ -0,0 +1,45 @@ +/* +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, screen } 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 is accessible", async () => { + const { container } = render( + + + , + ); + expect(await axe(container)).toHaveNoViolations(); + // Check that the room name acts as a heading + screen.getByRole("heading", { name: "Mission Control" }); +}); diff --git a/src/Toast.test.tsx b/src/Toast.test.tsx index e2e2f9f7..cf41ced4 100644 --- a/src/Toast.test.tsx +++ b/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( @@ -59,7 +52,7 @@ describe("Toast", () => { test("dismisses when background is clicked", async () => { const user = userEvent.setup(); const onDismiss = vi.fn(); - const { getByRole, unmount } = render( + const { getByRole } = render( Hello world! , @@ -67,7 +60,6 @@ describe("Toast", () => { const background = getByRole("dialog").previousSibling! as Element; await user.click(background); expect(onDismiss).toHaveBeenCalled(); - unmount(); }); test("dismisses itself after the specified timeout", () => { diff --git a/src/vitest.setup.ts b/src/vitest.setup.ts index e4210b7c..80b704cc 100644 --- a/src/vitest.setup.ts +++ b/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); diff --git a/yarn.lock b/yarn.lock index 4e0a2feb..e6dc0380 100644 --- a/yarn.lock +++ b/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"