62 lines
2.3 KiB
JavaScript
62 lines
2.3 KiB
JavaScript
const { test, expect } = require('@playwright/test');
|
|
|
|
test.describe('Theme Toggle Tests', () => {
|
|
test('theme toggle should cycle through modes', async ({ page }) => {
|
|
// Serve the site locally for testing
|
|
await page.goto('http://localhost:8080');
|
|
|
|
// Get the theme toggle button
|
|
const themeToggle = await page.locator('#themeToggle');
|
|
|
|
// Verify initial state (should be auto)
|
|
let ariaLabel = await themeToggle.getAttribute('aria-label');
|
|
expect(ariaLabel).toBe('Theme mode: Auto');
|
|
|
|
// Click to change to light mode
|
|
await themeToggle.click();
|
|
ariaLabel = await themeToggle.getAttribute('aria-label');
|
|
expect(ariaLabel).toBe('Theme mode: Light');
|
|
|
|
// Verify data-theme attribute is set to light
|
|
const dataTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
|
|
expect(dataTheme).toBe('light');
|
|
|
|
// Click to change to dark mode
|
|
await themeToggle.click();
|
|
ariaLabel = await themeToggle.getAttribute('aria-label');
|
|
expect(ariaLabel).toBe('Theme mode: Dark');
|
|
|
|
// Verify data-theme attribute is set to dark
|
|
const darkDataTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
|
|
expect(darkDataTheme).toBe('dark');
|
|
|
|
// Click to change back to auto mode
|
|
await themeToggle.click();
|
|
ariaLabel = await themeToggle.getAttribute('aria-label');
|
|
expect(ariaLabel).toBe('Theme mode: Auto');
|
|
|
|
// Verify data-theme attribute is removed
|
|
const autoDataTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
|
|
expect(autoDataTheme).toBeNull();
|
|
});
|
|
|
|
test('theme toggle should be keyboard accessible', async ({ page }) => {
|
|
await page.goto('http://localhost:8080');
|
|
|
|
// Focus the theme toggle button using Tab
|
|
await page.keyboard.press('Tab');
|
|
|
|
// Verify the button is focused
|
|
const isFocused = await page.evaluate(() => {
|
|
return document.activeElement.id === 'themeToggle';
|
|
});
|
|
expect(isFocused).toBeTruthy();
|
|
|
|
// Activate with space key
|
|
await page.keyboard.press('Space');
|
|
|
|
// Verify it changes to light mode
|
|
const ariaLabel = await page.locator('#themeToggle').getAttribute('aria-label');
|
|
expect(ariaLabel).toBe('Theme mode: Light');
|
|
});
|
|
});
|