import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { ErrorDisplay } from '../../components/base/ErrorDisplay';

describe('ErrorDisplay', () => {
  it('should render error message when error is provided', () => {
    const error = 'Une erreur est survenue';
    render(<ErrorDisplay error={error} />);

    expect(screen.getByText('Une erreur est survenue')).toBeInTheDocument();
    expect(screen.getByText('Une erreur est survenue')).toHaveClass('text-red-600');
  });

  it('should not render when no error is provided', () => {
    render(<ErrorDisplay error="" />);

    expect(screen.queryByText('Une erreur est survenue')).not.toBeInTheDocument();
  });

  it('should not render when error is null', () => {
    render(<ErrorDisplay error={null} />);

    expect(screen.queryByText('Une erreur est survenue')).not.toBeInTheDocument();
  });

  it('should not render when error is undefined', () => {
    render(<ErrorDisplay error={undefined} />);

    expect(screen.queryByText('Une erreur est survenue')).not.toBeInTheDocument();
  });

  it('should handle long error messages', () => {
    const longError = 'A'.repeat(500);
    render(<ErrorDisplay error={longError} />);

    expect(screen.getByText(longError)).toBeInTheDocument();
  });

  it('should handle special characters in error message', () => {
    const specialError = 'Erreur avec des caractères spéciaux: @#$%^&*()_+{}|:"<>?[]\\;\',./';
    render(<ErrorDisplay error={specialError} />);

    expect(screen.getByText(specialError)).toBeInTheDocument();
  });

  it('should handle HTML in error message', () => {
    const htmlError = '<script>alert("xss")</script>Erreur avec HTML';
    render(<ErrorDisplay error={htmlError} />);

    expect(screen.getByText(htmlError)).toBeInTheDocument();
    // Vérifier que le HTML n'est pas interprété
    expect(screen.queryByText('xss')).not.toBeInTheDocument();
  });

  it('should have proper accessibility attributes', () => {
    const error = 'Erreur d\'accessibilité';
    render(<ErrorDisplay error={error} />);

    const errorElement = screen.getByText(error);
    expect(errorElement).toHaveAttribute('role', 'alert');
  });
});