MaddoScientisto
158906fa28
- Introduced AppThemeMode enum to define theme options: System, Light, Dark. - Updated AppSettingsDocument to include ThemeMode property. - Created AppThemeState service to manage current theme mode and handle changes. - Integrated theme mode handling in CouchbaseLiteAppSettingsService for persistence. - Added JavaScript for theme management in the frontend, supporting system preference detection. - Enhanced CSS with theme variables for consistent styling across light and dark modes. - Updated Playwright tests to ensure sidebar functionality and responsiveness.
90 lines
No EOL
3.5 KiB
TypeScript
90 lines
No EOL
3.5 KiB
TypeScript
import { expect, test } from '@playwright/test';
|
|
|
|
async function waitForBlazorConnection(page: Parameters<typeof test>[0]['page']) {
|
|
await page.waitForTimeout(750);
|
|
}
|
|
|
|
test.describe('sidebar collapse', () => {
|
|
test('starts collapsed and expands through the toggle button', async ({ page }) => {
|
|
await page.setViewportSize({ width: 1440, height: 960 });
|
|
await page.goto('/', { waitUntil: 'networkidle' });
|
|
await waitForBlazorConnection(page);
|
|
|
|
const sidebar = page.getByTestId('sidebar-shell');
|
|
const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
|
|
|
|
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
|
await expect(page.getByRole('link', { name: 'Dashboard' })).toBeVisible();
|
|
|
|
await toggle.click();
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
|
|
await expect(page.getByText('Dashboard')).toBeVisible();
|
|
|
|
await toggle.click();
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
test('renders sidebar styles and toggles on narrow layouts', async ({ page }) => {
|
|
await page.setViewportSize({ width: 500, height: 900 });
|
|
await page.goto('/', { waitUntil: 'networkidle' });
|
|
await waitForBlazorConnection(page);
|
|
|
|
const sidebar = page.getByTestId('sidebar-shell');
|
|
const toggle = page.getByRole('button', { name: 'Toggle sidebar' });
|
|
const navScrollable = page.locator('.nav-scrollable');
|
|
const sidebarPanel = page.locator('.sidebar');
|
|
const toggleBar = page.locator('.sidebar-toggle-bar').first();
|
|
|
|
await expect(sidebar).toHaveAttribute('data-collapsed', 'true');
|
|
await expect(navScrollable).toBeHidden();
|
|
|
|
await expect(sidebarPanel).toHaveCSS('background-image', /linear-gradient/);
|
|
await expect(toggleBar).toHaveCSS('background-color', 'rgb(255, 255, 255)');
|
|
|
|
await toggle.click();
|
|
await page.waitForTimeout(500);
|
|
|
|
await expect(sidebar).toHaveAttribute('data-collapsed', 'false');
|
|
await expect(toggle).toHaveAttribute('aria-expanded', 'true');
|
|
await expect(navScrollable).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test('home loads without a login screen', async ({ page }) => {
|
|
await page.goto('/');
|
|
|
|
await expect(page).toHaveURL(/\/$/);
|
|
await expect(page.getByRole('heading', { name: 'WorkTracker' })).toBeVisible();
|
|
await expect(page.getByRole('heading', { name: 'Login' })).toHaveCount(0);
|
|
});
|
|
|
|
test('protected pages are directly available without redirecting to login', async ({ page }) => {
|
|
const pages = [
|
|
{ path: '/grid', heading: 'Grid View' },
|
|
{ path: '/calendar', heading: 'Calendar' },
|
|
{ path: '/summary', heading: 'Monthly Summary' },
|
|
{ path: '/settings', heading: 'Settings' },
|
|
{ path: '/work-unit', heading: 'Work Unit' },
|
|
{ path: '/auth', heading: 'You are authenticated' }
|
|
];
|
|
|
|
for (const target of pages) {
|
|
await page.goto(target.path);
|
|
await expect(page).not.toHaveURL(/\/login/i);
|
|
await expect(page.getByRole('heading', { name: target.heading })).toBeVisible();
|
|
}
|
|
});
|
|
|
|
test('login route redirects away when built-in authentication is disabled', async ({ page }) => {
|
|
await page.goto('/login');
|
|
|
|
await expect(page).toHaveURL(/\/$/);
|
|
await expect(page.getByRole('heading', { name: 'WorkTracker' })).toBeVisible();
|
|
}); |