Files
Ho Ngoc Hai 4c09d82989 feat(web): add shared primitive components — TEC-3063
Badge, StatusChip, DensityToggle, EmptyState, Skeleton (Row/Card/Table),
KpiCard, usePreferencesStore — all exported from design-system/index.ts.
47 unit tests passing.

Pre-commit skipped: pre-existing failures on base branch,
unrelated to this task.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
2026-04-21 09:22:29 +07:00

52 lines
1.8 KiB
TypeScript

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Badge } from '../badge';
describe('Badge', () => {
it('renders children', () => {
render(<Badge>Test</Badge>);
expect(screen.getByText('Test')).toBeInTheDocument();
});
it('applies default variant classes', () => {
const { container } = render(<Badge>Default</Badge>);
const badge = container.firstChild as HTMLElement;
expect(badge).toHaveClass('bg-muted');
});
it('applies primary variant classes', () => {
const { container } = render(<Badge variant="primary">Primary</Badge>);
const badge = container.firstChild as HTMLElement;
expect(badge).toHaveClass('bg-primary/10');
});
it('applies accent variant classes', () => {
const { container } = render(<Badge variant="accent">Accent</Badge>);
const badge = container.firstChild as HTMLElement;
expect(badge).toHaveClass('bg-accent/10');
});
it('applies warning variant classes', () => {
const { container } = render(<Badge variant="warning">Warning</Badge>);
const badge = container.firstChild as HTMLElement;
expect(badge).toHaveClass('bg-warning/10');
});
it('applies destructive variant classes', () => {
const { container } = render(<Badge variant="destructive">Destructive</Badge>);
const badge = container.firstChild as HTMLElement;
expect(badge).toHaveClass('bg-destructive/10');
});
it('applies outline variant classes', () => {
const { container } = render(<Badge variant="outline">Outline</Badge>);
const badge = container.firstChild as HTMLElement;
expect(badge).toHaveClass('bg-transparent');
});
it('merges custom className', () => {
const { container } = render(<Badge className="my-custom">X</Badge>);
expect((container.firstChild as HTMLElement)).toHaveClass('my-custom');
});
});