Felipe Cardoso
b39b7b4c94
- **Authenticated Navigation:** Test header, footer, settings navigation, user menu interactions, and settings tabs for authenticated users. Validate logout and active tab highlighting. - **Theme Toggle:** Add tests for theme persistence and switching on both public and private pages. Verify localStorage integration and DOM updates across scenarios.
84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
/**
|
|
* E2E Tests for Theme Toggle
|
|
* Tests theme switching on public pages (login/register)
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Theme Toggle on Public Pages', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Clear localStorage before each test
|
|
await page.goto('/login');
|
|
await page.evaluate(() => localStorage.clear());
|
|
});
|
|
|
|
test('theme is applied on login page', async ({ page }) => {
|
|
await page.goto('/login');
|
|
|
|
// Wait for page to load and theme to be applied
|
|
await page.waitForTimeout(500);
|
|
|
|
// Check that a theme class is applied
|
|
const htmlElement = page.locator('html');
|
|
const className = await htmlElement.getAttribute('class');
|
|
|
|
// Should have either 'light' or 'dark' class
|
|
expect(className).toMatch(/light|dark/);
|
|
});
|
|
|
|
test('theme persists across page navigation', async ({ page }) => {
|
|
await page.goto('/login');
|
|
await page.waitForTimeout(500);
|
|
|
|
// Set theme to dark via localStorage
|
|
await page.evaluate(() => {
|
|
localStorage.setItem('theme', 'dark');
|
|
});
|
|
|
|
// Reload to apply theme
|
|
await page.reload();
|
|
await page.waitForTimeout(500);
|
|
|
|
// Verify dark theme is applied
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
|
|
|
// Navigate to register page
|
|
await page.goto('/register');
|
|
await page.waitForTimeout(500);
|
|
|
|
// Theme should still be dark
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
|
|
|
// Navigate to password reset
|
|
await page.goto('/password-reset');
|
|
await page.waitForTimeout(500);
|
|
|
|
// Theme should still be dark
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
|
});
|
|
|
|
test('can switch theme programmatically', async ({ page }) => {
|
|
await page.goto('/login');
|
|
|
|
// Set to light theme
|
|
await page.evaluate(() => {
|
|
localStorage.setItem('theme', 'light');
|
|
});
|
|
await page.reload();
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page.locator('html')).toHaveClass(/light/);
|
|
await expect(page.locator('html')).not.toHaveClass(/dark/);
|
|
|
|
// Switch to dark theme
|
|
await page.evaluate(() => {
|
|
localStorage.setItem('theme', 'dark');
|
|
});
|
|
await page.reload();
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(page.locator('html')).toHaveClass(/dark/);
|
|
await expect(page.locator('html')).not.toHaveClass(/light/);
|
|
});
|
|
});
|