Port the flaky add/remove 3pid test to playwright (#28226)

Fixes https://github.com/element-hq/element-web/issues/28160

playwright/e2e/settings/account-user-settings-tab.spec.ts

@@ -140,4 +140,51 @@ test.describe("Account user settings tab", () => {
         await expect(page.locator(".mx_UserMenu .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
         await expect(page.locator(".mx_RoomView_wrapper .mx_BaseAvatar").getByText("A")).toBeVisible(); // Alice
     });
+
+    // ported to a playwright test because the jest test was very flakey for no obvious reason
+    test("should display an error if the code is incorrect when adding a phone number", async ({ uut, page }) => {
+        const dummyUrl = "https://nowhere.dummy/_matrix/client/unstable/add_threepid/msisdn/submit_token";
+
+        await page.route(
+            `**/_matrix/client/v3/account/3pid/msisdn/requestToken`,
+            async (route) => {
+                await route.fulfill({
+                    json: {
+                        success: true,
+                        sid: "1",
+                        msisdn: "447700900000",
+                        intl_fmt: "+44 7700 900000",
+                        submit_url: dummyUrl,
+                    },
+                });
+            },
+            { times: 1 },
+        );
+
+        await page.route(
+            dummyUrl,
+            async (route) => {
+                await route.fulfill({
+                    status: 400,
+                    json: {
+                        errcode: "M_THREEPID_AUTH_FAILED",
+                        error: "That code is definitely wrong",
+                    },
+                });
+            },
+            { times: 1 },
+        );
+
+        const phoneSection = page.getByTestId("mx_AccountPhoneNumbers");
+        await phoneSection.getByRole("textbox", { name: "Phone Number" }).fill("07700900000");
+        await phoneSection.getByRole("button", { name: "Add" }).click();
+
+        await phoneSection
+            .getByRole("textbox", { name: "Verification code" })
+            .fill("A small eurasian field mouse dancing the paso doble");
+
+        await phoneSection.getByRole("button", { name: "Continue" }).click();
+
+        await expect(page.getByRole("heading", { name: "Unable to verify phone number." })).toBeVisible();
+    });
 });

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

@@ -254,57 +254,6 @@ describe("AddRemoveThreepids", () => {
         expect(onChangeFn).toHaveBeenCalled();
     }, 10000);
 
-    it("should display an error if the code is incorrect", async () => {
-        const onChangeFn = jest.fn();
-        const createDialogFn = jest.spyOn(Modal, "createDialog");
-        mocked(client.requestAdd3pidMsisdnToken).mockResolvedValue({
-            sid: "1",
-            msisdn: PHONE1.address,
-            intl_fmt: "+" + PHONE1.address,
-            success: true,
-            submit_url: "https://example.dummy",
-        });
-
-        render(
-            <AddRemoveThreepids
-                mode="hs"
-                medium={ThreepidMedium.Phone}
-                threepids={[]}
-                isLoading={false}
-                onChange={onChangeFn}
-            />,
-            {
-                wrapper: clientProviderWrapper,
-            },
-        );
-
-        const input = screen.getByRole("textbox", { name: "Phone Number" });
-        await userEvent.type(input, PHONE1_LOCALNUM);
-
-        const countryDropdown = screen.getByRole("button", { name: /Country Dropdown/ });
-        await userEvent.click(countryDropdown);
-        const gbOption = screen.getByRole("option", { name: "🇬🇧 United Kingdom (+44)" });
-        await userEvent.click(gbOption);
-
-        const addButton = screen.getByRole("button", { name: /Add/ });
-        await userEvent.click(addButton);
-
-        mocked(client).addThreePidOnly.mockRejectedValueOnce(new Error("Unauthorized"));
-
-        const verificationInput = screen.getByRole("textbox", { name: "Verification code" });
-        await userEvent.type(verificationInput, "123457");
-
-        const continueButton = screen.getByRole("button", { name: /Continue/ });
-        await userEvent.click(continueButton);
-
-        expect(createDialogFn).toHaveBeenCalledWith(expect.anything(), {
-            description: "Unauthorized",
-            title: "Unable to verify phone number.",
-        });
-
-        expect(onChangeFn).not.toHaveBeenCalled();
-    });
-
     it("should remove an email address", async () => {
         const onChangeFn = jest.fn();
         render(