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

5
frontend/tests/e2e/auth.spec.js
View File

@@ -159,8 +159,9 @@ test.describe('Authentication E2E', () => {
await page.click('button[type="submit"]');
await page.waitForURL('/dashboard');
// Click logout
await page.click('text=Logout');
// Open user menu dropdown first, then click logout
await page.click('[data-testid="user-menu"] button');
await page.click('[data-testid="user-menu"] button:has-text("Logout")');
// Should redirect to login
await page.waitForURL('/login');

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();

11
frontend/tests/e2e/layout.spec.ts
View File

@@ -142,8 +142,8 @@ test.describe('Layout E2E', () => {
for (const [width, height, expected] of breakpoints) {
await page.setViewportSize({ width, height });
await page.goto('/login');
await page.evaluate(() => localStorage.setItem('headroom_sidebar_state', 'expanded'));
// Clear localStorage to test default breakpoint behavior
await page.evaluate(() => localStorage.removeItem('headroom_sidebar_state'));
await openDashboard(page);
await expect
.poll(async () => page.evaluate(() => document.documentElement.getAttribute('data-sidebar')))
@@ -155,7 +155,14 @@ test.describe('Layout E2E', () => {
await page.setViewportSize({ width: 1280, height: 900 });
await openDashboard(page);
// Wait for sidebar to be fully mounted with event listeners
await expect(page.locator('[data-testid="sidebar"]')).toBeVisible();
await page.waitForTimeout(100);
const before = await page.evaluate(() => document.documentElement.getAttribute('data-sidebar'));
// Focus on the page body to ensure keyboard events are captured
await page.locator('body').click();
await page.keyboard.down('Control');
await page.keyboard.press('\\');
await page.keyboard.up('Control');

8
frontend/tests/e2e/projects.spec.ts
View File

@@ -21,8 +21,8 @@ test.describe('Projects Page', () => {
});
test('search filters projects', async ({ page }) => {
// Wait for data to load
await page.waitForTimeout(500);
// Wait for the table to render (not loading state)
await expect(page.locator('table tbody tr').first()).toBeVisible({ timeout: 5000 });
// Get initial row count
const initialRows = await page.locator('table tbody tr').count();
@@ -38,8 +38,8 @@ test.describe('Projects Page', () => {
});
test('status filter works', async ({ page }) => {
// Wait for data to load
await page.waitForTimeout(500);
// Wait for the table to render (not loading state)
await expect(page.locator('table tbody tr').first()).toBeVisible({ timeout: 5000 });
// Get initial row count
const initialRows = await page.locator('table tbody tr').count();

8
frontend/tests/e2e/team-members.spec.ts
View File

@@ -21,8 +21,8 @@ test.describe('Team Members Page', () => {
});
test('search filters team members', async ({ page }) => {
// Wait for data to load
await page.waitForTimeout(500);
// Wait for the table to render (not loading state)
await expect(page.locator('table tbody tr').first()).toBeVisible({ timeout: 5000 });
// Get initial row count
const initialRows = await page.locator('table tbody tr').count();
@@ -38,8 +38,8 @@ test.describe('Team Members Page', () => {
});
test('status filter works', async ({ page }) => {
// Wait for data to load
await page.waitForTimeout(500);
// Wait for the table to render (not loading state)
await expect(page.locator('table tbody tr').first()).toBeVisible({ timeout: 5000 });
// Get initial row count
const initialRows = await page.locator('table tbody tr').count();