livrare lot 2
This commit is contained in:
commit
8ecc78e729
763 changed files with 164593 additions and 0 deletions
54
backend/admin-dashboard/e2e/auth.setup.ts
Normal file
54
backend/admin-dashboard/e2e/auth.setup.ts
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
import { test as setup, expect } from '@playwright/test';
|
||||
import path from 'path';
|
||||
|
||||
const authFile = path.join(__dirname, '../playwright/.auth/user.json');
|
||||
|
||||
/**
|
||||
* Authentication setup - logs in once and saves storage state
|
||||
* All tests will reuse this authenticated session
|
||||
*/
|
||||
setup('authenticate', async ({ page }) => {
|
||||
// Navigate to app (will redirect to Keycloak)
|
||||
await page.goto('/');
|
||||
|
||||
// Wait for page to settle
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Check if we're on a login page (Keycloak at port 18280 or has login form)
|
||||
const hasLoginForm = await page.locator('input[name="username"], input[id="username"]').isVisible().catch(() => false);
|
||||
const isKeycloakUrl = page.url().includes(':18280');
|
||||
|
||||
if (hasLoginForm || isKeycloakUrl) {
|
||||
console.log('Login page detected, filling credentials...');
|
||||
|
||||
// Fill in login credentials
|
||||
const testEmail = process.env.TEST_USER_EMAIL || 'admin@local.dev';
|
||||
const testPassword = process.env.TEST_USER_PASSWORD || 'admin';
|
||||
|
||||
// Try different input selectors for username/email
|
||||
const usernameInput = page.locator('input[name="username"], input[id="username"], input[type="email"]').first();
|
||||
await usernameInput.fill(testEmail);
|
||||
|
||||
// Fill password
|
||||
const passwordInput = page.locator('input[name="password"], input[id="password"], input[type="password"]').first();
|
||||
await passwordInput.fill(testPassword);
|
||||
|
||||
// Click sign in button
|
||||
await page.locator('button[type="submit"], input[type="submit"], button:has-text("Sign In")').first().click();
|
||||
|
||||
// Wait for redirect back to app
|
||||
await page.waitForURL('http://localhost:13003/**', { timeout: 30000 });
|
||||
}
|
||||
|
||||
// Wait for app to be fully loaded
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Verify we're authenticated by checking for dashboard content
|
||||
// Look for "Service Monitor" text which appears in the header
|
||||
await expect(page.locator('text=Service Monitor').first()).toBeVisible({ timeout: 15000 });
|
||||
|
||||
console.log('Authentication successful, saving storage state...');
|
||||
|
||||
// Save storage state (cookies, localStorage)
|
||||
await page.context().storageState({ path: authFile });
|
||||
});
|
||||
199
backend/admin-dashboard/e2e/dark-mode.spec.ts
Normal file
199
backend/admin-dashboard/e2e/dark-mode.spec.ts
Normal file
|
|
@ -0,0 +1,199 @@
|
|||
import { test, expect } from '@playwright/test';
|
||||
|
||||
/**
|
||||
* Dark Mode Toggle Integration Tests
|
||||
* Tests the theme switching functionality across the admin dashboard
|
||||
*/
|
||||
|
||||
test.describe('Dark Mode Toggle', () => {
|
||||
// Clear theme preference before each test (keep auth tokens)
|
||||
test.beforeEach(async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
// Only clear theme preference, not auth tokens
|
||||
await page.evaluate(() => localStorage.removeItem('didi-admin-theme'));
|
||||
});
|
||||
|
||||
test.describe('Service Monitor Page', () => {
|
||||
test('should display theme toggle in sidebar', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Theme toggle should be visible in the sidebar header
|
||||
const sidebarToggle = page.locator('.MuiDrawer-root button[aria-label*="Switch to"]');
|
||||
await expect(sidebarToggle.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('should switch to dark mode when toggle is clicked', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Click the theme toggle (switch to dark)
|
||||
const toggleButton = page.locator('button[aria-label*="Switch to dark"]').first();
|
||||
await toggleButton.click();
|
||||
|
||||
// Verify localStorage was updated
|
||||
const theme = await page.evaluate(() => localStorage.getItem('didi-admin-theme'));
|
||||
expect(theme).toBe('dark');
|
||||
|
||||
// Verify the toggle now shows "switch to light"
|
||||
const lightToggle = page.locator('button[aria-label*="Switch to light"]').first();
|
||||
await expect(lightToggle).toBeVisible();
|
||||
});
|
||||
|
||||
test('should apply dark background color in dark mode', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Switch to dark mode
|
||||
await page.locator('button[aria-label*="Switch to dark"]').first().click();
|
||||
|
||||
// Check that background color changed to dark
|
||||
const bgColor = await page.evaluate(() => {
|
||||
const main = document.querySelector('main') || document.body;
|
||||
return getComputedStyle(main).backgroundColor;
|
||||
});
|
||||
|
||||
// Dark mode background should be dark (#121212 = rgb(18, 18, 18))
|
||||
expect(bgColor).toMatch(/rgb\(18,\s*18,\s*18\)|rgb\(30,\s*30,\s*30\)/);
|
||||
});
|
||||
|
||||
test('should switch back to light mode', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Switch to dark mode first
|
||||
await page.locator('button[aria-label*="Switch to dark"]').first().click();
|
||||
|
||||
// Switch back to light mode
|
||||
await page.locator('button[aria-label*="Switch to light"]').first().click();
|
||||
|
||||
// Verify localStorage
|
||||
const theme = await page.evaluate(() => localStorage.getItem('didi-admin-theme'));
|
||||
expect(theme).toBe('light');
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Theme Persistence', () => {
|
||||
test('should persist dark mode after page refresh', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Switch to dark mode
|
||||
await page.locator('button[aria-label*="Switch to dark"]').first().click();
|
||||
// Wait for theme to be saved
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Refresh the page
|
||||
await page.reload({ waitUntil: 'networkidle' });
|
||||
|
||||
// Wait for app to stabilize and verify toggle is visible first
|
||||
const lightToggle = page.locator('button[aria-label*="Switch to light"]').first();
|
||||
await expect(lightToggle).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Now verify localStorage
|
||||
const theme = await page.evaluate(() => localStorage.getItem('didi-admin-theme'));
|
||||
expect(theme).toBe('dark');
|
||||
});
|
||||
|
||||
test('should persist light mode after page refresh', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
|
||||
// Refresh the page
|
||||
await page.reload({ waitUntil: 'networkidle' });
|
||||
|
||||
// Wait for app to stabilize and verify toggle is visible
|
||||
const darkToggle = page.locator('button[aria-label*="Switch to dark"]').first();
|
||||
await expect(darkToggle).toBeVisible({ timeout: 10000 });
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Orchestrator Page', () => {
|
||||
test('should display theme toggle in sidebar header', async ({ page }) => {
|
||||
await page.goto('/orchestrator');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Theme toggle should be visible in the drawer header
|
||||
const sidebarToggle = page.locator('.MuiDrawer-root button[aria-label*="Switch to"]');
|
||||
await expect(sidebarToggle.first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('should share theme state with Service Monitor', async ({ page }) => {
|
||||
// Set dark mode on Service Monitor
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('networkidle');
|
||||
await page.locator('button[aria-label*="Switch to dark"]').first().click();
|
||||
// Wait for theme to be saved
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Navigate to Orchestrator
|
||||
await page.goto('/orchestrator', { waitUntil: 'networkidle' });
|
||||
|
||||
// Wait for toggle to be visible first (proves page is loaded)
|
||||
const lightToggle = page.locator('button[aria-label*="Switch to light"]').first();
|
||||
await expect(lightToggle).toBeVisible({ timeout: 10000 });
|
||||
|
||||
// Now verify localStorage
|
||||
const theme = await page.evaluate(() => localStorage.getItem('didi-admin-theme'));
|
||||
expect(theme).toBe('dark');
|
||||
});
|
||||
|
||||
test('should apply dark mode styling on Orchestrator page', async ({ page }) => {
|
||||
await page.goto('/orchestrator');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Switch to dark mode
|
||||
await page.locator('button[aria-label*="Switch to dark"]').first().click();
|
||||
|
||||
// Main content should have dark background
|
||||
const bgColor = await page.evaluate(() => {
|
||||
const main = document.querySelector('main') || document.body;
|
||||
return getComputedStyle(main).backgroundColor;
|
||||
});
|
||||
|
||||
expect(bgColor).toMatch(/rgb\(18,\s*18,\s*18\)|rgb\(30,\s*30,\s*30\)/);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Cross-Page Consistency', () => {
|
||||
test('theme toggle position should be consistent (sidebar)', async ({ page }) => {
|
||||
// Check Service Monitor
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
const serviceMonitorToggle = page.locator('.MuiDrawer-root button[aria-label*="Switch to"]').first();
|
||||
await expect(serviceMonitorToggle).toBeVisible();
|
||||
|
||||
// Check Orchestrator
|
||||
await page.goto('/orchestrator');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
const orchestratorToggle = page.locator('.MuiDrawer-root button[aria-label*="Switch to"]').first();
|
||||
await expect(orchestratorToggle).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Mobile Dark Mode', () => {
|
||||
test.use({ viewport: { width: 375, height: 667 } }); // iPhone SE
|
||||
|
||||
test('should have theme toggle in mobile app bar', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// On mobile, toggle should be in the AppBar
|
||||
const appBarToggle = page.locator('.MuiAppBar-root button[aria-label*="Switch to"]');
|
||||
await expect(appBarToggle).toBeVisible();
|
||||
});
|
||||
|
||||
test('should toggle dark mode on mobile', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await page.waitForLoadState('domcontentloaded');
|
||||
|
||||
// Click toggle in AppBar
|
||||
await page.locator('.MuiAppBar-root button[aria-label*="Switch to dark"]').click();
|
||||
|
||||
// Verify dark mode
|
||||
const theme = await page.evaluate(() => localStorage.getItem('didi-admin-theme'));
|
||||
expect(theme).toBe('dark');
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue