From e157b1d4e86d10e90f7476837f18abdb39d141f6 Mon Sep 17 00:00:00 2001 From: ElementRobot Date: Thu, 7 May 2026 13:12:50 +0200 Subject: [PATCH] Restore the Manage account button text color and add playwright test (#33411) (#33415) * Restore the Manage account button text color and add playwright test * Fix prettier issue * Fix Sonar issue (cherry picked from commit e491fb8c81a32fb94edec1d4cadca4241fda71b1) Co-authored-by: rbondesson --- .../account-user-settings-tab.spec.ts | 43 ++++++++++++++++++ .../account-manage-account-button-linux.png | Bin 0 -> 6499 bytes .../views/settings/UserProfileSettings.tsx | 2 + 3 files changed, 45 insertions(+) create mode 100644 apps/web/playwright/snapshots/settings/account-user-settings-tab.spec.ts/account-manage-account-button-linux.png 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 0000000000000000000000000000000000000000..40f79c05b32272408fb7541e478e75ea63430366 GIT binary patch literal 6499 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 = ({ 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")}