mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2026-05-05 20:26:19 +02:00
Code Issues Projects Releases Wiki Activity

Update tests to refer to vitest

Browse Source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2026-01-21 14:31:36 +00:00
parent c0373321af
commit ecf244d096
No known key found for this signature in database
GPG Key ID: A2B008A5F49F5D0D
29 changed files with 103 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/shared-components/src/audio/AudioPlayerView/AudioPlayerView.test.tsx
View File

@ -5,11 +5,11 @@
* Please see LICENSE files in the repository root for full details.
*/
import { render, screen } from "jest-matrix-react";
import { render, screen, fireEvent } from "@test-utils";
import { composeStories } from "@storybook/react-vite";
import React from "react";
import userEvent from "@testing-library/user-event";
import { fireEvent } from "@testing-library/dom";
import { describe, it, vi, afterEach, expect } from "vitest";
import * as stories from "./AudioPlayerView.stories.tsx";
import { AudioPlayerView, type AudioPlayerViewActions, type AudioPlayerViewSnapshot } from "./AudioPlayerView";
@ -21,7 +21,7 @@ const { Default, NoMediaName, NoSize, HasError } = composeStories(stories);
describe("AudioPlayerView", () => {
afterEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
it("renders the audio player in default state", () => {
@ -44,9 +44,9 @@ describe("AudioPlayerView", () => {
expect(container).toMatchSnapshot();
});
const onKeyDown = jest.fn();
const togglePlay = jest.fn();
const onSeekbarChange = jest.fn();
const onKeyDown = vi.fn();
const togglePlay = vi.fn();
const onSeekbarChange = vi.fn();
class AudioPlayerViewModel extends MockViewModel<AudioPlayerViewSnapshot> implements AudioPlayerViewActions {
public onKeyDown = onKeyDown;

3
packages/shared-components/src/audio/Clock/Clock.test.tsx
View File

@ -6,8 +6,9 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./Clock.stories.tsx";

3
packages/shared-components/src/audio/PlayPauseButton/PlayPauseButton.test.tsx
View File

@ -6,10 +6,11 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import userEvent from "@testing-library/user-event";
import { fn } from "storybook/test";
import { describe, it, expect } from "vitest";
import * as stories from "./PlayPauseButton.stories.tsx";

3
packages/shared-components/src/audio/SeekBar/SeekBar.test.tsx
View File

@ -5,9 +5,10 @@
* Please see LICENSE files in the repository root for full details.
*/
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { composeStories } from "@storybook/react-vite";
import { describe, it, expect } from "vitest";
import * as stories from "./SeekBar.stories.tsx";
const { Default } = composeStories(stories);

3
packages/shared-components/src/avatar/AvatarWithDetails/AvatarWithDetails.test.tsx
View File

@ -6,8 +6,9 @@ Please see LICENSE files in the repository root for full details.
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./AvatarWithDetails.stories.tsx";

3
packages/shared-components/src/composer/Banner/Banner.test.tsx
View File

@ -6,7 +6,8 @@
*/
import React from "react";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import { describe, it, expect } from "vitest";
import { composeStories } from "@storybook/react-vite";
import * as stories from "./Banner.stories.tsx";

5
packages/shared-components/src/composer/HistoryVisibleBannerView/HistoryVisibleBannerView.test.tsx
View File

@ -6,8 +6,9 @@
*/
import React from "react";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import { composeStories } from "@storybook/react-vite";
import { describe, it, vi, expect } from "vitest";
import * as stories from "./HistoryVisibleBannerView.stories.tsx";
@ -15,7 +16,7 @@ const { Default } = composeStories(stories);
describe("HistoryVisibleBannerView", () => {
it("renders a history visible banner", () => {
const dismissFn = jest.fn();
const dismissFn = vi.fn();
const { container } = render(<Default onClose={dismissFn} />);
expect(container).toMatchSnapshot();

3
packages/shared-components/src/event-tiles/TextualEventView/TextualEventView.test.tsx
View File

@ -6,8 +6,9 @@ Please see LICENSE files in the repository root for full details.
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./TextualEventView.stories.tsx";

15
packages/shared-components/src/hooks/useListKeyboardNavigation.test.ts
View File

@ -6,7 +6,8 @@
*/
import { type KeyboardEvent } from "react";
import { renderHook } from "jest-matrix-react";
import { renderHook } from "@test-utils";
import { vi, describe, expect, it, beforeEach, afterEach } from "vitest";
import { useListKeyboardNavigation } from "./useListKeyboardNavigation";
@ -31,20 +32,20 @@ describe("useListKeyDown", () => {
// Mock event object
mockEvent = {
preventDefault: jest.fn(),
preventDefault: vi.fn(),
key: "",
};
// Mock focus methods
mockItems.forEach((item) => {
item.focus = jest.fn();
item.click = jest.fn();
item.focus = vi.fn();
item.click = vi.fn();
});
});
afterEach(() => {
document.body.removeChild(mockList);
jest.clearAllMocks();
vi.clearAllMocks();
});
function render(): {
@ -91,7 +92,7 @@ describe("useListKeyDown", () => {
],
)("should handle %s to focus the %inth element", (key, finalPosition, startPosition) => {
const result = render();
mockList.contains = jest.fn().mockReturnValue(true);
mockList.contains = vi.fn().mockReturnValue(true);
Object.defineProperty(document, "activeElement", {
value: mockItems[startPosition],
@ -109,7 +110,7 @@ describe("useListKeyDown", () => {
it.each([["ArrowDown"], ["ArrowUp"]])("should not handle %s when active element is not in list", (key) => {
const result = render();
mockList.contains = jest.fn().mockReturnValue(false);
mockList.contains = vi.fn().mockReturnValue(false);
const outsideElement = document.createElement("button");

3
packages/shared-components/src/message-body/MediaBody/MediaBody.test.tsx
View File

@ -6,8 +6,9 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./MediaBody.stories";

3
packages/shared-components/src/pill-input/Pill/Pill.test.tsx
View File

@ -6,8 +6,9 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./Pill.stories";

5
packages/shared-components/src/pill-input/PillInput/PillInput.test.tsx
View File

@ -5,10 +5,11 @@
* Please see LICENSE files in the repository root for full details.
*/
import { render, screen } from "jest-matrix-react";
import { render, screen } from "@test-utils";
import React from "react";
import { composeStories } from "@storybook/react-vite";
import userEvent from "@testing-library/user-event";
import { describe, it, vi, expect } from "vitest";
import * as stories from "./PillInput.stories";
import { PillInput } from "./PillInput";
@ -28,7 +29,7 @@ describe("PillInput", () => {
it("calls onRemoveChildren when backspace is pressed and input is empty", async () => {
const user = userEvent.setup();
const mockOnRemoveChildren = jest.fn();
const mockOnRemoveChildren = vi.fn();
render(<PillInput onRemoveChildren={mockOnRemoveChildren} />);

5
packages/shared-components/src/rich-list/RichItem/RichItem.test.tsx
View File

@ -6,8 +6,9 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, vi, beforeAll, expect } from "vitest";
import * as stories from "./RichItem.stories";
@ -15,7 +16,7 @@ const { Default, Selected, WithoutTimestamp } = composeStories(stories);
describe("RichItem", () => {
beforeAll(() => {
jest.useFakeTimers().setSystemTime(new Date("2025-08-01T12:00:00Z"));
vi.useFakeTimers().setSystemTime(new Date("2025-08-01T12:00:00Z"));
});
it("renders the item in default state", () => {

3
packages/shared-components/src/rich-list/RichList/RichList.test.tsx
View File

@ -6,8 +6,9 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import React from "react";
import { describe, it, expect } from "vitest";
import * as stories from "./RichList.stories";

3
packages/shared-components/src/room-list/RoomListHeaderView/RoomListHeaderView.test.tsx
View File

@ -6,7 +6,8 @@
*/
import { composeStories } from "@storybook/react-vite";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import { describe, it, expect } from "vitest";
import React from "react";
import * as stories from "./RoomListHeaderView.stories";

5
packages/shared-components/src/room-list/RoomListHeaderView/menu/ComposeMenuView.test.tsx
View File

@ -6,15 +6,16 @@
*/
import React from "react";
import { render, screen } from "jest-matrix-react";
import { render, screen } from "@test-utils";
import userEvent from "@testing-library/user-event";
import { vi, describe, it, afterEach, expect } from "vitest";
import { ComposeMenuView } from "./ComposeMenuView";
import { defaultSnapshot, MockedViewModel } from "../test-utils";
describe("<ComposeMenuView />", () => {
afterEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
it("should match snapshot", () => {

5
packages/shared-components/src/room-list/RoomListHeaderView/menu/OptionMenuView.test.tsx
View File

@ -6,15 +6,16 @@
*/
import React from "react";
import { render, screen } from "jest-matrix-react";
import { render, screen } from "@test-utils";
import userEvent from "@testing-library/user-event";
import { vi, describe, it, afterEach, expect } from "vitest";
import { OptionMenuView } from "./OptionMenuView";
import { defaultSnapshot, MockedViewModel } from "../test-utils";
describe("<OptionMenuView />", () => {
afterEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
it("should match snapshot", () => {

5
packages/shared-components/src/room-list/RoomListHeaderView/menu/SpaceMenuView.test.tsx
View File

@ -6,15 +6,16 @@
*/
import React from "react";
import { render, screen } from "jest-matrix-react";
import { render, screen } from "@test-utils";
import userEvent from "@testing-library/user-event";
import { vi, describe, it, afterEach, expect } from "vitest";
import { SpaceMenuView } from "./SpaceMenuView";
import { defaultSnapshot, MockedViewModel } from "../test-utils";
describe("<SpaceMenuView />", () => {
afterEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
it("should match snapshot", () => {

20
packages/shared-components/src/room-list/RoomListHeaderView/test-utils.ts
View File

@ -5,6 +5,8 @@
* Please see LICENSE files in the repository root for full details.
*/
import { vi } from "vitest";
import { MockViewModel } from "../../viewmodel";
import { type RoomListHeaderViewActions, type RoomListHeaderViewSnapshot } from "./RoomListHeaderView";
@ -12,15 +14,15 @@ import { type RoomListHeaderViewActions, type RoomListHeaderViewSnapshot } from
* A mocked ViewModel for the RoomListHeaderView, for use in tests.
*/
export class MockedViewModel extends MockViewModel<RoomListHeaderViewSnapshot> implements RoomListHeaderViewActions {
public createChatRoom = jest.fn();
public createRoom = jest.fn();
public createVideoRoom = jest.fn();
public openSpaceHome = jest.fn();
public openSpaceSettings = jest.fn();
public inviteInSpace = jest.fn();
public sort = jest.fn();
public openSpacePreferences = jest.fn();
public toggleMessagePreview = jest.fn();
public createChatRoom = vi.fn<() => void>();
public createRoom = vi.fn<() => void>();
public createVideoRoom = vi.fn<() => void>();
public openSpaceHome = vi.fn<() => void>();
public openSpaceSettings = vi.fn<() => void>();
public inviteInSpace = vi.fn<() => void>();
public sort = vi.fn<() => void>();
public openSpacePreferences = vi.fn<() => void>();
public toggleMessagePreview = vi.fn<() => void>();
}
export const defaultSnapshot: RoomListHeaderViewSnapshot = {

11
packages/shared-components/src/room-list/RoomListSearchView/RoomListSearchView.test.tsx
View File

@ -5,10 +5,11 @@
* Please see LICENSE files in the repository root for full details.
*/
import { render, screen } from "jest-matrix-react";
import { render, screen } from "@test-utils";
import { composeStories } from "@storybook/react-vite";
import React from "react";
import userEvent from "@testing-library/user-event";
import { describe, it, vi, afterEach, expect } from "vitest";
import * as stories from "./RoomListSearchView.stories";
import {
@ -22,7 +23,7 @@ const { Default, WithDialPad, WithoutExplore, AllButtons } = composeStories(stor
describe("RoomListSearchView", () => {
afterEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
describe("Storybook snapshots", () => {
@ -48,9 +49,9 @@ describe("RoomListSearchView", () => {
});
describe("User interactions", () => {
const onSearchClick = jest.fn();
const onDialPadClick = jest.fn();
const onExploreClick = jest.fn();
const onSearchClick = vi.fn();
const onDialPadClick = vi.fn();
const onExploreClick = vi.fn();
class TestViewModel extends MockViewModel<RoomListSearchViewSnapshot> implements RoomListSearchViewActions {
public onSearchClick = onSearchClick;

11
packages/shared-components/src/room/RoomStatusBar/RoomStatusBarView.test.tsx
View File

@ -6,9 +6,10 @@
*/
import React from "react";
import { render } from "jest-matrix-react";
import { render } from "@test-utils";
import { composeStories } from "@storybook/react-vite";
import userEvent from "@testing-library/user-event";
import { describe, it, vi, expect } from "vitest";
import * as stories from "./RoomStatusBarView.stories.tsx";
@ -33,12 +34,12 @@ describe("RoomStatusBarView", () => {
});
it("renders unsent messages", async () => {
const { container } = render(
<WithUnsentMessages onDeleteAllClick={jest.fn()} onRetryRoomCreationClick={jest.fn()} />,
<WithUnsentMessages onDeleteAllClick={vi.fn()} onRetryRoomCreationClick={vi.fn()} />,
);
expect(container).toMatchSnapshot();
});
it("renders unsent messages and deletes all", async () => {
const onDeleteAllClick = jest.fn();
const onDeleteAllClick = vi.fn();
const { container, getByRole } = render(<WithUnsentMessages onDeleteAllClick={onDeleteAllClick} />);
expect(container).toMatchSnapshot();
@ -47,7 +48,7 @@ describe("RoomStatusBarView", () => {
expect(onDeleteAllClick).toHaveBeenCalled();
});
it("renders unsent messages and resends all", async () => {
const onResendAllClick = jest.fn();
const onResendAllClick = vi.fn();
const { container, getByRole } = render(<WithUnsentMessages onResendAllClick={onResendAllClick} />);
expect(container).toMatchSnapshot();
@ -56,7 +57,7 @@ describe("RoomStatusBarView", () => {
expect(onResendAllClick).toHaveBeenCalled();
});
it("renders local room error", async () => {
const onRetryRoomCreationClick = jest.fn();
const onRetryRoomCreationClick = vi.fn();
const { container, getByRole } = render(
<WithLocalRoomRetry onRetryRoomCreationClick={onRetryRoomCreationClick} />,
);

1
packages/shared-components/src/test/setupTests.ts
View File

@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
import fetchMock from "@fetch-mock/vitest";
import { cleanup } from "@test-utils";
import { afterEach } from "vitest";
import "@testing-library/jest-dom/vitest";
import { setLanguage } from "../../src/utils/i18n";
import en from "../i18n/strings/en_EN.json";

2
packages/shared-components/src/utils/I18nApi.test.ts
View File

@ -5,6 +5,8 @@
* Please see LICENSE files in the repository root for full details.
*/
import { describe, it, expect } from "vitest";
import { I18nApi } from "./I18nApi";
describe("I18nApi", () => {

4
packages/shared-components/src/utils/humanize.test.ts
View File

@ -5,13 +5,15 @@
* Please see LICENSE files in the repository root for full details.
*/
import { describe, it, beforeAll, vi, expect } from "vitest";
import { humanizeTime } from "./humanize";
describe("humanizeTime", () => {
const now = new Date("2025-08-01T12:00:00Z").getTime();
beforeAll(() => {
jest.useFakeTimers().setSystemTime(now);
vi.useFakeTimers().setSystemTime(now);
});
it.each([

13
packages/shared-components/src/utils/i18n.test.ts
View File

@ -6,39 +6,40 @@
*/
import counterpart from "counterpart";
import { vi, describe, it, beforeEach, expect } from "vitest";
import { registerTranslations, setMissingEntryGenerator, getLocale, setLocale } from "./i18n";
describe("i18n utils", () => {
beforeEach(() => {
jest.clearAllMocks();
vi.clearAllMocks();
});
it("should wrap registerTranslations", () => {
jest.spyOn(counterpart, "registerTranslations");
vi.spyOn(counterpart, "registerTranslations");
registerTranslations("en", { test: "This is a test" });
expect(counterpart.registerTranslations).toHaveBeenCalledWith("en", { test: "This is a test" });
});
it("should wrap setMissingEntryGenerator", () => {
jest.spyOn(counterpart, "setMissingEntryGenerator");
vi.spyOn(counterpart, "setMissingEntryGenerator");
const dummyFn = jest.fn();
const dummyFn = vi.fn();
setMissingEntryGenerator(dummyFn);
expect(counterpart.setMissingEntryGenerator).toHaveBeenCalledWith(dummyFn);
});
it("should wrap getLocale", () => {
jest.spyOn(counterpart, "getLocale");
vi.spyOn(counterpart, "getLocale");
getLocale();
expect(counterpart.getLocale).toHaveBeenCalled();
});
it("should wrap setLocale", () => {
jest.spyOn(counterpart, "setLocale");
vi.spyOn(counterpart, "setLocale");
setLocale("en");
expect(counterpart.setLocale).toHaveBeenCalledWith("en");

2
packages/shared-components/src/utils/numbers.test.ts
View File

@ -6,6 +6,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { describe, it, expect } from "vitest";
import { clamp, defaultNumber, percentageOf, percentageWithin, sum } from "./numbers";
describe("numbers", () => {

9
packages/shared-components/src/viewmodel/tests/Disposables.test.ts
View File

@ -5,6 +5,7 @@ Please see LICENSE files in the repository root for full details.
*/
import { EventEmitter } from "events";
import { describe, it, vi, expect } from "vitest";
import { Disposables } from "..";
@ -21,11 +22,11 @@ describe("Disposable", () => {
const item1 = {
foo: 5,
dispose: jest.fn(),
dispose: vi.fn(),
};
disposables.track(item1);
const item2 = jest.fn();
const item2 = vi.fn();
disposables.track(item2);
disposables.dispose();
@ -38,7 +39,7 @@ describe("Disposable", () => {
const disposables = new Disposables();
disposables.dispose();
expect(() => {
disposables.track(jest.fn);
disposables.track(vi.fn);
}).toThrow();
});
@ -46,7 +47,7 @@ describe("Disposable", () => {
const disposables = new Disposables();
const emitter = new EventEmitter();
const fn = jest.fn();
const fn = vi.fn();
disposables.trackListener(emitter, "FooEvent", fn);
emitter.emit("FooEvent");
expect(fn).toHaveBeenCalled();

10
packages/shared-components/src/viewmodel/tests/Snapshot.test.ts
View File

@ -5,6 +5,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { describe, it, vi, expect } from "vitest";
import { Snapshot } from "..";
interface TestSnapshot {
@ -15,26 +17,26 @@ interface TestSnapshot {
describe("Snapshot", () => {
it("should accept an initial value", () => {
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, jest.fn());
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, vi.fn());
expect(snapshot.current).toStrictEqual({ key1: "foo", key2: 5, key3: false });
});
it("should call emit callback when state changes", () => {
const emit = jest.fn();
const emit = vi.fn();
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, emit);
snapshot.merge({ key3: true });
expect(emit).toHaveBeenCalledTimes(1);
});
it("should swap out entire snapshot on set call", () => {
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, jest.fn());
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, vi.fn());
const newValue = { key1: "bar", key2: 8, key3: true };
snapshot.set(newValue);
expect(snapshot.current).toStrictEqual(newValue);
});
it("should merge partial snapshot on merge call", () => {
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, jest.fn());
const snapshot = new Snapshot<TestSnapshot>({ key1: "foo", key2: 5, key3: false }, vi.fn());
snapshot.merge({ key2: 10 });
expect(snapshot.current).toStrictEqual({ key1: "foo", key2: 10, key3: false });
});

3
packages/shared-components/src/viewmodel/tests/useCreateAutoDisposedViewModel.test.ts
View File

@ -4,7 +4,8 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { renderHook } from "jest-matrix-react";
import { renderHook } from "@test-utils";
import { describe, it, expect } from "vitest";
import { BaseViewModel } from "../BaseViewModel";
import { useCreateAutoDisposedViewModel } from "../useCreateAutoDisposedViewModel";