portfolio/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx

import { render, screen } from '@testing-library/react';
import { ProjectCard } from './ProjectCard';

const DEFAULT_PROPS = {
  title: 'My Project',
  year: '2024',
  description: 'A cool project description',
  tags: ['React', 'Node'],
  url: 'https://example.com',
};

describe('ProjectCard', () => {
  describe('rendering', () => {
    it('renders the project title', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('My Project')).toBeInTheDocument();
    });

    it('renders the year', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('2024')).toBeInTheDocument();
    });

    it('renders the description', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('A cool project description')).toBeInTheDocument();
    });

    it('renders each tag', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('React')).toBeInTheDocument();
      expect(screen.getByText('Node')).toBeInTheDocument();
    });

    it('renders the View Project button', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByRole('link', { name: /view project/i })).toBeInTheDocument();
    });

    it('View Project link points to the project url', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByRole('link', { name: /view project/i })).toHaveAttribute('href', 'https://example.com');
    });

    it('View Project link opens in a new tab', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByRole('link', { name: /view project/i })).toHaveAttribute('target', '_blank');
    });
  });

  describe('layout', () => {
    it('year is inside the sidebar column', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('2024').closest('.brutal-border-sidebar')).toBeInTheDocument();
    });

    it('tags are inside the sidebar column', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('React').closest('.brutal-border-sidebar')).toBeInTheDocument();
      expect(screen.getByText('Node').closest('.brutal-border-sidebar')).toBeInTheDocument();
    });

    it('View Project button is inside the sidebar column', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      const btn = screen.getByRole('link', { name: /view project/i });
      expect(btn.closest('.brutal-border-sidebar')).toBeInTheDocument();
    });

    it('title is outside the sidebar column', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('My Project').closest('.brutal-border-sidebar')).toBeNull();
    });

    it('description is outside the sidebar column', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByText('A cool project description').closest('.brutal-border-sidebar')).toBeNull();
    });
  });

  describe('structure', () => {
    it('card has hover transition classes', () => {
      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(container.firstChild).toHaveClass('group', 'transition-shadow', 'duration-300');
    });

    it('title renders as h3', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('My Project');
    });

    it('year has period-style left border', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      const year = screen.getByText('2024');
      expect(year.tagName).toBe('P');
      expect(year).toHaveClass('brutal-border-left', 'text-sm');
    });

    it('View Project button uses sm size', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      const btn = screen.getByRole('link', { name: /view project/i });
      expect(btn).toHaveClass('px-3', 'py-1.5', 'sm:px-4', 'sm:py-2', 'text-sm');
    });

    it('tags are xs outline badges', () => {
      render(<ProjectCard {...DEFAULT_PROPS} />);
      const tag = screen.getByText('React');
      expect(tag).toHaveClass('brutal-border', 'bg-transparent', 'px-2');
    });
  });

  describe('conditional image rendering', () => {
    it('does not render image when imageUrl is absent', () => {
      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
      expect(container.querySelector('img')).toBeNull();
    });

    it('renders image when imageUrl is provided', () => {
      render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
      expect(screen.getByRole('img')).toBeInTheDocument();
    });

    it('image wrapper has aspect-video and overflow-hidden', () => {
      const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
      const imgWrapper = container.querySelector('img')?.parentElement;
      expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
    });
  });
});