// @ts-nocheck
import { describe, it, expect } from '@jest/globals';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { Alert, AlertTitle, AlertDescription } from './alert';

describe('Alert', () => {
  it('renders default variant', () => {
    render(<Alert>Default alert</Alert>);
    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveTextContent('Default alert');
  });

  it('renders destructive variant', () => {
    render(<Alert variant="destructive">Destructive alert</Alert>);
    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveTextContent('Destructive alert');
  });

  it('renders success variant', () => {
    render(<Alert variant="success">Success alert</Alert>);
    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveTextContent('Success alert');
  });

  it('renders warning variant', () => {
    render(<Alert variant="warning">Warning alert</Alert>);
    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveTextContent('Warning alert');
  });

  it('renders info variant', () => {
    render(<Alert variant="info">Info alert</Alert>);
    const alert = screen.getByRole('alert');
    expect(alert).toBeInTheDocument();
    expect(alert).toHaveTextContent('Info alert');
  });

  it('renders AlertTitle with data-slot', () => {
    const { container } = render(<AlertTitle>Title text</AlertTitle>);
    const title = container.querySelector('[data-slot="alert-title"]');
    expect(title).toBeInTheDocument();
    expect(title).toHaveTextContent('Title text');
  });

  it('renders AlertDescription with data-slot', () => {
    const { container } = render(<AlertDescription>Description text</AlertDescription>);
    const desc = container.querySelector('[data-slot="alert-description"]');
    expect(desc).toBeInTheDocument();
    expect(desc).toHaveTextContent('Description text');
  });

  it('applies custom className', () => {
    const { container } = render(<Alert className="custom-class">Alert</Alert>);
    const alert = container.querySelector('[data-slot="alert"]');
    expect(alert).toHaveClass('custom-class');
  });
});