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:
266
frontend/tests/features/issues/components/IssueTable.test.tsx
Normal file
266
frontend/tests/features/issues/components/IssueTable.test.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* IssueTable Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { IssueTable } from '@/features/issues/components/IssueTable';
|
||||
import type { IssueSummary, IssueSort } from '@/features/issues/types';
|
||||
|
||||
const mockIssues: IssueSummary[] = [
|
||||
{
|
||||
id: 'issue-1',
|
||||
number: 42,
|
||||
title: 'Test Issue 1',
|
||||
description: 'Description 1',
|
||||
status: 'open',
|
||||
priority: 'high',
|
||||
labels: ['bug', 'frontend'],
|
||||
sprint: 'Sprint 1',
|
||||
assignee: { id: 'user-1', name: 'Test User', type: 'human' },
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-02T00:00:00Z',
|
||||
sync_status: 'synced',
|
||||
},
|
||||
{
|
||||
id: 'issue-2',
|
||||
number: 43,
|
||||
title: 'Test Issue 2',
|
||||
description: 'Description 2',
|
||||
status: 'in_progress',
|
||||
priority: 'medium',
|
||||
labels: ['feature'],
|
||||
sprint: null,
|
||||
assignee: null,
|
||||
created_at: '2025-01-02T00:00:00Z',
|
||||
updated_at: '2025-01-03T00:00:00Z',
|
||||
sync_status: 'pending',
|
||||
},
|
||||
];
|
||||
|
||||
describe('IssueTable', () => {
|
||||
const defaultSort: IssueSort = { field: 'number', direction: 'asc' };
|
||||
const mockOnSelectionChange = jest.fn();
|
||||
const mockOnIssueClick = jest.fn();
|
||||
const mockOnSortChange = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
mockOnSelectionChange.mockClear();
|
||||
mockOnIssueClick.mockClear();
|
||||
mockOnSortChange.mockClear();
|
||||
});
|
||||
|
||||
it('renders issue rows', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Test Issue 1')).toBeInTheDocument();
|
||||
expect(screen.getByText('Test Issue 2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays issue numbers', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('42')).toBeInTheDocument();
|
||||
expect(screen.getByText('43')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows labels for issues', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('bug')).toBeInTheDocument();
|
||||
expect(screen.getByText('frontend')).toBeInTheDocument();
|
||||
expect(screen.getByText('feature')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onIssueClick when row is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
const row = screen.getByTestId('issue-row-issue-1');
|
||||
await user.click(row);
|
||||
|
||||
expect(mockOnIssueClick).toHaveBeenCalledWith('issue-1');
|
||||
});
|
||||
|
||||
it('handles issue selection', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find checkbox for first issue
|
||||
const checkbox = screen.getByRole('checkbox', { name: /select issue 42/i });
|
||||
await user.click(checkbox);
|
||||
|
||||
expect(mockOnSelectionChange).toHaveBeenCalledWith(['issue-1']);
|
||||
});
|
||||
|
||||
it('handles select all', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find select all checkbox
|
||||
const selectAllCheckbox = screen.getByRole('checkbox', { name: /select all issues/i });
|
||||
await user.click(selectAllCheckbox);
|
||||
|
||||
expect(mockOnSelectionChange).toHaveBeenCalledWith(['issue-1', 'issue-2']);
|
||||
});
|
||||
|
||||
it('handles deselect all when all selected', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={['issue-1', 'issue-2']}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find deselect all checkbox
|
||||
const selectAllCheckbox = screen.getByRole('checkbox', { name: /deselect all issues/i });
|
||||
await user.click(selectAllCheckbox);
|
||||
|
||||
expect(mockOnSelectionChange).toHaveBeenCalledWith([]);
|
||||
});
|
||||
|
||||
it('handles sorting by number', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Click the # column header
|
||||
const numberHeader = screen.getByRole('button', { name: /#/i });
|
||||
await user.click(numberHeader);
|
||||
|
||||
expect(mockOnSortChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('handles sorting by priority', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Click the Priority column header
|
||||
const priorityHeader = screen.getByRole('button', { name: /priority/i });
|
||||
await user.click(priorityHeader);
|
||||
|
||||
expect(mockOnSortChange).toHaveBeenCalledWith({ field: 'priority', direction: 'desc' });
|
||||
});
|
||||
|
||||
it('shows empty state when no issues', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={[]}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('No issues found')).toBeInTheDocument();
|
||||
expect(screen.getByText('Try adjusting your search or filters')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows unassigned text for issues without assignee', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Unassigned')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows backlog text for issues without sprint', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText('Backlog')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user