chore: format codebase and move SectionAccordion to entities/Section
This commit is contained in:
@@ -1,79 +1,79 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import { render, screen } from '@testing-library/react'
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card'
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
|
||||
|
||||
describe('Card', () => {
|
||||
describe('rendering', () => {
|
||||
it('renders children', () => {
|
||||
render(<Card>Content</Card>)
|
||||
expect(screen.getByText('Content')).toBeInTheDocument()
|
||||
})
|
||||
render(<Card>Content</Card>);
|
||||
expect(screen.getByText('Content')).toBeInTheDocument();
|
||||
});
|
||||
it('has brutal-border and brutal-shadow classes', () => {
|
||||
const { container } = render(<Card>Content</Card>)
|
||||
expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow')
|
||||
})
|
||||
})
|
||||
const { container } = render(<Card>Content</Card>);
|
||||
expect(container.firstChild).toHaveClass('brutal-border', 'brutal-shadow');
|
||||
});
|
||||
});
|
||||
describe('background variants', () => {
|
||||
it('defaults to ochre background', () => {
|
||||
const { container } = render(<Card>Content</Card>)
|
||||
expect(container.firstChild).toHaveClass('bg-ochre-clay')
|
||||
})
|
||||
const { container } = render(<Card>Content</Card>);
|
||||
expect(container.firstChild).toHaveClass('bg-ochre-clay');
|
||||
});
|
||||
it('applies slate background', () => {
|
||||
const { container } = render(<Card background="slate">Content</Card>)
|
||||
expect(container.firstChild).toHaveClass('bg-slate-indigo')
|
||||
})
|
||||
const { container } = render(<Card background="slate">Content</Card>);
|
||||
expect(container.firstChild).toHaveClass('bg-slate-indigo');
|
||||
});
|
||||
it('applies white background', () => {
|
||||
const { container } = render(<Card background="white">Content</Card>)
|
||||
expect(container.firstChild).toHaveClass('bg-white')
|
||||
})
|
||||
})
|
||||
const { container } = render(<Card background="white">Content</Card>);
|
||||
expect(container.firstChild).toHaveClass('bg-white');
|
||||
});
|
||||
});
|
||||
describe('padding', () => {
|
||||
it('has default padding', () => {
|
||||
const { container } = render(<Card>Content</Card>)
|
||||
expect(container.firstChild).toHaveClass('p-6')
|
||||
})
|
||||
const { container } = render(<Card>Content</Card>);
|
||||
expect(container.firstChild).toHaveClass('p-6');
|
||||
});
|
||||
it('removes padding when noPadding is true', () => {
|
||||
const { container } = render(<Card noPadding>Content</Card>)
|
||||
expect(container.firstChild).not.toHaveClass('p-6')
|
||||
})
|
||||
})
|
||||
const { container } = render(<Card noPadding>Content</Card>);
|
||||
expect(container.firstChild).not.toHaveClass('p-6');
|
||||
});
|
||||
});
|
||||
describe('className passthrough', () => {
|
||||
it('merges custom className', () => {
|
||||
const { container } = render(<Card className="group">Content</Card>)
|
||||
expect(container.firstChild).toHaveClass('group')
|
||||
})
|
||||
})
|
||||
})
|
||||
const { container } = render(<Card className="group">Content</Card>);
|
||||
expect(container.firstChild).toHaveClass('group');
|
||||
});
|
||||
});
|
||||
});
|
||||
describe('CardHeader', () => {
|
||||
it('renders children with bottom margin', () => {
|
||||
render(<CardHeader>Header</CardHeader>)
|
||||
expect(screen.getByText('Header')).toHaveClass('mb-4')
|
||||
})
|
||||
})
|
||||
render(<CardHeader>Header</CardHeader>);
|
||||
expect(screen.getByText('Header')).toHaveClass('mb-4');
|
||||
});
|
||||
});
|
||||
describe('CardTitle', () => {
|
||||
it('renders children as h3', () => {
|
||||
render(<CardTitle>Title</CardTitle>)
|
||||
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title')
|
||||
})
|
||||
})
|
||||
render(<CardTitle>Title</CardTitle>);
|
||||
expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Title');
|
||||
});
|
||||
});
|
||||
describe('CardDescription', () => {
|
||||
it('renders children as paragraph with opacity', () => {
|
||||
render(<CardDescription>Desc</CardDescription>)
|
||||
const el = screen.getByText('Desc')
|
||||
expect(el.tagName).toBe('P')
|
||||
expect(el).toHaveClass('opacity-80')
|
||||
})
|
||||
})
|
||||
render(<CardDescription>Desc</CardDescription>);
|
||||
const el = screen.getByText('Desc');
|
||||
expect(el.tagName).toBe('P');
|
||||
expect(el).toHaveClass('opacity-80');
|
||||
});
|
||||
});
|
||||
describe('CardContent', () => {
|
||||
it('renders children in a div', () => {
|
||||
render(<CardContent>Body</CardContent>)
|
||||
expect(screen.getByText('Body')).toBeInTheDocument()
|
||||
})
|
||||
})
|
||||
render(<CardContent>Body</CardContent>);
|
||||
expect(screen.getByText('Body')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
describe('CardFooter', () => {
|
||||
it('renders children with top border', () => {
|
||||
render(<CardFooter>Footer</CardFooter>)
|
||||
const el = screen.getByText('Footer')
|
||||
expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6')
|
||||
})
|
||||
})
|
||||
render(<CardFooter>Footer</CardFooter>);
|
||||
const el = screen.getByText('Footer');
|
||||
expect(el).toHaveClass('brutal-border-top', 'mt-6', 'pt-6');
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user