/**
 * Tests for RefinementIndicator Component
 *
 * Story 2.3: Refinement Loop (Regeneration)
 */

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

describe('RefinementIndicator', () => {
  it('should render default message', () => {
    render(<RefinementIndicator />);
    expect(screen.getByText('Refining your draft...')).toBeInTheDocument();
  });

  it('should render custom message when provided', () => {
    render(<RefinementIndicator message="Applying your changes..." />);
    expect(screen.getByText('Applying your changes...')).toBeInTheDocument();
  });

  it('should render animated dots', () => {
    const { container } = render(<RefinementIndicator />);
    const dots = container.querySelectorAll('.animate-pulse');
    expect(dots).toHaveLength(3);
  });

  it('should have proper accessibility attributes', () => {
    const { container } = render(<RefinementIndicator />);

    const indicator = container.querySelector('[role="status"]');
    expect(indicator).toBeInTheDocument();
    expect(indicator).toHaveAttribute('aria-live', 'polite');
    expect(indicator).toHaveAttribute('aria-busy', 'true');
  });

  it('should hide dots from screen readers', () => {
    const { container } = render(<RefinementIndicator />);
    const dots = container.querySelectorAll('.animate-pulse');

    dots.forEach(dot => {
      expect(dot).toHaveAttribute('aria-hidden', 'true');
    });
  });

  it('should have proper styling for loading state', () => {
    const { container } = render(<RefinementIndicator />);
    const indicator = container.querySelector('[role="status"]');

    expect(indicator).toHaveClass('bg-slate-50');
    expect(indicator).toHaveClass('text-slate-600');
  });
});