test(Badge): cover Baddge with tests

This commit is contained in:
Ilia Mashkov
2026-04-17 20:13:21 +03:00
parent 409dd1b229
commit f55043a1e7

View 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');
});
});
});