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

import { Alert, AlertDescription, AlertTitle } from './alert';

describe('Alert', () => {
  it('is announced as an alert', () => {
    render(
      <Alert>
        <AlertTitle>Heads up</AlertTitle>
        <AlertDescription>Your trial ends soon.</AlertDescription>
      </Alert>
    );

    expect(screen.getByRole('alert')).toHaveTextContent('Heads up');
  });

  /*
   * Status is carried by `colorPalette`, so the palette class is the whole
   * mechanism — a variant reads `--ctl-*` and never names a colour itself.
   * If this stops being emitted, every status alert silently falls back to
   * whichever palette an ancestor happens to set.
   */
  it('applies the palette class that supplies the --ctl-* roles', () => {
    render(
      <Alert colorPalette="red" variant="subtle">
        <AlertTitle>Payment failed</AlertTitle>
      </Alert>
    );

    expect(screen.getByRole('alert')).toHaveClass('palette-red');
  });

  it('defaults to the primary palette', () => {
    render(<Alert>Default</Alert>);
    expect(screen.getByRole('alert')).toHaveClass('palette-primary');
  });

  /*
   * The pre-CBAR shorthands paint from semantic roles instead, which is what
   * keeps them out of a specificity race with the palette classes.
   */
  it('does not emit a palette class for a shorthand variant', () => {
    render(<Alert variant="destructive">Payment failed</Alert>);

    const alert = screen.getByRole('alert');
    expect(alert).toHaveClass('text-destructive');
    expect(alert.className).not.toMatch(/\bpalette-(red|green|yellow|tertiary|third|black|secondary)\b/);
  });

  it('lets a caller override classes through className', () => {
    render(<Alert className="rounded-none">Flush</Alert>);
    expect(screen.getByRole('alert')).toHaveClass('rounded-none');
    expect(screen.getByRole('alert')).not.toHaveClass('rounded-md');
  });

  it('renders the title and description in their own slots', () => {
    render(
      <Alert>
        <AlertTitle>Title</AlertTitle>
        <AlertDescription>Body</AlertDescription>
      </Alert>
    );

    expect(screen.getByText('Title')).toHaveAttribute('data-slot', 'alert-title');
    expect(screen.getByText('Body')).toHaveAttribute('data-slot', 'alert-description');
  });
});