soufiane
43a2dadd0e
Add comprehensive tests for: - Pagination: navigation, page numbers, disabled states - EmptyState: message, icon, title, action button - LoadingState: different types (page, card, table, list) - Modal: open/close, backdrop click, escape key, sizes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
/**
|
|
* Tests for the LoadingState component
|
|
* @jest-environment jsdom
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { render } from '@testing-library/react';
|
|
import { LoadingState } from '@/components/ui/LoadingState';
|
|
|
|
describe('LoadingState', () => {
|
|
it('should render page type by default', () => {
|
|
const { container } = render(<LoadingState />);
|
|
expect(container.querySelector('.p-8')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render card type skeleton', () => {
|
|
const { container } = render(<LoadingState type="card" />);
|
|
expect(container.querySelector('.h-32')).toBeInTheDocument();
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render table type skeleton', () => {
|
|
const { container } = render(<LoadingState type="table" />);
|
|
expect(container.querySelector('.h-10')).toBeInTheDocument();
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render table type with custom rows', () => {
|
|
const { container } = render(<LoadingState type="table" rows={6} />);
|
|
const rowElements = container.querySelectorAll('.h-12');
|
|
expect(rowElements).toHaveLength(6);
|
|
});
|
|
|
|
it('should render list type skeleton', () => {
|
|
const { container } = render(<LoadingState type="list" />);
|
|
expect(container.querySelector('.rounded-full')).toBeInTheDocument();
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render list type with custom rows', () => {
|
|
const { container } = render(<LoadingState type="list" rows={3} />);
|
|
const avatars = container.querySelectorAll('.rounded-full');
|
|
expect(avatars).toHaveLength(3);
|
|
});
|
|
|
|
it('should render page type with default columns', () => {
|
|
const { container } = render(<LoadingState type="page" />);
|
|
const cards = container.querySelectorAll('.h-32');
|
|
expect(cards).toHaveLength(4);
|
|
});
|
|
|
|
it('should render page type with custom columns', () => {
|
|
const { container } = render(<LoadingState type="page" columns={6} />);
|
|
const cards = container.querySelectorAll('.h-32');
|
|
expect(cards).toHaveLength(6);
|
|
});
|
|
|
|
it('should have animate-pulse class for card type', () => {
|
|
const { container } = render(<LoadingState type="card" />);
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have animate-pulse class for table type', () => {
|
|
const { container } = render(<LoadingState type="table" />);
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have animate-pulse class for list type', () => {
|
|
const { container } = render(<LoadingState type="list" />);
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should have animate-pulse class for page type', () => {
|
|
const { container } = render(<LoadingState type="page" />);
|
|
expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with rounded corners for card type', () => {
|
|
const { container } = render(<LoadingState type="card" />);
|
|
expect(container.querySelector('.rounded-lg')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should render with gray backgrounds', () => {
|
|
const { container } = render(<LoadingState type="card" />);
|
|
expect(container.querySelector('.bg-gray-200')).toBeInTheDocument();
|
|
});
|
|
|
|
it('should default to 4 rows for table type', () => {
|
|
const { container } = render(<LoadingState type="table" />);
|
|
const rowElements = container.querySelectorAll('.h-12');
|
|
expect(rowElements).toHaveLength(4);
|
|
});
|
|
|
|
it('should default to 4 rows for list type', () => {
|
|
const { container } = render(<LoadingState type="list" />);
|
|
const avatars = container.querySelectorAll('.rounded-full');
|
|
expect(avatars).toHaveLength(4);
|
|
});
|
|
});
|