Absorb the matrix-react-sdk repository (#28192)

Co-authored-by: github-merge-queue <118344674+github-merge-queue@users.noreply.github.com> Co-authored-by: github-merge-queue <github-merge-queue@users.noreply.github.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Florian Duros <florian.duros@ormaz.fr> Co-authored-by: Kim Brose <kim.brose@nordeck.net> Co-authored-by: Florian Duros <florianduros@element.io> Co-authored-by: R Midhun Suresh <hi@midhun.dev> Co-authored-by: dbkr <986903+dbkr@users.noreply.github.com> Co-authored-by: ElementRobot <releases@riot.im> Co-authored-by: dbkr <dbkr@users.noreply.github.com> Co-authored-by: David Baker <dbkr@users.noreply.github.com> Co-authored-by: Michael Telatynski <7t3chguy@gmail.com> Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> Co-authored-by: David Langley <davidl@element.io> Co-authored-by: Michael Weimann <michaelw@matrix.org> Co-authored-by: Timshel <Timshel@users.noreply.github.com> Co-authored-by: Sahil Silare <32628578+sahil9001@users.noreply.github.com> Co-authored-by: Will Hunt <will@half-shot.uk> Co-authored-by: Hubert Chathi <hubert@uhoreg.ca> Co-authored-by: Andrew Ferrazzutti <andrewf@element.io> Co-authored-by: Robin <robin@robin.town> Co-authored-by: Tulir Asokan <tulir@maunium.net>
2026-11-03 06:55:44 +00:00 · 2024-10-16 13:31:55 +01:00
parent 2b99496025
commit c05c429803
3280 changed files with 586617 additions and 905 deletions
@@ -0,0 +1,143 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+const USER_NAME = "Bob";
+const USER_NAME_NEW = "Alice";
+
+test.describe("Account user settings tab", () => {
+    test.use({
+        displayName: USER_NAME,
+        config: {
+            default_country_code: "US", // For checking the international country calling code
+        },
+        uut: async ({ app, user }, use) => {
+            const locator = await app.settings.openUserSettings("Account");
+            await use(locator);
+        },
+    });
+
+    test("should be rendered properly", async ({ uut, user }) => {
+        await expect(uut).toMatchScreenshot("account.png");
+
+        // Assert that the top heading is rendered
+        await expect(uut.getByRole("heading", { name: "Account", exact: true })).toBeVisible();
+
+        const profile = uut.locator(".mx_UserProfileSettings_profile");
+        await profile.scrollIntoViewIfNeeded();
+        await expect(profile.getByRole("textbox", { name: "Display Name" })).toHaveValue(USER_NAME);
+
+        // Assert that a userId is rendered
+        expect(uut.getByLabel("Username")).toHaveText(user.userId);
+
+        // Wait until spinners disappear
+        await expect(uut.getByTestId("accountSection").locator(".mx_Spinner")).not.toBeVisible();
+        await expect(uut.getByTestId("discoverySection").locator(".mx_Spinner")).not.toBeVisible();
+
+        const accountSection = uut.getByTestId("accountSection");
+        accountSection.scrollIntoViewIfNeeded();
+        // Assert that input areas for changing a password exists
+        await expect(accountSection.getByLabel("Current password")).toBeVisible();
+        await expect(accountSection.getByLabel("New Password")).toBeVisible();
+        await expect(accountSection.getByLabel("Confirm password")).toBeVisible();
+
+        // Check email addresses area
+        const emailAddresses = uut.getByTestId("mx_AccountEmailAddresses");
+        await emailAddresses.scrollIntoViewIfNeeded();
+        // Assert that an input area for a new email address is rendered
+        await expect(emailAddresses.getByRole("textbox", { name: "Email Address" })).toBeVisible();
+        // Assert the add button is visible
+        await expect(emailAddresses.getByRole("button", { name: "Add" })).toBeVisible();
+
+        // Check phone numbers area
+        const phoneNumbers = uut.getByTestId("mx_AccountPhoneNumbers");
+        await phoneNumbers.scrollIntoViewIfNeeded();
+        // Assert that an input area for a new phone number is rendered
+        await expect(phoneNumbers.getByRole("textbox", { name: "Phone Number" })).toBeVisible();
+        // Assert that the add button is rendered
+        await expect(phoneNumbers.getByRole("button", { name: "Add" })).toBeVisible();
+
+        // Assert the account deactivation button is displayed
+        const accountManagementSection = uut.getByTestId("account-management-section");
+        await accountManagementSection.scrollIntoViewIfNeeded();
+        await expect(accountManagementSection.getByRole("button", { name: "Deactivate Account" })).toHaveClass(
+            /mx_AccessibleButton_kind_danger/,
+        );
+    });
+
+    test("should respond to small screen sizes", async ({ page, uut }) => {
+        await page.setViewportSize({ width: 700, height: 600 });
+        await expect(uut).toMatchScreenshot("account-smallscreen.png");
+    });
+
+    test("should show tooltips on narrow screen", async ({ page, uut }) => {
+        await page.setViewportSize({ width: 700, height: 600 });
+        await page.getByRole("tab", { name: "Account" }).hover();
+        await expect(page.getByRole("tooltip")).toHaveText("Account");
+    });
+
+    test("should support adding and removing a profile picture", async ({ uut, page }) => {
+        const profileSettings = uut.locator(".mx_UserProfileSettings");
+        // Upload a picture
+        await profileSettings.getByAltText("Upload").setInputFiles("playwright/sample-files/riot.png");
+
+        // Image should be visible
+        await expect(profileSettings.locator(".mx_AvatarSetting_avatar img")).toBeVisible();
+
+        // Open the menu & click remove
+        await profileSettings.getByRole("button", { name: "Profile Picture" }).click();
+        await page.getByRole("menuitem", { name: "Remove" }).click();
+
+        // Assert that the image disappeared
+        await expect(profileSettings.locator(".mx_AvatarSetting_avatar img")).not.toBeVisible();
+    });
+
+    test("should set a country calling code based on default_country_code", async ({ uut }) => {
+        // Check phone numbers area
+        const accountPhoneNumbers = uut.getByTestId("mx_AccountPhoneNumbers");
+        await accountPhoneNumbers.scrollIntoViewIfNeeded();
+        // Assert that an input area for a new phone number is rendered
+        await expect(accountPhoneNumbers.getByRole("textbox", { name: "Phone Number" })).toBeVisible();
+
+        // Check a new phone number dropdown menu
+        const dropdown = accountPhoneNumbers.locator(".mx_PhoneNumbers_country");
+        await dropdown.scrollIntoViewIfNeeded();
+        // Assert that the country calling code of the United States is visible
+        await expect(dropdown.getByText(/\+1/)).toBeVisible();
+
+        // Click the button to display the dropdown menu
+        await dropdown.getByRole("button", { name: "Country Dropdown" }).click();
+
+        // Assert that the option for calling code of the United Kingdom is visible
+        await expect(dropdown.getByRole("option", { name: /United Kingdom/ })).toBeVisible();
+
+        // Click again to close the dropdown
+        await dropdown.getByRole("button", { name: "Country Dropdown" }).click();
+
+        // Assert that the default value is rendered again
+        await expect(dropdown.getByText(/\+1/)).toBeVisible();
+
+        await expect(accountPhoneNumbers.getByRole("button", { name: "Add" })).toBeVisible();
+    });
+
+    test("should support changing a display name", async ({ uut, page, app }) => {
+        // Change the diaplay name to USER_NAME_NEW
+        const displayNameInput = uut
+            .locator(".mx_SettingsTab .mx_UserProfileSettings")
+            .getByRole("textbox", { name: "Display Name" });
+        await displayNameInput.fill(USER_NAME_NEW);
+        await displayNameInput.press("Enter");
+
+        await app.closeDialog();
+
+        // Assert the avatar's initial characters are set
+        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
+    });
+});
@@ -0,0 +1,55 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from ".";
+
+test.describe("Appearance user settings tab", () => {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test("should be rendered properly", async ({ page, user, app }) => {
+        const tab = await app.settings.openUserSettings("Appearance");
+
+        // Click "Show advanced" link button
+        await tab.getByRole("button", { name: "Show advanced" }).click();
+
+        // Assert that "Hide advanced" link button is rendered
+        await expect(tab.getByRole("button", { name: "Hide advanced" })).toBeVisible();
+
+        await expect(tab).toMatchScreenshot("appearance-tab.png");
+    });
+
+    test("should support changing font size by using the font size dropdown", async ({ page, app, user }) => {
+        await app.settings.openUserSettings("Appearance");
+
+        const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
+        const fontDropdown = tab.locator(".mx_FontScalingPanel_Dropdown");
+        await expect(fontDropdown.getByLabel("Font size")).toBeVisible();
+
+        // Default browser font size is 16px and the select value is 0
+        // -4 value is 12px
+        await fontDropdown.getByLabel("Font size").selectOption({ value: "-4" });
+
+        await expect(page).toMatchScreenshot("window-12px.png", { includeDialogBackground: true });
+    });
+
+    test("should support enabling system font", async ({ page, app, user }) => {
+        await app.settings.openUserSettings("Appearance");
+        const tab = page.getByTestId("mx_AppearanceUserSettingsTab");
+
+        // Click "Show advanced" link button
+        await tab.getByRole("button", { name: "Show advanced" }).click();
+
+        await tab.locator(".mx_Checkbox", { hasText: "Use bundled emoji font" }).click();
+        await tab.locator(".mx_Checkbox", { hasText: "Use a system font" }).click();
+
+        // Assert that the font-family value was removed
+        await expect(page.locator("body")).toHaveCSS("font-family", '""');
+    });
+});
@@ -0,0 +1,233 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { Locator, Page } from "@playwright/test";
+
+import { ElementAppPage } from "../../../pages/ElementAppPage";
+import { test as base, expect } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+import { Layout } from "../../../../src/settings/enums/Layout";
+
+export { expect };
+
+/**
+ * Set up for the appearance tab test
+ */
+export const test = base.extend<{
+    util: Helpers;
+}>({
+    util: async ({ page, app }, use) => {
+        await use(new Helpers(page, app));
+    },
+});
+
+/**
+ * A collection of helper functions for the appearance tab test
+ * The goal is to make easier to get and interact with the button, input, or other elements of the appearance tab
+ */
+class Helpers {
+    private CUSTOM_THEME_URL = "http://custom.theme";
+    private CUSTOM_THEME = {
+        name: "Custom theme",
+        isDark: false,
+        colors: {},
+    };
+
+    constructor(
+        private page: Page,
+        private app: ElementAppPage,
+    ) {}
+
+    /**
+     * Open the appearance tab
+     */
+    openAppearanceTab() {
+        return this.app.settings.openUserSettings("Appearance");
+    }
+
+    /**
+     * Compare screenshot and hide the matrix chat
+     * @param locator
+     * @param screenshot
+     */
+    assertScreenshot(locator: Locator, screenshot: `${string}.png`) {
+        return expect(locator).toMatchScreenshot(screenshot, {
+            css: `
+                   #matrixchat {
+                        display: none;
+                    }
+                `,
+        });
+    }
+
+    // Theme Panel
+
+    /**
+     * Disable in the settings the system theme
+     */
+    disableSystemTheme() {
+        return this.app.settings.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
+    }
+
+    /**
+     * Return the theme section
+     */
+    getThemePanel() {
+        return this.page.getByTestId("themePanel");
+    }
+
+    /**
+     * Return the system theme toggle
+     */
+    getMatchSystemThemeCheckbox() {
+        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
+    }
+
+    /**
+     * Return the theme radio button
+     * @param theme - the theme to select
+     * @private
+     */
+    private getThemeRadio(theme: string) {
+        return this.getThemePanel().getByRole("radio", { name: theme });
+    }
+
+    /**
+     * Return the light theme radio button
+     */
+    getLightTheme() {
+        return this.getThemeRadio("Light");
+    }
+
+    /**
+     * Return the dark theme radio button
+     */
+    getDarkTheme() {
+        return this.getThemeRadio("Dark");
+    }
+
+    /**
+     * Return the custom theme radio button
+     */
+    getCustomTheme() {
+        return this.getThemeRadio(this.CUSTOM_THEME.name);
+    }
+
+    /**
+     * Return the high contrast theme radio button
+     */
+    getHighContrastTheme() {
+        return this.getThemeRadio("High contrast");
+    }
+
+    /**
+     * Add a custom theme
+     * Mock the request to the custom and return a fake local custom theme
+     */
+    async addCustomTheme() {
+        await this.page.route(this.CUSTOM_THEME_URL, (route) =>
+            route.fulfill({ body: JSON.stringify(this.CUSTOM_THEME) }),
+        );
+        await this.page.getByRole("textbox", { name: "Add custom theme" }).fill(this.CUSTOM_THEME_URL);
+        await this.page.getByRole("button", { name: "Add custom theme" }).click();
+        await this.page.unroute(this.CUSTOM_THEME_URL);
+    }
+
+    /**
+     * Remove the custom theme
+     */
+    removeCustomTheme() {
+        return this.getThemePanel().getByRole("listitem", { name: this.CUSTOM_THEME.name }).getByRole("button").click();
+    }
+
+    // Message layout Panel
+
+    /**
+     * Create and display a room named Test Room
+     */
+    async createAndDisplayRoom() {
+        await this.app.client.createRoom({ name: "Test Room" });
+        await this.app.viewRoomByName("Test Room");
+    }
+
+    /**
+     * Assert the room layout
+     * @param layout
+     * @private
+     */
+    private assertRoomLayout(layout: Layout) {
+        return expect(this.page.locator(`.mx_RoomView_body[data-layout=${layout}]`)).toBeVisible();
+    }
+
+    /**
+     * Assert the room layout is modern
+     */
+    assertModernLayout() {
+        return this.assertRoomLayout(Layout.Group);
+    }
+
+    /**
+     * Assert the room layout is bubble
+     */
+    assertBubbleLayout() {
+        return this.assertRoomLayout(Layout.Bubble);
+    }
+
+    /**
+     * Return the layout panel
+     */
+    getMessageLayoutPanel() {
+        return this.page.getByTestId("layoutPanel");
+    }
+
+    /**
+     * Return the layout radio button
+     * @param layoutName
+     * @private
+     */
+    private getLayout(layoutName: string) {
+        return this.getMessageLayoutPanel().getByRole("radio", { name: layoutName });
+    }
+
+    /**
+     * Return the message bubbles layout radio button
+     */
+    getBubbleLayout() {
+        return this.getLayout("Message bubbles");
+    }
+
+    /**
+     * Return the modern layout radio button
+     */
+    getModernLayout() {
+        return this.getLayout("Modern");
+    }
+
+    /**
+     * Return the IRC layout radio button
+     */
+    getIRCLayout() {
+        return this.getLayout("IRC (experimental)");
+    }
+
+    /**
+     * Return the compact layout checkbox
+     */
+    getCompactLayoutCheckbox() {
+        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
+    }
+
+    /**
+     * Assert the compact layout is enabled
+     */
+    assertCompactLayout() {
+        return expect(
+            this.page.locator("#matrixchat .mx_MatrixChat_wrapper.mx_MatrixChat_useCompactLayout"),
+        ).toBeVisible();
+    }
+}
@@ -0,0 +1,58 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from ".";
+
+test.describe("Appearance user settings tab", () => {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test.describe("Message Layout Panel", () => {
+        test.beforeEach(async ({ app, user, util }) => {
+            await util.createAndDisplayRoom();
+            await util.assertModernLayout();
+            await util.openAppearanceTab();
+        });
+
+        test("should change the message layout from modern to bubble", async ({ page, app, user, util }) => {
+            await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-modern.png");
+
+            await util.getBubbleLayout().click();
+
+            // Assert that modern are irc layout are not selected
+            await expect(util.getBubbleLayout()).toBeChecked();
+            await expect(util.getModernLayout()).not.toBeChecked();
+            await expect(util.getIRCLayout()).not.toBeChecked();
+
+            // Assert that the room layout is set to bubble layout
+            await util.assertBubbleLayout();
+            await util.assertScreenshot(util.getMessageLayoutPanel(), "message-layout-panel-bubble.png");
+        });
+
+        test("should enable compact layout when the modern layout is selected", async ({ page, app, user, util }) => {
+            await expect(util.getCompactLayoutCheckbox()).not.toBeChecked();
+
+            await util.getCompactLayoutCheckbox().click();
+            await util.assertCompactLayout();
+        });
+
+        test("should disable compact layout when the modern layout is not selected", async ({
+            page,
+            app,
+            user,
+            util,
+        }) => {
+            await expect(util.getCompactLayoutCheckbox()).not.toBeDisabled();
+
+            // Select the bubble layout, which should disable the compact layout checkbox
+            await util.getBubbleLayout().click();
+            await expect(util.getCompactLayoutCheckbox()).toBeDisabled();
+        });
+    });
+});
@@ -0,0 +1,81 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { expect, test } from ".";
+
+test.describe("Appearance user settings tab", () => {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test.describe("Theme Choice Panel", () => {
+        test.beforeEach(async ({ app, user, util }) => {
+            // Disable the default theme for consistency in case ThemeWatcher automatically chooses it
+            await util.disableSystemTheme();
+            await util.openAppearanceTab();
+        });
+
+        test("should be rendered with the light theme selected", async ({ page, app, util }) => {
+            // Assert that 'Match system theme' is not checked
+            await expect(util.getMatchSystemThemeCheckbox()).not.toBeChecked();
+
+            // Assert that the light theme is selected
+            await expect(util.getLightTheme()).toBeChecked();
+            // Assert that the dark and high contrast themes are not selected
+            await expect(util.getDarkTheme()).not.toBeChecked();
+            await expect(util.getHighContrastTheme()).not.toBeChecked();
+
+            await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-light.png");
+        });
+
+        test("should disable the themes when the system theme is clicked", async ({ page, app, util }) => {
+            await util.getMatchSystemThemeCheckbox().click();
+
+            // Assert that the themes are disabled
+            await expect(util.getLightTheme()).toBeDisabled();
+            await expect(util.getDarkTheme()).toBeDisabled();
+            await expect(util.getHighContrastTheme()).toBeDisabled();
+
+            await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-match-system-enabled.png");
+        });
+
+        test("should change the theme to dark", async ({ page, app, util }) => {
+            // Assert that the light theme is selected
+            await expect(util.getLightTheme()).toBeChecked();
+
+            await util.getDarkTheme().click();
+
+            // Assert that the light and high contrast themes are not selected
+            await expect(util.getLightTheme()).not.toBeChecked();
+            await expect(util.getDarkTheme()).toBeChecked();
+            await expect(util.getHighContrastTheme()).not.toBeChecked();
+
+            await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-dark.png");
+        });
+
+        test.describe("custom theme", () => {
+            test.use({
+                labsFlags: ["feature_custom_themes"],
+            });
+
+            test("should render the custom theme section", async ({ page, app, util }) => {
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
+            });
+
+            test("should be able to add and remove a custom theme", async ({ page, app, util }) => {
+                await util.addCustomTheme();
+
+                await expect(util.getCustomTheme()).not.toBeChecked();
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme-added.png");
+
+                await util.removeCustomTheme();
+                await expect(util.getThemePanel()).toMatchScreenshot("theme-panel-custom-theme.png");
+            });
+        });
+    });
+});
@@ -0,0 +1,97 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Device manager", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test.beforeEach(async ({ homeserver, user }) => {
+        // create 3 extra sessions to manage
+        for (let i = 0; i < 3; i++) {
+            await homeserver.loginUser(user.userId, user.password);
+        }
+    });
+
+    test("should display sessions", async ({ page, app }) => {
+        await app.settings.openUserSettings("Sessions");
+        const tab = page.locator(".mx_SettingsTab");
+
+        await expect(tab.getByText("Current session", { exact: true })).toBeVisible();
+
+        const currentSessionSection = tab.getByTestId("current-session-section");
+        await expect(currentSessionSection.getByText("Unverified session")).toBeVisible();
+
+        // current session details opened
+        await currentSessionSection.getByRole("button", { name: "Show details" }).click();
+        await expect(currentSessionSection.getByText("Session details")).toBeVisible();
+
+        // close current session details
+        await currentSessionSection.getByRole("button", { name: "Hide details" }).click();
+        await expect(currentSessionSection.getByText("Session details")).not.toBeVisible();
+
+        const securityRecommendationsSection = tab.getByTestId("security-recommendations-section");
+        await expect(securityRecommendationsSection.getByText("Security recommendations")).toBeVisible();
+        await securityRecommendationsSection.getByRole("button", { name: "View all (3)" }).click();
+
+        /**
+         * Other sessions section
+         */
+        await expect(tab.getByText("Other sessions")).toBeVisible();
+        // filter applied after clicking through from security recommendations
+        await expect(tab.getByLabel("Filter devices")).toHaveText("Show: Unverified");
+        const filteredDeviceListItems = tab.locator(".mx_FilteredDeviceList_listItem");
+        await expect(filteredDeviceListItems).toHaveCount(3);
+
+        // select two sessions
+        // force click as the input element itself is not visible (its size is zero)
+        await filteredDeviceListItems.first().click({ force: true });
+        await filteredDeviceListItems.last().click({ force: true });
+
+        // sign out from list selection action buttons
+        await tab.getByRole("button", { name: "Sign out", exact: true }).click();
+        await page.getByRole("dialog").getByTestId("dialog-primary-button").click();
+
+        // list updated after sign out
+        await expect(filteredDeviceListItems).toHaveCount(1);
+        // security recommendation count updated
+        await expect(tab.getByRole("button", { name: "View all (1)" })).toBeVisible();
+
+        const sessionName = `Alice's device`;
+        // open the first session
+        const firstSession = filteredDeviceListItems.first();
+        await firstSession.getByRole("button", { name: "Show details" }).click();
+
+        await expect(firstSession.getByText("Session details")).toBeVisible();
+
+        await firstSession.getByRole("button", { name: "Rename" }).click();
+        await firstSession.getByTestId("device-rename-input").type(sessionName);
+        await firstSession.getByRole("button", { name: "Save" }).click();
+        // there should be a spinner while device updates
+        await expect(firstSession.locator(".mx_Spinner")).toBeVisible();
+        // wait for spinner to complete
+        await expect(firstSession.locator(".mx_Spinner")).not.toBeVisible();
+
+        // session name updated in details
+        await expect(firstSession.locator(".mx_DeviceDetailHeading h4").getByText(sessionName)).toBeVisible();
+        // and main list item
+        await expect(firstSession.locator(".mx_DeviceTile h4").getByText(sessionName)).toBeVisible();
+
+        // sign out using the device details sign out
+        await firstSession.getByRole("button", { name: "Sign out of this session" }).click();
+
+        // confirm the signout
+        await page.getByRole("dialog").getByTestId("dialog-primary-button").click();
+
+        // no other sessions or security recommendations sections when only one session
+        await expect(tab.getByText("Other sessions")).not.toBeVisible();
+        await expect(tab.getByTestId("security-recommendations-section")).not.toBeVisible();
+    });
+});
@@ -0,0 +1,55 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("General room settings tab", () => {
+    const roomName = "Test Room";
+
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test.beforeEach(async ({ user, app }) => {
+        await app.client.createRoom({ name: roomName });
+        await app.viewRoomByName(roomName);
+    });
+
+    test("should be rendered properly", async ({ page, app }) => {
+        const settings = await app.settings.openRoomSettings("General");
+
+        // Assert that "Show less" details element is rendered
+        await expect(settings.getByText("Show less")).toBeVisible();
+
+        await expect(settings).toMatchScreenshot("General-room-settings-tab-should-be-rendered-properly-1.png");
+
+        // Click the "Show less" details element
+        await settings.getByText("Show less").click();
+
+        // Assert that "Show more" details element is rendered instead of "Show more"
+        await expect(settings.getByText("Show less")).not.toBeVisible();
+        await expect(settings.getByText("Show more")).toBeVisible();
+    });
+
+    test("long address should not cause dialog to overflow", async ({ page, app }) => {
+        const settings = await app.settings.openRoomSettings("General");
+        // 1. Set the room-address to be a really long string
+        const longString = "abcasdhjasjhdaj1jh1asdhasjdhajsdhjavhjksd".repeat(4);
+        await settings.locator("#roomAliases input[label='Room address']").fill(longString);
+        await settings.locator("#roomAliases").getByText("Add", { exact: true }).click();
+
+        // 2. wait for the new setting to apply ...
+        await expect(settings.locator("#canonicalAlias")).toHaveValue(`#${longString}:localhost`);
+
+        // 3. Check if the dialog overflows
+        const dialogBoundingBox = await page.locator(".mx_Dialog").boundingBox();
+        const inputBoundingBox = await settings.locator("#canonicalAlias").boundingBox();
+        // Assert that the width of the select element is less than that of .mx_Dialog div.
+        expect(inputBoundingBox.width).toBeLessThan(dialogBoundingBox.width);
+    });
+});
@@ -0,0 +1,68 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.use({
+    locale: "en-GB",
+    timezoneId: "Europe/London",
+});
+
+test.describe("Preferences user settings tab", () => {
+    test.use({
+        displayName: "Bob",
+        uut: async ({ app, user }, use) => {
+            const locator = await app.settings.openUserSettings("Preferences");
+            await use(locator);
+        },
+    });
+
+    test("should be rendered properly", async ({ app, page, user }) => {
+        page.setViewportSize({ width: 1024, height: 3300 });
+        const tab = await app.settings.openUserSettings("Preferences");
+        // Assert that the top heading is rendered
+        await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
+        await expect(tab).toMatchScreenshot("Preferences-user-settings-tab-should-be-rendered-properly-1.png");
+    });
+
+    test("should be able to change the app language", async ({ uut, user }) => {
+        // Check language and region setting dropdown
+        const languageInput = uut.getByRole("button", { name: "Language Dropdown" });
+        await languageInput.scrollIntoViewIfNeeded();
+        // Check the default value
+        await expect(languageInput.getByText("English")).toBeVisible();
+        // Click the button to display the dropdown menu
+        await languageInput.click();
+        // Assert that the default option is rendered and highlighted
+        languageInput.getByRole("option", { name: /Albanian/ });
+        await expect(languageInput.getByRole("option", { name: /Albanian/ })).toHaveClass(
+            /mx_Dropdown_option_highlight/,
+        );
+        await expect(languageInput.getByRole("option", { name: /Deutsch/ })).toBeVisible();
+        // Click again to close the dropdown
+        await languageInput.click();
+        // Assert that the default value is rendered again
+        await expect(languageInput.getByText("English")).toBeVisible();
+    });
+
+    test("should be able to change the timezone", async ({ uut, user }) => {
+        // Check language and region setting dropdown
+        const timezoneInput = uut.locator(".mx_dropdownUserTimezone");
+        const timezoneValue = uut.locator("#mx_dropdownUserTimezone_value");
+        await timezoneInput.scrollIntoViewIfNeeded();
+        // Check the default value
+        await expect(timezoneValue.getByText("Browser default")).toBeVisible();
+        // Click the button to display the dropdown menu
+        await timezoneInput.getByRole("button", { name: "Set timezone" }).click();
+        // Select a different value
+        timezoneInput.getByRole("option", { name: /Africa\/Abidjan/ }).click();
+        // Check the new value
+        await expect(timezoneValue.getByText("Africa/Abidjan")).toBeVisible();
+    });
+});
@@ -0,0 +1,48 @@
+/*
+ * Copyright 2024 New Vector Ltd.
+ * Copyright 2024 The Matrix.org Foundation C.I.C.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { Locator } from "@playwright/test";
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Roles & Permissions room settings tab", () => {
+    const roomName = "Test room";
+
+    test.use({
+        displayName: "Alice",
+    });
+
+    let settings: Locator;
+
+    test.beforeEach(async ({ user, app }) => {
+        await app.client.createRoom({ name: roomName });
+        await app.viewRoomByName(roomName);
+        settings = await app.settings.openRoomSettings("Roles & Permissions");
+    });
+
+    test("should be able to change the role of a user", async ({ page, app, user }) => {
+        const privilegedUserSection = settings.locator(".mx_SettingsFieldset").first();
+        const applyButton = privilegedUserSection.getByRole("button", { name: "Apply" });
+
+        // Alice is admin (100) and the Apply button should be disabled
+        await expect(applyButton).toBeDisabled();
+        let combobox = privilegedUserSection.getByRole("combobox", { name: user.userId });
+        await expect(combobox).toHaveValue("100");
+
+        // Change the role of Alice to Moderator (50)
+        await combobox.selectOption("Moderator");
+        await expect(combobox).toHaveValue("50");
+        await applyButton.click();
+
+        // Reload and check Alice is still Moderator (50)
+        await page.reload();
+        settings = await app.settings.openRoomSettings("Roles & Permissions");
+        combobox = privilegedUserSection.getByRole("combobox", { name: user.userId });
+        await expect(combobox).toHaveValue("50");
+    });
+});
@@ -0,0 +1,74 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2024 The Matrix.org Foundation C.I.C.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+const IntegrationManager = "scalar.vector.im";
+
+test.describe("Security user settings tab", () => {
+    test.describe("with posthog enabled", () => {
+        test.use({
+            displayName: "Hanako",
+            // Enable posthog
+            config: {
+                posthog: {
+                    project_api_key: "foo",
+                    api_host: "bar",
+                },
+                privacy_policy_url: "example.tld", // Set privacy policy URL to enable privacyPolicyLink
+            },
+        });
+
+        test.beforeEach(async ({ page, user }) => {
+            // Dismiss "Notification" toast
+            await page
+                .locator(".mx_Toast_toast", { hasText: "Notifications" })
+                .getByRole("button", { name: "Dismiss" })
+                .click();
+
+            await page.locator(".mx_Toast_buttons").getByRole("button", { name: "Yes" }).click(); // Allow analytics
+        });
+
+        test.describe("AnalyticsLearnMoreDialog", () => {
+            test("should be rendered properly", async ({ app, page }) => {
+                const tab = await app.settings.openUserSettings("Security");
+                await tab.getByRole("button", { name: "Learn more" }).click();
+                await expect(page.locator(".mx_AnalyticsLearnMoreDialog_wrapper .mx_Dialog")).toMatchScreenshot(
+                    "Security-user-settings-tab-with-posthog-enable-b5d89-csLearnMoreDialog-should-be-rendered-properly-1.png",
+                );
+            });
+        });
+
+        test("should contain section to set ID server", async ({ app }) => {
+            const tab = await app.settings.openUserSettings("Security");
+
+            const setIdServer = tab.locator(".mx_SetIdServer");
+            await setIdServer.scrollIntoViewIfNeeded();
+            // Assert that an input area for identity server exists
+            await expect(setIdServer.getByRole("textbox", { name: "Enter a new identity server" })).toBeVisible();
+        });
+
+        test("should enable show integrations as enabled", async ({ app, page }) => {
+            const tab = await app.settings.openUserSettings("Security");
+
+            const setIntegrationManager = tab.locator(".mx_SetIntegrationManager");
+            await setIntegrationManager.scrollIntoViewIfNeeded();
+            await expect(
+                setIntegrationManager.locator(".mx_SetIntegrationManager_heading_manager", {
+                    hasText: IntegrationManager,
+                }),
+            ).toBeVisible();
+            // Make sure integration manager's toggle switch is enabled
+            await expect(setIntegrationManager.locator(".mx_ToggleSwitch_enabled")).toBeVisible();
+            await expect(setIntegrationManager.locator(".mx_SetIntegrationManager_heading_manager")).toHaveText(
+                "Manage integrations(scalar.vector.im)",
+            );
+        });
+    });
+});