refactor: group experience/ui components into subdirectories

src/entities/experience/ui/ExperienceCard/ExperienceCard.test.tsx

@@ -0,0 +1,71 @@
+import { render, screen } from '@testing-library/react';
+import { ExperienceCard } from './ExperienceCard';
+
+const DEFAULT_PROPS = {
+  title: 'Senior Developer',
+  company: 'Acme Corp',
+  period: '2021 – 2024',
+  description: 'Built scalable frontend systems.',
+};
+
+describe('ExperienceCard', () => {
+  describe('rendering', () => {
+    it('renders the job title', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Senior Developer')).toBeInTheDocument();
+    });
+
+    it('renders the company name', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Acme Corp')).toBeInTheDocument();
+    });
+
+    it('renders the period badge', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('2021 – 2024')).toBeInTheDocument();
+    });
+
+    it('renders the description', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByText('Built scalable frontend systems.')).toBeInTheDocument();
+    });
+  });
+
+  describe('structure', () => {
+    it('title is rendered as an h4', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(screen.getByRole('heading', { level: 4 })).toHaveTextContent('Senior Developer');
+    });
+
+    it('period badge has brutal-border, bg-blue, text-cream, text-sm', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const badge = screen.getByText('2021 – 2024');
+      expect(badge).toHaveClass('brutal-border', 'bg-blue', 'text-cream', 'text-sm');
+    });
+
+    it('company paragraph has opacity-80', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const company = screen.getByText('Acme Corp');
+      expect(company.tagName).toBe('P');
+      expect(company).toHaveClass('opacity-80');
+    });
+
+    it('description paragraph has text-base and max-w-[700px]', () => {
+      render(<ExperienceCard {...DEFAULT_PROPS} />);
+      const desc = screen.getByText('Built scalable frontend systems.');
+      expect(desc).toHaveClass('text-base', 'max-w-[700px]');
+    });
+
+    it('card has brutal-border class (from Card component)', () => {
+      const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />);
+      expect(container.firstChild).toHaveClass('brutal-border');
+    });
+  });
+
+  describe('className passthrough', () => {
+    it('forwards className to the card', () => {
+      const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />);
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+  });
+});