feat(frontend): implement main dashboard page (#48)
Implement the main dashboard / projects list page for Syndarix as the landing page after login. The implementation includes: Dashboard Components: - QuickStats: Overview cards showing active projects, agents, issues, approvals - ProjectsSection: Grid/list view with filtering and sorting controls - ProjectCardGrid: Rich project cards for grid view - ProjectRowList: Compact rows for list view - ActivityFeed: Real-time activity sidebar with connection status - PerformanceCard: Performance metrics display - EmptyState: Call-to-action for new users - ProjectStatusBadge: Status indicator with icons - ComplexityIndicator: Visual complexity dots - ProgressBar: Accessible progress bar component Features: - Projects grid/list view with view mode toggle - Filter by status (all, active, paused, completed, archived) - Sort by recent, name, progress, or issues - Quick stats overview with counts - Real-time activity feed sidebar with live/reconnecting status - Performance metrics card - Create project button linking to wizard - Responsive layout for mobile/desktop - Loading skeleton states - Empty state for new users API Integration: - useProjects hook for fetching projects (mock data until backend ready) - useDashboardStats hook for statistics - TanStack Query for caching and data fetching Testing: - 37 unit tests covering all dashboard components - E2E test suite for dashboard functionality - Accessibility tests (keyboard nav, aria attributes, heading hierarchy) Technical: - TypeScript strict mode compliance - ESLint passing - WCAG AA accessibility compliance - Mobile-first responsive design - Dark mode support via semantic tokens - Follows design system guidelines 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
265
frontend/e2e/issues.spec.ts
Normal file
265
frontend/e2e/issues.spec.ts
Normal file
@@ -0,0 +1,265 @@
|
||||
/**
|
||||
* Issue Management E2E Tests
|
||||
*
|
||||
* Tests for the issue list and detail pages.
|
||||
*/
|
||||
|
||||
import { test, expect } from '@playwright/test';
|
||||
|
||||
test.describe('Issue Management', () => {
|
||||
// Use a test project ID
|
||||
const projectId = 'test-project-123';
|
||||
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Mock authentication - inject test auth store
|
||||
await page.addInitScript(() => {
|
||||
window.__TEST_AUTH_STORE__ = {
|
||||
getState: () => ({
|
||||
isAuthenticated: true,
|
||||
user: { id: 'test-user', email: 'test@example.com', is_superuser: false },
|
||||
accessToken: 'test-token',
|
||||
refreshToken: 'test-refresh',
|
||||
}),
|
||||
};
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Issue List Page', () => {
|
||||
test('displays issues list', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Wait for the page to load
|
||||
await expect(page.getByRole('heading', { name: /issues/i })).toBeVisible();
|
||||
|
||||
// Should show issue count
|
||||
await expect(page.getByText(/issues found/i)).toBeVisible();
|
||||
});
|
||||
|
||||
test('has search functionality', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
const searchInput = page.getByPlaceholder('Search issues...');
|
||||
await expect(searchInput).toBeVisible();
|
||||
|
||||
// Type in search
|
||||
await searchInput.fill('authentication');
|
||||
|
||||
// Wait for debounced search (mock data should filter)
|
||||
await page.waitForTimeout(500);
|
||||
});
|
||||
|
||||
test('has status filter', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Find status filter
|
||||
const statusFilter = page.getByRole('combobox', { name: /filter by status/i });
|
||||
await expect(statusFilter).toBeVisible();
|
||||
|
||||
// Open and select a status
|
||||
await statusFilter.click();
|
||||
await page.getByRole('option', { name: /in progress/i }).click();
|
||||
});
|
||||
|
||||
test('can toggle extended filters', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Extended filters should not be visible initially
|
||||
await expect(page.getByLabel('Priority')).not.toBeVisible();
|
||||
|
||||
// Click filter toggle
|
||||
await page.getByRole('button', { name: /toggle extended filters/i }).click();
|
||||
|
||||
// Extended filters should now be visible
|
||||
await expect(page.getByLabel('Priority')).toBeVisible();
|
||||
await expect(page.getByLabel('Sprint')).toBeVisible();
|
||||
await expect(page.getByLabel('Assignee')).toBeVisible();
|
||||
});
|
||||
|
||||
test('can select issues for bulk actions', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Wait for issues to load
|
||||
await page.waitForSelector('[data-testid^="issue-row-"]');
|
||||
|
||||
// Select first issue checkbox
|
||||
const firstCheckbox = page.getByRole('checkbox', { name: /select issue/i }).first();
|
||||
await firstCheckbox.click();
|
||||
|
||||
// Bulk actions bar should appear
|
||||
await expect(page.getByText('1 selected')).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /change status/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('navigates to issue detail when clicking row', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Wait for issues to load
|
||||
await page.waitForSelector('[data-testid^="issue-row-"]');
|
||||
|
||||
// Click on first issue row
|
||||
await page.locator('[data-testid^="issue-row-"]').first().click();
|
||||
|
||||
// Should navigate to detail page
|
||||
await expect(page).toHaveURL(/\/issues\/[^/]+$/);
|
||||
});
|
||||
|
||||
test('has new issue button', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
await expect(page.getByRole('button', { name: /new issue/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('has sync button', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
await expect(page.getByRole('button', { name: /sync/i })).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Issue Detail Page', () => {
|
||||
const issueId = 'ISS-001';
|
||||
|
||||
test('displays issue details', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Wait for the page to load
|
||||
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
|
||||
|
||||
// Should show issue number
|
||||
await expect(page.getByText(/#\d+/)).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays status badge', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Should show status
|
||||
await expect(
|
||||
page.getByText(/open|in progress|in review|blocked|done|closed/i).first()
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays priority badge', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Should show priority
|
||||
await expect(page.getByText(/high|medium|low/i).first()).toBeVisible();
|
||||
});
|
||||
|
||||
test('has back button', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
const backButton = page.getByRole('link', { name: /back to issues/i });
|
||||
await expect(backButton).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays status workflow panel', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Should show status workflow
|
||||
await expect(page.getByRole('heading', { name: /status workflow/i })).toBeVisible();
|
||||
|
||||
// Should show all status options
|
||||
await expect(page.getByRole('radiogroup', { name: /issue status/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays activity timeline', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Should show activity section
|
||||
await expect(page.getByRole('heading', { name: /activity/i })).toBeVisible();
|
||||
|
||||
// Should have add comment button
|
||||
await expect(page.getByRole('button', { name: /add comment/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('displays issue details panel', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Should show details section
|
||||
await expect(page.getByRole('heading', { name: /details/i })).toBeVisible();
|
||||
|
||||
// Should show assignee info
|
||||
await expect(page.getByText(/assignee/i)).toBeVisible();
|
||||
});
|
||||
|
||||
test('can change status via workflow', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Wait for page to load
|
||||
await page.waitForSelector('[role="radiogroup"]');
|
||||
|
||||
// Click on a different status
|
||||
const inProgressOption = page.getByRole('radio', { name: /in progress/i });
|
||||
await inProgressOption.click();
|
||||
|
||||
// The status should update (optimistic update)
|
||||
await expect(inProgressOption).toHaveAttribute('aria-checked', 'true');
|
||||
});
|
||||
|
||||
test('displays description', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// Should show description heading
|
||||
await expect(page.getByRole('heading', { name: /description/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows edit button', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
await expect(page.getByRole('button', { name: /edit/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('shows external link when available', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/${issueId}`);
|
||||
|
||||
// The mock data includes an external URL
|
||||
await expect(page.getByRole('link', { name: /view in gitea/i })).toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe('Accessibility', () => {
|
||||
test('issue list has proper heading structure', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Main heading should be h1
|
||||
const h1 = page.getByRole('heading', { level: 1 });
|
||||
await expect(h1).toBeVisible();
|
||||
});
|
||||
|
||||
test('issue list table has proper ARIA labels', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues`);
|
||||
|
||||
// Wait for table to load
|
||||
await page.waitForSelector('[data-testid^="issue-row-"]');
|
||||
|
||||
// Checkboxes should have labels
|
||||
const checkboxes = page.getByRole('checkbox');
|
||||
const count = await checkboxes.count();
|
||||
expect(count).toBeGreaterThan(0);
|
||||
|
||||
// First checkbox should have accessible label
|
||||
await expect(checkboxes.first()).toHaveAccessibleName();
|
||||
});
|
||||
|
||||
test('issue detail has proper radiogroup for status', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/ISS-001`);
|
||||
|
||||
// Status workflow should be a radiogroup
|
||||
const radiogroup = page.getByRole('radiogroup', { name: /issue status/i });
|
||||
await expect(radiogroup).toBeVisible();
|
||||
|
||||
// Each status should be a radio button
|
||||
const radios = page.getByRole('radio');
|
||||
const count = await radios.count();
|
||||
expect(count).toBe(6); // 6 statuses
|
||||
});
|
||||
|
||||
test('activity timeline has proper list structure', async ({ page }) => {
|
||||
await page.goto(`/en/projects/${projectId}/issues/ISS-001`);
|
||||
|
||||
// Activity should be a list
|
||||
const list = page.getByRole('list', { name: /issue activity/i });
|
||||
await expect(list).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user