From cb383efb4283680eb05691dc372fab339e0f2005 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 17 Oct 2024 16:45:56 +0100 Subject: [PATCH] Port the flaky add/remove 3pid test to playwright (#28226) Fixes https://github.com/element-hq/element-web/issues/28160 --- .../account-user-settings-tab.spec.ts | 47 +++++++++++++++++ .../settings/AddRemoveThreepids-test.tsx | 51 ------------------- 2 files changed, 47 insertions(+), 51 deletions(-) diff --git a/playwright/e2e/settings/account-user-settings-tab.spec.ts b/playwright/e2e/settings/account-user-settings-tab.spec.ts index ce54995d45..5492094f93 100644 --- a/playwright/e2e/settings/account-user-settings-tab.spec.ts +++ b/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(); + }); }); diff --git a/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx b/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx index 31b57596f8..61a612fe8f 100644 --- a/test/unit-tests/components/views/settings/AddRemoveThreepids-test.tsx +++ b/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( - , - { - 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(