Felipe Cardoso
a4c91cb8c3
- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits. - Improved consistency in component imports by grouping and consolidating them. - No functional changes, purely restructuring for clarity and maintainability.
302 lines
10 KiB
TypeScript
302 lines
10 KiB
TypeScript
/**
|
|
* E2E Tests for Project Dashboard Page
|
|
*
|
|
* Tests the single project view showing:
|
|
* - Project header with status badges
|
|
* - Agent panel with status indicators
|
|
* - Sprint progress and burndown chart
|
|
* - Issue summary sidebar
|
|
* - Recent activity feed
|
|
* - Quick actions (start/pause agents, create sprint)
|
|
*
|
|
* @module e2e/project-dashboard.spec
|
|
* @see Issue #40
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import { setupAuthenticatedMocks, loginViaUI } from './helpers/auth';
|
|
|
|
test.describe('Project Dashboard Page', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Set up mock API endpoints
|
|
await setupAuthenticatedMocks(page);
|
|
});
|
|
|
|
test('should display project header with name and status badges', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
|
|
// Navigate to a project dashboard
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check project header is present
|
|
await expect(page.getByTestId('project-header')).toBeVisible();
|
|
|
|
// Check project name
|
|
await expect(page.getByRole('heading', { level: 1 })).toContainText(
|
|
'E-Commerce Platform Redesign'
|
|
);
|
|
|
|
// Check status badges
|
|
await expect(page.getByText('In Progress')).toBeVisible();
|
|
await expect(page.getByText('Milestone')).toBeVisible();
|
|
});
|
|
|
|
test('should display agent panel with active agents', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check agent panel is present
|
|
await expect(page.getByTestId('agent-panel')).toBeVisible();
|
|
await expect(page.getByText('Active Agents')).toBeVisible();
|
|
|
|
// Check agent count
|
|
await expect(page.getByText(/\d+ of \d+ agents working/)).toBeVisible();
|
|
|
|
// Check at least one agent is visible
|
|
await expect(page.getByText('Product Owner')).toBeVisible();
|
|
});
|
|
|
|
test('should display sprint progress with stats', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check sprint progress is present
|
|
await expect(page.getByTestId('sprint-progress')).toBeVisible();
|
|
await expect(page.getByText('Sprint Overview')).toBeVisible();
|
|
|
|
// Check progress bar exists
|
|
await expect(page.getByRole('progressbar')).toBeVisible();
|
|
|
|
// Check issue stats are shown
|
|
await expect(page.getByText('Completed')).toBeVisible();
|
|
await expect(page.getByText('In Progress')).toBeVisible();
|
|
await expect(page.getByText('Blocked')).toBeVisible();
|
|
|
|
// Check burndown chart is present
|
|
await expect(page.getByText('Burndown Chart')).toBeVisible();
|
|
});
|
|
|
|
test('should display issue summary sidebar', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check issue summary is present
|
|
await expect(page.getByTestId('issue-summary')).toBeVisible();
|
|
await expect(page.getByText('Issue Summary')).toBeVisible();
|
|
|
|
// Check issue counts by status
|
|
await expect(page.getByText('Open')).toBeVisible();
|
|
await expect(page.getByText('In Review')).toBeVisible();
|
|
});
|
|
|
|
test('should display recent activity feed', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check activity feed is present
|
|
await expect(page.getByTestId('recent-activity')).toBeVisible();
|
|
await expect(page.getByText('Recent Activity')).toBeVisible();
|
|
});
|
|
|
|
test('should have quick action buttons', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check quick actions are present
|
|
await expect(page.getByRole('button', { name: /run sprint/i })).toBeVisible();
|
|
await expect(page.getByRole('button', { name: /new sprint/i })).toBeVisible();
|
|
});
|
|
|
|
test('should have manage agents button', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check manage agents button
|
|
await expect(page.getByRole('button', { name: /manage agents/i })).toBeVisible();
|
|
});
|
|
|
|
test('should have view all issues button', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check view all issues button
|
|
const viewAllButton = page.getByRole('button', { name: /view all issues/i });
|
|
await expect(viewAllButton).toBeVisible();
|
|
});
|
|
|
|
test('should have accessible heading hierarchy', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check for h1 (project name)
|
|
await expect(page.locator('h1')).toBeVisible();
|
|
|
|
// Check for multiple headings
|
|
const headings = page.getByRole('heading');
|
|
const count = await headings.count();
|
|
expect(count).toBeGreaterThan(3); // Project name + Agent Panel + Sprint + Activity
|
|
});
|
|
|
|
test('should be keyboard navigable', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Tab through the page elements
|
|
await page.keyboard.press('Tab');
|
|
|
|
// Should be able to focus on interactive elements
|
|
const focusedElement = page.locator(':focus');
|
|
await expect(focusedElement).toBeVisible();
|
|
});
|
|
|
|
test('should show responsive layout on mobile', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 });
|
|
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Page should still be functional on mobile
|
|
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
|
|
await expect(page.getByTestId('agent-panel')).toBeVisible();
|
|
await expect(page.getByTestId('sprint-progress')).toBeVisible();
|
|
});
|
|
|
|
test('should load within acceptable time', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
|
|
// Measure navigation timing
|
|
const start = Date.now();
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
const duration = Date.now() - start;
|
|
|
|
// Dashboard should load within 5 seconds (including mock data)
|
|
expect(duration).toBeLessThan(5000);
|
|
});
|
|
|
|
test('should show SSE connection status when disconnected', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// When SSE is not connected, connection status should be visible
|
|
// (Connected state hides the status indicator)
|
|
// Since we don't have SSE mock, it will show as connecting/disconnected
|
|
const connectionStatus = page.locator('[role="status"]').first();
|
|
|
|
// Either connection status is visible (not connected) or hidden (connected)
|
|
// Both are valid states
|
|
const count = await connectionStatus.count();
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
});
|
|
});
|
|
|
|
test.describe('Project Dashboard Agent Interactions', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await setupAuthenticatedMocks(page);
|
|
});
|
|
|
|
test('should display agent action menu when clicking agent options', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Find the first agent's action menu button
|
|
const agentActionButton = page
|
|
.getByTestId('agent-panel')
|
|
.getByRole('button', { name: /actions for/i })
|
|
.first();
|
|
|
|
// Check button is visible and clickable
|
|
await expect(agentActionButton).toBeVisible();
|
|
await agentActionButton.click();
|
|
|
|
// Menu should show options
|
|
await expect(page.getByText('View Details')).toBeVisible();
|
|
await expect(page.getByText('Terminate Agent')).toBeVisible();
|
|
});
|
|
|
|
test('should show agent status indicators', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Look for status role elements within agent panel
|
|
const statusIndicators = page.getByTestId('agent-panel').locator('[role="status"]');
|
|
const count = await statusIndicators.count();
|
|
expect(count).toBeGreaterThan(0);
|
|
});
|
|
});
|
|
|
|
test.describe('Project Dashboard Sprint Interactions', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await setupAuthenticatedMocks(page);
|
|
});
|
|
|
|
test('should display sprint selector when multiple sprints exist', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check for sprint selector combobox
|
|
const sprintSelector = page.getByRole('combobox', { name: /select sprint/i });
|
|
await expect(sprintSelector).toBeVisible();
|
|
});
|
|
|
|
test('should show burndown chart legend', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check burndown chart has legend items
|
|
await expect(page.getByText('Actual')).toBeVisible();
|
|
await expect(page.getByText('Ideal')).toBeVisible();
|
|
});
|
|
});
|
|
|
|
test.describe('Project Dashboard Activity Feed', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await setupAuthenticatedMocks(page);
|
|
});
|
|
|
|
test('should display activity items with timestamps', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Check activity feed has content
|
|
const activityFeed = page.getByTestId('recent-activity');
|
|
await expect(activityFeed).toBeVisible();
|
|
|
|
// Check for relative timestamps (e.g., "5 minutes ago", "less than a minute ago")
|
|
await expect(activityFeed.getByText(/ago|minute|hour|day/i).first()).toBeVisible();
|
|
});
|
|
|
|
test('should highlight action-required activities', async ({ page }) => {
|
|
await loginViaUI(page);
|
|
await page.goto('/en/projects/proj-001');
|
|
await page.waitForLoadState('networkidle');
|
|
|
|
// Look for action buttons in activity feed (if any require action)
|
|
const reviewButton = page
|
|
.getByTestId('recent-activity')
|
|
.getByRole('button', { name: /review/i });
|
|
const count = await reviewButton.count();
|
|
|
|
// Either there are action items or not - both are valid
|
|
expect(count).toBeGreaterThanOrEqual(0);
|
|
});
|
|
});
|