diff --git a/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts b/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts index b3ec952b01..b4a7b71926 100644 --- a/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts +++ b/apps/web/playwright/e2e/settings/account-user-settings-tab.spec.ts @@ -6,11 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com Please see LICENSE files in the repository root for full details. */ +import { type Route } from "@playwright/test"; + import { test, expect } from "../../element-web-test"; import { getSampleFilePath } from "../../sample-files"; const USER_NAME = "Bob"; const USER_NAME_NEW = "Alice"; +const EXTERNAL_ACCOUNT_MANAGEMENT_URL = "https://just.for.test.io/"; test.describe("Account user settings tab", () => { test.use({ @@ -79,6 +82,46 @@ test.describe("Account user settings tab", () => { await expect(uut).toMatchScreenshot("account-smallscreen.png"); }); + test.describe("with external account management", () => { + test.use({ + page: async ({ page }, runFixture) => { + const authMetadataHandler = async (route: Route): Promise => { + await route.fulfill({ + json: { + issuer: EXTERNAL_ACCOUNT_MANAGEMENT_URL, + authorization_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}authorize`, + token_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}token`, + revocation_endpoint: `${EXTERNAL_ACCOUNT_MANAGEMENT_URL}revoke`, + response_types_supported: ["code"], + grant_types_supported: ["authorization_code"], + code_challenge_methods_supported: ["S256"], + account_management_uri: EXTERNAL_ACCOUNT_MANAGEMENT_URL, + }, + }); + }; + + await page.route("**/_matrix/client/v1/auth_metadata", authMetadataHandler); + await page.route("**/_matrix/client/unstable/org.matrix.msc2965/auth_metadata", authMetadataHandler); + await runFixture(page); + }, + }); + + test("should render the manage account button properly", { tag: "@screenshot" }, async ({ uut, axe }) => { + const manageAccountButton = uut.getByTestId("external-account-management-link"); + + await expect(manageAccountButton).toBeVisible(); + await expect(manageAccountButton).toHaveAttribute("href", EXTERNAL_ACCOUNT_MANAGEMENT_URL); + await expect(manageAccountButton).toHaveAttribute("target", "_blank"); + await expect(manageAccountButton).toHaveText(/Manage account/); + + const profileButtons = uut.locator(".mx_UserProfileSettings_profile_buttons"); + await profileButtons.scrollIntoViewIfNeeded(); + await expect(profileButtons).toMatchScreenshot("account-manage-account-button.png"); + + await expect(axe).toHaveNoViolations(); + }); + }); + test("should show tooltips on narrow screen", async ({ page, uut }) => { await page.setViewportSize({ width: 700, height: 600 }); await page.getByRole("tab", { name: "Account" }).hover(); diff --git a/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png new file mode 100644 index 0000000000..40f79c05b3 Binary files /dev/null and b/apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png differ diff --git a/apps/web/src/components/views/settings/UserProfileSettings.tsx b/apps/web/src/components/views/settings/UserProfileSettings.tsx index 92b4390f36..0ecd5d3dfa 100644 --- a/apps/web/src/components/views/settings/UserProfileSettings.tsx +++ b/apps/web/src/components/views/settings/UserProfileSettings.tsx @@ -63,10 +63,12 @@ const ManageAccountButton: React.FC = ({ externalAccou onClick={null} element="a" kind="primary" + data-kind="primary" target="_blank" rel="noreferrer noopener" href={externalAccountManagementUrl} data-testid="external-account-management-link" + style={{ textDecoration: "none" }} > {_t("settings|general|oidc_manage_button")}