app/tests/playwright/theme.spec.ts

import { test, expect } from './fixtures';

test.describe('Theme Switching', () => {
  test('user can toggle between light and dark mode', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // Get initial theme
    const initialTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-mantine-color-scheme');
    });

    // Click theme toggle button
    await page.click('[aria-label="Toggle color scheme"]');
    await page.waitForTimeout(500); // Wait for theme transition

    // Check theme changed
    const newTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-mantine-color-scheme');
    });

    expect(newTheme).not.toBe(initialTheme);
    expect(['light', 'dark']).toContain(newTheme);
  });

  test('theme preference persists across page refreshes', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // Set to a specific mode (light)
    await page.evaluate(() => {
      document.documentElement.setAttribute('data-mantine-color-scheme', 'light');
      window.localStorage.setItem('mantine-color-scheme-value', 'light');
    });

    // Get the theme before reload
    const themeBeforeReload = await page.evaluate(() => {
      return window.localStorage.getItem('mantine-color-scheme-value');
    });

    // Refresh page
    await page.reload();
    await page.waitForLoadState('networkidle');

    // Check theme persisted
    const persistedTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-mantine-color-scheme');
    });

    expect(persistedTheme).toBe(themeBeforeReload);
  });

  test('theme toggle icon changes based on current theme', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // The button should be visible
    const toggleButton = page.locator('[aria-label="Toggle color scheme"]');
    await expect(toggleButton).toBeVisible();

    // Icon should exist (either sun or moon)
    const icon = toggleButton.locator('img, svg').first();
    await expect(icon).toBeVisible();
  });
});

test.describe('Theme Visual Appearance', () => {
  test('light mode has light background', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // Force light mode
    await page.evaluate(() => {
      document.documentElement.setAttribute('data-mantine-color-scheme', 'light');
      window.localStorage.setItem('mantine-color-scheme-value', 'light');
    });

    // Reload to apply theme
    await page.reload();
    await page.waitForLoadState('networkidle');

    // Check that we're in light mode
    const colorScheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-mantine-color-scheme');
    });

    expect(colorScheme).toBe('light');
  });

  test('dark mode has dark background', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // Force dark mode
    await page.evaluate(() => {
      document.documentElement.setAttribute('data-mantine-color-scheme', 'dark');
      window.localStorage.setItem('mantine-color-scheme-value', 'dark');
    });

    // Reload to apply theme
    await page.reload();
    await page.waitForLoadState('networkidle');

    // Check that we're in dark mode
    const colorScheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-mantine-color-scheme');
    });

    expect(colorScheme).toBe('dark');
  });
});

test.describe('Theme Auto-Detection', () => {
  test('respects system color scheme preference when set to auto', async ({ page }) => {
    await page.goto('/');
    await page.waitForLoadState('networkidle');

    // The app should detect and apply a theme (either light or dark)
    const appliedTheme = await page.evaluate(() => {
      return document.documentElement.getAttribute('data-mantine-color-scheme');
    });

    // Should be either light or dark, not null
    expect(['light', 'dark']).toContain(appliedTheme);
  });
});