Move language settings to 'preferences' (#12723)

* Move language settings to 'preferences'

Their new home is in this tab

* Update snapshot

* Move playwright test code

* Add test

* tests

* Update screenshot

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

@@ -73,24 +73,6 @@ test.describe("General user settings tab", () => {
         // Assert that the add button is rendered
         await expect(phoneNumbers.getByRole("button", { name: "Add" })).toBeVisible();
 
-        // Check language and region setting dropdown
-        const languageInput = uut.locator(".mx_GeneralUserSettingsTab_section_languageInput");
-        await languageInput.scrollIntoViewIfNeeded();
-        // Check the default value
-        await expect(languageInput.getByText("English")).toBeVisible();
-        // Click the button to display the dropdown menu
-        await languageInput.getByRole("button", { name: "Language Dropdown" }).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.getByRole("button", { name: "Language Dropdown" }).click();
-        // Assert that the default value is rendered again
-        await expect(languageInput.getByText("English")).toBeVisible();
-
         const setIntegrationManager = uut.locator(".mx_SetIntegrationManager");
         await setIntegrationManager.scrollIntoViewIfNeeded();
         await expect(

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2023 Suguru Hirahara
+Copyright 2024 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,6 +20,10 @@ import { test, expect } from "../../element-web-test";
 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, user }) => {
@@ -28,4 +33,24 @@ test.describe("Preferences user settings tab", () => {
         await expect(tab.getByRole("heading", { name: "Preferences" })).toBeVisible();
         await expect(tab).toMatchScreenshot();
     });
+
+    test("should be able to change the app language", async ({ uut, user }) => {
+        // Check language and region setting dropdown
+        const languageInput = uut.locator(".mx_GeneralUserSettingsTab_section_languageInput");
+        await languageInput.scrollIntoViewIfNeeded();
+        // Check the default value
+        await expect(languageInput.getByText("English")).toBeVisible();
+        // Click the button to display the dropdown menu
+        await languageInput.getByRole("button", { name: "Language Dropdown" }).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.getByRole("button", { name: "Language Dropdown" }).click();
+        // Assert that the default value is rendered again
+        await expect(languageInput.getByText("English")).toBeVisible();
+    });
 });