refactor: group project/ui components into subdirectories

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

@@ -0,0 +1,77 @@
+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'],
+};
+
+describe('ProjectCard', () => {
+  describe('rendering', () => {
+    it('renders the project title', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('My Project')).toBeInTheDocument();
+    });
+
+    it('renders the year badge', () => {
+      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('button', { name: /view project/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('structure', () => {
+    it('card has hover transition classes', () => {
+      const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
+      const card = container.firstChild as HTMLElement;
+      expect(card).toHaveClass('group', 'transition-all', 'duration-300');
+    });
+
+    it('year badge has correct classes', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      const yearBadge = screen.getByText('2024');
+      expect(yearBadge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
+    });
+
+    it('tags have correct classes', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      const tag = screen.getByText('React');
+      expect(tag).toHaveClass('brutal-border', 'bg-cream', 'text-blue', 'text-sm', 'uppercase', 'tracking-wide');
+    });
+  });
+
+  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 when imageUrl is provided', () => {
+      const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
+      const imgWrapper = container.querySelector('img')?.parentElement;
+      expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
+    });
+  });
+});