Migrate to React 18 createRoot API (#28256)

* Migrate to React 18 createRoot API 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> * 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> * Discard changes to src/components/views/settings/devices/DeviceDetails.tsx * 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> * Attempt to stabilise test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * legacyRoot? 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> * Fix tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Improve coverage 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>
2024-11-20 13:29:23 +00:00
parent 48fd330dd9
commit ca33d9165a
44 changed files with 719 additions and 731 deletions
@@ -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, screen, waitFor } from "jest-matrix-react";
+import { render, screen, waitFor, cleanup } from "jest-matrix-react";
 import { MatrixClient, MatrixError, ThreepidMedium } from "matrix-js-sdk/src/matrix";
 import React from "react";
 import userEvent from "@testing-library/user-event";
@@ -48,54 +48,13 @@ describe("AddRemoveThreepids", () => {
    afterEach(() => {
        jest.restoreAllMocks();
        clearAllModals();
+        cleanup();
    });

    const clientProviderWrapper: React.FC = ({ children }: React.PropsWithChildren) => (
        <MatrixClientContext.Provider value={client}>{children}</MatrixClientContext.Provider>
    );

-    it("should render a loader while loading", async () => {
-        render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Email}
-                threepids={[]}
-                isLoading={true}
-                onChange={() => {}}
-            />,
-        );
-
-        expect(screen.getByLabelText("Loading…")).toBeInTheDocument();
-    });
-
-    it("should render email addresses", async () => {
-        const { container } = render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Email}
-                threepids={[EMAIL1]}
-                isLoading={false}
-                onChange={() => {}}
-            />,
-        );
-
-        expect(container).toMatchSnapshot();
-    });
-
-    it("should render phone numbers", async () => {
-        const { container } = render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Phone}
-                threepids={[PHONE1]}
-                isLoading={false}
-                onChange={() => {}}
-            />,
-        );
-
-        expect(container).toMatchSnapshot();
-    });
-
    it("should handle no email addresses", async () => {
        const { container } = render(
            <AddRemoveThreepids
@@ -107,6 +66,7 @@ describe("AddRemoveThreepids", () => {
            />,
        );

+        await expect(screen.findByText("Email Address")).resolves.toBeVisible();
        expect(container).toMatchSnapshot();
    });

@@ -127,7 +87,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        const input = screen.getByRole("textbox", { name: "Email Address" });
+        const input = await screen.findByRole("textbox", { name: "Email Address" });
        await userEvent.type(input, EMAIL1.address);
        const addButton = screen.getByRole("button", { name: "Add" });
        await userEvent.click(addButton);
@@ -166,7 +126,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        const input = screen.getByRole("textbox", { name: "Email Address" });
+        const input = await screen.findByRole("textbox", { name: "Email Address" });
        await userEvent.type(input, EMAIL1.address);
        const addButton = screen.getByRole("button", { name: "Add" });
        await userEvent.click(addButton);
@@ -210,7 +170,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        const countryDropdown = screen.getByRole("button", { name: /Country Dropdown/ });
+        const countryDropdown = await screen.findByRole("button", { name: /Country Dropdown/ });
        await userEvent.click(countryDropdown);
        const gbOption = screen.getByRole("option", { name: "🇬🇧 United Kingdom (+44)" });
        await userEvent.click(gbOption);
@@ -270,7 +230,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        const removeButton = screen.getByRole("button", { name: /Remove/ });
+        const removeButton = await screen.findByRole("button", { name: /Remove/ });
        await userEvent.click(removeButton);

        expect(screen.getByText(`Remove ${EMAIL1.address}?`)).toBeVisible();
@@ -297,7 +257,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        const removeButton = screen.getByRole("button", { name: /Remove/ });
+        const removeButton = await screen.findByRole("button", { name: /Remove/ });
        await userEvent.click(removeButton);

        expect(screen.getByText(`Remove ${EMAIL1.address}?`)).toBeVisible();
@@ -326,7 +286,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        const removeButton = screen.getByRole("button", { name: /Remove/ });
+        const removeButton = await screen.findByRole("button", { name: /Remove/ });
        await userEvent.click(removeButton);

        expect(screen.getByText(`Remove ${PHONE1.address}?`)).toBeVisible();
@@ -357,7 +317,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        expect(screen.getByText(EMAIL1.address)).toBeVisible();
+        await expect(screen.findByText(EMAIL1.address)).resolves.toBeVisible();
        const shareButton = screen.getByRole("button", { name: /Share/ });
        await userEvent.click(shareButton);

@@ -408,7 +368,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        expect(screen.getByText(PHONE1.address)).toBeVisible();
+        await expect(screen.findByText(PHONE1.address)).resolves.toBeVisible();
        const shareButton = screen.getByRole("button", { name: /Share/ });
        await userEvent.click(shareButton);

@@ -452,7 +412,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        expect(screen.getByText(EMAIL1.address)).toBeVisible();
+        await expect(screen.findByText(EMAIL1.address)).resolves.toBeVisible();
        const revokeButton = screen.getByRole("button", { name: /Revoke/ });
        await userEvent.click(revokeButton);

@@ -475,7 +435,7 @@ describe("AddRemoveThreepids", () => {
            },
        );

-        expect(screen.getByText(PHONE1.address)).toBeVisible();
+        await expect(screen.findByText(PHONE1.address)).resolves.toBeVisible();
        const revokeButton = screen.getByRole("button", { name: /Revoke/ });
        await userEvent.click(revokeButton);

@@ -596,4 +556,48 @@ describe("AddRemoveThreepids", () => {
            }),
        );
    });
+
+    it("should render a loader while loading", async () => {
+        render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Email}
+                threepids={[]}
+                isLoading={true}
+                onChange={() => {}}
+            />,
+        );
+
+        expect(screen.getByLabelText("Loading…")).toBeInTheDocument();
+    });
+
+    it("should render email addresses", async () => {
+        const { container } = render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Email}
+                threepids={[EMAIL1]}
+                isLoading={false}
+                onChange={() => {}}
+            />,
+        );
+
+        await expect(screen.findByText(EMAIL1.address)).resolves.toBeVisible();
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should render phone numbers", async () => {
+        const { container } = render(
+            <AddRemoveThreepids
+                mode="hs"
+                medium={ThreepidMedium.Phone}
+                threepids={[PHONE1]}
+                isLoading={false}
+                onChange={() => {}}
+            />,
+        );
+
+        await expect(screen.findByText(PHONE1.address)).resolves.toBeVisible();
+        expect(container).toMatchSnapshot();
+    });
 });