diff --git a/package.json b/package.json index e62644c13a4..c9b27acbfe2 100644 --- a/package.json +++ b/package.json @@ -96,7 +96,6 @@ "@matrix-org/react-sdk-module-api": "^2.4.0", "@matrix-org/spec": "^1.7.0", "@sentry/browser": "^8.0.0", - "@testing-library/react-hooks": "^8.0.1", "@vector-im/compound-design-tokens": "^1.8.0", "@vector-im/compound-web": "^7.0.0", "@zxcvbn-ts/core": "^3.0.4", @@ -188,9 +187,9 @@ "@sentry/webpack-plugin": "^2.7.1", "@svgr/webpack": "^8.0.0", "@testing-library/dom": "^10.4.0", - "@testing-library/jest-dom": "^6.0.0", + "@testing-library/jest-dom": "^6.4.8", "@testing-library/react": "^16.0.0", - "@testing-library/user-event": "^14.4.3", + "@testing-library/user-event": "^14.5.2", "@types/commonmark": "^0.27.4", "@types/content-type": "^1.1.5", "@types/counterpart": "^0.18.1", @@ -260,8 +259,8 @@ "html-webpack-plugin": "^5.5.3", "husky": "^9.0.0", "jest": "^29.6.2", + "jest-environment-jsdom": "^29.7.0", "jest-canvas-mock": "^2.5.2", - "jest-environment-jsdom": "^29.6.2", "jest-mock": "^29.6.2", "jest-raw-loader": "^1.0.1", "jsqr": "^1.4.0", diff --git a/src/@types/react.d.ts b/src/@types/react.d.ts index 3579e0cec0a..ba97b2bba6f 100644 --- a/src/@types/react.d.ts +++ b/src/@types/react.d.ts @@ -13,4 +13,7 @@ declare module "react" { function forwardRef( render: (props: PropsWithChildren

, ref: React.ForwardedRef) => React.ReactElement | null, ): (props: P & React.RefAttributes) => React.ReactElement | null; + + // Fix lazy types - https://stackoverflow.com/a/71017028 + function lazy>(factory: () => Promise<{ default: T }>): T; } diff --git a/src/NodeAnimator.tsx b/src/NodeAnimator.tsx index eb1ce8cc475..3af3aaea1be 100644 --- a/src/NodeAnimator.tsx +++ b/src/NodeAnimator.tsx @@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import React, { Key, MutableRefObject, ReactElement, ReactFragment, ReactInstance, ReactPortal } from "react"; +import React, { Key, MutableRefObject, ReactElement, ReactInstance } from "react"; import ReactDom from "react-dom"; interface IChildProps { @@ -27,7 +27,7 @@ interface IProps { innerRef?: MutableRefObject; } -function isReactElement(c: ReactElement | ReactFragment | ReactPortal): c is ReactElement { +function isReactElement(c: ReturnType<(typeof React.Children)["toArray"]>[number]): c is ReactElement { return typeof c === "object" && "type" in c; } @@ -102,7 +102,8 @@ export default class NodeAnimator extends React.Component { } private collectNode(k: Key, node: React.ReactInstance, restingStyle: React.CSSProperties): void { - if (node && this.nodes[k] === undefined && this.props.startStyles.length > 0) { + const key = typeof k === "bigint" ? Number(k) : k; + if (node && this.nodes[key] === undefined && this.props.startStyles.length > 0) { const startStyles = this.props.startStyles; const domNode = ReactDom.findDOMNode(node); // start from startStyle 1: 0 is the one we gave it @@ -116,7 +117,7 @@ export default class NodeAnimator extends React.Component { this.applyStyles(domNode as HTMLElement, restingStyle); }, 0); } - this.nodes[k] = node; + this.nodes[key] = node; if (this.props.innerRef) { this.props.innerRef.current = node; diff --git a/src/languageHandler.tsx b/src/languageHandler.tsx index 28d6dbd3b35..c35436dc43a 100644 --- a/src/languageHandler.tsx +++ b/src/languageHandler.tsx @@ -436,7 +436,7 @@ export function replaceByRegexes(text: string, mapping: IVariables | Tags): stri } if (shouldWrapInSpan) { - return React.createElement("span", null, ...output); + return React.createElement("span", null, ...(output as Array)); } else { return output.join(""); } diff --git a/test/setupTests.ts b/test/setupTests.ts index b875b2471f9..ea0f4e32435 100644 --- a/test/setupTests.ts +++ b/test/setupTests.ts @@ -13,6 +13,13 @@ import { mocked } from "jest-mock"; import { PredictableRandom } from "./test-utils/predictableRandom"; // https://github.com/jsdom/jsdom/issues/2555 +declare global { + // eslint-disable-next-line no-var + var IS_REACT_ACT_ENVIRONMENT: boolean; +} + +globalThis.IS_REACT_ACT_ENVIRONMENT = true; + // Fake random strings to give a predictable snapshot for IDs jest.mock("matrix-js-sdk/src/randomstring"); beforeEach(() => { diff --git a/test/test-utils/utilities.ts b/test/test-utils/utilities.ts index 4278b73f74d..5d42572aa07 100644 --- a/test/test-utils/utilities.ts +++ b/test/test-utils/utilities.ts @@ -119,7 +119,7 @@ export function untilEmission( }); } -export const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve)); +export const flushPromises = async () => await new Promise((resolve) => window.setTimeout(resolve, 10)); // with jest's modern fake timers process.nextTick is also mocked, // flushing promises in the normal way then waits for some advancement diff --git a/test/unit-tests/accessibility/RovingTabIndex-test.tsx b/test/unit-tests/accessibility/RovingTabIndex-test.tsx index 8130167db45..99417b168c6 100644 --- a/test/unit-tests/accessibility/RovingTabIndex-test.tsx +++ b/test/unit-tests/accessibility/RovingTabIndex-test.tsx @@ -67,6 +67,7 @@ describe("RovingTabIndex", () => { )} , + { legacyRoot: true }, ); // should begin with 0th being active @@ -135,6 +136,7 @@ describe("RovingTabIndex", () => { )} , + { legacyRoot: true }, ); // should begin with 0th being active diff --git a/test/unit-tests/components/structures/MatrixChat-test.tsx b/test/unit-tests/components/structures/MatrixChat-test.tsx index 4b10043ad2e..7d24ff7104b 100644 --- a/test/unit-tests/components/structures/MatrixChat-test.tsx +++ b/test/unit-tests/components/structures/MatrixChat-test.tsx @@ -161,7 +161,7 @@ describe("", () => { let initPromise: Promise | undefined; let defaultProps: ComponentProps; const getComponent = (props: Partial> = {}) => - render(); + render(, { legacyRoot: true }); // make test results readable filterConsole( diff --git a/test/unit-tests/components/structures/RoomView-test.tsx b/test/unit-tests/components/structures/RoomView-test.tsx index b6a0f286376..9dff2296b61 100644 --- a/test/unit-tests/components/structures/RoomView-test.tsx +++ b/test/unit-tests/components/structures/RoomView-test.tsx @@ -137,6 +137,9 @@ describe("RoomView", () => { wrappedRef={ref as any} /> , + { + legacyRoot: true, + }, ); await flushPromises(); return roomView; @@ -174,6 +177,9 @@ describe("RoomView", () => { onRegistered={jest.fn()} /> , + { + legacyRoot: true, + }, ); await flushPromises(); return roomView; diff --git a/test/unit-tests/components/structures/TimelinePanel-test.tsx b/test/unit-tests/components/structures/TimelinePanel-test.tsx index 7de688bfe64..a59628d747f 100644 --- a/test/unit-tests/components/structures/TimelinePanel-test.tsx +++ b/test/unit-tests/components/structures/TimelinePanel-test.tsx @@ -203,6 +203,7 @@ describe("TimelinePanel", () => { manageReadReceipts={true} ref={ref} />, + { legacyRoot: true }, ); await flushPromises(); timelinePanel = ref.current!; diff --git a/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx b/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx index f439605319a..c83dfb1b024 100644 --- a/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx +++ b/test/unit-tests/components/structures/auth/ForgotPassword-test.tsx @@ -94,6 +94,7 @@ describe("", () => { beforeEach(() => { renderResult = render( , + { legacyRoot: true }, ); }); diff --git a/test/unit-tests/components/structures/auth/Login-test.tsx b/test/unit-tests/components/structures/auth/Login-test.tsx index 7105de4d223..d04e3f80d94 100644 --- a/test/unit-tests/components/structures/auth/Login-test.tsx +++ b/test/unit-tests/components/structures/auth/Login-test.tsx @@ -89,7 +89,7 @@ describe("Login", function () { } function getComponent(hsUrl?: string, isUrl?: string, delegatedAuthentication?: OidcClientConfig) { - return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication)); + return render(getRawComponent(hsUrl, isUrl, delegatedAuthentication), { legacyRoot: true }); } it("should show form with change server link", async () => { @@ -350,7 +350,9 @@ describe("Login", function () { unstable_features: {}, versions: ["v1.1"], }); - const { rerender } = render(getRawComponent()); + const { rerender } = render(getRawComponent(), { + legacyRoot: true, + }); await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading…")); // error displayed diff --git a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap index ea7f8aa12ab..c486bbd9d37 100644 --- a/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap +++ b/test/unit-tests/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap @@ -47,9 +47,7 @@ exports[` renders sidebar correctly with beacons 1`] = ` data-type="round" role="presentation" style="--cpd-avatar-size: 32px;" - > - - + />

diff --git a/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx b/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx index 3e1307cb38e..ed709d44c4d 100644 --- a/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx +++ b/test/unit-tests/components/views/dialogs/SpotlightDialog-test.tsx @@ -149,6 +149,9 @@ describe("Spotlight Dialog", () => { let mockedClient: MatrixClient; beforeEach(() => { + SdkConfig.reset(); + localStorage.clear(); + SettingsStore.reset(); mockedClient = mockClient({ rooms: [testPublicRoom], users: [testPerson] }); testRoom = mkRoom(mockedClient, "!test23:example.com"); mocked(testRoom.getMyMembership).mockReturnValue(KnownMembership.Join); @@ -193,10 +196,12 @@ describe("Spotlight Dialog", () => { expect(filterChip).toBeInTheDocument(); expect(filterChip.innerHTML).toContain("Public rooms"); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBe(1); - expect(options[0].innerHTML).toContain(testPublicRoom.name); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBe(1); + expect(options[0].innerHTML).toContain(testPublicRoom.name); + }); }); it("with people filter", async () => { @@ -215,22 +220,18 @@ describe("Spotlight Dialog", () => { expect(filterChip).toBeInTheDocument(); expect(filterChip.innerHTML).toContain("People"); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(1); - expect(options[0]!.innerHTML).toContain(testPerson.display_name); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(1); + expect(options[0]!.innerHTML).toContain(testPerson.display_name); + }); }); }); describe("when MSC3946 dynamic room predecessors is enabled", () => { - beforeEach(() => { - jest.spyOn(SettingsStore, "getValue").mockImplementation((settingName, roomId, excludeDefault) => { - if (settingName === "feature_dynamic_room_predecessors") { - return true; - } else { - return []; // SpotlightSearch.recentSearches - } - }); + beforeEach(async () => { + await SettingsStore.setValue("feature_dynamic_room_predecessors", null, SettingLevel.DEVICE, true); }); afterEach(() => { @@ -261,10 +262,12 @@ describe("Spotlight Dialog", () => { expect(filterChip).toBeInTheDocument(); expect(filterChip.innerHTML).toContain("Public rooms"); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBe(1); - expect(options[0]!.innerHTML).toContain(testPublicRoom.name); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBe(1); + expect(options[0]!.innerHTML).toContain(testPublicRoom.name); + }); // assert that getVisibleRooms is called without MSC3946 dynamic room predecessors expect(mockedClient.getVisibleRooms).toHaveBeenCalledWith(false); @@ -284,10 +287,12 @@ describe("Spotlight Dialog", () => { expect(filterChip).toBeInTheDocument(); expect(filterChip.innerHTML).toContain("People"); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(1); - expect(options[0]!.innerHTML).toContain(testPerson.display_name); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(1); + expect(options[0]!.innerHTML).toContain(testPerson.display_name); + }); }); }); @@ -372,11 +377,13 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(2); - expect(options[0]).toHaveTextContent("User Alpha"); - expect(options[1]).toHaveTextContent("User Beta"); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(2); + expect(options[0]).toHaveTextContent("User Alpha"); + expect(options[1]).toHaveTextContent("User Beta"); + }); }); it("should not filter out users sent by the server even if a local suggestion gets filtered out", async () => { @@ -397,11 +404,13 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(2); - expect(options[0]).toHaveTextContent(testPerson.display_name!); - expect(options[1]).toHaveTextContent("User Beta"); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(2); + expect(options[0]).toHaveTextContent(testPerson.display_name!); + expect(options[1]).toHaveTextContent("User Beta"); + }); }); it("show non-matching query members with DMs if they are present in the server search results", async () => { @@ -419,11 +428,13 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(2); - expect(options[0]).toHaveTextContent(testDMUserId); - expect(options[1]).toHaveTextContent("Bob Wonder"); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(2); + expect(options[0]).toHaveTextContent(testDMUserId); + expect(options[1]).toHaveTextContent("Bob Wonder"); + }); }); it("don't sort the order of users sent by the server", async () => { @@ -441,11 +452,13 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(2); - expect(options[0]).toHaveTextContent("User Beta"); - expect(options[1]).toHaveTextContent("User Alpha"); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(2); + expect(options[0]).toHaveTextContent("User Beta"); + expect(options[1]).toHaveTextContent("User Alpha"); + }); }); it("should start a DM when clicking a person", async () => { @@ -460,12 +473,13 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - const options = document.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBeGreaterThanOrEqual(1); - expect(options[0]!.innerHTML).toContain(testPerson.display_name); - - fireEvent.click(options[0]!); - expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockedClient, [new DirectoryMember(testPerson)]); + await waitFor(() => { + const options = document.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBeGreaterThanOrEqual(1); + expect(options[0]!.innerHTML).toContain(testPerson.display_name); + fireEvent.click(options[0]!); + expect(startDmOnFirstMessage).toHaveBeenCalledWith(mockedClient, [new DirectoryMember(testPerson)]); + }); }); it("should pass via of the server being explored when joining room from directory", async () => { @@ -481,20 +495,22 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - const content = document.querySelector("#mx_SpotlightDialog_content")!; - const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); - expect(options.length).toBe(1); - expect(options[0].innerHTML).toContain(testPublicRoom.name); - - fireEvent.click(options[0].querySelector("[role='button']")!); - expect(defaultDispatcher.dispatch).toHaveBeenCalledTimes(1); - expect(defaultDispatcher.dispatch).toHaveBeenCalledWith( - expect.objectContaining({ - action: "view_room", - room_id: testPublicRoom.room_id, - via_servers: ["example.tld"], - }), - ); + await waitFor(() => { + const content = document.querySelector("#mx_SpotlightDialog_content")!; + const options = content.querySelectorAll("li.mx_SpotlightDialog_option"); + expect(options.length).toBe(1); + expect(options[0].innerHTML).toContain(testPublicRoom.name); + + fireEvent.click(options[0].querySelector("[role='button']")!); + expect(defaultDispatcher.dispatch).toHaveBeenCalledTimes(1); + expect(defaultDispatcher.dispatch).toHaveBeenCalledWith( + expect.objectContaining({ + action: "view_room", + room_id: testPublicRoom.room_id, + via_servers: ["example.tld"], + }), + ); + }); }); describe("nsfw public rooms filter", () => { @@ -525,13 +541,9 @@ describe("Spotlight Dialog", () => { guest_can_join: false, }; - beforeEach(() => { + beforeEach(async () => { mockedClient = mockClient({ rooms: [nsfwNameRoom, nsfwTopicRoom, potatoRoom], users: [testPerson] }); - SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, false); - }); - - afterAll(() => { - SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, false); + await SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, false); }); it("does not display rooms with nsfw keywords in results when showNsfwPublicRooms is falsy", async () => { @@ -541,22 +553,26 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument(); - expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument(); - expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument(); + expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument(); + expect(screen.queryByText(nsfwTopicRoom.name!)).not.toBeInTheDocument(); + }); }); it("displays rooms with nsfw keywords in results when showNsfwPublicRooms is truthy", async () => { - SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, true); + await SettingsStore.setValue("SpotlightSearch.showNsfwPublicRooms", null, SettingLevel.DEVICE, true); render( null} />); // search is debounced jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - expect(screen.getByText(nsfwTopicRoom.name!)).toBeInTheDocument(); - expect(screen.getByText(nsfwNameRoom.name!)).toBeInTheDocument(); - expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText(nsfwTopicRoom.name!)).toBeInTheDocument(); + expect(screen.getByText(nsfwNameRoom.name!)).toBeInTheDocument(); + expect(screen.getByText(potatoRoom.name!)).toBeInTheDocument(); + }); }); }); @@ -567,7 +583,7 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - expect(screen.getByText("Failed to query public rooms")).toBeInTheDocument(); + await waitFor(() => expect(screen.getByText("Failed to query public rooms")).toBeInTheDocument()); }); describe("knock rooms", () => { @@ -593,9 +609,7 @@ describe("Spotlight Dialog", () => { describe("when disabling feature", () => { beforeEach(async () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => - setting === "feature_ask_to_join" ? false : [], - ); + await SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, false); render( {}} />); @@ -603,7 +617,7 @@ describe("Spotlight Dialog", () => { jest.advanceTimersByTime(200); await flushPromisesWithFakeTimers(); - fireEvent.click(screen.getByRole("button", { name: "View" })); + fireEvent.click(await screen.findByRole("button", { name: "View" })); }); it("should not skip to auto join", async () => { @@ -617,18 +631,12 @@ describe("Spotlight Dialog", () => { describe("when enabling feature", () => { beforeEach(async () => { - jest.spyOn(SettingsStore, "getValue").mockImplementation((setting) => - setting === "feature_ask_to_join" ? true : [], - ); + await SettingsStore.setValue("feature_ask_to_join", null, SettingLevel.DEVICE, true); jest.spyOn(mockedClient, "getRoom").mockReturnValue(null); render( {}} />); - // search is debounced - jest.advanceTimersByTime(200); - await flushPromisesWithFakeTimers(); - - fireEvent.click(screen.getByRole("button", { name: "Ask to join" })); + await waitFor(() => fireEvent.click(screen.getByRole("button", { name: "Ask to join" }))); }); it("should skip to auto join", async () => { diff --git a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap index 6cd547e58bf..b375be19281 100644 --- a/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap +++ b/test/unit-tests/components/views/dialogs/__snapshots__/DevtoolsDialog-test.tsx.snap @@ -33,7 +33,7 @@ exports[`DevtoolsDialog renders the devtools dialog 1`] = ` > Room ID: !id
should match the snapshot 1`] = `
should support events with 1`] = `
{ permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)} /> , + { legacyRoot: true }, ); // Wait for RPS room 1 updates to fire const rpsUpdated = waitForRps("r1"); @@ -234,6 +235,7 @@ describe("AppTile", () => { permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)} /> , + { legacyRoot: true }, ); // Wait for RPS room 1 updates to fire const rpsUpdated1 = waitForRps("r1"); @@ -352,6 +354,7 @@ describe("AppTile", () => { , + { legacyRoot: true }, ); moveToContainerSpy = jest.spyOn(WidgetLayoutStore.instance, "moveToContainer"); @@ -466,6 +469,7 @@ describe("AppTile", () => { , + { legacyRoot: true }, ); }); diff --git a/test/unit-tests/components/views/elements/SearchWarning-test.tsx b/test/unit-tests/components/views/elements/SearchWarning-test.tsx index 527fd0aeeae..f0b17106854 100644 --- a/test/unit-tests/components/views/elements/SearchWarning-test.tsx +++ b/test/unit-tests/components/views/elements/SearchWarning-test.tsx @@ -29,7 +29,7 @@ describe("", () => { const { asFragment, getByRole } = render( , ); - expect(getByRole("img")).toHaveAttribute("src", "https://logo"); + expect(getByRole("presentation")).toHaveAttribute("src", "https://logo"); expect(asFragment()).toMatchSnapshot(); }); diff --git a/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx b/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx index ff18022a8ce..ae2132f2fb6 100644 --- a/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx +++ b/test/unit-tests/components/views/elements/SyntaxHighlight-test.tsx @@ -13,7 +13,9 @@ import SyntaxHighlight from "../../../../../src/components/views/elements/Syntax describe("", () => { it("renders", async () => { - const { container } = render(console.log("Hello, World!");); + const { container } = render(console.log("Hello, World!");, { + legacyRoot: true, + }); await waitFor(() => expect(container.querySelector(".language-arcade")).toBeTruthy()); expect(container).toMatchSnapshot(); }); @@ -21,7 +23,9 @@ describe("", () => { it.each(["json", "javascript", "css"])("uses the provided language", async (lang) => { const mock = jest.spyOn(hljs, "highlight"); - const { container } = render(// Hello, World); + const { container } = render(// Hello, World, { + legacyRoot: true, + }); await waitFor(() => expect(container.querySelector(`.language-${lang}`)).toBeTruthy()); const [_lang, opts] = mock.mock.lastCall!; diff --git a/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap b/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap index 93d6d3a357d..ce2b8211d8a 100644 --- a/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap +++ b/test/unit-tests/components/views/elements/__snapshots__/ImageView-test.tsx.snap @@ -21,7 +21,7 @@ exports[` renders correctly 1`] = ` class="mx_ImageView_toolbar" >
diff --git a/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx b/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx index d069d663b8e..2a0ac36c6d0 100644 --- a/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx +++ b/test/unit-tests/components/views/emojipicker/EmojiPicker-test.tsx @@ -20,6 +20,7 @@ describe("EmojiPicker", function () { const ref = createRef(); const { container } = render( false} onFinished={jest.fn()} />, + { legacyRoot: true }, ); // Record the HTML before filtering diff --git a/test/unit-tests/components/views/location/LocationShareMenu-test.tsx b/test/unit-tests/components/views/location/LocationShareMenu-test.tsx index 672580e9526..781db920e28 100644 --- a/test/unit-tests/components/views/location/LocationShareMenu-test.tsx +++ b/test/unit-tests/components/views/location/LocationShareMenu-test.tsx @@ -114,6 +114,7 @@ describe("", () => { wrapper: ({ children }) => ( {children} ), + legacyRoot: true, }); beforeEach(async () => { diff --git a/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap b/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap index ffc676e30c7..2886a826c8e 100644 --- a/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap +++ b/test/unit-tests/components/views/location/__snapshots__/LocationViewDialog-test.tsx.snap @@ -23,7 +23,6 @@ exports[` renders map correctly 1`] = ` class="mx_ZoomButtons" >
( {children} ), + legacyRoot: true, }); } diff --git a/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap b/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap index 3d6a99be8ae..b24f80146d6 100644 --- a/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap +++ b/test/unit-tests/components/views/messages/__snapshots__/MPollBody-test.tsx.snap @@ -506,9 +506,7 @@ exports[`MPollBody renders a poll that I have not voted in 1`] = `
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
- -
+ />
", () => { wrapper: ({ children }) => ( {children} ), + legacyRoot: true, }); beforeAll(() => { diff --git a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx index e0bfe10c863..a3bd8bd9a33 100644 --- a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx +++ b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx @@ -200,6 +200,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -340,6 +341,9 @@ describe("", () => { , + { + legacyRoot: true, + }, ); screen.getByRole("button", { name: "Send message" }); @@ -355,6 +359,9 @@ describe("", () => { , + { + legacyRoot: true, + }, ); expect(screen.queryByRole("button", { name: "Message" })).toBeNull(); @@ -703,6 +710,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -742,6 +750,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -885,6 +894,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -1111,6 +1121,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -1170,6 +1181,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -1277,6 +1289,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; @@ -1409,6 +1422,7 @@ describe("", () => { return render(, { wrapper: Wrapper, + legacyRoot: true, }); }; diff --git a/test/unit-tests/components/views/rooms/MemberList-test.tsx b/test/unit-tests/components/views/rooms/MemberList-test.tsx index 3e17f7ce862..2215df41144 100644 --- a/test/unit-tests/components/views/rooms/MemberList-test.tsx +++ b/test/unit-tests/components/views/rooms/MemberList-test.tsx @@ -375,6 +375,9 @@ describe("MemberList", () => { roomId={room.roomId} /> , + { + // legacyRoot: true, + }, ); }; @@ -401,7 +404,10 @@ describe("MemberList", () => { await flushPromises(); // button rendered but disabled - expect(screen.getByText("Invite to this room")).toHaveAttribute("aria-disabled", "true"); + expect(screen.getByRole("button", { name: "Invite to this room" })).toHaveAttribute( + "aria-disabled", + "true", + ); }); it("renders enabled invite button when current user is a member and has rights to invite", async () => { diff --git a/test/unit-tests/components/views/rooms/MessageComposer-test.tsx b/test/unit-tests/components/views/rooms/MessageComposer-test.tsx index 7fea00fe02d..1aff1f93307 100644 --- a/test/unit-tests/components/views/rooms/MessageComposer-test.tsx +++ b/test/unit-tests/components/views/rooms/MessageComposer-test.tsx @@ -529,7 +529,9 @@ function wrapAndRender( ); return { rawComponent: getRawComponent(props, roomContext, mockClient), - renderResult: render(getRawComponent(props, roomContext, mockClient)), + renderResult: render(getRawComponent(props, roomContext, mockClient), { + legacyRoot: true, + }), roomContext, }; } diff --git a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx index a41c221616a..a613db80919 100644 --- a/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx +++ b/test/unit-tests/components/views/rooms/SendMessageComposer-test.tsx @@ -374,7 +374,7 @@ describe("", () => { ); const getComponent = (props = {}, roomContext = defaultRoomContext, client = mockClient) => { - return render(getRawComponent(props, roomContext, client)); + return render(getRawComponent(props, roomContext, client), { legacyRoot: true }); }; it("renders text and placeholder correctly", () => { diff --git a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx index 27110149f5c..8521c016f1c 100644 --- a/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx +++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/SendWysiwygComposer-test.tsx @@ -77,6 +77,9 @@ describe("SendWysiwygComposer", () => { /> , + { + legacyRoot: true, + }, ); }; diff --git a/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx b/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx index 8be8530b657..20dc961cf4e 100644 --- a/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx +++ b/test/unit-tests/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners-test.tsx @@ -6,8 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only Please see LICENSE files in the repository root for full details. */ -import { renderHook } from "@testing-library/react-hooks"; -import { act } from "jest-matrix-react"; +import { renderHook, act } from "jest-matrix-react"; import { usePlainTextListeners } from "../../../../../../../src/components/views/rooms/wysiwyg_composer/hooks/usePlainTextListeners"; diff --git a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap index 421fa08822d..63c786873c3 100644 --- a/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap +++ b/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap @@ -27,7 +27,7 @@ exports[` should render 1`] = `