Ilia Mashkov
109 lines
4.0 KiB
TypeScript
109 lines
4.0 KiB
TypeScript
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.',
|
||
stack: [],
|
||
};
|
||
|
||
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('layout', () => {
|
||
it('period badge is inside the sidebar column', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
const badge = screen.getByText('2021 – 2024');
|
||
expect(badge.closest('.brutal-border-sidebar')).toBeInTheDocument();
|
||
});
|
||
|
||
it('company name is inside the sidebar column', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
const company = screen.getByText('Acme Corp');
|
||
expect(company.closest('.brutal-border-sidebar')).toBeInTheDocument();
|
||
});
|
||
|
||
it('title is outside the sidebar column', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
const title = screen.getByText('Senior Developer');
|
||
expect(title.closest('.brutal-border-sidebar')).toBeNull();
|
||
});
|
||
|
||
it('description is outside the sidebar column', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
const desc = screen.getByText('Built scalable frontend systems.');
|
||
expect(desc.closest('.brutal-border-sidebar')).toBeNull();
|
||
});
|
||
});
|
||
|
||
describe('structure', () => {
|
||
it('title is rendered as an h3', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Senior Developer');
|
||
});
|
||
|
||
it('period has left border accent styling', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
const period = screen.getByText('2021 – 2024');
|
||
expect(period.tagName).toBe('P');
|
||
expect(period).toHaveClass('brutal-border-left', 'text-sm');
|
||
});
|
||
|
||
it('description renders via RichText with rich-text class', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
const desc = screen.getByText('Built scalable frontend systems.');
|
||
expect(desc.closest('.rich-text')).toBeInTheDocument();
|
||
});
|
||
|
||
it('card has brutal-border class', () => {
|
||
const { container } = render(<ExperienceCard {...DEFAULT_PROPS} />);
|
||
expect(container.firstChild).toHaveClass('brutal-border');
|
||
});
|
||
});
|
||
|
||
describe('stack tags', () => {
|
||
it('renders stack tags in the sidebar as xs outline badges', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} stack={['React', 'TypeScript']} />);
|
||
const react = screen.getByText('React');
|
||
const ts = screen.getByText('TypeScript');
|
||
expect(react.closest('.brutal-border-sidebar')).toBeInTheDocument();
|
||
expect(ts.closest('.brutal-border-sidebar')).toBeInTheDocument();
|
||
expect(react).toHaveClass('brutal-border', 'bg-transparent', 'px-2');
|
||
});
|
||
|
||
it('renders nothing extra when stack is empty', () => {
|
||
render(<ExperienceCard {...DEFAULT_PROPS} stack={[]} />);
|
||
expect(screen.queryByRole('list')).toBeNull();
|
||
});
|
||
});
|
||
|
||
describe('className passthrough', () => {
|
||
it('forwards className to the card', () => {
|
||
const { container } = render(<ExperienceCard {...DEFAULT_PROPS} className="custom-class" />);
|
||
expect(container.firstChild).toHaveClass('custom-class');
|
||
});
|
||
});
|
||
});
|