37981c2c17
- apps/web: test updates (Vitest/setup), playbackAnalyticsService, TrackGrid, serviceErrorHandler - veza-common: logging, metrics, traits, validation, random - veza-stream-server: audio pipeline, codecs, cache, monitoring, routes - apps/web/dist_verification: refresh build assets (content-hashed filenames) Co-authored-by: Cursor <cursoragent@cursor.com>
85 lines
2.8 KiB
TypeScript
85 lines
2.8 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render } from '@testing-library/react';
|
|
import { Skeleton } from './skeleton';
|
|
|
|
describe('Skeleton', () => {
|
|
it('should render skeleton', () => {
|
|
const { container } = render(<Skeleton />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toBeInTheDocument();
|
|
expect(skeleton).toHaveAttribute('aria-hidden', 'true');
|
|
});
|
|
|
|
it('should render with default rectangular variant', () => {
|
|
const { container } = render(<Skeleton />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveClass('rounded-lg');
|
|
});
|
|
|
|
it('should render with circular variant', () => {
|
|
const { container } = render(<Skeleton variant="circular" />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveClass('rounded-full');
|
|
});
|
|
|
|
it('should render with text variant', () => {
|
|
const { container } = render(<Skeleton variant="text" />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveClass('rounded');
|
|
});
|
|
|
|
it('should render with shimmer animation by default', () => {
|
|
const { container } = render(<Skeleton />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
// The skeleton uses a shimmer overlay via CSS class
|
|
const shimmer = skeleton?.querySelector('.skeleton-shimmer');
|
|
expect(shimmer).toBeInTheDocument();
|
|
});
|
|
|
|
it('should apply custom width', () => {
|
|
const { container } = render(<Skeleton width="200px" />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveStyle({ width: '200px' });
|
|
});
|
|
|
|
it('should apply custom height', () => {
|
|
const { container } = render(<Skeleton height="100px" />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveStyle({ height: '100px' });
|
|
});
|
|
|
|
it('should apply numeric width and height', () => {
|
|
const { container } = render(<Skeleton width={300} height={150} />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveStyle({ width: '300px', height: '150px' });
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
const { container } = render(<Skeleton className="custom-class" />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('should have accessibility attributes', () => {
|
|
const { container } = render(<Skeleton />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveAttribute('aria-hidden', 'true');
|
|
});
|
|
|
|
it('should have base styling classes', () => {
|
|
const { container } = render(<Skeleton />);
|
|
|
|
const skeleton = container.firstChild as HTMLElement;
|
|
expect(skeleton).toHaveClass('bg-muted/50');
|
|
});
|
|
});
|