DataTablePagination.test.tsx 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { render, screen, fireEvent } from '@testing-library/react';
  2. import { describe, it, expect, vi } from 'vitest';
  3. import { DataTablePagination } from '../../src/components/admin/DataTablePagination';
  4. describe('DataTablePagination', () => {
  5. it('应该正确渲染分页组件', () => {
  6. const mockOnPageChange = vi.fn();
  7. render(
  8. <DataTablePagination
  9. currentPage={1}
  10. totalCount={100}
  11. pageSize={10}
  12. onPageChange={mockOnPageChange}
  13. />
  14. );
  15. // 检查分页组件是否渲染
  16. expect(screen.getByRole('navigation')).toBeInTheDocument();
  17. // 检查页码是否正确显示
  18. expect(screen.getByText('1')).toBeInTheDocument();
  19. expect(screen.getByText('10')).toBeInTheDocument();
  20. });
  21. it('应该处理页码点击', () => {
  22. const mockOnPageChange = vi.fn();
  23. render(
  24. <DataTablePagination
  25. currentPage={1}
  26. totalCount={100}
  27. pageSize={10}
  28. onPageChange={mockOnPageChange}
  29. />
  30. );
  31. // 点击下一页
  32. const nextButton = screen.getByLabelText(/next/i);
  33. fireEvent.click(nextButton);
  34. expect(mockOnPageChange).toHaveBeenCalledWith(2, 10);
  35. });
  36. it('应该禁用上一页按钮当在第一页时', () => {
  37. const mockOnPageChange = vi.fn();
  38. render(
  39. <DataTablePagination
  40. currentPage={1}
  41. totalCount={100}
  42. pageSize={10}
  43. onPageChange={mockOnPageChange}
  44. />
  45. );
  46. const prevButton = screen.getByLabelText(/previous/i);
  47. expect(prevButton).toHaveAttribute('aria-disabled', 'true');
  48. });
  49. it('应该禁用下一页按钮当在最后一页时', () => {
  50. const mockOnPageChange = vi.fn();
  51. render(
  52. <DataTablePagination
  53. currentPage={10}
  54. totalCount={100}
  55. pageSize={10}
  56. onPageChange={mockOnPageChange}
  57. />
  58. );
  59. const nextButton = screen.getByLabelText(/next/i);
  60. expect(nextButton).toHaveAttribute('aria-disabled', 'true');
  61. });
  62. });