veza/apps/web/src/components/ui/card.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from './card';

describe('Card Component', () => {
  it('renders Card component correctly', () => {
    render(
      <Card>
        <div>Card content</div>
      </Card>,
    );

    expect(screen.getByText('Card content')).toBeInTheDocument();
  });

  it('applies default variant styles', () => {
    const { container } = render(
      <Card>
        <div>Content</div>
      </Card>,
    );

    const card = container.querySelector('.rounded-lg.border.bg-card');
    expect(card).toBeInTheDocument();
    expect(card?.classList.contains('shadow-card')).toBe(true);
    expect(card?.classList.contains('shadow-lg')).toBe(false);
  });

  it('applies outlined variant styles', () => {
    const { container } = render(
      <Card variant="outline">
        <div>Content</div>
      </Card>,
    );

    const card = container.querySelector('.rounded-lg');
    expect(card?.classList.contains('bg-transparent')).toBe(true);
  });

  it('applies elevated variant styles', () => {
    const { container } = render(
      <Card variant="elevated">
        <div>Content</div>
      </Card>,
    );

    const card = container.querySelector('.rounded-lg');
    expect(card?.classList.contains('shadow-lg')).toBe(true);
  });

  it('applies custom className', () => {
    const { container } = render(
      <Card className="custom-class">
        <div>Content</div>
      </Card>,
    );

    const card = container.querySelector('.custom-class');
    expect(card).toBeInTheDocument();
  });

  it('renders CardHeader correctly', () => {
    render(
      <Card>
        <CardHeader>
          <div>Header content</div>
        </CardHeader>
      </Card>,
    );

    expect(screen.getByText('Header content')).toBeInTheDocument();
  });

  it('renders CardTitle correctly', () => {
    render(
      <Card>
        <CardHeader>
          <CardTitle>Card Title</CardTitle>
        </CardHeader>
      </Card>,
    );

    const title = screen.getByText('Card Title');
    expect(title).toBeInTheDocument();
    expect(title.tagName).toBe('H3');
  });

  it('renders CardDescription correctly', () => {
    render(
      <Card>
        <CardHeader>
          <CardDescription>Card description</CardDescription>
        </CardHeader>
      </Card>,
    );

    expect(screen.getByText('Card description')).toBeInTheDocument();
  });

  it('renders CardContent correctly', () => {
    render(
      <Card>
        <CardContent>
          <div>Content area</div>
        </CardContent>
      </Card>,
    );

    expect(screen.getByText('Content area')).toBeInTheDocument();
  });

  it('renders CardFooter correctly', () => {
    render(
      <Card>
        <CardFooter>
          <div>Footer content</div>
        </CardFooter>
      </Card>,
    );

    expect(screen.getByText('Footer content')).toBeInTheDocument();
  });

  it('renders complete Card structure', () => {
    render(
      <Card>
        <CardHeader>
          <CardTitle>Title</CardTitle>
          <CardDescription>Description</CardDescription>
        </CardHeader>
        <CardContent>
          <div>Content</div>
        </CardContent>
        <CardFooter>
          <div>Footer</div>
        </CardFooter>
      </Card>,
    );

    expect(screen.getByText('Title')).toBeInTheDocument();
    expect(screen.getByText('Description')).toBeInTheDocument();
    expect(screen.getByText('Content')).toBeInTheDocument();
    expect(screen.getByText('Footer')).toBeInTheDocument();
  });

  it('supports dark mode through Tailwind classes', () => {
    const { container } = render(
      <Card>
        <div>Content</div>
      </Card>,
    );

    const card = container.querySelector('.bg-card.text-card-foreground');
    expect(card).toBeInTheDocument();
  });

  it('passes through HTML attributes', () => {
    render(
      <Card data-testid="card" aria-label="Test card">
        <div>Content</div>
      </Card>,
    );

    const card = screen.getByTestId('card');
    expect(card).toBeInTheDocument();
    expect(card.getAttribute('aria-label')).toBe('Test card');
  });
});