test(frontend): comprehensive test coverage improvements and bug fixes
- Raise coverage thresholds to 90% statements/lines/functions, 85% branches - Add comprehensive tests for ProjectDashboard, ProjectWizard, and all wizard steps - Add tests for issue management: IssueDetailPanel, BulkActions, IssueFilters - Expand IssueTable tests with keyboard navigation, dropdown menu, edge cases - Add useIssues hook tests covering all mutations and optimistic updates - Expand eventStore tests with selector hooks and additional scenarios - Expand useProjectEvents tests with error recovery, ping events, edge cases - Add PriorityBadge, StatusBadge, SyncStatusIndicator fallback branch tests - Add constants.test.ts for comprehensive constant validation Bug fixes: - Fix false positive rollback test to properly verify onMutate context setup - Replace deprecated substr() with substring() in mock helpers - Fix type errors: ProjectComplexity, ClientMode enum values - Fix unused imports and variables across test files - Fix @ts-expect-error directives and method override signatures 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,216 @@
|
||||
/**
|
||||
* AutonomyStep Component Tests
|
||||
*
|
||||
* Tests for the autonomy level selection step with approval matrix.
|
||||
*/
|
||||
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { AutonomyStep } from '@/components/projects/wizard/steps/AutonomyStep';
|
||||
import { autonomyOptions } from '@/components/projects/wizard/constants';
|
||||
import { approvalLabels } from '@/components/projects/wizard/types';
|
||||
import type { WizardState } from '@/components/projects/wizard/types';
|
||||
|
||||
describe('AutonomyStep', () => {
|
||||
const defaultState: WizardState = {
|
||||
step: 4,
|
||||
projectName: 'Test Project',
|
||||
description: '',
|
||||
repoUrl: '',
|
||||
complexity: 'medium',
|
||||
clientMode: 'technical',
|
||||
autonomyLevel: null,
|
||||
};
|
||||
|
||||
const mockUpdateState = jest.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('renders the step title', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
expect(screen.getByText('Autonomy Level')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the description text', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
expect(screen.getByText(/how much control do you want/i)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all autonomy options', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
autonomyOptions.forEach((option) => {
|
||||
// Labels appear multiple times (in cards and matrix), use getAllByText
|
||||
const labels = screen.getAllByText(option.label);
|
||||
expect(labels.length).toBeGreaterThan(0);
|
||||
expect(screen.getByText(option.description)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('renders "Best for" recommendations', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
autonomyOptions.forEach((option) => {
|
||||
expect(screen.getByText(option.recommended)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('has accessible radiogroup role', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
expect(screen.getByRole('radiogroup', { name: /autonomy level options/i })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Selection', () => {
|
||||
it('calls updateState when clicking full_control option', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const fullControlOption = screen.getByRole('button', { name: /full control.*review every action/i });
|
||||
await user.click(fullControlOption);
|
||||
|
||||
expect(mockUpdateState).toHaveBeenCalledWith({ autonomyLevel: 'full_control' });
|
||||
});
|
||||
|
||||
it('calls updateState when clicking milestone option', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const milestoneOption = screen.getByRole('button', { name: /milestone.*review at sprint/i });
|
||||
await user.click(milestoneOption);
|
||||
|
||||
expect(mockUpdateState).toHaveBeenCalledWith({ autonomyLevel: 'milestone' });
|
||||
});
|
||||
|
||||
it('calls updateState when clicking autonomous option', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const autonomousOption = screen.getByRole('button', { name: /autonomous.*only major decisions/i });
|
||||
await user.click(autonomousOption);
|
||||
|
||||
expect(mockUpdateState).toHaveBeenCalledWith({ autonomyLevel: 'autonomous' });
|
||||
});
|
||||
|
||||
it('shows visual selection indicator when an option is selected', () => {
|
||||
const stateWithSelection: WizardState = {
|
||||
...defaultState,
|
||||
autonomyLevel: 'milestone',
|
||||
};
|
||||
render(<AutonomyStep state={stateWithSelection} updateState={mockUpdateState} />);
|
||||
|
||||
// The selected card should have the check icon
|
||||
const checkIcons = document.querySelectorAll('.lucide-check');
|
||||
expect(checkIcons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Approval Badges', () => {
|
||||
it('renders approval badges for each option', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
// Check that badges are rendered with approval labels
|
||||
Object.values(approvalLabels).forEach((label) => {
|
||||
const badges = screen.getAllByText(new RegExp(label));
|
||||
expect(badges.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
it('shows Approve prefix for required approvals', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const approveBadges = screen.getAllByText(/^Approve:/);
|
||||
expect(approveBadges.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('shows Auto prefix for automatic approvals', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const autoBadges = screen.getAllByText(/^Auto:/);
|
||||
expect(autoBadges.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Approval Matrix Table', () => {
|
||||
it('renders the approval matrix card', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
expect(screen.getByText('Approval Matrix')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders table with column headers', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
expect(screen.getByRole('columnheader', { name: 'Action Type' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('columnheader', { name: 'Full Control' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('columnheader', { name: 'Milestone' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('columnheader', { name: 'Autonomous' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders all action types as rows', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const table = screen.getByRole('table', { name: /approval requirements/i });
|
||||
|
||||
Object.values(approvalLabels).forEach((label) => {
|
||||
expect(within(table).getByText(label)).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('shows Required badges in the matrix', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const requiredBadges = screen.getAllByText('Required');
|
||||
expect(requiredBadges.length).toBeGreaterThan(0);
|
||||
});
|
||||
|
||||
it('shows Automatic text in the matrix', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
const automaticTexts = screen.getAllByText('Automatic');
|
||||
expect(automaticTexts.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Accessibility', () => {
|
||||
it('each option has accessible aria-label', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
|
||||
autonomyOptions.forEach((option) => {
|
||||
const button = screen.getByRole('button', {
|
||||
name: new RegExp(`${option.label}.*${option.description}`, 'i')
|
||||
});
|
||||
expect(button).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it('table has accessible aria-label', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
expect(screen.getByRole('table', { name: /approval requirements/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('icons have aria-hidden attribute', () => {
|
||||
render(<AutonomyStep state={defaultState} updateState={mockUpdateState} />);
|
||||
const hiddenIcons = document.querySelectorAll('[aria-hidden="true"]');
|
||||
expect(hiddenIcons.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe('Edge cases', () => {
|
||||
it('allows changing selection', async () => {
|
||||
const user = userEvent.setup();
|
||||
const stateWithFullControl: WizardState = {
|
||||
...defaultState,
|
||||
autonomyLevel: 'full_control',
|
||||
};
|
||||
render(<AutonomyStep state={stateWithFullControl} updateState={mockUpdateState} />);
|
||||
|
||||
const autonomousOption = screen.getByRole('button', { name: /autonomous.*only major decisions/i });
|
||||
await user.click(autonomousOption);
|
||||
|
||||
expect(mockUpdateState).toHaveBeenCalledWith({ autonomyLevel: 'autonomous' });
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user