From f4223b3a6bd72f5e98089b7ba7c021fca0578ea2 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 5 Sep 2024 16:23:44 -0400 Subject: [PATCH 1/2] Test header components --- package.json | 3 ++- src/Header.test.tsx | 43 +++++++++++++++++++++++++++++++++++++ src/Toast.test.tsx | 14 +++--------- src/room/EncryptionLock.tsx | 1 - src/tile/MediaView.tsx | 1 - src/vitest.setup.ts | 15 ++++--------- yarn.lock | 24 +++++++++++++++++++++ 7 files changed, 76 insertions(+), 25 deletions(-) create mode 100644 src/Header.test.tsx diff --git a/package.json b/package.json index a02ac4f56..bce1ead77 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 000000000..0b6335e3b --- /dev/null +++ b/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( + + + , + ); + expect(await axe(container)).toHaveNoViolations(); +}); diff --git a/src/Toast.test.tsx b/src/Toast.test.tsx index e2e2f9f73..cf41ced42 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/room/EncryptionLock.tsx b/src/room/EncryptionLock.tsx index 53b8e4308..3adc7e1e0 100644 --- a/src/room/EncryptionLock.tsx +++ b/src/room/EncryptionLock.tsx @@ -40,7 +40,6 @@ export const EncryptionLock: FC = ({ encrypted }) => { height={16} className={styles.lock} data-encrypted={encrypted} - aria-hidden /> ); diff --git a/src/tile/MediaView.tsx b/src/tile/MediaView.tsx index 4d073092a..423f19031 100644 --- a/src/tile/MediaView.tsx +++ b/src/tile/MediaView.tsx @@ -110,7 +110,6 @@ export const MediaView = forwardRef( width={20} height={20} className={styles.errorIcon} - aria-hidden /> )} diff --git a/src/vitest.setup.ts b/src/vitest.setup.ts index e4210b7c3..80b704cc2 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 b2abbac6c..a7a846c6a 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" From 9145cecb5a4baedcf207a38709f38604c3bab2c9 Mon Sep 17 00:00:00 2001 From: Robin Date: Thu, 5 Sep 2024 16:55:38 -0400 Subject: [PATCH 2/2] Enable test isolation I had experimented with turning this off in order to improve test performance, and apparently that ended up being merged. Now if we're to do component testing, we'll be changing things globally on the document, so isolation is very much necessary. --- vitest.config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/vitest.config.js b/vitest.config.js index 43b407b74..d9790f635 100644 --- a/vitest.config.js +++ b/vitest.config.js @@ -12,7 +12,6 @@ export default defineConfig((configEnv) => classNameStrategy: "non-scoped", }, }, - isolate: false, setupFiles: ["src/vitest.setup.ts"], coverage: { reporter: ["html", "json"],