99 lines
4.5 KiB
TypeScript
99 lines
4.5 KiB
TypeScript
import { render, screen, fireEvent } from '@testing-library/react';
|
|
import { Pagination as PaginationComponent } from '../../../../src/components/stats/Pagination';
|
|
|
|
describe('Pagination', () => {
|
|
const onPageChange = vi.fn();
|
|
|
|
it('returns null when totalPages <= 1', () => {
|
|
const { container } = render(
|
|
<PaginationComponent currentPage={1} totalPages={1} onPageChange={onPageChange} />
|
|
);
|
|
expect(container.firstChild).toBeNull();
|
|
});
|
|
|
|
it('renders all page numbers when totalPages <= 5', () => {
|
|
render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
|
|
|
|
expect(screen.getByText('1')).toBeInTheDocument();
|
|
expect(screen.getByText('2')).toBeInTheDocument();
|
|
expect(screen.getByText('3')).toBeInTheDocument();
|
|
expect(screen.getByText('4')).toBeInTheDocument();
|
|
expect(screen.getByText('5')).toBeInTheDocument();
|
|
expect(screen.getByText('2')).toHaveClass('bg-blue-600');
|
|
});
|
|
|
|
it('handles ellipsis correctly when currentPage is in the middle of a large set', () => {
|
|
// totalPages = 10, currentPage = 5
|
|
// Expected: [1, '...', 4, 5, 6, '...', 10]
|
|
render(<PaginationComponent currentPage={5} totalPages={10} onPageChange={onPageChange} />);
|
|
|
|
expect(screen.getByText('1')).toBeInTheDocument();
|
|
expect(screen.getByText('4')).toBeInTheDocument();
|
|
expect(screen.getByText('5')).toBeInTheDocument();
|
|
expect(screen.getByText('6')).toBeInTheDocument();
|
|
expect(screen.getByText('10')).toBeInTheDocument();
|
|
|
|
const allButtons = screen.getAllByRole('button');
|
|
const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
|
|
expect(pageButtons).toHaveLength(5); // 1, 4, 5, 6, 10
|
|
});
|
|
|
|
it('handles large page set with ellipsis at start and end correctly', () => {
|
|
// totalPages = 10, currentPage = 2
|
|
// Expected: [1, 2, 3, '...', 10]
|
|
render(<PaginationComponent currentPage={2} totalPages={10} onPageChange={onPageChange} />);
|
|
|
|
expect(screen.getByText('1')).toBeInTheDocument();
|
|
expect(screen.getByText('2')).toBeInTheDocument();
|
|
expect(screen.getByText('3')).toBeInTheDocument();
|
|
expect(screen.getByText('10')).toBeInTheDocument();
|
|
|
|
const allButtons = screen.getAllByRole('button');
|
|
const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
|
|
expect(pageButtons).toHaveLength(4); // 1, 2, 3, 10
|
|
});
|
|
|
|
it('handles large page set where current page is near the end', () => {
|
|
// totalPages = 10, currentPage = 9
|
|
// Expected: [1, '...', 8, 9, 10]
|
|
render(<PaginationComponent currentPage={9} totalPages={10} onPageChange={onPageChange} />);
|
|
|
|
expect(screen.getByText('1')).toBeInTheDocument();
|
|
expect(screen.getByText('8')).toBeInTheDocument();
|
|
expect(screen.getByText('9')).toBeInTheDocument();
|
|
expect(screen.getByText('10')).toBeInTheDocument();
|
|
|
|
const allButtons = screen.getAllByRole('button');
|
|
const pageButtons = allButtons.filter(btn => !['Previous page', 'Next page'].includes(btn.getAttribute('aria-label') || ''));
|
|
expect(pageButtons).toHaveLength(4); // 1, 8, 9, 10
|
|
});
|
|
|
|
it('calls onPageChange with correct page when a page number is clicked', () => {
|
|
render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
|
|
fireEvent.click(screen.getByText('4'));
|
|
expect(onPageChange).toHaveBeenCalledWith(4);
|
|
});
|
|
|
|
it('calls onPageChange with correct page when "Previous" is clicked', () => {
|
|
render(<PaginationComponent currentPage={2} totalPages={5} onPageChange={onPageChange} />);
|
|
fireEvent.click(screen.getByRole('button', { name: /previous/i }));
|
|
expect(onPageChange).toHaveBeenCalledWith(1);
|
|
});
|
|
|
|
it('calls onPageChange with correct page when "Next" is clicked', () => {
|
|
render(<PaginationComponent currentPage={4} totalPages={5} onPageChange={onPageChange} />);
|
|
fireEvent.click(screen.getByRole('button', { name: /next/i }));
|
|
expect(onPageChange).toHaveBeenCalledWith(5);
|
|
});
|
|
|
|
it('disables "Previous" button on first page', () => {
|
|
render(<PaginationComponent currentPage={1} totalPages={5} onPageChange={onPageChange} />);
|
|
expect(screen.getByRole('button', { name: /previous/i })).toBeDisabled();
|
|
});
|
|
|
|
it('disables "Next" button on last page', () => {
|
|
render(<PaginationComponent currentPage={5} totalPages={5} onPageChange={onPageChange} />);
|
|
expect(screen.getByRole('button', { name: /next/i })).toBeDisabled();
|
|
});
|
|
});
|