Remove usage of legacyRoot in RTL tests (#28485)

* Remove usage of legacyRoot in RTL tests

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Iterate

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/structures/auth/ForgotPassword.tsx

@@ -113,16 +113,16 @@ export default class ForgotPassword extends React.Component<Props, State> {
         this.unmounted = true;
     }
 
-    private async checkServerLiveliness(serverConfig: ValidatedServerConfig): Promise<void> {
+    private async checkServerLiveliness(serverConfig: ValidatedServerConfig): Promise<boolean> {
         try {
             await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(serverConfig.hsUrl, serverConfig.isUrl);
-            if (this.unmounted) return;
+            if (this.unmounted) return false;
 
             this.setState({
                 serverIsAlive: true,
             });
         } catch (e: any) {
-            if (this.unmounted) return;
+            if (this.unmounted) return false;
             const { serverIsAlive, serverDeadError } = AutoDiscoveryUtils.authComponentStateForError(
                 e,
                 "forgot_password",
@@ -131,7 +131,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                 serverIsAlive,
                 errorText: serverDeadError,
             });
+            return serverIsAlive;
         }
+        return true;
     }
 
     private async onPhaseEmailInputSubmit(): Promise<void> {
@@ -299,10 +301,10 @@ export default class ForgotPassword extends React.Component<Props, State> {
         });
 
         // Refresh the server errors. Just in case the server came back online of went offline.
-        await this.checkServerLiveliness(this.props.serverConfig);
+        const serverIsAlive = await this.checkServerLiveliness(this.props.serverConfig);
 
         // Server error
-        if (!this.state.serverIsAlive) return;
+        if (!serverIsAlive) return;
 
         switch (this.state.phase) {
             case Phase.EnterEmail:

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -162,8 +162,11 @@ describe("<MatrixChat />", () => {
     };
     let initPromise: Promise<void> | undefined;
     let defaultProps: ComponentProps<typeof MatrixChat>;
-    const getComponent = (props: Partial<ComponentProps<typeof MatrixChat>> = {}) =>
+    const getComponent = (props: Partial<ComponentProps<typeof MatrixChat>> = {}) => {
-        render(<MatrixChat {...defaultProps} {...props} />, { legacyRoot: true });
+        // MatrixChat does many questionable things which bomb tests in modern React mode,
+        // we'll want to refactor and break up MatrixChat before turning off legacyRoot mode
+        return render(<MatrixChat {...defaultProps} {...props} />, { legacyRoot: true });
+    };
 
     // make test results readable
     filterConsole(
@@ -1128,7 +1131,7 @@ describe("<MatrixChat />", () => {
 
                 await getComponentAndLogin();
 
-                act(() => bootstrapDeferred.resolve());
+                bootstrapDeferred.resolve();
 
                 await expect(
                     screen.findByRole("heading", { name: "You're in", level: 1 }),

test/unit-tests/components/structures/TimelinePanel-test.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 { render, waitFor, screen, act } from "jest-matrix-react";
+import { render, waitFor, screen, act, cleanup } from "jest-matrix-react";
 import {
     ReceiptType,
     EventTimelineSet,
@@ -28,7 +28,7 @@ import {
     ThreadFilterType,
 } from "matrix-js-sdk/src/matrix";
 import { KnownMembership } from "matrix-js-sdk/src/types";
-import React, { createRef } from "react";
+import React from "react";
 import { Mocked, mocked } from "jest-mock";
 import { forEachRight } from "lodash";
 
@@ -178,7 +178,7 @@ describe("TimelinePanel", () => {
         const roomId = "#room:example.com";
         let room: Room;
         let timelineSet: EventTimelineSet;
-        let timelinePanel: TimelinePanel;
+        let timelinePanel: TimelinePanel | null = null;
 
         const ev1 = new MatrixEvent({
             event_id: "ev1",
@@ -197,19 +197,16 @@ describe("TimelinePanel", () => {
         });
 
         const renderTimelinePanel = async (): Promise<void> => {
-            const ref = createRef<TimelinePanel>();
             render(
                 <TimelinePanel
                     timelineSet={timelineSet}
                     manageReadMarkers={true}
                     manageReadReceipts={true}
-                    ref={ref}
+                    ref={(ref) => (timelinePanel = ref)}
                 />,
-                { legacyRoot: true },
             );
             await flushPromises();
-            await waitFor(() => expect(ref.current).toBeTruthy());
+            await waitFor(() => expect(timelinePanel).toBeTruthy());
-            timelinePanel = ref.current!;
         };
 
         const setUpTimelineSet = (threadRoot?: MatrixEvent) => {
@@ -234,8 +231,9 @@ describe("TimelinePanel", () => {
             room = new Room(roomId, client, userId, { pendingEventOrdering: PendingEventOrdering.Detached });
         });
 
-        afterEach(() => {
+        afterEach(async () => {
             TimelinePanel.roomReadMarkerTsMap = {};
+            cleanup();
         });
 
         it("when there is no event, it should not send any receipt", async () => {
@@ -257,16 +255,13 @@ describe("TimelinePanel", () => {
 
             describe("and reading the timeline", () => {
                 beforeEach(async () => {
-                    await act(async () => {
+                    await renderTimelinePanel();
-                        await renderTimelinePanel();
+                    timelineSet.addLiveEvent(ev1, {});
-                        timelineSet.addLiveEvent(ev1, {});
+                    await flushPromises();
-                        await flushPromises();
+                    // @ts-ignore
-
+                    await timelinePanel.sendReadReceipts();
-                        // @ts-ignore
+                    // @ts-ignore Simulate user activity by calling updateReadMarker on the TimelinePanel.
-                        await timelinePanel.sendReadReceipts();
+                    await timelinePanel.updateReadMarker();
-                        // @ts-ignore Simulate user activity by calling updateReadMarker on the TimelinePanel.
-                        await timelinePanel.updateReadMarker();
-                    });
                 });
 
                 it("should send a fully read marker and a public receipt", async () => {
@@ -295,7 +290,7 @@ describe("TimelinePanel", () => {
                         // setup, timelineSet is not actually the timelineSet of the room.
                         await room.addLiveEvents([ev2], {});
                         room.addEphemeralEvents([newReceipt(ev2.getId()!, userId, 222, 200)]);
-                        await timelinePanel.forgetReadMarker();
+                        await timelinePanel!.forgetReadMarker();
                         expect(client.setRoomReadMarkers).toHaveBeenCalledWith(roomId, ev2.getId());
                     });
                 });

test/unit-tests/components/structures/auth/ForgotPassword-test.tsx

@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { mocked } from "jest-mock";
-import { render, RenderResult, screen, waitFor } from "jest-matrix-react";
+import { render, RenderResult, screen, waitFor, cleanup } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { MatrixClient, createClient } from "matrix-js-sdk/src/matrix";
 
@@ -68,13 +68,13 @@ describe("<ForgotPassword>", () => {
     afterEach(async () => {
         // clean up modals
         await clearAllModals();
+        cleanup();
     });
 
     describe("when starting a password reset flow", () => {
         beforeEach(() => {
             renderResult = render(
                 <ForgotPassword serverConfig={serverConfig} onComplete={onComplete} onLoginClick={onLoginClick} />,
-                { legacyRoot: true },
             );
         });
 
@@ -120,6 +120,7 @@ describe("<ForgotPassword>", () => {
 
         describe("and submitting an unknown email", () => {
             beforeEach(async () => {
+                mocked(AutoDiscoveryUtils.validateServerConfigWithStaticUrls).mockResolvedValue(serverConfig);
                 await typeIntoField("Email address", testEmail);
                 mocked(client).requestPasswordEmailToken.mockRejectedValue({
                     errcode: "M_THREEPID_NOT_FOUND",

test/unit-tests/components/views/messages/DateSeparator-test.tsx

@@ -48,7 +48,6 @@ describe("DateSeparator", () => {
             <MatrixClientContext.Provider value={mockClient}>
                 <DateSeparator {...defaultProps} {...props} />
             </MatrixClientContext.Provider>,
-            { legacyRoot: true },
         );
 
     type TestCase = [string, number, string];

test/unit-tests/components/views/messages/MPollEndBody-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render, waitFor, waitForElementToBeRemoved } from "jest-matrix-react";
+import { render, waitFor } from "jest-matrix-react";
 import { EventTimeline, MatrixEvent, Room, M_TEXT } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -121,13 +121,13 @@ describe("<MPollEndBody />", () => {
     describe("when poll start event does not exist in current timeline", () => {
         it("fetches the related poll start event and displays a poll tile", async () => {
             await setupRoomWithEventsTimeline(pollEndEvent);
-            const { container, getByTestId, getByRole } = getComponent();
+            const { container, getByTestId, getByRole, queryByRole } = getComponent();
 
             // while fetching event, only icon is shown
             expect(container).toMatchSnapshot();
 
             await waitFor(() => expect(getByRole("progressbar")).toBeInTheDocument());
-            await waitForElementToBeRemoved(() => getByRole("progressbar"));
+            await waitFor(() => expect(queryByRole("progressbar")).not.toBeInTheDocument());
 
             expect(mockClient.fetchRoomEvent).toHaveBeenCalledWith(roomId, pollStartEvent.getId());
 

test/unit-tests/components/views/right_panel/UserInfo-test.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { fireEvent, render, screen, cleanup, act, within } from "jest-matrix-react";
+import { fireEvent, render, screen, cleanup, act, within, waitForElementToBeRemoved } from "jest-matrix-react";
 import userEvent from "@testing-library/user-event";
 import { Mocked, mocked } from "jest-mock";
 import { Room, User, MatrixClient, RoomMember, MatrixEvent, EventType, Device } from "matrix-js-sdk/src/matrix";
@@ -199,7 +199,6 @@ describe("<UserInfo />", () => {
 
         return render(<UserInfo {...defaultProps} {...props} />, {
             wrapper: Wrapper,
-            legacyRoot: true,
         });
     };
 
@@ -655,6 +654,9 @@ describe("<UserInfo />", () => {
             });
 
             await expect(screen.findByRole("button", { name: "Deactivate user" })).resolves.toBeInTheDocument();
+            if (screen.queryAllByRole("progressbar").length) {
+                await waitForElementToBeRemoved(() => screen.queryAllByRole("progressbar"));
+            }
             expect(container).toMatchSnapshot();
         });
     });

test/unit-tests/components/views/rooms/MessageComposer-test.tsx

@@ -519,7 +519,7 @@ function wrapAndRender(
     );
     return {
         rawComponent: getRawComponent(props, roomContext, mockClient),
-        renderResult: render(getRawComponent(props, roomContext, mockClient), { legacyRoot: true }),
+        renderResult: render(getRawComponent(props, roomContext, mockClient)),
         roomContext,
     };
 }

test/unit-tests/components/views/settings/JoinRuleSettings-test.tsx

@@ -59,7 +59,7 @@ describe("<JoinRuleSettings />", () => {
         onError: jest.fn(),
     };
     const getComponent = (props: Partial<JoinRuleSettingsProps> = {}) =>
-        render(<JoinRuleSettings {...defaultProps} {...props} />, { legacyRoot: false });
+        render(<JoinRuleSettings {...defaultProps} {...props} />);
 
     const setRoomStateEvents = (
         room: Room,