mimic/frontend/tests/states.test.tsx

import { describe, expect, it, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { LoadingState } from '@/components/LoadingState';
import { ErrorState } from '@/components/ErrorState';
import { EmptyState } from '@/components/EmptyState';

describe('LoadingState', () => {
  it('shows the default label', () => {
    render(<LoadingState />);
    expect(screen.getByTestId('loading-state')).toHaveTextContent('Loading');
  });

  it('shows a custom label', () => {
    render(<LoadingState label="Fetching things…" />);
    expect(screen.getByTestId('loading-state')).toHaveTextContent('Fetching things…');
  });
});

describe('ErrorState', () => {
  it('renders message and triggers retry', async () => {
    const onRetry = vi.fn();
    render(<ErrorState message="Boom" onRetry={onRetry} />);
    expect(screen.getByTestId('error-state')).toHaveTextContent('Boom');
    await userEvent.click(screen.getByRole('button', { name: /retry/i }));
    expect(onRetry).toHaveBeenCalledTimes(1);
  });

  it('omits retry button when no handler given', () => {
    render(<ErrorState message="Boom" />);
    expect(screen.queryByRole('button', { name: /retry/i })).toBeNull();
  });
});

describe('EmptyState', () => {
  it('renders title, description and action', () => {
    render(<EmptyState title="Nothing here" description="Add one" action={<button>Create</button>} />);
    const node = screen.getByTestId('empty-state');
    expect(node).toHaveTextContent('Nothing here');
    expect(node).toHaveTextContent('Add one');
    expect(screen.getByRole('button', { name: /create/i })).toBeInTheDocument();
  });
});