cardosofelipe/fast-next-template
Template
1
0
Fork 1
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Refactor admin dashboard E2E tests to improve reliability and scope selectors

Browse Source 
- Replaced ambiguous text-based selectors with `data-testid` and scoped element searches to specific sections (e.g., Quick Actions, dashboard stats) to avoid unintended matches.
- Updated mock data references in stat card value tests for clarity and alignment with mock structure.
- Refined navigation and accessibility checks to ensure correct link and heading targeting.
This commit is contained in:
Felipe Cardoso
2025-11-08 09:54:07 +01:00
parent e1d5914e7f
commit e02329b734
1 changed files with 27 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/e2e/admin-dashboard.spec.ts
View File

@@ -36,11 +36,13 @@ test.describe('Admin Dashboard - Statistics Cards', () => {
// Wait for stats to load // Wait for stats to load
await page.waitForSelector('[data-testid="dashboard-stats"]', { timeout: 10000 }); await page.waitForSelector('[data-testid="dashboard-stats"]', { timeout: 10000 });
// Check all stat cards are visible // Check all stat cards are visible using data-testid to avoid ambiguity
await expect(page.getByText('Total Users')).toBeVisible(); const statCards = page.getByTestId('stat-title');
await expect(page.getByText('Active Users')).toBeVisible();
await expect(page.getByText('Organizations')).toBeVisible(); await expect(statCards.filter({ hasText: 'Total Users' })).toBeVisible();
await expect(page.getByText('Active Sessions')).toBeVisible(); await expect(statCards.filter({ hasText: 'Active Users' })).toBeVisible();
await expect(statCards.filter({ hasText: 'Organizations' })).toBeVisible();
await expect(statCards.filter({ hasText: 'Active Sessions' })).toBeVisible();
}); });
test('should display stat card values', async ({ page }) => { test('should display stat card values', async ({ page }) => {
@@ -48,11 +50,11 @@ test.describe('Admin Dashboard - Statistics Cards', () => {
await page.waitForSelector('[data-testid="dashboard-stats"]', { timeout: 10000 }); await page.waitForSelector('[data-testid="dashboard-stats"]', { timeout: 10000 });
// Stats should have numeric values (from mock data) // Stats should have numeric values (from mock data)
// Mock returns: 2 users (MOCK_USER + MOCK_SUPERUSER), 3 orgs, 45 sessions
const statsContainer = page.locator('[data-testid="dashboard-stats"]'); const statsContainer = page.locator('[data-testid="dashboard-stats"]');
await expect(statsContainer).toContainText('150'); // Total users await expect(statsContainer).toContainText('2'); // Total users (from mock pagination.total)
await expect(statsContainer).toContainText('120'); // Active users await expect(statsContainer).toContainText('3'); // Organizations (from MOCK_ORGANIZATIONS.length)
await expect(statsContainer).toContainText('25'); // Organizations await expect(statsContainer).toContainText('45'); // Sessions (from mock pagination.total)
await expect(statsContainer).toContainText('45'); // Sessions
}); });
}); });
@@ -68,9 +70,13 @@ test.describe('Admin Dashboard - Quick Actions', () => {
}); });
test('should display all quick action cards', async ({ page }) => { test('should display all quick action cards', async ({ page }) => {
await expect(page.getByText('User Management')).toBeVisible(); // Scope to Quick Actions section to avoid matching sidebar links
await expect(page.getByText('Organizations')).toBeVisible(); const quickActionsSection = page.locator('h2:has-text("Quick Actions")').locator('..');
await expect(page.getByText('System Settings')).toBeVisible();
// Use heading role to match only the card titles, not descriptions
await expect(quickActionsSection.getByRole('heading', { name: 'User Management' })).toBeVisible();
await expect(quickActionsSection.getByRole('heading', { name: 'Organizations' })).toBeVisible();
await expect(quickActionsSection.getByRole('heading', { name: 'System Settings' })).toBeVisible();
}); });
test('should navigate to users page when clicking user management', async ({ page }) => { test('should navigate to users page when clicking user management', async ({ page }) => {
@@ -85,7 +91,9 @@ test.describe('Admin Dashboard - Quick Actions', () => {
}); });
test('should navigate to organizations page when clicking organizations', async ({ page }) => { test('should navigate to organizations page when clicking organizations', async ({ page }) => {
const organizationsLink = page.getByRole('link', { name: /Organizations/i }); // Scope to Quick Actions section to avoid matching sidebar link
const quickActionsSection = page.locator('h2:has-text("Quick Actions")').locator('..');
const organizationsLink = quickActionsSection.getByRole('link', { name: /Organizations/i });
await Promise.all([ await Promise.all([
page.waitForURL('/admin/organizations', { timeout: 10000 }), page.waitForURL('/admin/organizations', { timeout: 10000 }),
@@ -160,9 +168,12 @@ test.describe('Admin Dashboard - Accessibility', () => {
}); });
test('should have accessible links for quick actions', async ({ page }) => { test('should have accessible links for quick actions', async ({ page }) => {
const userManagementLink = page.getByRole('link', { name: /User Management/i }); // Scope to Quick Actions section to avoid matching sidebar links
const organizationsLink = page.getByRole('link', { name: /Organizations/i }); const quickActionsSection = page.locator('h2:has-text("Quick Actions")').locator('..');
const settingsLink = page.getByRole('link', { name: /System Settings/i });
const userManagementLink = quickActionsSection.getByRole('link', { name: /User Management/i });
const organizationsLink = quickActionsSection.getByRole('link', { name: /Organizations/i });
const settingsLink = quickActionsSection.getByRole('link', { name: /System Settings/i });
await expect(userManagementLink).toBeVisible(); await expect(userManagementLink).toBeVisible();
await expect(organizationsLink).toBeVisible(); await expect(organizationsLink).toBeVisible();