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:
117
frontend/tests/components/projects/AgentPanel.test.tsx
Normal file
117
frontend/tests/components/projects/AgentPanel.test.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { AgentPanel } from '@/components/projects/AgentPanel';
|
||||
import type { AgentInstance } from '@/components/projects/types';
|
||||
|
||||
const mockAgents: AgentInstance[] = [
|
||||
{
|
||||
id: 'agent-001',
|
||||
agent_type_id: 'type-po',
|
||||
project_id: 'proj-001',
|
||||
name: 'Product Owner',
|
||||
role: 'product_owner',
|
||||
status: 'active',
|
||||
current_task: 'Reviewing user stories',
|
||||
last_activity_at: new Date().toISOString(),
|
||||
spawned_at: '2025-01-15T00:00:00Z',
|
||||
avatar: 'PO',
|
||||
},
|
||||
{
|
||||
id: 'agent-002',
|
||||
agent_type_id: 'type-be',
|
||||
project_id: 'proj-001',
|
||||
name: 'Backend Engineer',
|
||||
role: 'backend_engineer',
|
||||
status: 'idle',
|
||||
current_task: 'Waiting for review',
|
||||
last_activity_at: new Date().toISOString(),
|
||||
spawned_at: '2025-01-15T00:00:00Z',
|
||||
},
|
||||
];
|
||||
|
||||
describe('AgentPanel', () => {
|
||||
it('renders agent panel with title', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
expect(screen.getByText('Active Agents')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows correct active agent count', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
expect(screen.getByText('1 of 2 agents working')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all agents', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
expect(screen.getByText('Product Owner')).toBeInTheDocument();
|
||||
expect(screen.getByText('Backend Engineer')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows agent current task', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
expect(screen.getByText('Reviewing user stories')).toBeInTheDocument();
|
||||
expect(screen.getByText('Waiting for review')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty state when no agents', () => {
|
||||
render(<AgentPanel agents={[]} />);
|
||||
expect(screen.getByText('No agents assigned to this project')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
const { container } = render(<AgentPanel agents={[]} isLoading />);
|
||||
expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('calls onManageAgents when button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onManageAgents = jest.fn();
|
||||
render(<AgentPanel agents={mockAgents} onManageAgents={onManageAgents} />);
|
||||
|
||||
await user.click(screen.getByText('Manage Agents'));
|
||||
expect(onManageAgents).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows action menu when actions are provided', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onAgentAction = jest.fn();
|
||||
render(<AgentPanel agents={mockAgents} onAgentAction={onAgentAction} />);
|
||||
|
||||
const agentItem = screen.getByTestId('agent-item-agent-001');
|
||||
const menuButton = within(agentItem).getByRole('button', {
|
||||
name: /actions for product owner/i,
|
||||
});
|
||||
|
||||
await user.click(menuButton);
|
||||
expect(screen.getByText('View Details')).toBeInTheDocument();
|
||||
expect(screen.getByText('Pause Agent')).toBeInTheDocument();
|
||||
expect(screen.getByText('Terminate Agent')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onAgentAction with correct params when action is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onAgentAction = jest.fn();
|
||||
render(<AgentPanel agents={mockAgents} onAgentAction={onAgentAction} />);
|
||||
|
||||
const agentItem = screen.getByTestId('agent-item-agent-001');
|
||||
const menuButton = within(agentItem).getByRole('button', {
|
||||
name: /actions for product owner/i,
|
||||
});
|
||||
|
||||
await user.click(menuButton);
|
||||
await user.click(screen.getByText('View Details'));
|
||||
|
||||
expect(onAgentAction).toHaveBeenCalledWith('agent-001', 'view');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<AgentPanel agents={mockAgents} className="custom-class" />);
|
||||
expect(screen.getByTestId('agent-panel')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('shows avatar initials for agent', () => {
|
||||
render(<AgentPanel agents={mockAgents} />);
|
||||
expect(screen.getByText('PO')).toBeInTheDocument();
|
||||
// Backend Engineer should have generated initials "BE"
|
||||
expect(screen.getByText('BE')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,81 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { AgentStatusIndicator } from '@/components/projects/AgentStatusIndicator';
|
||||
|
||||
describe('AgentStatusIndicator', () => {
|
||||
it('renders idle status with correct color', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="idle" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('bg-yellow-500');
|
||||
});
|
||||
|
||||
it('renders active status with correct color', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="active" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('bg-green-500');
|
||||
});
|
||||
|
||||
it('renders working status with animation', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="working" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('bg-green-500');
|
||||
expect(indicator).toHaveClass('animate-pulse');
|
||||
});
|
||||
|
||||
it('renders pending status with correct color', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="pending" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('bg-gray-400');
|
||||
});
|
||||
|
||||
it('renders error status with correct color', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="error" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('bg-red-500');
|
||||
});
|
||||
|
||||
it('renders terminated status with correct color', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="terminated" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('bg-gray-600');
|
||||
});
|
||||
|
||||
it('applies small size by default', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="active" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('h-2', 'w-2');
|
||||
});
|
||||
|
||||
it('applies medium size when specified', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="active" size="md" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('h-3', 'w-3');
|
||||
});
|
||||
|
||||
it('applies large size when specified', () => {
|
||||
const { container } = render(<AgentStatusIndicator status="active" size="lg" />);
|
||||
const indicator = container.querySelector('span > span');
|
||||
expect(indicator).toHaveClass('h-4', 'w-4');
|
||||
});
|
||||
|
||||
it('shows label when showLabel is true', () => {
|
||||
render(<AgentStatusIndicator status="active" showLabel />);
|
||||
expect(screen.getByText('Active')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show label by default', () => {
|
||||
render(<AgentStatusIndicator status="active" />);
|
||||
expect(screen.queryByText('Active')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has accessible status role and label', () => {
|
||||
render(<AgentStatusIndicator status="active" />);
|
||||
expect(screen.getByRole('status')).toHaveAttribute('aria-label', 'Status: Active');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<AgentStatusIndicator status="active" className="custom-class" />
|
||||
);
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
81
frontend/tests/components/projects/IssueSummary.test.tsx
Normal file
81
frontend/tests/components/projects/IssueSummary.test.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { IssueSummary } from '@/components/projects/IssueSummary';
|
||||
import type { IssueSummary as IssueSummaryType } from '@/components/projects/types';
|
||||
|
||||
const mockSummary: IssueSummaryType = {
|
||||
open: 12,
|
||||
in_progress: 8,
|
||||
in_review: 3,
|
||||
blocked: 2,
|
||||
done: 45,
|
||||
total: 70,
|
||||
};
|
||||
|
||||
describe('IssueSummary', () => {
|
||||
it('renders issue summary with title', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
expect(screen.getByText('Issue Summary')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays all status counts', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
|
||||
expect(screen.getByText('Open')).toBeInTheDocument();
|
||||
expect(screen.getByText('12')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('8')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('In Review')).toBeInTheDocument();
|
||||
expect(screen.getByText('3')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('Blocked')).toBeInTheDocument();
|
||||
expect(screen.getByText('2')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('Completed')).toBeInTheDocument();
|
||||
expect(screen.getByText('45')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty state when summary is null', () => {
|
||||
render(<IssueSummary summary={null} />);
|
||||
expect(screen.getByText('No issues found')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
const { container } = render(<IssueSummary summary={null} isLoading />);
|
||||
expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('shows View All Issues button with total count', () => {
|
||||
const onViewAllIssues = jest.fn();
|
||||
render(<IssueSummary summary={mockSummary} onViewAllIssues={onViewAllIssues} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /view all issues/i })).toBeInTheDocument();
|
||||
expect(screen.getByText('View All Issues (70)')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onViewAllIssues when button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onViewAllIssues = jest.fn();
|
||||
render(<IssueSummary summary={mockSummary} onViewAllIssues={onViewAllIssues} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /view all issues/i }));
|
||||
expect(onViewAllIssues).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('does not show View All button when onViewAllIssues is not provided', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
expect(screen.queryByRole('button', { name: /view all issues/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<IssueSummary summary={mockSummary} className="custom-class" />);
|
||||
expect(screen.getByTestId('issue-summary')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has accessible list role for status items', () => {
|
||||
render(<IssueSummary summary={mockSummary} />);
|
||||
expect(screen.getByRole('list', { name: /issue counts by status/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
92
frontend/tests/components/projects/ProgressBar.test.tsx
Normal file
92
frontend/tests/components/projects/ProgressBar.test.tsx
Normal file
@@ -0,0 +1,92 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ProgressBar } from '@/components/projects/ProgressBar';
|
||||
|
||||
describe('ProgressBar', () => {
|
||||
it('renders with correct progress value', () => {
|
||||
render(<ProgressBar value={50} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '50');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemin', '0');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemax', '100');
|
||||
});
|
||||
|
||||
it('renders with correct accessible label', () => {
|
||||
render(<ProgressBar value={75} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-label', 'Progress: 75%');
|
||||
});
|
||||
|
||||
it('clamps value to 0-100 range', () => {
|
||||
const { rerender } = render(<ProgressBar value={150} />);
|
||||
let progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '100');
|
||||
|
||||
rerender(<ProgressBar value={-50} />);
|
||||
progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '0');
|
||||
});
|
||||
|
||||
it('applies small size class when specified', () => {
|
||||
render(<ProgressBar value={50} size="sm" />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveClass('h-1');
|
||||
});
|
||||
|
||||
it('applies default size class', () => {
|
||||
render(<ProgressBar value={50} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveClass('h-2');
|
||||
});
|
||||
|
||||
it('applies large size class when specified', () => {
|
||||
render(<ProgressBar value={50} size="lg" />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveClass('h-3');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(<ProgressBar value={50} className="custom-class" />);
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('shows label when showLabel is true', () => {
|
||||
render(<ProgressBar value={75} showLabel />);
|
||||
expect(screen.getByText('Progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('75%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show label by default', () => {
|
||||
render(<ProgressBar value={75} />);
|
||||
expect(screen.queryByText('Progress')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies default variant styles', () => {
|
||||
const { container } = render(<ProgressBar value={50} />);
|
||||
const bar = container.querySelector('[style*="width"]');
|
||||
expect(bar).toHaveClass('bg-primary');
|
||||
});
|
||||
|
||||
it('applies success variant styles', () => {
|
||||
const { container } = render(<ProgressBar value={50} variant="success" />);
|
||||
const bar = container.querySelector('[style*="width"]');
|
||||
expect(bar).toHaveClass('bg-green-500');
|
||||
});
|
||||
|
||||
it('applies warning variant styles', () => {
|
||||
const { container } = render(<ProgressBar value={50} variant="warning" />);
|
||||
const bar = container.querySelector('[style*="width"]');
|
||||
expect(bar).toHaveClass('bg-yellow-500');
|
||||
});
|
||||
|
||||
it('applies error variant styles', () => {
|
||||
const { container } = render(<ProgressBar value={50} variant="error" />);
|
||||
const bar = container.querySelector('[style*="width"]');
|
||||
expect(bar).toHaveClass('bg-red-500');
|
||||
});
|
||||
|
||||
it('uses custom aria-label when provided', () => {
|
||||
render(<ProgressBar value={50} aria-label="Custom label" />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-label', 'Custom label');
|
||||
});
|
||||
});
|
||||
145
frontend/tests/components/projects/ProjectHeader.test.tsx
Normal file
145
frontend/tests/components/projects/ProjectHeader.test.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ProjectHeader } from '@/components/projects/ProjectHeader';
|
||||
import type { Project } from '@/components/projects/types';
|
||||
|
||||
const mockProject: Project = {
|
||||
id: 'proj-001',
|
||||
name: 'Test Project',
|
||||
description: 'A test project for unit testing',
|
||||
status: 'in_progress',
|
||||
autonomy_level: 'milestone',
|
||||
created_at: '2025-01-15T00:00:00Z',
|
||||
owner_id: 'user-001',
|
||||
};
|
||||
|
||||
describe('ProjectHeader', () => {
|
||||
it('renders project name', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
expect(screen.getByText('Test Project')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders project description', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
expect(screen.getByText('A test project for unit testing')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders project status badge', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders autonomy level badge', () => {
|
||||
render(<ProjectHeader project={mockProject} />);
|
||||
expect(screen.getByText('Milestone')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders nothing when project is null', () => {
|
||||
const { container } = render(<ProjectHeader project={null} />);
|
||||
expect(container.firstChild).toBeNull();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
const { container } = render(<ProjectHeader project={null} isLoading />);
|
||||
expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('shows pause button when canPause is true and project is in_progress', () => {
|
||||
const onPauseProject = jest.fn();
|
||||
render(
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
canPause={true}
|
||||
onPauseProject={onPauseProject}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByRole('button', { name: /pause project/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show pause button when project is not in_progress', () => {
|
||||
const completedProject = { ...mockProject, status: 'completed' as const };
|
||||
render(<ProjectHeader project={completedProject} canPause={true} />);
|
||||
expect(screen.queryByRole('button', { name: /pause project/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows run sprint button when canStart is true', () => {
|
||||
const onStartSprint = jest.fn();
|
||||
render(
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
canStart={true}
|
||||
onStartSprint={onStartSprint}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByRole('button', { name: /run sprint/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show run sprint button when project is completed', () => {
|
||||
const completedProject = { ...mockProject, status: 'completed' as const };
|
||||
render(<ProjectHeader project={completedProject} canStart={true} />);
|
||||
expect(screen.queryByRole('button', { name: /run sprint/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onStartSprint when run sprint button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onStartSprint = jest.fn();
|
||||
render(
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
canStart={true}
|
||||
onStartSprint={onStartSprint}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /run sprint/i }));
|
||||
expect(onStartSprint).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onPauseProject when pause button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onPauseProject = jest.fn();
|
||||
render(
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
canPause={true}
|
||||
onPauseProject={onPauseProject}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /pause project/i }));
|
||||
expect(onPauseProject).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onCreateSprint when new sprint button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onCreateSprint = jest.fn();
|
||||
render(
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
onCreateSprint={onCreateSprint}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /new sprint/i }));
|
||||
expect(onCreateSprint).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('calls onSettings when settings button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onSettings = jest.fn();
|
||||
render(
|
||||
<ProjectHeader
|
||||
project={mockProject}
|
||||
onSettings={onSettings}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /project settings/i }));
|
||||
expect(onSettings).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<ProjectHeader project={mockProject} className="custom-class" />);
|
||||
expect(screen.getByTestId('project-header')).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
147
frontend/tests/components/projects/RecentActivity.test.tsx
Normal file
147
frontend/tests/components/projects/RecentActivity.test.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { RecentActivity } from '@/components/projects/RecentActivity';
|
||||
import type { ActivityItem } from '@/components/projects/types';
|
||||
|
||||
const mockActivities: ActivityItem[] = [
|
||||
{
|
||||
id: 'act-001',
|
||||
type: 'agent_message',
|
||||
agent: 'Product Owner',
|
||||
message: 'Approved user story #42',
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-002',
|
||||
type: 'issue_update',
|
||||
agent: 'Backend Engineer',
|
||||
message: 'Moved issue #38 to review',
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: 'act-003',
|
||||
type: 'approval_request',
|
||||
agent: 'Architect',
|
||||
message: 'Requesting API design approval',
|
||||
timestamp: new Date().toISOString(),
|
||||
requires_action: true,
|
||||
},
|
||||
];
|
||||
|
||||
describe('RecentActivity', () => {
|
||||
it('renders recent activity with title', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
expect(screen.getByText('Recent Activity')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays all activities', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
expect(screen.getByText('Product Owner')).toBeInTheDocument();
|
||||
expect(screen.getByText('Approved user story #42')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('Backend Engineer')).toBeInTheDocument();
|
||||
expect(screen.getByText('Moved issue #38 to review')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('Architect')).toBeInTheDocument();
|
||||
expect(screen.getByText('Requesting API design approval')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty state when no activities', () => {
|
||||
render(<RecentActivity activities={[]} />);
|
||||
expect(screen.getByText('No recent activity')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
const { container } = render(<RecentActivity activities={[]} isLoading />);
|
||||
expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('respects maxItems prop', () => {
|
||||
render(<RecentActivity activities={mockActivities} maxItems={2} />);
|
||||
expect(screen.getByText('Product Owner')).toBeInTheDocument();
|
||||
expect(screen.getByText('Backend Engineer')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Architect')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows View All button when there are more activities than maxItems', () => {
|
||||
const onViewAll = jest.fn();
|
||||
render(
|
||||
<RecentActivity
|
||||
activities={mockActivities}
|
||||
maxItems={2}
|
||||
onViewAll={onViewAll}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByRole('button', { name: /view all/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not show View All button when all activities are shown', () => {
|
||||
const onViewAll = jest.fn();
|
||||
render(
|
||||
<RecentActivity
|
||||
activities={mockActivities}
|
||||
maxItems={5}
|
||||
onViewAll={onViewAll}
|
||||
/>
|
||||
);
|
||||
expect(screen.queryByRole('button', { name: /view all/i })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onViewAll when View All button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onViewAll = jest.fn();
|
||||
render(
|
||||
<RecentActivity
|
||||
activities={mockActivities}
|
||||
maxItems={2}
|
||||
onViewAll={onViewAll}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /view all/i }));
|
||||
expect(onViewAll).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('shows Review Request button for items requiring action', () => {
|
||||
const onActionClick = jest.fn();
|
||||
render(
|
||||
<RecentActivity
|
||||
activities={mockActivities}
|
||||
onActionClick={onActionClick}
|
||||
/>
|
||||
);
|
||||
expect(screen.getByRole('button', { name: /review request/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onActionClick when Review Request button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const onActionClick = jest.fn();
|
||||
render(
|
||||
<RecentActivity
|
||||
activities={mockActivities}
|
||||
onActionClick={onActionClick}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /review request/i }));
|
||||
expect(onActionClick).toHaveBeenCalledWith('act-003');
|
||||
});
|
||||
|
||||
it('highlights activities requiring action', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
|
||||
const activityItem = screen.getByTestId('activity-item-act-003');
|
||||
const iconContainer = activityItem.querySelector('.bg-yellow-100');
|
||||
expect(iconContainer).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<RecentActivity activities={mockActivities} className="custom-class" />);
|
||||
expect(screen.getByTestId('recent-activity')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has accessible list role', () => {
|
||||
render(<RecentActivity activities={mockActivities} />);
|
||||
expect(screen.getByRole('list', { name: /recent project activity/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
132
frontend/tests/components/projects/SprintProgress.test.tsx
Normal file
132
frontend/tests/components/projects/SprintProgress.test.tsx
Normal file
@@ -0,0 +1,132 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { SprintProgress } from '@/components/projects/SprintProgress';
|
||||
import type { Sprint, BurndownDataPoint } from '@/components/projects/types';
|
||||
|
||||
const mockSprint: Sprint = {
|
||||
id: 'sprint-001',
|
||||
project_id: 'proj-001',
|
||||
name: 'Sprint 3',
|
||||
goal: 'Complete checkout flow',
|
||||
status: 'active',
|
||||
start_date: '2025-01-27',
|
||||
end_date: '2025-02-10',
|
||||
total_issues: 15,
|
||||
completed_issues: 8,
|
||||
in_progress_issues: 4,
|
||||
blocked_issues: 1,
|
||||
todo_issues: 2,
|
||||
};
|
||||
|
||||
const mockBurndownData: BurndownDataPoint[] = [
|
||||
{ day: 1, remaining: 45, ideal: 45 },
|
||||
{ day: 2, remaining: 42, ideal: 42 },
|
||||
{ day: 3, remaining: 38, ideal: 39 },
|
||||
{ day: 4, remaining: 35, ideal: 36 },
|
||||
{ day: 5, remaining: 30, ideal: 33 },
|
||||
];
|
||||
|
||||
describe('SprintProgress', () => {
|
||||
it('renders sprint progress with title', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
expect(screen.getByText('Sprint Overview')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays sprint name and date range', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
expect(screen.getByText(/Sprint 3/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Jan 27 - Feb 10, 2025/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows progress percentage', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
// 8/15 = 53%
|
||||
expect(screen.getByText('53%')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays issue statistics', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
|
||||
expect(screen.getByText('Completed')).toBeInTheDocument();
|
||||
expect(screen.getByText('8')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('4')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('Blocked')).toBeInTheDocument();
|
||||
expect(screen.getByText('1')).toBeInTheDocument();
|
||||
|
||||
expect(screen.getByText('To Do')).toBeInTheDocument();
|
||||
expect(screen.getByText('2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders empty state when sprint is null', () => {
|
||||
render(<SprintProgress sprint={null} />);
|
||||
expect(screen.getByText('No active sprint')).toBeInTheDocument();
|
||||
expect(screen.getByText('No sprint is currently active')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows loading skeleton when isLoading is true', () => {
|
||||
const { container } = render(<SprintProgress sprint={null} isLoading />);
|
||||
expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('renders burndown chart when data is provided', () => {
|
||||
render(<SprintProgress sprint={mockSprint} burndownData={mockBurndownData} />);
|
||||
expect(screen.getByText('Burndown Chart')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows sprint selector when multiple sprints are available', () => {
|
||||
const availableSprints = [
|
||||
{ id: 'sprint-001', name: 'Sprint 3' },
|
||||
{ id: 'sprint-002', name: 'Sprint 2' },
|
||||
];
|
||||
const onSprintChange = jest.fn();
|
||||
|
||||
render(
|
||||
<SprintProgress
|
||||
sprint={mockSprint}
|
||||
availableSprints={availableSprints}
|
||||
selectedSprintId="sprint-001"
|
||||
onSprintChange={onSprintChange}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByRole('combobox', { name: /select sprint/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
// Note: Radix Select doesn't work well with jsdom. Skipping interactive test.
|
||||
// This would need to be tested in E2E tests with Playwright.
|
||||
it.skip('calls onSprintChange when sprint is selected', async () => {
|
||||
const user = userEvent.setup();
|
||||
const availableSprints = [
|
||||
{ id: 'sprint-001', name: 'Sprint 3' },
|
||||
{ id: 'sprint-002', name: 'Sprint 2' },
|
||||
];
|
||||
const onSprintChange = jest.fn();
|
||||
|
||||
render(
|
||||
<SprintProgress
|
||||
sprint={mockSprint}
|
||||
availableSprints={availableSprints}
|
||||
selectedSprintId="sprint-001"
|
||||
onSprintChange={onSprintChange}
|
||||
/>
|
||||
);
|
||||
|
||||
await user.click(screen.getByRole('combobox', { name: /select sprint/i }));
|
||||
await user.click(screen.getByText('Sprint 2'));
|
||||
|
||||
expect(onSprintChange).toHaveBeenCalledWith('sprint-002');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<SprintProgress sprint={mockSprint} className="custom-class" />);
|
||||
expect(screen.getByTestId('sprint-progress')).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has accessible list role for issue statistics', () => {
|
||||
render(<SprintProgress sprint={mockSprint} />);
|
||||
expect(screen.getByRole('list', { name: /sprint issue statistics/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
72
frontend/tests/components/projects/StatusBadge.test.tsx
Normal file
72
frontend/tests/components/projects/StatusBadge.test.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { ProjectStatusBadge, AutonomyBadge } from '@/components/projects/StatusBadge';
|
||||
|
||||
describe('ProjectStatusBadge', () => {
|
||||
it('renders in_progress status correctly', () => {
|
||||
render(<ProjectStatusBadge status="in_progress" />);
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders completed status correctly', () => {
|
||||
render(<ProjectStatusBadge status="completed" />);
|
||||
expect(screen.getByText('Completed')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders blocked status correctly', () => {
|
||||
render(<ProjectStatusBadge status="blocked" />);
|
||||
expect(screen.getByText('Blocked')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders paused status correctly', () => {
|
||||
render(<ProjectStatusBadge status="paused" />);
|
||||
expect(screen.getByText('Paused')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders draft status correctly', () => {
|
||||
render(<ProjectStatusBadge status="draft" />);
|
||||
expect(screen.getByText('Draft')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders archived status correctly', () => {
|
||||
render(<ProjectStatusBadge status="archived" />);
|
||||
expect(screen.getByText('Archived')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<ProjectStatusBadge status="in_progress" className="custom-class" />
|
||||
);
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
|
||||
describe('AutonomyBadge', () => {
|
||||
it('renders full_control level correctly', () => {
|
||||
render(<AutonomyBadge level="full_control" />);
|
||||
expect(screen.getByText('Full Control')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders milestone level correctly', () => {
|
||||
render(<AutonomyBadge level="milestone" />);
|
||||
expect(screen.getByText('Milestone')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders autonomous level correctly', () => {
|
||||
render(<AutonomyBadge level="autonomous" />);
|
||||
expect(screen.getByText('Autonomous')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('has title attribute with description', () => {
|
||||
render(<AutonomyBadge level="milestone" />);
|
||||
// The Badge component is the closest ancestor with the title
|
||||
const badge = screen.getByText('Milestone').closest('[title]');
|
||||
expect(badge).toHaveAttribute('title', 'Approve at sprint boundaries');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<AutonomyBadge level="milestone" className="custom-class" />
|
||||
);
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* Tests for SelectableCard component
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { SelectableCard } from '@/components/projects/wizard/SelectableCard';
|
||||
|
||||
describe('SelectableCard', () => {
|
||||
const defaultProps = {
|
||||
selected: false,
|
||||
onClick: jest.fn(),
|
||||
children: <span>Card Content</span>,
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
it('renders children', () => {
|
||||
render(<SelectableCard {...defaultProps} />);
|
||||
expect(screen.getByText('Card Content')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onClick when clicked', () => {
|
||||
render(<SelectableCard {...defaultProps} />);
|
||||
fireEvent.click(screen.getByRole('button'));
|
||||
expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
it('has aria-pressed false when not selected', () => {
|
||||
render(<SelectableCard {...defaultProps} />);
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'false');
|
||||
});
|
||||
|
||||
it('has aria-pressed true when selected', () => {
|
||||
render(<SelectableCard {...defaultProps} selected={true} />);
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-pressed', 'true');
|
||||
});
|
||||
|
||||
it('applies custom aria-label', () => {
|
||||
render(<SelectableCard {...defaultProps} aria-label="Select option A" />);
|
||||
expect(screen.getByRole('button')).toHaveAttribute('aria-label', 'Select option A');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<SelectableCard {...defaultProps} className="my-custom-class" />);
|
||||
expect(screen.getByRole('button')).toHaveClass('my-custom-class');
|
||||
});
|
||||
|
||||
it('applies selected styles when selected', () => {
|
||||
const { rerender } = render(<SelectableCard {...defaultProps} />);
|
||||
const button = screen.getByRole('button');
|
||||
|
||||
expect(button).toHaveClass('border-border');
|
||||
expect(button).not.toHaveClass('border-primary');
|
||||
|
||||
rerender(<SelectableCard {...defaultProps} selected={true} />);
|
||||
expect(button).toHaveClass('border-primary');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,81 @@
|
||||
/**
|
||||
* Tests for StepIndicator component
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { StepIndicator } from '@/components/projects/wizard/StepIndicator';
|
||||
|
||||
describe('StepIndicator', () => {
|
||||
describe('non-script mode (6 steps)', () => {
|
||||
it('renders correct step count', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={false} />);
|
||||
expect(screen.getByText('Step 1 of 6')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows correct step label for each step', () => {
|
||||
const { rerender } = render(<StepIndicator currentStep={1} isScriptMode={false} />);
|
||||
expect(screen.getByText('Basic Info')).toBeInTheDocument();
|
||||
|
||||
rerender(<StepIndicator currentStep={2} isScriptMode={false} />);
|
||||
expect(screen.getByText('Complexity')).toBeInTheDocument();
|
||||
|
||||
rerender(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
expect(screen.getByText('Client Mode')).toBeInTheDocument();
|
||||
|
||||
rerender(<StepIndicator currentStep={4} isScriptMode={false} />);
|
||||
expect(screen.getByText('Autonomy')).toBeInTheDocument();
|
||||
|
||||
rerender(<StepIndicator currentStep={5} isScriptMode={false} />);
|
||||
expect(screen.getByText('Agent Chat')).toBeInTheDocument();
|
||||
|
||||
rerender(<StepIndicator currentStep={6} isScriptMode={false} />);
|
||||
expect(screen.getByText('Review')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders 6 progress segments', () => {
|
||||
render(<StepIndicator currentStep={3} isScriptMode={false} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toBeInTheDocument();
|
||||
expect(progressbar).toHaveAttribute('aria-valuenow', '3');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemax', '6');
|
||||
});
|
||||
});
|
||||
|
||||
describe('script mode (4 steps)', () => {
|
||||
it('renders correct step count', () => {
|
||||
render(<StepIndicator currentStep={1} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 1 of 4')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows correct step labels (no Client Mode or Autonomy)', () => {
|
||||
const { rerender } = render(<StepIndicator currentStep={1} isScriptMode={true} />);
|
||||
expect(screen.getByText('Basic Info')).toBeInTheDocument();
|
||||
|
||||
rerender(<StepIndicator currentStep={2} isScriptMode={true} />);
|
||||
expect(screen.getByText('Complexity')).toBeInTheDocument();
|
||||
|
||||
// Step 5 (Agent Chat) maps to display step 3
|
||||
rerender(<StepIndicator currentStep={5} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 3 of 4')).toBeInTheDocument();
|
||||
expect(screen.getByText('Agent Chat')).toBeInTheDocument();
|
||||
|
||||
// Step 6 (Review) maps to display step 4
|
||||
rerender(<StepIndicator currentStep={6} isScriptMode={true} />);
|
||||
expect(screen.getByText('Step 4 of 4')).toBeInTheDocument();
|
||||
expect(screen.getByText('Review')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders 4 progress segments', () => {
|
||||
render(<StepIndicator currentStep={5} isScriptMode={true} />);
|
||||
const progressbar = screen.getByRole('progressbar');
|
||||
expect(progressbar).toHaveAttribute('aria-valuemax', '4');
|
||||
});
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<StepIndicator currentStep={1} isScriptMode={false} className="my-custom-class" />
|
||||
);
|
||||
expect(container.firstChild).toHaveClass('my-custom-class');
|
||||
});
|
||||
});
|
||||
154
frontend/tests/components/projects/wizard/constants.test.ts
Normal file
154
frontend/tests/components/projects/wizard/constants.test.ts
Normal file
@@ -0,0 +1,154 @@
|
||||
/**
|
||||
* Tests for wizard constants and utility functions
|
||||
*/
|
||||
|
||||
import {
|
||||
complexityOptions,
|
||||
clientModeOptions,
|
||||
autonomyOptions,
|
||||
getTotalSteps,
|
||||
getStepLabels,
|
||||
getDisplayStep,
|
||||
WIZARD_STEPS,
|
||||
} from '@/components/projects/wizard/constants';
|
||||
|
||||
describe('complexityOptions', () => {
|
||||
it('has 4 options', () => {
|
||||
expect(complexityOptions).toHaveLength(4);
|
||||
});
|
||||
|
||||
it('includes script with skipConfig: true', () => {
|
||||
const script = complexityOptions.find((o) => o.id === 'script');
|
||||
expect(script).toBeDefined();
|
||||
expect(script?.skipConfig).toBe(true);
|
||||
});
|
||||
|
||||
it('has other options with skipConfig: false', () => {
|
||||
const others = complexityOptions.filter((o) => o.id !== 'script');
|
||||
expect(others.every((o) => o.skipConfig === false)).toBe(true);
|
||||
});
|
||||
|
||||
it('has correct timelines', () => {
|
||||
const script = complexityOptions.find((o) => o.id === 'script');
|
||||
const simple = complexityOptions.find((o) => o.id === 'simple');
|
||||
const medium = complexityOptions.find((o) => o.id === 'medium');
|
||||
const complex = complexityOptions.find((o) => o.id === 'complex');
|
||||
|
||||
expect(script?.scope).toContain('Minutes to 1-2 hours');
|
||||
expect(simple?.scope).toContain('2-3 days');
|
||||
expect(medium?.scope).toContain('2-3 weeks');
|
||||
expect(complex?.scope).toContain('2-3 months');
|
||||
});
|
||||
});
|
||||
|
||||
describe('clientModeOptions', () => {
|
||||
it('has 2 options', () => {
|
||||
expect(clientModeOptions).toHaveLength(2);
|
||||
});
|
||||
|
||||
it('includes technical and auto modes', () => {
|
||||
const ids = clientModeOptions.map((o) => o.id);
|
||||
expect(ids).toContain('technical');
|
||||
expect(ids).toContain('auto');
|
||||
});
|
||||
});
|
||||
|
||||
describe('autonomyOptions', () => {
|
||||
it('has 3 options', () => {
|
||||
expect(autonomyOptions).toHaveLength(3);
|
||||
});
|
||||
|
||||
it('includes all autonomy levels', () => {
|
||||
const ids = autonomyOptions.map((o) => o.id);
|
||||
expect(ids).toContain('full_control');
|
||||
expect(ids).toContain('milestone');
|
||||
expect(ids).toContain('autonomous');
|
||||
});
|
||||
|
||||
it('has valid approval matrices', () => {
|
||||
autonomyOptions.forEach((option) => {
|
||||
expect(option.approvals).toHaveProperty('codeChanges');
|
||||
expect(option.approvals).toHaveProperty('issueUpdates');
|
||||
expect(option.approvals).toHaveProperty('architectureDecisions');
|
||||
expect(option.approvals).toHaveProperty('sprintPlanning');
|
||||
expect(option.approvals).toHaveProperty('deployments');
|
||||
});
|
||||
});
|
||||
|
||||
it('full_control requires all approvals', () => {
|
||||
const fullControl = autonomyOptions.find((o) => o.id === 'full_control');
|
||||
expect(Object.values(fullControl!.approvals).every(Boolean)).toBe(true);
|
||||
});
|
||||
|
||||
it('autonomous only requires architecture and deployments', () => {
|
||||
const autonomous = autonomyOptions.find((o) => o.id === 'autonomous');
|
||||
expect(autonomous!.approvals.codeChanges).toBe(false);
|
||||
expect(autonomous!.approvals.issueUpdates).toBe(false);
|
||||
expect(autonomous!.approvals.architectureDecisions).toBe(true);
|
||||
expect(autonomous!.approvals.sprintPlanning).toBe(false);
|
||||
expect(autonomous!.approvals.deployments).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getTotalSteps', () => {
|
||||
it('returns 6 for non-script mode', () => {
|
||||
expect(getTotalSteps(false)).toBe(6);
|
||||
});
|
||||
|
||||
it('returns 4 for script mode', () => {
|
||||
expect(getTotalSteps(true)).toBe(4);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getStepLabels', () => {
|
||||
it('returns 6 labels for non-script mode', () => {
|
||||
const labels = getStepLabels(false);
|
||||
expect(labels).toHaveLength(6);
|
||||
expect(labels).toEqual([
|
||||
'Basic Info',
|
||||
'Complexity',
|
||||
'Client Mode',
|
||||
'Autonomy',
|
||||
'Agent Chat',
|
||||
'Review',
|
||||
]);
|
||||
});
|
||||
|
||||
it('returns 4 labels for script mode (no Client Mode or Autonomy)', () => {
|
||||
const labels = getStepLabels(true);
|
||||
expect(labels).toHaveLength(4);
|
||||
expect(labels).toEqual(['Basic Info', 'Complexity', 'Agent Chat', 'Review']);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getDisplayStep', () => {
|
||||
it('returns actual step for non-script mode', () => {
|
||||
expect(getDisplayStep(1, false)).toBe(1);
|
||||
expect(getDisplayStep(2, false)).toBe(2);
|
||||
expect(getDisplayStep(3, false)).toBe(3);
|
||||
expect(getDisplayStep(4, false)).toBe(4);
|
||||
expect(getDisplayStep(5, false)).toBe(5);
|
||||
expect(getDisplayStep(6, false)).toBe(6);
|
||||
});
|
||||
|
||||
it('maps steps correctly for script mode', () => {
|
||||
// Steps 1 and 2 stay the same
|
||||
expect(getDisplayStep(1, true)).toBe(1);
|
||||
expect(getDisplayStep(2, true)).toBe(2);
|
||||
// Step 5 (Agent Chat) becomes display step 3
|
||||
expect(getDisplayStep(5, true)).toBe(3);
|
||||
// Step 6 (Review) becomes display step 4
|
||||
expect(getDisplayStep(6, true)).toBe(4);
|
||||
});
|
||||
});
|
||||
|
||||
describe('WIZARD_STEPS', () => {
|
||||
it('has correct step numbers', () => {
|
||||
expect(WIZARD_STEPS.BASIC_INFO).toBe(1);
|
||||
expect(WIZARD_STEPS.COMPLEXITY).toBe(2);
|
||||
expect(WIZARD_STEPS.CLIENT_MODE).toBe(3);
|
||||
expect(WIZARD_STEPS.AUTONOMY).toBe(4);
|
||||
expect(WIZARD_STEPS.AGENT_CHAT).toBe(5);
|
||||
expect(WIZARD_STEPS.REVIEW).toBe(6);
|
||||
});
|
||||
});
|
||||
357
frontend/tests/components/projects/wizard/useWizardState.test.ts
Normal file
357
frontend/tests/components/projects/wizard/useWizardState.test.ts
Normal file
@@ -0,0 +1,357 @@
|
||||
/**
|
||||
* Tests for useWizardState hook
|
||||
*/
|
||||
|
||||
import { renderHook, act } from '@testing-library/react';
|
||||
import { useWizardState } from '@/components/projects/wizard/useWizardState';
|
||||
import { WIZARD_STEPS } from '@/components/projects/wizard/constants';
|
||||
|
||||
describe('useWizardState', () => {
|
||||
describe('initial state', () => {
|
||||
it('starts at step 1', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
|
||||
it('has empty form fields', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.state.projectName).toBe('');
|
||||
expect(result.current.state.description).toBe('');
|
||||
expect(result.current.state.repoUrl).toBe('');
|
||||
});
|
||||
|
||||
it('has null selections', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.state.complexity).toBeNull();
|
||||
expect(result.current.state.clientMode).toBeNull();
|
||||
expect(result.current.state.autonomyLevel).toBeNull();
|
||||
});
|
||||
|
||||
it('is not in script mode', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
expect(result.current.isScriptMode).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('updateState', () => {
|
||||
it('updates project name', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Project' });
|
||||
});
|
||||
expect(result.current.state.projectName).toBe('Test Project');
|
||||
});
|
||||
|
||||
it('updates multiple fields at once', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test',
|
||||
description: 'A test project',
|
||||
});
|
||||
});
|
||||
expect(result.current.state.projectName).toBe('Test');
|
||||
expect(result.current.state.description).toBe('A test project');
|
||||
});
|
||||
});
|
||||
|
||||
describe('resetState', () => {
|
||||
it('resets to initial state', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Make some changes
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test',
|
||||
complexity: 'medium',
|
||||
step: 3,
|
||||
});
|
||||
});
|
||||
|
||||
// Reset
|
||||
act(() => {
|
||||
result.current.resetState();
|
||||
});
|
||||
|
||||
expect(result.current.state.projectName).toBe('');
|
||||
expect(result.current.state.complexity).toBeNull();
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('canProceed', () => {
|
||||
it('requires project name at least 3 chars for step 1', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'AB' });
|
||||
});
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'ABC' });
|
||||
});
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
|
||||
it('requires complexity selection for step 2', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Move to step 2
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test', step: 2 });
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'medium' });
|
||||
});
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
|
||||
it('requires client mode selection for step 3 (non-script)', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test',
|
||||
complexity: 'medium',
|
||||
step: 3,
|
||||
});
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ clientMode: 'technical' });
|
||||
});
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
|
||||
it('requires autonomy level for step 4 (non-script)', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test',
|
||||
complexity: 'medium',
|
||||
clientMode: 'auto',
|
||||
step: 4,
|
||||
});
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(false);
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ autonomyLevel: 'milestone' });
|
||||
});
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
|
||||
it('always allows proceeding from step 5 (agent chat)', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ step: 5 });
|
||||
});
|
||||
|
||||
expect(result.current.canProceed).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('navigation', () => {
|
||||
it('goNext increments step', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test Project' });
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(2);
|
||||
});
|
||||
|
||||
it('goBack decrements step', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'Test', step: 3 });
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.goBack();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(2);
|
||||
});
|
||||
|
||||
it('goBack does nothing at step 1', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.goBack();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
|
||||
it('does not proceed when canProceed is false', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Project name too short
|
||||
act(() => {
|
||||
result.current.updateState({ projectName: 'AB' });
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(1);
|
||||
});
|
||||
});
|
||||
|
||||
describe('script mode', () => {
|
||||
it('sets isScriptMode when complexity is script', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({ complexity: 'script' });
|
||||
});
|
||||
|
||||
expect(result.current.isScriptMode).toBe(true);
|
||||
});
|
||||
|
||||
it('skips from step 2 to step 5 for scripts', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
// Set up step 2 with script complexity
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test Script',
|
||||
step: 2,
|
||||
complexity: 'script',
|
||||
});
|
||||
});
|
||||
|
||||
// Go next should skip to step 5
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(WIZARD_STEPS.AGENT_CHAT);
|
||||
});
|
||||
|
||||
it('auto-sets clientMode and autonomyLevel for scripts', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test Script',
|
||||
step: 2,
|
||||
complexity: 'script',
|
||||
});
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.goNext();
|
||||
});
|
||||
|
||||
expect(result.current.state.clientMode).toBe('auto');
|
||||
expect(result.current.state.autonomyLevel).toBe('autonomous');
|
||||
});
|
||||
|
||||
it('goBack from step 5 goes to step 2 for scripts', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test Script',
|
||||
complexity: 'script',
|
||||
step: 5,
|
||||
});
|
||||
});
|
||||
|
||||
act(() => {
|
||||
result.current.goBack();
|
||||
});
|
||||
|
||||
expect(result.current.state.step).toBe(WIZARD_STEPS.COMPLEXITY);
|
||||
});
|
||||
});
|
||||
|
||||
describe('getProjectData', () => {
|
||||
it('generates correct project data', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'My Test Project',
|
||||
description: 'A description',
|
||||
repoUrl: 'https://github.com/test/repo',
|
||||
complexity: 'medium',
|
||||
clientMode: 'technical',
|
||||
autonomyLevel: 'milestone',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
|
||||
expect(data.name).toBe('My Test Project');
|
||||
expect(data.slug).toBe('my-test-project');
|
||||
expect(data.description).toBe('A description');
|
||||
expect(data.autonomy_level).toBe('milestone');
|
||||
expect(data.settings.complexity).toBe('medium');
|
||||
expect(data.settings.client_mode).toBe('technical');
|
||||
expect(data.settings.repo_url).toBe('https://github.com/test/repo');
|
||||
});
|
||||
|
||||
it('generates URL-safe slug', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'My Project! With Special @#$ Characters',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
expect(data.slug).toBe('my-project-with-special-characters');
|
||||
});
|
||||
|
||||
it('excludes empty repoUrl from settings', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test Project',
|
||||
repoUrl: '',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
expect(data.settings.repo_url).toBeUndefined();
|
||||
});
|
||||
|
||||
it('uses defaults for null values', () => {
|
||||
const { result } = renderHook(() => useWizardState());
|
||||
|
||||
act(() => {
|
||||
result.current.updateState({
|
||||
projectName: 'Test Project',
|
||||
});
|
||||
});
|
||||
|
||||
const data = result.current.getProjectData();
|
||||
expect(data.autonomy_level).toBe('milestone');
|
||||
expect(data.settings.complexity).toBe('medium');
|
||||
expect(data.settings.client_mode).toBe('auto');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
/**
|
||||
* ActivityTimeline Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { ActivityTimeline } from '@/features/issues/components/ActivityTimeline';
|
||||
import type { IssueActivity } from '@/features/issues/types';
|
||||
|
||||
const mockActivities: IssueActivity[] = [
|
||||
{
|
||||
id: 'act-1',
|
||||
type: 'status_change',
|
||||
actor: { id: 'user-1', name: 'Test User', type: 'human' },
|
||||
message: 'moved issue from "Open" to "In Progress"',
|
||||
timestamp: '2 hours ago',
|
||||
},
|
||||
{
|
||||
id: 'act-2',
|
||||
type: 'comment',
|
||||
actor: { id: 'agent-1', name: 'Backend Agent', type: 'agent' },
|
||||
message: 'Started working on this issue',
|
||||
timestamp: '3 hours ago',
|
||||
},
|
||||
{
|
||||
id: 'act-3',
|
||||
type: 'created',
|
||||
actor: { id: 'user-2', name: 'Product Owner', type: 'human' },
|
||||
message: 'created this issue',
|
||||
timestamp: '1 day ago',
|
||||
},
|
||||
];
|
||||
|
||||
describe('ActivityTimeline', () => {
|
||||
it('renders all activities', () => {
|
||||
render(<ActivityTimeline activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByText('Test User')).toBeInTheDocument();
|
||||
expect(screen.getByText('Backend Agent')).toBeInTheDocument();
|
||||
expect(screen.getByText('Product Owner')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders activity messages', () => {
|
||||
render(<ActivityTimeline activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByText(/moved issue from "Open" to "In Progress"/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/Started working on this issue/)).toBeInTheDocument();
|
||||
expect(screen.getByText(/created this issue/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders timestamps', () => {
|
||||
render(<ActivityTimeline activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByText('2 hours ago')).toBeInTheDocument();
|
||||
expect(screen.getByText('3 hours ago')).toBeInTheDocument();
|
||||
expect(screen.getByText('1 day ago')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows add comment button when callback provided', () => {
|
||||
const mockOnAddComment = jest.fn();
|
||||
render(<ActivityTimeline activities={mockActivities} onAddComment={mockOnAddComment} />);
|
||||
|
||||
expect(screen.getByRole('button', { name: /add comment/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onAddComment when button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const mockOnAddComment = jest.fn();
|
||||
render(<ActivityTimeline activities={mockActivities} onAddComment={mockOnAddComment} />);
|
||||
|
||||
await user.click(screen.getByRole('button', { name: /add comment/i }));
|
||||
expect(mockOnAddComment).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('shows empty state when no activities', () => {
|
||||
render(<ActivityTimeline activities={[]} />);
|
||||
|
||||
expect(screen.getByText('No activity yet')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<ActivityTimeline activities={mockActivities} className="custom-class" />
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has proper list role for accessibility', () => {
|
||||
render(<ActivityTimeline activities={mockActivities} />);
|
||||
|
||||
expect(screen.getByRole('list', { name: /issue activity/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
126
frontend/tests/features/issues/components/IssueFilters.test.tsx
Normal file
126
frontend/tests/features/issues/components/IssueFilters.test.tsx
Normal file
@@ -0,0 +1,126 @@
|
||||
/**
|
||||
* IssueFilters Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { IssueFilters } from '@/features/issues/components/IssueFilters';
|
||||
import type { IssueFilters as IssueFiltersType } from '@/features/issues/types';
|
||||
|
||||
describe('IssueFilters', () => {
|
||||
const defaultFilters: IssueFiltersType = {
|
||||
status: 'all',
|
||||
priority: 'all',
|
||||
sprint: 'all',
|
||||
assignee: 'all',
|
||||
};
|
||||
|
||||
const mockOnFiltersChange = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
mockOnFiltersChange.mockClear();
|
||||
});
|
||||
|
||||
it('renders search input', () => {
|
||||
render(<IssueFilters filters={defaultFilters} onFiltersChange={mockOnFiltersChange} />);
|
||||
|
||||
expect(screen.getByPlaceholderText('Search issues...')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('calls onFiltersChange when search changes', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<IssueFilters filters={defaultFilters} onFiltersChange={mockOnFiltersChange} />);
|
||||
|
||||
const searchInput = screen.getByPlaceholderText('Search issues...');
|
||||
await user.type(searchInput, 'test');
|
||||
|
||||
// onFiltersChange should be called at least once
|
||||
expect(mockOnFiltersChange).toHaveBeenCalled();
|
||||
// The final state should contain the search term 'test' (may be in the last call)
|
||||
const allCalls = mockOnFiltersChange.mock.calls;
|
||||
const lastCall = allCalls[allCalls.length - 1][0];
|
||||
// The search value could include the typed characters
|
||||
expect(lastCall.search).toMatch(/t/);
|
||||
});
|
||||
|
||||
it('renders status filter', () => {
|
||||
render(<IssueFilters filters={defaultFilters} onFiltersChange={mockOnFiltersChange} />);
|
||||
|
||||
expect(screen.getByRole('combobox', { name: /filter by status/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('toggles extended filters when filter button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<IssueFilters filters={defaultFilters} onFiltersChange={mockOnFiltersChange} />);
|
||||
|
||||
// Extended filters should not be visible initially
|
||||
expect(screen.queryByLabelText('Priority')).not.toBeInTheDocument();
|
||||
|
||||
// Click the filter toggle button
|
||||
const filterButton = screen.getByRole('button', { name: /toggle extended filters/i });
|
||||
await user.click(filterButton);
|
||||
|
||||
// Extended filters should now be visible
|
||||
expect(screen.getByLabelText('Priority')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Sprint')).toBeInTheDocument();
|
||||
expect(screen.getByLabelText('Assignee')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows clear filters button when filters are active', async () => {
|
||||
const user = userEvent.setup();
|
||||
const activeFilters: IssueFiltersType = {
|
||||
...defaultFilters,
|
||||
status: 'open',
|
||||
};
|
||||
|
||||
render(<IssueFilters filters={activeFilters} onFiltersChange={mockOnFiltersChange} />);
|
||||
|
||||
// Open extended filters
|
||||
const filterButton = screen.getByRole('button', { name: /toggle extended filters/i });
|
||||
await user.click(filterButton);
|
||||
|
||||
// Clear filters button should be visible
|
||||
expect(screen.getByRole('button', { name: /clear filters/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clears filters when clear button is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
const activeFilters: IssueFiltersType = {
|
||||
...defaultFilters,
|
||||
status: 'open',
|
||||
search: 'test',
|
||||
};
|
||||
|
||||
render(<IssueFilters filters={activeFilters} onFiltersChange={mockOnFiltersChange} />);
|
||||
|
||||
// Open extended filters
|
||||
const filterButton = screen.getByRole('button', { name: /toggle extended filters/i });
|
||||
await user.click(filterButton);
|
||||
|
||||
// Click clear filters
|
||||
const clearButton = screen.getByRole('button', { name: /clear filters/i });
|
||||
await user.click(clearButton);
|
||||
|
||||
// Should call onFiltersChange with cleared filters
|
||||
expect(mockOnFiltersChange).toHaveBeenCalledWith({
|
||||
search: undefined,
|
||||
status: 'all',
|
||||
priority: 'all',
|
||||
sprint: 'all',
|
||||
assignee: 'all',
|
||||
labels: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<IssueFilters
|
||||
filters={defaultFilters}
|
||||
onFiltersChange={mockOnFiltersChange}
|
||||
className="custom-class"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
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();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,26 @@
|
||||
/**
|
||||
* PriorityBadge Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { PriorityBadge } from '@/features/issues/components/PriorityBadge';
|
||||
import type { IssuePriority } from '@/features/issues/types';
|
||||
|
||||
describe('PriorityBadge', () => {
|
||||
const priorities: IssuePriority[] = ['high', 'medium', 'low'];
|
||||
|
||||
it.each(priorities)('renders %s priority correctly', (priority) => {
|
||||
render(<PriorityBadge priority={priority} />);
|
||||
|
||||
// The priority should be displayed as capitalized
|
||||
const capitalizedPriority = priority.charAt(0).toUpperCase() + priority.slice(1);
|
||||
expect(screen.getByText(capitalizedPriority)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<PriorityBadge priority="high" className="custom-class" />);
|
||||
|
||||
const badge = screen.getByText('High');
|
||||
expect(badge).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* StatusBadge Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { StatusBadge } from '@/features/issues/components/StatusBadge';
|
||||
import type { IssueStatus } from '@/features/issues/types';
|
||||
|
||||
const statusLabels: Record<IssueStatus, string> = {
|
||||
open: 'Open',
|
||||
in_progress: 'In Progress',
|
||||
in_review: 'In Review',
|
||||
blocked: 'Blocked',
|
||||
done: 'Done',
|
||||
closed: 'Closed',
|
||||
};
|
||||
|
||||
describe('StatusBadge', () => {
|
||||
const statuses: IssueStatus[] = ['open', 'in_progress', 'in_review', 'blocked', 'done', 'closed'];
|
||||
|
||||
it.each(statuses)('renders %s status correctly', (status) => {
|
||||
render(<StatusBadge status={status} />);
|
||||
|
||||
// Check that the status text is present - use getAllByText since we have both visible and sr-only
|
||||
const elements = screen.getAllByText(statusLabels[status]);
|
||||
expect(elements.length).toBeGreaterThanOrEqual(1);
|
||||
});
|
||||
|
||||
it('hides label when showLabel is false', () => {
|
||||
render(<StatusBadge status="open" showLabel={false} />);
|
||||
|
||||
// The sr-only text should still be present
|
||||
expect(screen.getByText('Open')).toHaveClass('sr-only');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(<StatusBadge status="open" className="custom-class" />);
|
||||
|
||||
const wrapper = container.firstChild;
|
||||
expect(wrapper).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('renders with accessible label', () => {
|
||||
render(<StatusBadge status="open" showLabel={false} />);
|
||||
|
||||
// Should have sr-only text for screen readers
|
||||
expect(screen.getByText('Open')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
/**
|
||||
* StatusWorkflow Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { StatusWorkflow } from '@/features/issues/components/StatusWorkflow';
|
||||
import type { IssueStatus } from '@/features/issues/types';
|
||||
|
||||
describe('StatusWorkflow', () => {
|
||||
const mockOnStatusChange = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
mockOnStatusChange.mockClear();
|
||||
});
|
||||
|
||||
it('renders all status options', () => {
|
||||
render(
|
||||
<StatusWorkflow currentStatus="open" onStatusChange={mockOnStatusChange} />
|
||||
);
|
||||
|
||||
expect(screen.getByText('Open')).toBeInTheDocument();
|
||||
expect(screen.getByText('In Progress')).toBeInTheDocument();
|
||||
expect(screen.getByText('In Review')).toBeInTheDocument();
|
||||
expect(screen.getByText('Blocked')).toBeInTheDocument();
|
||||
expect(screen.getByText('Done')).toBeInTheDocument();
|
||||
expect(screen.getByText('Closed')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('highlights current status', () => {
|
||||
render(
|
||||
<StatusWorkflow currentStatus="in_progress" onStatusChange={mockOnStatusChange} />
|
||||
);
|
||||
|
||||
const inProgressButton = screen.getByRole('radio', { name: /in progress/i });
|
||||
expect(inProgressButton).toHaveAttribute('aria-checked', 'true');
|
||||
});
|
||||
|
||||
it('calls onStatusChange when status is clicked', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<StatusWorkflow currentStatus="open" onStatusChange={mockOnStatusChange} />
|
||||
);
|
||||
|
||||
const inProgressButton = screen.getByRole('radio', { name: /in progress/i });
|
||||
await user.click(inProgressButton);
|
||||
|
||||
expect(mockOnStatusChange).toHaveBeenCalledWith('in_progress');
|
||||
});
|
||||
|
||||
it('disables status buttons when disabled prop is true', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<StatusWorkflow currentStatus="open" onStatusChange={mockOnStatusChange} disabled />
|
||||
);
|
||||
|
||||
const inProgressButton = screen.getByRole('radio', { name: /in progress/i });
|
||||
expect(inProgressButton).toBeDisabled();
|
||||
|
||||
await user.click(inProgressButton);
|
||||
expect(mockOnStatusChange).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<StatusWorkflow
|
||||
currentStatus="open"
|
||||
onStatusChange={mockOnStatusChange}
|
||||
className="custom-class"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('has proper radiogroup role', () => {
|
||||
render(
|
||||
<StatusWorkflow currentStatus="open" onStatusChange={mockOnStatusChange} />
|
||||
);
|
||||
|
||||
expect(screen.getByRole('radiogroup', { name: /issue status/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,45 @@
|
||||
/**
|
||||
* SyncStatusIndicator Component Tests
|
||||
*/
|
||||
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { SyncStatusIndicator } from '@/features/issues/components/SyncStatusIndicator';
|
||||
import type { SyncStatus } from '@/features/issues/types';
|
||||
|
||||
describe('SyncStatusIndicator', () => {
|
||||
const statuses: SyncStatus[] = ['synced', 'pending', 'conflict', 'error'];
|
||||
|
||||
it.each(statuses)('renders %s status correctly', (status) => {
|
||||
render(<SyncStatusIndicator status={status} />);
|
||||
|
||||
// Should have accessible label containing "Sync status"
|
||||
const element = screen.getByRole('status');
|
||||
expect(element).toHaveAttribute('aria-label', expect.stringContaining('Sync status'));
|
||||
});
|
||||
|
||||
it('shows label when showLabel is true', () => {
|
||||
render(<SyncStatusIndicator status="synced" showLabel />);
|
||||
|
||||
expect(screen.getByText('Synced')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides label by default', () => {
|
||||
render(<SyncStatusIndicator status="synced" />);
|
||||
|
||||
expect(screen.queryByText('Synced')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
render(<SyncStatusIndicator status="synced" className="custom-class" />);
|
||||
|
||||
const element = screen.getByRole('status');
|
||||
expect(element).toHaveClass('custom-class');
|
||||
});
|
||||
|
||||
it('shows spinning icon for pending status', () => {
|
||||
const { container } = render(<SyncStatusIndicator status="pending" />);
|
||||
|
||||
const icon = container.querySelector('svg');
|
||||
expect(icon).toHaveClass('animate-spin');
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user