test(web): add Vitest+RTL tests for 15 design-system presentational components

Covers Badge, Divider, EmptyState, Numeric, PriceDelta, Signal, Skeleton,
StatusChip, Surface, StatCard, KpiCard, DensityToggle, Footer, MarketIndex,
CompactHeader — rendering, variants, props, a11y attributes, className merging.

All 1139 web tests pass. Zustand persist store mocked for DensityToggle to
avoid jsdom localStorage incompatibility.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Ho Ngoc Hai
2026-04-23 20:33:17 +07:00
parent 7d26436461
commit 5a119df806
15 changed files with 766 additions and 0 deletions

View File

@@ -0,0 +1,45 @@
import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { Badge } from '../badge';
describe('Badge (design-system)', () => {
it('renders children', () => {
render(<Badge>Hoạt đng</Badge>);
expect(screen.getByText('Hoạt động')).toBeInTheDocument();
});
it('renders as a span', () => {
render(<Badge data-testid="b">Test</Badge>);
expect(screen.getByTestId('b').tagName).toBe('SPAN');
});
it('applies default variant classes', () => {
render(<Badge data-testid="b">Default</Badge>);
expect(screen.getByTestId('b')).toHaveClass('bg-muted');
});
it('applies primary variant', () => {
render(<Badge data-testid="b" variant="primary">Primary</Badge>);
expect(screen.getByTestId('b')).toHaveClass('bg-primary/10');
});
it('applies warning variant', () => {
render(<Badge data-testid="b" variant="warning">Warning</Badge>);
expect(screen.getByTestId('b')).toHaveClass('bg-warning/10');
});
it('applies destructive variant', () => {
render(<Badge data-testid="b" variant="destructive">Error</Badge>);
expect(screen.getByTestId('b')).toHaveClass('bg-destructive/10');
});
it('applies outline variant', () => {
render(<Badge data-testid="b" variant="outline">Outline</Badge>);
expect(screen.getByTestId('b')).toHaveClass('bg-transparent');
});
it('merges custom className', () => {
render(<Badge data-testid="b" className="custom-class">Custom</Badge>);
expect(screen.getByTestId('b')).toHaveClass('custom-class');
});
});