diff --git a/src/shared/ui/Label/Label.svelte.test.ts b/src/shared/ui/Label/Label.svelte.test.ts new file mode 100644 index 0000000..9709ede --- /dev/null +++ b/src/shared/ui/Label/Label.svelte.test.ts @@ -0,0 +1,69 @@ +import { + render, + screen, +} from '@testing-library/svelte'; +import { createRawSnippet } from 'svelte'; +import Label from './Label.svelte'; + +function textSnippet(text: string) { + return createRawSnippet(() => ({ render: () => `${text}` })); +} + +describe('Label', () => { + it('renders text content', () => { + render(Label, { children: textSnippet('Category') }); + expect(screen.getByText('Category')).toBeInTheDocument(); + }); + + it('renders as a span element', () => { + const { container } = render(Label, { children: textSnippet('test') }); + expect(container.querySelector('span')).toBeInTheDocument(); + }); + + it('uppercases text by default', () => { + const { container } = render(Label, { children: textSnippet('hello') }); + expect(container.querySelector('span')).toHaveClass('uppercase'); + }); + + it('removes uppercase when uppercase=false', () => { + const { container } = render(Label, { children: textSnippet('hello'), uppercase: false }); + expect(container.querySelector('span')).not.toHaveClass('uppercase'); + }); + + it('applies bold when bold=true', () => { + const { container } = render(Label, { children: textSnippet('hello'), bold: true }); + expect(container.querySelector('span')).toHaveClass('font-bold'); + }); + + it('renders icon on the left by default', () => { + const { container } = render(Label, { + children: textSnippet('label'), + icon: textSnippet('★'), + }); + const spans = container.querySelectorAll('span > span'); + expect(spans[0]?.textContent).toContain('★'); + }); + + it('renders icon on the right when iconPosition="right"', () => { + const { container } = render(Label, { + children: textSnippet('label'), + icon: textSnippet('★'), + iconPosition: 'right', + }); + const spans = container.querySelectorAll('span > span'); + expect(spans[spans.length - 1]?.textContent).toContain('★'); + }); + + it.each(['default', 'accent', 'muted', 'success', 'warning', 'error'] as const)( + 'renders %s variant without error', + variant => { + render(Label, { children: textSnippet('test'), variant }); + expect(screen.getAllByText('test')[0]).toBeInTheDocument(); + }, + ); + + it.each(['xs', 'sm', 'md', 'lg'] as const)('renders %s size without error', size => { + render(Label, { children: textSnippet('test'), size }); + expect(screen.getAllByText('test')[0]).toBeInTheDocument(); + }); +});