73 lines
2.6 KiB
TypeScript
73 lines
2.6 KiB
TypeScript
|
import { describe, it, expect } from 'vitest'
|
|||
|
|
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-carbon-black, text-ochre-clay, text-sm', () => {
|
|||
|
|
render(<ExperienceCard {...DEFAULT_PROPS} />)
|
|||
|
|
const badge = screen.getByText('2021 – 2024')
|
|||
|
|
expect(badge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', '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')
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
})
|