santhoshj/headroom
1
0
Fork 0
Code Issues 18 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(e2e): Fix 12 failing E2E tests - DataTable reactivity and selector issues

Browse Source 
- 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)
This commit is contained in:
Santhosh Janardhanan
2026-02-18 19:53:12 -05:00
parent c5d48fd40c
commit 5422a324fc
6 changed files with 40 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/tests/e2e/dashboard.spec.ts
View File

@@ -24,23 +24,25 @@ test.describe('Dashboard Page', () => {
await expect(page.getByRole('button', { name: /New Allocation/i })).toBeVisible();
// Check all 4 StatCards render
await expect(page.getByText('Active Projects')).toBeVisible();
await expect(page.getByText('Team Members')).toBeVisible();
await expect(page.getByText('Allocations (hrs)')).toBeVisible();
await expect(page.getByText('Avg Utilization')).toBeVisible();
// 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
await expect(page.getByText('14')).toBeVisible(); // Active Projects
await expect(page.getByText('8')).toBeVisible(); // Team Members
await expect(page.getByText('186')).toBeVisible(); // Allocations
// 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
await expect(page.getByText('Quick Actions')).toBeVisible();
await expect(page.locator('a[href="/team-members"]')).toBeVisible();
await expect(page.locator('a[href="/projects"]')).toBeVisible();
await expect(page.locator('a[href="/allocations"]')).toBeVisible();
await expect(page.locator('a[href="/reports/forecast"]')).toBeVisible();
// 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();