mimic/frontend/tests/components/AlertBanner.test.tsx

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

describe('AlertBanner', () => {
  it('renders error variant with alert role and alert-error class', () => {
    const { container } = render(<AlertBanner variant="error">Error message</AlertBanner>);
    const el = container.firstChild as HTMLElement;
    expect(el).toHaveAttribute('role', 'alert');
    expect(el).toHaveClass('alert-error');
    expect(screen.getByText('Error message')).toBeInTheDocument();
  });

  it('renders warn variant with alert role and alert-warn class', () => {
    const { container } = render(<AlertBanner variant="warn">Warning message</AlertBanner>);
    const el = container.firstChild as HTMLElement;
    expect(el).toHaveAttribute('role', 'alert');
    expect(el).toHaveClass('alert-warn');
  });

  it('renders success variant with status role and alert-success class', () => {
    const { container } = render(<AlertBanner variant="success">Done!</AlertBanner>);
    const el = container.firstChild as HTMLElement;
    expect(el).toHaveAttribute('role', 'status');
    expect(el).toHaveClass('alert-success');
  });

  it('renders info variant with status role and alert-info class', () => {
    const { container } = render(<AlertBanner variant="info">FYI</AlertBanner>);
    const el = container.firstChild as HTMLElement;
    expect(el).toHaveAttribute('role', 'status');
    expect(el).toHaveClass('alert-info');
  });

  it('renders optional title when provided', () => {
    render(<AlertBanner variant="info" title="Heads up">Detail text</AlertBanner>);
    expect(screen.getByText('Heads up')).toBeInTheDocument();
    expect(screen.getByText('Detail text')).toBeInTheDocument();
  });

  it('has no rounded-md, transition-*, or shadow-* (brutalism)', () => {
    const { container } = render(<AlertBanner variant="error">Test</AlertBanner>);
    const el = container.firstChild as HTMLElement;
    expect(el).not.toHaveClass('rounded-md');
    expect(el.className).not.toMatch(/transition-/);
    expect(el.className).not.toMatch(/shadow-/);
  });
});