mini-starter/packages/shared-ui-components/tests/unit/DataTablePagination.test.tsx

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

describe('DataTablePagination', () => {
  it('应该正确渲染分页组件', () => {
    const mockOnPageChange = vi.fn();

    render(
      <DataTablePagination
        currentPage={1}
        totalCount={100}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    // 检查分页组件是否渲染
    expect(screen.getByRole('navigation')).toBeInTheDocument();

    // 检查分页信息是否正确显示
    expect(screen.getByText('共 100 条记录，第 1 / 10 页')).toBeInTheDocument();

    // 检查页码是否正确显示
    expect(screen.getByText('1')).toBeInTheDocument();
    expect(screen.getByText('10')).toBeInTheDocument();
  });

  it('应该处理页码点击', () => {
    const mockOnPageChange = vi.fn();

    render(
      <DataTablePagination
        currentPage={1}
        totalCount={100}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    // 点击下一页
    const nextButton = screen.getByLabelText(/next/i);
    fireEvent.click(nextButton);

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

  it('应该禁用上一页按钮当在第一页时', () => {
    const mockOnPageChange = vi.fn();

    render(
      <DataTablePagination
        currentPage={1}
        totalCount={100}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const prevButton = screen.getByLabelText(/previous/i);
    expect(prevButton).toHaveAttribute('aria-disabled', 'true');
  });

  it('应该禁用下一页按钮当在最后一页时', () => {
    const mockOnPageChange = vi.fn();

    render(
      <DataTablePagination
        currentPage={10}
        totalCount={100}
        pageSize={10}
        onPageChange={mockOnPageChange}
      />
    );

    const nextButton = screen.getByLabelText(/next/i);
    expect(nextButton).toHaveAttribute('aria-disabled', 'true');
  });
});