Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Test header components #2611

Closed
wants to merge 2 commits into from
Closed

Test header components #2611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f4223b3
Test header components
robintown Sep 5, 2024
9145cec
Enable test isolation
robintown Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
43 changes: 43 additions & 0 deletions src/Header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();

Check failure on line 42 in src/Header.test.tsx

View workflow job for this annotation

GitHub Actions / Run vitest tests

src/Header.test.tsx > RoomHeaderInfo works 

Error: expect(received).toHaveNoViolations(expected)

Expected the HTML found at $('span[aria-labelledby=":r0:"]') to have no violations:

<span tabindex="0" aria-labelledby=":r0:">

Received:

"Elements must only use permitted ARIA attributes (aria-prohibited-attr)"

Fix all of the following:
  aria-labelledby attribute cannot be used on a span with no valid role attribute.

You can find more information on this issue here: 
https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI
 ❯ src/Header.test.tsx:42:32
});
14 changes: 3 additions & 11 deletions src/Toast.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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}>
Expand All @@ -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", () => {
Expand Down
1 change: 0 additions & 1 deletion src/room/EncryptionLock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@ export const EncryptionLock: FC<Props> = ({ encrypted }) => {
height={16}
className={styles.lock}
data-encrypted={encrypted}
aria-hidden
/>
</Tooltip>
);
Expand Down
1 change: 0 additions & 1 deletion src/tile/MediaView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
width={20}
height={20}
className={styles.errorIcon}
aria-hidden
/>
</Tooltip>
)}
Expand Down
15 changes: 4 additions & 11 deletions src/vitest.setup.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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);
1 change: 0 additions & 1 deletion vitest.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ export default defineConfig((configEnv) =>
classNameStrategy: "non-scoped",
},
},
isolate: false,
setupFiles: ["src/vitest.setup.ts"],
coverage: {
reporter: ["html", "json"],
Expand Down
24 changes: 24 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading