Add E2E test for quick settings dialog (#29441)

* Update quick settings menu to use a11y roles.

* Add e2e test to test quick menu rendering

* Use a testid for now.

* lint lint

* Revert aria changes

* revert managed

* write screenshot
This commit is contained in:
Will Hunt
2025-03-10 09:12:38 +00:00
committed by GitHub
parent 179b368809
commit 53065f9437
3 changed files with 20 additions and 0 deletions

View File

@@ -0,0 +1,18 @@
/*
Copyright 2025 New Vector Ltd.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
import { test, expect } from "../../element-web-test";
test.describe("Quick settings menu", () => {
test("should be rendered properly", { tag: "@screenshot" }, async ({ app, page, user }) => {
await page.getByRole("button", { name: "Quick settings" }).click();
// Assert that the top heading is renderedc
const settings = page.getByTestId("quick-settings-menu");
await expect(settings).toBeVisible();
await expect(settings).toMatchScreenshot("quick-settings.png");
});
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

View File

@@ -51,6 +51,8 @@ const QuickSettingsButton: React.FC<{
wrapperClassName={classNames("mx_QuickSettingsButton_ContextMenuWrapper", {
mx_QuickSettingsButton_ContextMenuWrapper_new_room_list: newRoomListEnabled,
})}
// Eventually replace with a properly aria-labelled menu
data-testid="quick-settings-menu"
onFinished={closeMenu}
managed={false}
focusLock={true}