Allow user to set timezone (#12775)

* Allow user to set timezone

* Update test snapshots

---------

Co-authored-by: Florian Duros <florianduros@element.io>

playwright/e2e/settings/preferences-user-settings-tab.spec.ts

@@ -17,6 +17,11 @@ limitations under the License.
 
 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",
@@ -26,9 +31,9 @@ test.describe("Preferences user settings tab", () => {
         },
     });
 
-    test("should be rendered properly", async ({ app, user }) => {
+    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");
@@ -53,4 +58,19 @@ test.describe("Preferences user settings tab", () => {
         // 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();
+    });
 });