mini-starter/packages/tenant-management-ui/src/components/DataTablePagination.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { DataTablePagination } from './DataTablePagination';

describe('DataTablePagination', () => {
  const mockOnPageChange = vi.fn();

  beforeEach(() => {
    mockOnPageChange.mockClear();
  });

  it('should render pagination with correct page numbers', () => {
    render(
      <DataTablePagination
        currentPage={1}
        totalCount={50}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    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();
  });

  it('should handle page change when clicking on page number', () => {
    render(
      <DataTablePagination
        currentPage={1}
        totalCount={50}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const page2Button = screen.getByText('2');
    fireEvent.click(page2Button);

    expect(mockOnPageChange).toHaveBeenCalledWith(2, 10);
  });

  it('should handle previous page click', () => {
    render(
      <DataTablePagination
        currentPage={2}
        totalCount={50}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const previousButton = screen.getByLabelText('Go to previous page');
    fireEvent.click(previousButton);

    expect(mockOnPageChange).toHaveBeenCalledWith(1, 10);
  });

  it('should handle next page click', () => {
    render(
      <DataTablePagination
        currentPage={2}
        totalCount={50}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const nextButton = screen.getByLabelText('Go to next page');
    fireEvent.click(nextButton);

    expect(mockOnPageChange).toHaveBeenCalledWith(3, 10);
  });

  it('should disable previous button on first page', () => {
    render(
      <DataTablePagination
        currentPage={1}
        totalCount={50}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const previousButton = screen.getByLabelText('Go to previous page');
    expect(previousButton).toHaveClass('pointer-events-none');
    expect(previousButton).toHaveClass('opacity-50');
  });

  it('should disable next button on last page', () => {
    render(
      <DataTablePagination
        currentPage={5}
        totalCount={50}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const nextButton = screen.getByLabelText('Go to next page');
    expect(nextButton).toHaveClass('pointer-events-none');
    expect(nextButton).toHaveClass('opacity-50');
  });

  it('should show ellipsis for many pages', () => {
    render(
      <DataTablePagination
        currentPage={5}
        totalCount={100}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    // 对于多页情况，应该显示第一页、最后一页和当前页附近的页面
    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('10')).toBeInTheDocument();
    expect(screen.getByText('3')).toBeInTheDocument();
    expect(screen.getByText('4')).toBeInTheDocument();
    expect(screen.getByText('5')).toBeInTheDocument();
    expect(screen.getByText('6')).toBeInTheDocument();
    expect(screen.getByText('7')).toBeInTheDocument();
  });
});