chore: format codebase and move SectionAccordion to entities/Section
This commit is contained in:
@@ -1,79 +1,86 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { ProjectCard } from './ProjectCard'
|
||||
import { describe, it, expect } from 'vitest';
|
||||
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()
|
||||
})
|
||||
render(<ProjectCard {...DEFAULT_PROPS} />);
|
||||
expect(screen.getByText('My Project')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders the year badge', () => {
|
||||
render(<ProjectCard {...DEFAULT_PROPS} />)
|
||||
expect(screen.getByText('2024')).toBeInTheDocument()
|
||||
})
|
||||
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()
|
||||
})
|
||||
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()
|
||||
})
|
||||
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()
|
||||
})
|
||||
})
|
||||
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')
|
||||
})
|
||||
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-carbon-black', 'text-ochre-clay', 'text-sm')
|
||||
})
|
||||
render(<ProjectCard {...DEFAULT_PROPS} />);
|
||||
const yearBadge = screen.getByText('2024');
|
||||
expect(yearBadge).toHaveClass('brutal-border', 'bg-carbon-black', 'text-ochre-clay', 'text-sm');
|
||||
});
|
||||
|
||||
it('tags have correct classes', () => {
|
||||
render(<ProjectCard {...DEFAULT_PROPS} />)
|
||||
const tag = screen.getByText('React')
|
||||
expect(tag).toHaveClass('brutal-border', 'bg-white', 'text-carbon-black', 'text-sm', 'uppercase', 'tracking-wide')
|
||||
})
|
||||
})
|
||||
render(<ProjectCard {...DEFAULT_PROPS} />);
|
||||
const tag = screen.getByText('React');
|
||||
expect(tag).toHaveClass(
|
||||
'brutal-border',
|
||||
'bg-white',
|
||||
'text-carbon-black',
|
||||
'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()
|
||||
})
|
||||
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" />)
|
||||
const img = screen.getByRole('img')
|
||||
expect(img).toHaveAttribute('src', '/project.jpg')
|
||||
})
|
||||
render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
|
||||
const img = screen.getByRole('img');
|
||||
expect(img).toHaveAttribute('src', '/project.jpg');
|
||||
});
|
||||
|
||||
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')
|
||||
})
|
||||
})
|
||||
})
|
||||
const { container } = render(<ProjectCard {...DEFAULT_PROPS} imageUrl="/project.jpg" />);
|
||||
const imgWrapper = container.querySelector('img')!.parentElement;
|
||||
expect(imgWrapper).toHaveClass('aspect-video', 'overflow-hidden', 'brutal-border');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user