forked from cardosofelipe/fast-next-template
Felipe Cardoso
5c35702caf
- 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>
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
/**
|
|
* 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');
|
|
});
|
|
|
|
it('falls back to synced config for unknown status', () => {
|
|
// @ts-expect-error - Testing unknown status value
|
|
render(<SyncStatusIndicator status="unknown-status" showLabel />);
|
|
|
|
// Should fall back to synced config
|
|
expect(screen.getByText('Synced')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows label for conflict status', () => {
|
|
render(<SyncStatusIndicator status="conflict" showLabel />);
|
|
|
|
expect(screen.getByText('Conflict')).toBeInTheDocument();
|
|
});
|
|
|
|
it('shows label for error status', () => {
|
|
render(<SyncStatusIndicator status="error" showLabel />);
|
|
|
|
// The error label is 'Sync Error' in SYNC_STATUS_CONFIG
|
|
expect(screen.getByText('Sync Error')).toBeInTheDocument();
|
|
});
|
|
});
|