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

Fixes https://github.com/element-hq/element-web/issues/28160
This commit is contained in:
David Baker 2024-10-17 16:45:56 +01:00 committed by GitHub
parent a9bea774f9
commit cb383efb42
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 47 additions and 51 deletions

View file

@ -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();
});
});

View file

@ -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(