// src/components/ErrorDisplay.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { ErrorDisplay } from './ErrorDisplay';

describe('ErrorDisplay (in components)', () => {
  it('should not render when the message is empty', () => {
    const { container } = render(<ErrorDisplay message="" />);
    expect(container.firstChild).toBeNull();
  });

  it('should not render when the message is null', () => {
    // The component expects a string, but we test for nullish values as a safeguard.
    const { container } = render(<ErrorDisplay message={null as unknown as string} />);
    expect(container.firstChild).toBeNull();
  });

  it('should render the error message when provided', () => {
    const errorMessage = 'Something went terribly wrong.';
    render(<ErrorDisplay message={errorMessage} />);

    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(screen.getByText('Error:')).toBeInTheDocument();
    expect(screen.getByText(errorMessage)).toBeInTheDocument();
    expect(alert).toHaveClass('bg-red-100');
  });
});