tests fix

Author: HardMax71

frontend/e2e/theme.spec.ts

@@ -1,57 +1,47 @@
 import { test, expect } from '@playwright/test';
 
 test.describe('Theme', () => {
-  test.beforeEach(async ({ page }) => {
-    // Clear localStorage to start fresh
+  test('auto theme follows system light preference', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'light' });
     await page.goto('/login');
     await page.evaluate(() => localStorage.removeItem('app-theme'));
-  });
-
-  test('defaults to auto theme (no dark class)', async ({ page }) => {
-    await page.goto('/login');
+    await page.reload();
 
-    // Check that dark class is not present initially (assuming system prefers light)
     const hasDarkClass = await page.evaluate(() =>
       document.documentElement.classList.contains('dark')
     );
-    // This may be true or false depending on system preference
-    expect(typeof hasDarkClass).toBe('boolean');
+    expect(hasDarkClass).toBe(false);
   });
 
-  test('persists theme preference in localStorage', async ({ page }) => {
+  test('auto theme follows system dark preference', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'dark' });
     await page.goto('/login');
-
-    // Set theme via localStorage
-    await page.evaluate(() => localStorage.setItem('app-theme', 'dark'));
+    await page.evaluate(() => localStorage.removeItem('app-theme'));
     await page.reload();
 
-    const storedTheme = await page.evaluate(() => localStorage.getItem('app-theme'));
-    expect(storedTheme).toBe('dark');
+    const hasDarkClass = await page.evaluate(() =>
+      document.documentElement.classList.contains('dark')
+    );
+    expect(hasDarkClass).toBe(true);
   });
 
-  test('applies dark theme when set', async ({ page }) => {
+  test('explicit dark theme overrides system preference', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'light' });
     await page.goto('/login');
-
-    // Set dark theme
-    await page.evaluate(() => {
-      localStorage.setItem('app-theme', 'dark');
-      document.documentElement.classList.add('dark');
-    });
+    await page.evaluate(() => localStorage.setItem('app-theme', 'dark'));
+    await page.reload();
 
     const hasDarkClass = await page.evaluate(() =>
       document.documentElement.classList.contains('dark')
     );
     expect(hasDarkClass).toBe(true);
   });
 
-  test('applies light theme when set', async ({ page }) => {
+  test('explicit light theme overrides system preference', async ({ page }) => {
+    await page.emulateMedia({ colorScheme: 'dark' });
     await page.goto('/login');
-
-    // Set light theme
-    await page.evaluate(() => {
-      localStorage.setItem('app-theme', 'light');
-      document.documentElement.classList.remove('dark');
-    });
+    await page.evaluate(() => localStorage.setItem('app-theme', 'light'));
+    await page.reload();
 
     const hasDarkClass = await page.evaluate(() =>
       document.documentElement.classList.contains('dark')
@@ -61,15 +51,15 @@ test.describe('Theme', () => {
 
   test('theme persists across page navigation', async ({ page }) => {
     await page.goto('/login');
-
-    // Set dark theme
     await page.evaluate(() => localStorage.setItem('app-theme', 'dark'));
-    await page.reload();
-
-    // Navigate to another page
     await page.goto('/register');
 
     const storedTheme = await page.evaluate(() => localStorage.getItem('app-theme'));
     expect(storedTheme).toBe('dark');
+
+    const hasDarkClass = await page.evaluate(() =>
+      document.documentElement.classList.contains('dark')
+    );
+    expect(hasDarkClass).toBe(true);
   });
 });