mirror of
https://github.com/AutoMaker-Org/automaker.git
synced 2026-01-31 20:03:37 +00:00
c55654b737
- Introduced a new Projects Overview link in the sidebar footer for easy navigation. - Added a button for Projects Overview in the dashboard view, enhancing accessibility to project insights. - Updated types to include project overview-related definitions, supporting the new features.
351 lines
12 KiB
TypeScript
351 lines
12 KiB
TypeScript
/**
|
|
* Projects Overview Dashboard End-to-End Test
|
|
*
|
|
* Tests the multi-project overview dashboard that shows status across all projects.
|
|
* This verifies that:
|
|
* 1. The overview view can be accessed via the sidebar
|
|
* 2. The overview displays aggregate statistics
|
|
* 3. Navigation back to dashboard works correctly
|
|
* 4. The UI responds to API data correctly
|
|
*/
|
|
|
|
import { test, expect } from '@playwright/test';
|
|
import {
|
|
setupMockMultipleProjects,
|
|
authenticateForTests,
|
|
handleLoginScreenIfPresent,
|
|
} from '../utils';
|
|
|
|
test.describe('Projects Overview Dashboard', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Set up mock projects state
|
|
await setupMockMultipleProjects(page, 3);
|
|
await authenticateForTests(page);
|
|
});
|
|
|
|
test('should navigate to overview from sidebar and display overview UI', async ({ page }) => {
|
|
// Go to the app
|
|
await page.goto('/board');
|
|
await page.waitForLoadState('load');
|
|
await handleLoginScreenIfPresent(page);
|
|
|
|
// Wait for the board view to load
|
|
await expect(page.locator('[data-testid="board-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Expand sidebar if collapsed
|
|
const expandSidebarButton = page.locator('button:has-text("Expand sidebar")');
|
|
if (await expandSidebarButton.isVisible()) {
|
|
await expandSidebarButton.click();
|
|
await page.waitForTimeout(300);
|
|
}
|
|
|
|
// Click on the Projects Overview link in the sidebar
|
|
const overviewLink = page.locator('[data-testid="projects-overview-link"]');
|
|
await expect(overviewLink).toBeVisible({ timeout: 5000 });
|
|
await overviewLink.click();
|
|
|
|
// Wait for the overview view to appear
|
|
await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Verify the header is visible with title
|
|
await expect(page.getByText('Projects Overview')).toBeVisible({ timeout: 5000 });
|
|
|
|
// Verify the refresh button is present
|
|
await expect(page.getByRole('button', { name: /Refresh/i })).toBeVisible();
|
|
|
|
// Verify the back button is present (navigates to dashboard)
|
|
const backButton = page
|
|
.locator('button')
|
|
.filter({ has: page.locator('svg') })
|
|
.first();
|
|
await expect(backButton).toBeVisible();
|
|
});
|
|
|
|
test('should display aggregate statistics cards', async ({ page }) => {
|
|
// Mock the projects overview API response
|
|
await page.route('**/api/projects/overview', async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
projects: [
|
|
{
|
|
projectId: 'test-project-1',
|
|
projectName: 'Test Project 1',
|
|
projectPath: '/mock/test-project-1',
|
|
healthStatus: 'active',
|
|
featureCounts: { pending: 2, running: 1, completed: 3, failed: 0, verified: 2 },
|
|
totalFeatures: 8,
|
|
isAutoModeRunning: true,
|
|
unreadNotificationCount: 1,
|
|
},
|
|
{
|
|
projectId: 'test-project-2',
|
|
projectName: 'Test Project 2',
|
|
projectPath: '/mock/test-project-2',
|
|
healthStatus: 'idle',
|
|
featureCounts: { pending: 5, running: 0, completed: 10, failed: 1, verified: 8 },
|
|
totalFeatures: 24,
|
|
isAutoModeRunning: false,
|
|
unreadNotificationCount: 0,
|
|
},
|
|
],
|
|
aggregate: {
|
|
projectCounts: {
|
|
total: 2,
|
|
active: 1,
|
|
idle: 1,
|
|
waiting: 0,
|
|
withErrors: 1,
|
|
allCompleted: 0,
|
|
},
|
|
featureCounts: {
|
|
total: 32,
|
|
pending: 7,
|
|
running: 1,
|
|
completed: 13,
|
|
failed: 1,
|
|
verified: 10,
|
|
},
|
|
totalUnreadNotifications: 1,
|
|
projectsWithAutoModeRunning: 1,
|
|
computedAt: new Date().toISOString(),
|
|
},
|
|
recentActivity: [
|
|
{
|
|
id: 'activity-1',
|
|
projectId: 'test-project-1',
|
|
projectName: 'Test Project 1',
|
|
type: 'feature_completed',
|
|
description: 'Feature completed: Add login form',
|
|
severity: 'success',
|
|
timestamp: new Date().toISOString(),
|
|
featureId: 'feature-1',
|
|
featureTitle: 'Add login form',
|
|
},
|
|
],
|
|
generatedAt: new Date().toISOString(),
|
|
}),
|
|
});
|
|
});
|
|
|
|
// Navigate directly to overview
|
|
await page.goto('/overview');
|
|
await page.waitForLoadState('load');
|
|
await handleLoginScreenIfPresent(page);
|
|
|
|
// Wait for the overview view to appear
|
|
await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Verify aggregate stat cards are displayed
|
|
// Projects count card
|
|
await expect(page.getByText('Projects').first()).toBeVisible({ timeout: 10000 });
|
|
|
|
// Running features card
|
|
await expect(page.getByText('Running').first()).toBeVisible();
|
|
|
|
// Pending features card
|
|
await expect(page.getByText('Pending').first()).toBeVisible();
|
|
|
|
// Completed features card
|
|
await expect(page.getByText('Completed').first()).toBeVisible();
|
|
|
|
// Auto-mode card
|
|
await expect(page.getByText('Auto-mode').first()).toBeVisible();
|
|
});
|
|
|
|
test('should display project status cards', async ({ page }) => {
|
|
// Mock the projects overview API response
|
|
await page.route('**/api/projects/overview', async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
projects: [
|
|
{
|
|
projectId: 'test-project-1',
|
|
projectName: 'Test Project 1',
|
|
projectPath: '/mock/test-project-1',
|
|
healthStatus: 'active',
|
|
featureCounts: { pending: 2, running: 1, completed: 3, failed: 0, verified: 2 },
|
|
totalFeatures: 8,
|
|
isAutoModeRunning: true,
|
|
unreadNotificationCount: 1,
|
|
},
|
|
],
|
|
aggregate: {
|
|
projectCounts: {
|
|
total: 1,
|
|
active: 1,
|
|
idle: 0,
|
|
waiting: 0,
|
|
withErrors: 0,
|
|
allCompleted: 0,
|
|
},
|
|
featureCounts: {
|
|
total: 8,
|
|
pending: 2,
|
|
running: 1,
|
|
completed: 3,
|
|
failed: 0,
|
|
verified: 2,
|
|
},
|
|
totalUnreadNotifications: 1,
|
|
projectsWithAutoModeRunning: 1,
|
|
computedAt: new Date().toISOString(),
|
|
},
|
|
recentActivity: [],
|
|
generatedAt: new Date().toISOString(),
|
|
}),
|
|
});
|
|
});
|
|
|
|
// Navigate directly to overview
|
|
await page.goto('/overview');
|
|
await page.waitForLoadState('load');
|
|
await handleLoginScreenIfPresent(page);
|
|
|
|
// Wait for the overview view to appear
|
|
await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Verify project status card is displayed
|
|
const projectCard = page.locator('[data-testid="project-status-card-test-project-1"]');
|
|
await expect(projectCard).toBeVisible({ timeout: 10000 });
|
|
|
|
// Verify project name is displayed
|
|
await expect(projectCard.getByText('Test Project 1')).toBeVisible();
|
|
|
|
// Verify the Active status badge
|
|
await expect(projectCard.getByText('Active')).toBeVisible();
|
|
|
|
// Verify auto-mode indicator is shown
|
|
await expect(projectCard.getByText('Auto-mode active')).toBeVisible();
|
|
});
|
|
|
|
test('should navigate back to dashboard when clicking back button', async ({ page }) => {
|
|
// Mock the projects overview API response
|
|
await page.route('**/api/projects/overview', async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
projects: [],
|
|
aggregate: {
|
|
projectCounts: {
|
|
total: 0,
|
|
active: 0,
|
|
idle: 0,
|
|
waiting: 0,
|
|
withErrors: 0,
|
|
allCompleted: 0,
|
|
},
|
|
featureCounts: {
|
|
total: 0,
|
|
pending: 0,
|
|
running: 0,
|
|
completed: 0,
|
|
failed: 0,
|
|
verified: 0,
|
|
},
|
|
totalUnreadNotifications: 0,
|
|
projectsWithAutoModeRunning: 0,
|
|
computedAt: new Date().toISOString(),
|
|
},
|
|
recentActivity: [],
|
|
generatedAt: new Date().toISOString(),
|
|
}),
|
|
});
|
|
});
|
|
|
|
// Navigate directly to overview
|
|
await page.goto('/overview');
|
|
await page.waitForLoadState('load');
|
|
await handleLoginScreenIfPresent(page);
|
|
|
|
// Wait for the overview view to appear
|
|
await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Click the back button (first button in the header with ArrowLeft icon)
|
|
const backButton = page.locator('[data-testid="overview-view"] header button').first();
|
|
await backButton.click();
|
|
|
|
// Wait for navigation to dashboard
|
|
await expect(page.locator('[data-testid="dashboard-view"]')).toBeVisible({ timeout: 15000 });
|
|
});
|
|
|
|
test('should display empty state when no projects exist', async ({ page }) => {
|
|
// Mock empty projects overview API response
|
|
await page.route('**/api/projects/overview', async (route) => {
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
projects: [],
|
|
aggregate: {
|
|
projectCounts: {
|
|
total: 0,
|
|
active: 0,
|
|
idle: 0,
|
|
waiting: 0,
|
|
withErrors: 0,
|
|
allCompleted: 0,
|
|
},
|
|
featureCounts: {
|
|
total: 0,
|
|
pending: 0,
|
|
running: 0,
|
|
completed: 0,
|
|
failed: 0,
|
|
verified: 0,
|
|
},
|
|
totalUnreadNotifications: 0,
|
|
projectsWithAutoModeRunning: 0,
|
|
computedAt: new Date().toISOString(),
|
|
},
|
|
recentActivity: [],
|
|
generatedAt: new Date().toISOString(),
|
|
}),
|
|
});
|
|
});
|
|
|
|
// Navigate directly to overview
|
|
await page.goto('/overview');
|
|
await page.waitForLoadState('load');
|
|
await handleLoginScreenIfPresent(page);
|
|
|
|
// Wait for the overview view to appear
|
|
await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Verify empty state message
|
|
await expect(page.getByText('No projects yet')).toBeVisible({ timeout: 10000 });
|
|
await expect(page.getByText('Create or open a project to get started')).toBeVisible();
|
|
});
|
|
|
|
test('should show error state when API fails', async ({ page }) => {
|
|
// Mock API error
|
|
await page.route('**/api/projects/overview', async (route) => {
|
|
await route.fulfill({
|
|
status: 500,
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({
|
|
error: 'Internal server error',
|
|
}),
|
|
});
|
|
});
|
|
|
|
// Navigate directly to overview
|
|
await page.goto('/overview');
|
|
await page.waitForLoadState('load');
|
|
await handleLoginScreenIfPresent(page);
|
|
|
|
// Wait for the overview view to appear
|
|
await expect(page.locator('[data-testid="overview-view"]')).toBeVisible({ timeout: 15000 });
|
|
|
|
// Verify error state message
|
|
await expect(page.getByText('Failed to load overview')).toBeVisible({ timeout: 10000 });
|
|
|
|
// Verify the "Try again" button is visible
|
|
await expect(page.getByRole('button', { name: /Try again/i })).toBeVisible();
|
|
});
|
|
});
|