app/tests/magnitude/02-theme.mag.ts

import { test } from 'magnitude-test';

test('Theme toggle switches between light and dark modes', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Check: Verify the page loads with a theme
  await agent.check('The page has either a light or dark background');

  // Act: Click the theme toggle button
  await agent.act('Click the theme toggle button');

  // Wait for theme transition
  await agent.act('Wait for 1 second');

  // Check: Verify the theme has changed
  await agent.check('The background color has changed to the opposite theme');

  // Act: Click the theme toggle button again
  await agent.act('Click the theme toggle button');

  // Wait for theme transition
  await agent.act('Wait for 1 second');

  // Check: Verify the theme has changed back
  await agent.check('The background color has changed back to the original theme');
});

test('Light mode displays correct colors', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Act: Ensure we're in light mode by toggling if needed
  await agent.act('If the background is dark, click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Check: Verify light mode colors
  await agent.check('The page has a light background color');
  await agent.check('The sidebar has a light background');
  await agent.check('The text is dark colored for readability');
  await agent.check('The borders are subtle and light-colored');
});

test('Dark mode displays correct colors', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Act: Ensure we're in dark mode by toggling if needed
  await agent.act('If the background is light, click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Check: Verify dark mode colors
  await agent.check('The page has a dark background color');
  await agent.check('The sidebar has a dark background');
  await agent.check('The text is light colored for readability');
  await agent.check('The borders are dark-colored');
});

test('Theme persists across page refreshes', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Act: Set to light mode
  await agent.act('If the background is dark, click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Act: Refresh the page
  await agent.act('Refresh the page');
  await agent.act('Wait for the page to load');

  // Check: Verify light mode persisted
  await agent.check('The page still has a light background color');

  // Act: Switch to dark mode
  await agent.act('Click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Act: Refresh the page again
  await agent.act('Refresh the page');
  await agent.act('Wait for the page to load');

  // Check: Verify dark mode persisted
  await agent.check('The page still has a dark background color');
});

test('Theme affects all UI components', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Act: Ensure light mode
  await agent.act('If the background is dark, click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Check: Verify all components use light theme
  await agent.check('The navigation sidebar uses light colors');
  await agent.check('The main content area uses light colors');
  await agent.check('All buttons and inputs use light theme styling');

  // Act: Switch to dark mode
  await agent.act('Click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Check: Verify all components use dark theme
  await agent.check('The navigation sidebar uses dark colors');
  await agent.check('The main content area uses dark colors');
  await agent.check('All buttons and inputs use dark theme styling');
});

test('Theme toggle icon changes based on current theme', async (agent) => {
  // Act: Navigate to the homepage
  await agent.act('Navigate to the homepage');

  // Act: Ensure light mode
  await agent.act('If the background is dark, click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Check: Verify icon shows moon (indicating can switch to dark)
  await agent.check('The theme toggle button shows a moon icon');

  // Act: Switch to dark mode
  await agent.act('Click the theme toggle button');
  await agent.act('Wait for 1 second');

  // Check: Verify icon shows sun (indicating can switch to light)
  await agent.check('The theme toggle button shows a sun icon');
});