syndarix/frontend/tests/features/issues/components/SyncStatusIndicator.test.tsx

/**
 * 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');
  });
});