Santhosh Janardhanan
5422a324fc
- Fix DataTable reactivity: use $derived with getters for data/columns props - Fix auth.spec.js: open user dropdown before clicking Logout button - Fix dashboard.spec.ts: scope selectors to layout-content, use exact matches - Fix layout.spec.ts: clear localStorage before breakpoint tests, wait for focus - Fix projects/team-members.spec.ts: wait for table rows to be visible Root causes: 1. DataTable options object captured initial empty array, not reactive updates 2. Selectors matched multiple elements (sidebar, user menu, main content) 3. Dropdown menus need to be opened before clicking items 4. Keyboard shortcuts need element focus All 94 tests now pass (47 chromium + 47 firefox)
52 lines
2.4 KiB
TypeScript
52 lines
2.4 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Dashboard Page', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Login first
|
|
await page.goto('/login');
|
|
await page.fill('input[type="email"]', 'superuser@headroom.test');
|
|
await page.fill('input[type="password"]', 'password');
|
|
await page.click('button[type="submit"]');
|
|
|
|
// Wait for navigation to dashboard
|
|
await page.waitForURL('/dashboard');
|
|
});
|
|
|
|
test('dashboard renders correctly', async ({ page }) => {
|
|
// Check page title
|
|
await expect(page).toHaveTitle(/Dashboard/);
|
|
|
|
// Check PageHeader renders
|
|
await expect(page.locator('h1', { hasText: 'Dashboard' })).toBeVisible();
|
|
await expect(page.getByText('Overview of your resource allocation')).toBeVisible();
|
|
|
|
// Check New Allocation button
|
|
await expect(page.getByRole('button', { name: /New Allocation/i })).toBeVisible();
|
|
|
|
// Check all 4 StatCards render
|
|
// Check all 4 StatCards render (use specific selector to avoid matching sidebar/user menu)
|
|
const mainContent = page.getByTestId('layout-content');
|
|
await expect(mainContent.getByText('Active Projects')).toBeVisible();
|
|
await expect(mainContent.getByText('Team Members')).toBeVisible();
|
|
await expect(mainContent.getByText('Allocations (hrs)')).toBeVisible();
|
|
await expect(mainContent.getByText('Avg Utilization')).toBeVisible();
|
|
|
|
// Check stat values (use exact match to avoid matching '8' in '186' or '87%')
|
|
await expect(page.getByText('14', { exact: true })).toBeVisible(); // Active Projects
|
|
await expect(page.getByText('8', { exact: true })).toBeVisible(); // Team Members
|
|
await expect(page.getByText('186', { exact: true })).toBeVisible(); // Allocations
|
|
await expect(page.getByText('87%')).toBeVisible(); // Avg Utilization
|
|
|
|
// Check Quick Actions section (scope to main content to avoid sidebar/user menu)
|
|
await expect(mainContent.getByText('Quick Actions')).toBeVisible();
|
|
await expect(mainContent.locator('a[href="/team-members"]')).toBeVisible();
|
|
await expect(mainContent.locator('a[href="/projects"]')).toBeVisible();
|
|
await expect(mainContent.locator('a[href="/allocations"]')).toBeVisible();
|
|
await expect(mainContent.locator('a[href="/reports/forecast"]')).toBeVisible();
|
|
|
|
// Check Allocation Preview section
|
|
await expect(page.getByRole('heading', { name: 'Allocation Preview' })).toBeVisible();
|
|
await expect(page.getByText(/Allocation matrix for/)).toBeVisible();
|
|
});
|
|
});
|