101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
import { describe, it, expect } from 'vitest';
|
|
import { render, screen } from '@testing-library/react';
|
|
import { Skeleton } from './skeleton';
|
|
|
|
describe('Skeleton', () => {
|
|
it('should render skeleton', () => {
|
|
render(<Skeleton />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toBeInTheDocument();
|
|
expect(skeleton).toHaveAttribute('aria-label', 'Chargement...');
|
|
});
|
|
|
|
it('should render with default rectangular variant', () => {
|
|
render(<Skeleton />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('rounded');
|
|
});
|
|
|
|
it('should render with circular variant', () => {
|
|
render(<Skeleton variant="circular" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('rounded-full');
|
|
});
|
|
|
|
it('should render with text variant', () => {
|
|
render(<Skeleton variant="text" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('rounded');
|
|
});
|
|
|
|
it('should render with pulse animation by default', () => {
|
|
render(<Skeleton />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('animate-pulse');
|
|
});
|
|
|
|
it('should render with wave animation', () => {
|
|
render(<Skeleton animation="wave" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('shimmer');
|
|
});
|
|
|
|
it('should render without animation', () => {
|
|
render(<Skeleton animation="none" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).not.toHaveClass('animate-pulse');
|
|
expect(skeleton).not.toHaveClass('shimmer');
|
|
});
|
|
|
|
it('should apply custom width', () => {
|
|
render(<Skeleton width="200px" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveStyle({ width: '200px' });
|
|
});
|
|
|
|
it('should apply custom height', () => {
|
|
render(<Skeleton height="100px" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveStyle({ height: '100px' });
|
|
});
|
|
|
|
it('should apply numeric width and height', () => {
|
|
render(<Skeleton width={300} height={150} />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveStyle({ width: '300px', height: '150px' });
|
|
});
|
|
|
|
it('should apply custom className', () => {
|
|
render(<Skeleton className="custom-class" />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('custom-class');
|
|
});
|
|
|
|
it('should have accessibility attributes', () => {
|
|
render(<Skeleton />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveAttribute('aria-label', 'Chargement...');
|
|
|
|
const srOnly = screen.getByText('Chargement...');
|
|
expect(srOnly).toHaveClass('sr-only');
|
|
});
|
|
|
|
it('should have dark mode support', () => {
|
|
render(<Skeleton />);
|
|
|
|
const skeleton = screen.getByRole('status');
|
|
expect(skeleton).toHaveClass('dark:bg-gray-700');
|
|
});
|
|
});
|