sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Move more element-web tests over to vitest (#33845)

Browse Source 
* Move more element-web tests over to vitest

Switches default env to happy-dom as SdkConfig needs a DOM and is part of the setupTests given a lot of code relies on it

* Restore jest variant of editor mock file for tests not yet moved over

* Migrate batch of tests tro vitest

* Iterate

* Migrate another test

* Simplify

* Iterate

* Iterate

* Fix lockfile

* Deduplicate

* Iterate
This commit is contained in:
Michael Telatynski
2026-07-06 17:42:24 +00:00
committed by GitHub
parent 3da74a98e3
commit 08419cf0cf
20 changed files with 223 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/test/unit-tests/hooks/useDebouncedCallback-test.tsx
-186
View File
@@ -1,186 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { renderHook } from "jest-matrix-react";
import { useDebouncedCallback } from "../../../src/hooks/spotlight/useDebouncedCallback";
describe("useDebouncedCallback", () => {
beforeAll(() => jest.useFakeTimers());
afterAll(() => jest.useRealTimers());
function render(enabled: boolean, callback: (...params: any[]) => void, params: any[]) {
return renderHook(({ enabled, callback, params }) => useDebouncedCallback(enabled, callback, params), {
initialProps: {
enabled,
callback,
params,
},
});
}
it("should be able to handle empty parameters", async () => {
// When
const params: any[] = [];
const callback = jest.fn();
render(true, callback, params);
jest.advanceTimersByTime(1);
// Then
expect(callback).toHaveBeenCalledTimes(0);
// When
jest.advanceTimersByTime(500);
// Then
expect(callback).toHaveBeenCalledTimes(1);
});
it("should call the callback with the parameters", async () => {
// When
const params = ["USER NAME"];
const callback = jest.fn();
render(true, callback, params);
jest.advanceTimersByTime(500);
// Then
expect(callback).toHaveBeenCalledTimes(1);
expect(callback).toHaveBeenCalledWith(...params);
});
it("should call the callback with the parameters when parameters change during the timeout", async () => {
// When
const params = ["USER NAME"];
const callback = jest.fn();
const { rerender } = render(true, callback, []);
jest.advanceTimersByTime(1);
rerender({ enabled: true, callback, params });
jest.advanceTimersByTime(500);
// Then
expect(callback).toHaveBeenCalledTimes(1);
expect(callback).toHaveBeenCalledWith(...params);
});
it("should handle multiple parameters", async () => {
// When
const params = [4, 8, 15, 16, 23, 42];
const callback = jest.fn();
const { rerender } = render(true, callback, []);
jest.advanceTimersByTime(1);
rerender({ enabled: true, callback, params });
jest.advanceTimersByTime(500);
// Then
expect(callback).toHaveBeenCalledTimes(1);
expect(callback).toHaveBeenCalledWith(...params);
});
it("should debounce quick changes", async () => {
// When
const queries = [
"U",
"US",
"USE",
"USER",
"USER ",
"USER N",
"USER NM",
"USER NMA",
"USER NM",
"USER N",
"USER NA",
"USER NAM",
"USER NAME",
];
const callback = jest.fn();
const { rerender } = render(true, callback, []);
jest.advanceTimersByTime(1);
for (const query of queries) {
rerender({ enabled: true, callback, params: [query] });
jest.advanceTimersByTime(50);
}
jest.advanceTimersByTime(500);
// Then
const query = queries[queries.length - 1];
expect(callback).toHaveBeenCalledTimes(1);
expect(callback).toHaveBeenCalledWith(query);
});
it("should not debounce slow changes", async () => {
// When
const queries = [
"U",
"US",
"USE",
"USER",
"USER ",
"USER N",
"USER NM",
"USER NMA",
"USER NM",
"USER N",
"USER NA",
"USER NAM",
"USER NAME",
];
const callback = jest.fn();
const { rerender } = render(true, callback, []);
jest.advanceTimersByTime(1);
for (const query of queries) {
rerender({ enabled: true, callback, params: [query] });
jest.advanceTimersByTime(200);
}
jest.advanceTimersByTime(500);
// Then
const query = queries[queries.length - 1];
expect(callback).toHaveBeenCalledTimes(queries.length);
expect(callback).toHaveBeenCalledWith(query);
});
it("should not call the callback if it’s disabled", async () => {
// When
const queries = [
"U",
"US",
"USE",
"USER",
"USER ",
"USER N",
"USER NM",
"USER NMA",
"USER NM",
"USER N",
"USER NA",
"USER NAM",
"USER NAME",
];
const callback = jest.fn();
const { rerender } = render(false, callback, []);
jest.advanceTimersByTime(1);
for (const query of queries) {
rerender({ enabled: false, callback, params: [query] });
jest.advanceTimersByTime(200);
}
jest.advanceTimersByTime(500);
// Then
expect(callback).toHaveBeenCalledTimes(0);
});
});
apps/web/test/unit-tests/hooks/useLatestResult-test.tsx
-128
View File
@@ -1,128 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { renderHook, type RenderHookResult } from "jest-matrix-react";
import { useLatestResult } from "../../../src/hooks/useLatestResult";
// All tests use fake timers throughout, comments will show the elapsed time in ms
jest.useFakeTimers();
const mockSetter = jest.fn();
beforeEach(() => {
mockSetter.mockClear();
});
function simulateRequest(
hookResult: RenderHookResult<ReturnType<typeof useLatestResult>, typeof useLatestResult>["result"],
{ id, delayInMs, result }: { id: string; delayInMs: number; result: string },
) {
const [setQuery, setResult] = hookResult.current;
setQuery(id);
setTimeout(() => setResult(id, result), delayInMs);
}
describe("renderhook tests", () => {
it("should return a result", () => {
const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
const query = { id: "query1", delayInMs: 100, result: "result1" };
simulateRequest(hookResult, query);
// check we have made no calls to the setter
expect(mockSetter).not.toHaveBeenCalled();
// advance timer until the timeout elapses, check we have called the setter
jest.advanceTimersToNextTimer();
expect(mockSetter).toHaveBeenCalledTimes(1);
expect(mockSetter).toHaveBeenLastCalledWith(query.result);
});
it("should not let a slower response to an earlier query overwrite the result of a later query", () => {
const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
const slowQuery = { id: "slowQuery", delayInMs: 500, result: "slowResult" };
const fastQuery = { id: "fastQuery", delayInMs: 100, result: "fastResult" };
simulateRequest(hookResult, slowQuery);
simulateRequest(hookResult, fastQuery);
// advance to fastQuery response, check the setter call
jest.advanceTimersToNextTimer();
expect(mockSetter).toHaveBeenCalledTimes(1);
expect(mockSetter).toHaveBeenLastCalledWith(fastQuery.result);
// advance time to slowQuery response, check the setter has _not_ been
// called again and that the result is still from the fast query
jest.advanceTimersToNextTimer();
expect(mockSetter).toHaveBeenCalledTimes(1);
expect(mockSetter).toHaveBeenLastCalledWith(fastQuery.result);
});
it("should return expected results when all response times similar", () => {
const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
const commonDelayInMs = 180;
const query1 = { id: "q1", delayInMs: commonDelayInMs, result: "r1" };
const query2 = { id: "q2", delayInMs: commonDelayInMs, result: "r2" };
const query3 = { id: "q3", delayInMs: commonDelayInMs, result: "r3" };
// ELAPSED: 0ms, no queries sent
simulateRequest(hookResult, query1);
jest.advanceTimersByTime(100);
// ELAPSED: 100ms, query1 sent, no responses
expect(mockSetter).not.toHaveBeenCalled();
simulateRequest(hookResult, query2);
jest.advanceTimersByTime(70);
// ELAPSED: 170ms, query1 and query2 sent, no responses
expect(mockSetter).not.toHaveBeenCalled();
simulateRequest(hookResult, query3);
jest.advanceTimersByTime(70);
// ELAPSED: 240ms, all queries sent, responses for query1 and query2
expect(mockSetter).not.toHaveBeenCalled();
// ELAPSED: 360ms, all queries sent, all queries have responses
jest.advanceTimersByTime(120);
expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
});
it("should prevent out of order results", () => {
const { result: hookResult } = renderHook(() => useLatestResult(mockSetter));
const query1 = { id: "q1", delayInMs: 0, result: "r1" };
const query2 = { id: "q2", delayInMs: 50, result: "r2" };
const query3 = { id: "q3", delayInMs: 1, result: "r3" };
// ELAPSED: 0ms, no queries sent
simulateRequest(hookResult, query1);
jest.advanceTimersByTime(5);
// ELAPSED: 5ms, query1 sent, response from query1
expect(mockSetter).toHaveBeenCalledTimes(1);
expect(mockSetter).toHaveBeenLastCalledWith(query1.result);
simulateRequest(hookResult, query2);
jest.advanceTimersByTime(5);
// ELAPSED: 10ms, query1 and query2 sent, response from query1
simulateRequest(hookResult, query3);
jest.advanceTimersByTime(5);
// ELAPSED: 15ms, all queries sent, responses from query1 and query3
expect(mockSetter).toHaveBeenCalledTimes(2);
expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
// ELAPSED: 65ms, all queries sent, all queries have responses
// so check that the result is still from query3, not query2
jest.advanceTimersByTime(50);
expect(mockSetter).toHaveBeenLastCalledWith(query3.result);
});
});
apps/web/test/unit-tests/hooks/useWindowWidth-test.ts
-35
View File
@@ -1,35 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2024 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { renderHook, act } from "jest-matrix-react";
import UIStore, { UI_EVENTS } from "../../../src/stores/UIStore";
import { useWindowWidth } from "../../../src/hooks/useWindowWidth";
describe("useWindowWidth", () => {
beforeEach(() => {
UIStore.instance.windowWidth = 768;
});
it("should return the current width of window, according to UIStore", () => {
const { result } = renderHook(() => useWindowWidth());
expect(result.current).toBe(768);
});
it("should update the value when UIStore's value changes", () => {
const { result } = renderHook(() => useWindowWidth());
act(() => {
UIStore.instance.windowWidth = 1024;
UIStore.instance.emit(UI_EVENTS.Resize);
});
expect(result.current).toBe(1024);
});
});