test(e2e): add colorscheme tests

stephane-r · Dec 8, 2023 · fb2a27d · fb2a27d
1 parent ec0adf3
commit fb2a27d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/e2e/colorScheme.spec.ts b/e2e/colorScheme.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+
+test("colorscheme interface", async ({ page }) => {
+  await page.goto("localhost:3000");
+
+  await expect(
+    page.locator("html[data-mantine-color-scheme=light]"),
+  ).toBeVisible();
+
+  await page.getByRole("button", { name: "Toggle color scheme" }).click();
+
+  await expect(
+    page.locator("html[data-mantine-color-scheme=light]"),
+  ).not.toBeVisible();
+  await expect(
+    page.locator("html[data-mantine-color-scheme=dark]"),
+  ).toBeVisible();
+
+  await expect(page).toHaveScreenshot();
+});
diff --git a/e2e/colorScheme.spec.ts-snapshots/colorscheme-interface-1-chromium-darwin.png b/e2e/colorScheme.spec.ts-snapshots/colorscheme-interface-1-chromium-darwin.png
diff --git a/src/components/ColorScheme.tsx b/src/components/ColorScheme.tsx
@@ -23,6 +23,7 @@ export const ColorScheme = memo(() => {
       style={{ height: 36, width: 36 }}
       onClick={() => toggleColorScheme()}
       title="Toggle color scheme"
+      aria-label="Toggle color scheme"
     >
       {colorScheme === "dark" ? (
         <IconSun size={18} />