veza/apps/web/src/features/player/components/PlayerLoading.test.tsx

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { PlayerLoading } from './PlayerLoading';

describe('PlayerLoading', () => {
  it('should not render when isLoading is false', () => {
    const { container } = render(<PlayerLoading isLoading={false} />);

    expect(container.firstChild).toBeNull();
  });

  it('should render when isLoading is true', () => {
    render(<PlayerLoading isLoading={true} />);

    expect(screen.getByRole('status')).toBeInTheDocument();
  });

  it('should display default message', () => {
    const { container } = render(<PlayerLoading isLoading={true} />);

    // Check that message appears in the visible text (not just sr-only)
    expect(container.textContent).toContain('Chargement...');
    expect(screen.getByText('Chargement...', { selector: 'p' })).toBeInTheDocument();
  });

  it('should display custom message', () => {
    const { container } = render(
      <PlayerLoading isLoading={true} message="Chargement de la piste..." />
    );

    // Check that message appears in the visible text (not just sr-only)
    expect(container.textContent).toContain('Chargement de la piste...');
    expect(screen.getByText('Chargement de la piste...', { selector: 'p' })).toBeInTheDocument();
  });

  it('should not display message when message is empty', () => {
    const { container } = render(<PlayerLoading isLoading={true} message="" />);

    expect(screen.queryByText('Chargement...', { selector: 'p' })).not.toBeInTheDocument();
    expect(screen.getByRole('status')).toBeInTheDocument();
    // Should still have sr-only text for accessibility
    expect(container.textContent).toContain('');
  });

  it('should apply size classes for spinner', () => {
    const { container: smContainer } = render(
      <PlayerLoading isLoading={true} size="sm" />
    );

    const spinner = smContainer.querySelector('svg');
    expect(spinner).toHaveClass('h-4', 'w-4');

    const { container: mdContainer } = render(
      <PlayerLoading isLoading={true} size="md" />
    );

    const mdSpinner = mdContainer.querySelector('svg');
    expect(mdSpinner).toHaveClass('h-6', 'w-6');

    const { container: lgContainer } = render(
      <PlayerLoading isLoading={true} size="lg" />
    );

    const lgSpinner = lgContainer.querySelector('svg');
    expect(lgSpinner).toHaveClass('h-8', 'w-8');
  });

  it('should apply size classes for text', () => {
    const { container: smContainer } = render(
      <PlayerLoading isLoading={true} size="sm" message="Loading" />
    );

    const text = smContainer.querySelector('p');
    expect(text).toHaveClass('text-xs');

    const { container: mdContainer } = render(
      <PlayerLoading isLoading={true} size="md" message="Loading" />
    );

    const mdText = mdContainer.querySelector('p');
    expect(mdText).toHaveClass('text-sm');

    const { container: lgContainer } = render(
      <PlayerLoading isLoading={true} size="lg" message="Loading" />
    );

    const lgText = lgContainer.querySelector('p');
    expect(lgText).toHaveClass('text-base');
  });

  it('should apply custom className', () => {
    const { container } = render(
      <PlayerLoading isLoading={true} className="custom-class" />
    );

    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('should render fullScreen variant', () => {
    const { container } = render(<PlayerLoading isLoading={true} fullScreen={true} />);

    expect(container.firstChild).toHaveClass('fixed', 'inset-0');
  });

  it('should render inline variant by default', () => {
    const { container } = render(<PlayerLoading isLoading={true} fullScreen={false} />);

    expect(container.firstChild).toHaveClass('flex', 'items-center', 'justify-center', 'p-4');
    expect(container.firstChild).not.toHaveClass('fixed', 'inset-0');
  });

  it('should have accessible attributes', () => {
    render(<PlayerLoading isLoading={true} message="Chargement..." />);

    const status = screen.getByRole('status');
    expect(status).toHaveAttribute('aria-live', 'polite');
    expect(status).toHaveAttribute('aria-label', 'Chargement...');
  });

  it('should have spinner with animation', () => {
    const { container } = render(<PlayerLoading isLoading={true} />);

    const spinner = container.querySelector('svg');
    expect(spinner).toHaveClass('animate-spin');
  });

  it('should have sr-only text for screen readers', () => {
    render(<PlayerLoading isLoading={true} message="Chargement..." />);

    expect(screen.getByText('Chargement...', { selector: '.sr-only' })).toBeInTheDocument();
  });
});