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:
@@ -265,4 +265,280 @@ describe('IssueTable', () => {
|
||||
|
||||
expect(screen.getByText('Backlog')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('deselects issue when clicking selected checkbox', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={['issue-1']}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find checkbox for first issue (already selected)
|
||||
const checkbox = screen.getByRole('checkbox', { name: /select issue 42/i });
|
||||
await user.click(checkbox);
|
||||
|
||||
expect(mockOnSelectionChange).toHaveBeenCalledWith([]);
|
||||
});
|
||||
|
||||
it('handles keyboard navigation for number column sorting', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find the # column header and press Enter
|
||||
const numberHeader = screen.getByRole('button', { name: /#/i });
|
||||
numberHeader.focus();
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
expect(mockOnSortChange).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('handles keyboard navigation for priority column sorting', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find the Priority column header and press Enter
|
||||
const priorityHeader = screen.getByRole('button', { name: /priority/i });
|
||||
priorityHeader.focus();
|
||||
await user.keyboard('{Enter}');
|
||||
|
||||
expect(mockOnSortChange).toHaveBeenCalledWith({ field: 'priority', direction: 'desc' });
|
||||
});
|
||||
|
||||
it('toggles sort direction when clicking same column', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={{ field: 'number', direction: 'asc' }}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Click number header (currently sorted asc)
|
||||
const numberHeader = screen.getByRole('button', { name: /#/i });
|
||||
await user.click(numberHeader);
|
||||
|
||||
// Should toggle to desc
|
||||
expect(mockOnSortChange).toHaveBeenCalledWith({ field: 'number', direction: 'desc' });
|
||||
});
|
||||
|
||||
it('shows agent icon for agent assignee', () => {
|
||||
const issueWithAgentAssignee: IssueSummary[] = [
|
||||
{
|
||||
id: 'issue-1',
|
||||
number: 42,
|
||||
type: 'bug',
|
||||
title: 'Test Issue',
|
||||
description: 'Description',
|
||||
status: 'open',
|
||||
priority: 'high',
|
||||
labels: [],
|
||||
sprint: null,
|
||||
assignee: { id: 'agent-1', name: 'Test Agent', type: 'agent' },
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-02T00:00:00Z',
|
||||
sync_status: 'synced',
|
||||
},
|
||||
];
|
||||
|
||||
render(
|
||||
<IssueTable
|
||||
issues={issueWithAgentAssignee}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Check that agent name is displayed
|
||||
expect(screen.getByText('Test Agent')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('truncates labels when more than 3', () => {
|
||||
const issueWithManyLabels: IssueSummary[] = [
|
||||
{
|
||||
id: 'issue-1',
|
||||
number: 42,
|
||||
type: 'bug',
|
||||
title: 'Test Issue',
|
||||
description: 'Description',
|
||||
status: 'open',
|
||||
priority: 'high',
|
||||
labels: ['label1', 'label2', 'label3', 'label4', 'label5'],
|
||||
sprint: null,
|
||||
assignee: null,
|
||||
created_at: '2025-01-01T00:00:00Z',
|
||||
updated_at: '2025-01-02T00:00:00Z',
|
||||
sync_status: 'synced',
|
||||
},
|
||||
];
|
||||
|
||||
render(
|
||||
<IssueTable
|
||||
issues={issueWithManyLabels}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// First 3 labels should be shown
|
||||
expect(screen.getByText('label1')).toBeInTheDocument();
|
||||
expect(screen.getByText('label2')).toBeInTheDocument();
|
||||
expect(screen.getByText('label3')).toBeInTheDocument();
|
||||
|
||||
// +2 badge should be shown
|
||||
expect(screen.getByText('+2')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays actions dropdown menu', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find and click the actions button
|
||||
const actionsButton = screen.getByRole('button', { name: /actions for issue 42/i });
|
||||
await user.click(actionsButton);
|
||||
|
||||
// Dropdown menu items should be visible
|
||||
expect(screen.getByRole('menuitem', { name: /view details/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('menuitem', { name: /edit/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('menuitem', { name: /assign/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('menuitem', { name: /sync with tracker/i })).toBeInTheDocument();
|
||||
expect(screen.getByRole('menuitem', { name: /delete/i })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not trigger row click when clicking actions menu', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Find and click the actions button
|
||||
const actionsButton = screen.getByRole('button', { name: /actions for issue 42/i });
|
||||
await user.click(actionsButton);
|
||||
|
||||
// Row click should not be triggered
|
||||
expect(mockOnIssueClick).not.toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('calls onIssueClick when View Details is clicked from menu', async () => {
|
||||
const user = userEvent.setup();
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// Open the actions menu
|
||||
const actionsButton = screen.getByRole('button', { name: /actions for issue 42/i });
|
||||
await user.click(actionsButton);
|
||||
|
||||
// Click View Details
|
||||
const viewDetailsItem = screen.getByRole('menuitem', { name: /view details/i });
|
||||
await user.click(viewDetailsItem);
|
||||
|
||||
expect(mockOnIssueClick).toHaveBeenCalledWith('issue-1');
|
||||
});
|
||||
|
||||
it('shows descending sort icon when sorted descending', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={{ field: 'number', direction: 'desc' }}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// The column header should have aria-sort="descending"
|
||||
const numberHeader = screen.getByRole('button', { name: /#/i });
|
||||
expect(numberHeader).toHaveAttribute('aria-sort', 'descending');
|
||||
});
|
||||
|
||||
it('shows ascending sort icon when sorted ascending', () => {
|
||||
render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={{ field: 'number', direction: 'asc' }}
|
||||
onSortChange={mockOnSortChange}
|
||||
/>
|
||||
);
|
||||
|
||||
// The column header should have aria-sort="ascending"
|
||||
const numberHeader = screen.getByRole('button', { name: /#/i });
|
||||
expect(numberHeader).toHaveAttribute('aria-sort', 'ascending');
|
||||
});
|
||||
|
||||
it('applies custom className', () => {
|
||||
const { container } = render(
|
||||
<IssueTable
|
||||
issues={mockIssues}
|
||||
selectedIssues={[]}
|
||||
onSelectionChange={mockOnSelectionChange}
|
||||
onIssueClick={mockOnIssueClick}
|
||||
sort={defaultSort}
|
||||
onSortChange={mockOnSortChange}
|
||||
className="custom-class"
|
||||
/>
|
||||
);
|
||||
|
||||
expect(container.firstChild).toHaveClass('custom-class');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user