5a119df806
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>
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
import { render, screen } from '@testing-library/react';
|
|
import { describe, expect, it } from 'vitest';
|
|
import { Skeleton } from '../skeleton';
|
|
|
|
describe('Skeleton', () => {
|
|
it('renders base skeleton with animate-pulse', () => {
|
|
const { container } = render(<Skeleton />);
|
|
expect(container.firstChild).toHaveClass('animate-pulse');
|
|
});
|
|
|
|
it('base skeleton has aria-hidden', () => {
|
|
const { container } = render(<Skeleton />);
|
|
expect(container.firstChild).toHaveAttribute('aria-hidden');
|
|
});
|
|
|
|
it('Skeleton.Row renders row placeholder', () => {
|
|
const { container } = render(<Skeleton.Row />);
|
|
expect(container.firstChild).toHaveAttribute('aria-hidden');
|
|
// Should have multiple skeleton blocks
|
|
expect(container.querySelectorAll('.animate-pulse').length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('Skeleton.Card renders card placeholder', () => {
|
|
const { container } = render(<Skeleton.Card />);
|
|
expect(container.firstChild).toHaveAttribute('aria-hidden');
|
|
});
|
|
|
|
it('Skeleton.Table renders header and default 5 rows', () => {
|
|
const { container } = render(<Skeleton.Table />);
|
|
expect(container.firstChild).toHaveAttribute('aria-hidden');
|
|
// header + 5 rows = 6 row-like blocks; just check children exist
|
|
expect(container.children.length).toBeGreaterThan(0);
|
|
});
|
|
|
|
it('Skeleton.Table renders custom row count', () => {
|
|
const { container } = render(<Skeleton.Table rows={3} />);
|
|
// container.firstChild has header div + 3 SkeletonRow children
|
|
const el = container.firstChild as HTMLElement;
|
|
// header + 3 rows
|
|
expect(el.children.length).toBe(4);
|
|
});
|
|
|
|
it('merges custom className on base', () => {
|
|
render(<Skeleton data-testid="sk" className="h-10" />);
|
|
expect(screen.getByTestId('sk')).toHaveClass('h-10');
|
|
});
|
|
});
|