maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

* Add E2E test to verify theme change

* PR fixes
This commit is contained in:
Abhishek Sunil 2023-06-12 21:44:40 +05:30 committed by GitHub
parent a5c9729f5f
commit dbf11cc04b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/web/pages/settings/my-account/appearance.tsx
View File

@ -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>

45
apps/web/playwright/change-theme.e2e.ts Normal file
View File

@ -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");
});
});

3
packages/features/settings/ThemeLabel.tsx
View File

@ -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"