portfolio/src/shared/ui/Card/ui/Card.test.tsx

import { render, screen } from '@testing-library/react';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardSidebar, CardTitle } from './Card';

describe('Card', () => {
  describe('rendering', () => {
    it('renders children', () => {
      render(<Card>Content</Card>);
      expect(screen.getByText('Content')).toBeInTheDocument();
    });
    it('has brutal-border and brutal-shadow classes', () => {
      const { container } = render(<Card>Content</Card>);
      expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow');
    });
  });
  describe('background variants', () => {
    it('defaults to cream background', () => {
      const { container } = render(<Card>Content</Card>);
      expect(container.firstChild).toHaveClass('bg-cream');
    });
    it('applies blue background', () => {
      const { container } = render(<Card background="blue">Content</Card>);
      expect(container.firstChild).toHaveClass('bg-blue');
    });
  });
  describe('padding', () => {
    it('has default padding', () => {
      const { container } = render(<Card>Content</Card>);
      expect(container.firstChild).toHaveClass('p-6');
    });
    it('removes padding when noPadding is true', () => {
      const { container } = render(<Card noPadding>Content</Card>);
      expect(container.firstChild).not.toHaveClass('p-6');
    });
  });
  describe('className passthrough', () => {
    it('merges custom className', () => {
      const { container } = render(<Card className="group">Content</Card>);
      expect(container.firstChild).toHaveClass('group');
    });
  });
});
describe('CardHeader', () => {
  it('renders children with bottom margin', () => {
    render(<CardHeader>Header</CardHeader>);
    expect(screen.getByText('Header')).toHaveClass('mb-6');
  });
});
describe('CardTitle', () => {
  it('renders children as h3', () => {
    render(<CardTitle>Title</CardTitle>);
    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title');
  });
});
describe('CardDescription', () => {
  it('renders children as paragraph with opacity', () => {
    render(<CardDescription>Desc</CardDescription>);
    const el = screen.getByText('Desc');
    expect(el.tagName).toBe('P');
    expect(el).toHaveClass('opacity-80');
  });
});
describe('CardContent', () => {
  it('renders children in a div', () => {
    render(<CardContent>Body</CardContent>);
    expect(screen.getByText('Body')).toBeInTheDocument();
  });
});
describe('CardFooter', () => {
  it('renders children with top border', () => {
    render(<CardFooter>Footer</CardFooter>);
    const el = screen.getByText('Footer');
    expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6', 'md:mt-8', 'md:pt-8');
  });
});
describe('CardSidebar', () => {
  describe('rendering', () => {
    it('renders sidebar content', () => {
      render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
      expect(screen.getByText('Sidebar')).toBeInTheDocument();
    });

    it('renders main content', () => {
      render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
      expect(screen.getByText('Main')).toBeInTheDocument();
    });
  });

  describe('structure', () => {
    it('root wrapper is a flex container', () => {
      const { container } = render(<CardSidebar sidebar={<span>S</span>}>M</CardSidebar>);
      expect(container.firstChild).toHaveClass('flex');
    });

    it('sidebar column has brutal-border-sidebar class', () => {
      render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
      const sidebar = screen.getByText('Sidebar').parentElement;
      expect(sidebar).toHaveClass('brutal-border-sidebar');
    });

    it('sidebar column has fixed width on lg', () => {
      render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
      const sidebar = screen.getByText('Sidebar').parentElement;
      expect(sidebar).toHaveClass('lg:w-64');
    });

    it('main column fills remaining space', () => {
      render(<CardSidebar sidebar={<span>Sidebar</span>}>Main</CardSidebar>);
      expect(screen.getByText('Main')).toHaveClass('flex-1');
    });
  });

  describe('className passthrough', () => {
    it('forwards className to the root wrapper', () => {
      const { container } = render(
        <CardSidebar sidebar={<span>S</span>} className="custom">
          M
        </CardSidebar>,
      );
      expect(container.firstChild).toHaveClass('custom');
    });
  });
});