test(Badge): cover Baddge with tests
This commit is contained in:
80
src/shared/ui/Badge/Badge.svelte.test.ts
Normal file
80
src/shared/ui/Badge/Badge.svelte.test.ts
Normal file
@@ -0,0 +1,80 @@
|
|||||||
|
import {
|
||||||
|
render,
|
||||||
|
screen,
|
||||||
|
} from '@testing-library/svelte';
|
||||||
|
import { createRawSnippet } from 'svelte';
|
||||||
|
import Badge from './Badge.svelte';
|
||||||
|
|
||||||
|
function textSnippet(text: string) {
|
||||||
|
return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('Badge', () => {
|
||||||
|
describe('Rendering', () => {
|
||||||
|
it('renders text content', () => {
|
||||||
|
render(Badge, { children: textSnippet('v1.0') });
|
||||||
|
expect(screen.getByText('v1.0')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders as a span element', () => {
|
||||||
|
const { container } = render(Badge, { children: textSnippet('test') });
|
||||||
|
expect(container.querySelector('span')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders nothing extra when no children', () => {
|
||||||
|
const { container } = render(Badge);
|
||||||
|
const span = container.querySelector('span');
|
||||||
|
expect(span).toBeInTheDocument();
|
||||||
|
expect(span?.textContent?.trim()).toBe('');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Dot', () => {
|
||||||
|
it('renders status dot when dot=true', () => {
|
||||||
|
const { container } = render(Badge, {
|
||||||
|
children: textSnippet('live'),
|
||||||
|
dot: true,
|
||||||
|
});
|
||||||
|
const dots = container.querySelectorAll('span > span');
|
||||||
|
expect(dots.length).toBeGreaterThan(0);
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not render dot by default', () => {
|
||||||
|
const { container } = render(Badge, { children: textSnippet('live') });
|
||||||
|
const innerSpans = container.querySelectorAll('span > span');
|
||||||
|
expect(innerSpans).toHaveLength(1); // only the children span
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Variants', () => {
|
||||||
|
it.each(['default', 'accent', 'success', 'warning', 'info'] as const)(
|
||||||
|
'renders %s variant without error',
|
||||||
|
variant => {
|
||||||
|
render(Badge, { children: textSnippet('label'), variant });
|
||||||
|
expect(screen.getByText('label')).toBeInTheDocument();
|
||||||
|
},
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Sizes', () => {
|
||||||
|
it.each(['xs', 'sm', 'md', 'lg'] as const)('renders %s size without error', size => {
|
||||||
|
render(Badge, { children: textSnippet('label'), size });
|
||||||
|
expect(screen.getByText('label')).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe('Nowrap', () => {
|
||||||
|
it('applies nowrap when nowrap=true', () => {
|
||||||
|
const { container } = render(Badge, {
|
||||||
|
children: textSnippet('no wrap text'),
|
||||||
|
nowrap: true,
|
||||||
|
});
|
||||||
|
expect(container.querySelector('span')).toHaveClass('text-nowrap');
|
||||||
|
});
|
||||||
|
|
||||||
|
it('does not apply nowrap by default', () => {
|
||||||
|
const { container } = render(Badge, { children: textSnippet('wrappable') });
|
||||||
|
expect(container.querySelector('span')).not.toHaveClass('text-nowrap');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user