test: Add E2E test to verify theme change (#9455)
* Add E2E test to verify theme change * PR fixes
This commit is contained in:
parent
a5c9729f5f
commit
dbf11cc04b
|
@ -263,7 +263,8 @@ const AppearanceView = () => {
|
||||||
type="submit"
|
type="submit"
|
||||||
loading={mutation.isLoading}
|
loading={mutation.isLoading}
|
||||||
color="primary"
|
color="primary"
|
||||||
className="mt-8">
|
className="mt-8"
|
||||||
|
data-testid="update-theme-btn">
|
||||||
{t("update")}
|
{t("update")}
|
||||||
</Button>
|
</Button>
|
||||||
</Form>
|
</Form>
|
||||||
|
|
|
@ -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");
|
||||||
|
});
|
||||||
|
});
|
|
@ -12,7 +12,8 @@ export default function ThemeLabel(props: ThemeLabelProps) {
|
||||||
return (
|
return (
|
||||||
<label
|
<label
|
||||||
className="relative mb-4 flex-1 cursor-pointer text-center last:mb-0 last:mr-0 sm:mr-4 sm:mb-0"
|
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
|
<input
|
||||||
className="peer absolute top-8 left-8"
|
className="peer absolute top-8 left-8"
|
||||||
type="radio"
|
type="radio"
|
||||||
|
|
Loading…
Reference in New Issue
Block a user