test: Add E2E test to verify theme change (#9455)

* Add E2E test to verify theme change

* PR fixes

apps/web/pages/settings/my-account/appearance.tsx

@@ -263,7 +263,8 @@ const AppearanceView = () => {
         type="submit"
         loading={mutation.isLoading}
         color="primary"
-        className="mt-8">
+        className="mt-8"
+        data-testid="update-theme-btn">
         {t("update")}
       </Button>
     </Form>

apps/web/playwright/change-theme.e2e.ts

@@ -0,0 +1,45 @@
+import { expect } from "@playwright/test";
+
+import { test } from "./lib/fixtures";
+
+test.describe("Change Theme Test", () => {
+  test("change theme to dark", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await page.goto("/settings/my-account/appearance");
+
+    await page.waitForLoadState("networkidle");
+    //Click the "Dark" theme label
+    await page.click('[data-testid="theme-dark"]');
+    //Click the update button
+    await page.click('[data-testid="update-theme-btn"]');
+    //Wait for the toast to appear
+    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    expect(toast).toBeTruthy();
+    //Go to the profile page and check if the theme is dark
+    await page.goto(`/${pro.username}`);
+    const darkModeClass = await page.getAttribute("html", "class");
+    expect(darkModeClass).toContain("dark");
+  });
+
+  test("change theme to light", async ({ page, users }) => {
+    const pro = await users.create();
+    await pro.apiLogin();
+
+    await page.goto("/settings/my-account/appearance");
+
+    await page.waitForLoadState("networkidle");
+    //Click the "Light" theme label
+    await page.click('[data-testid="theme-light"]');
+    //Click the update theme button
+    await page.click('[data-testid="update-theme-btn"]');
+    //Wait for the toast to appear
+    const toast = await page.waitForSelector("div[class*='data-testid-toast-success']");
+    expect(toast).toBeTruthy();
+    //Go to the profile page and check if the theme is light
+    await page.goto(`/${pro.username}`);
+    const darkModeClass = await page.getAttribute("html", "class");
+    expect(darkModeClass).toContain("light");
+  });
+});

packages/features/settings/ThemeLabel.tsx

@@ -12,7 +12,8 @@ export default function ThemeLabel(props: ThemeLabelProps) {
   return (
     <label
       className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mr-4 sm:mb-0"
-      htmlFor={`theme-${variant}`}>
+      htmlFor={`theme-${variant}`}
+      data-testid={`theme-${variant}`}>
       <input
         className="peer absolute top-8 left-8"
         type="radio"