@jmruthers/pace-core 0.5.110 → 0.5.111

package/src/components/DataTable/components/__tests__/PaginationControls.test.tsx

@@ -0,0 +1,519 @@
+/**
+ * @file PaginationControls Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for PaginationControls component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { PaginationControls } from '../PaginationControls';
+import type { Table } from '@tanstack/react-table';
+import type { DataRecord, ServerSideResponse } from '../../types';
+
+// Mock lucide-react icons - use importOriginal to include ChevronDown for Select
+vi.mock('lucide-react', async () => {
+  const actual = await vi.importActual('lucide-react');
+  return {
+    ...actual,
+    ChevronLeft: ({ className }: { className?: string }) => <div data-testid="chevron-left" className={className} />,
+    ChevronRight: ({ className }: { className?: string }) => <div data-testid="chevron-right" className={className} />,
+    ChevronsLeft: ({ className }: { className?: string }) => <div data-testid="chevrons-left" className={className} />,
+    ChevronsRight: ({ className }: { className?: string }) => <div data-testid="chevrons-right" className={className} />,
+    Loader2: ({ className }: { className?: string }) => <div data-testid="loader-2" className={className} />,
+    Server: ({ className }: { className?: string }) => <div data-testid="server-icon" className={className} />,
+    Database: ({ className }: { className?: string }) => <div data-testid="database-icon" className={className} />,
+    Zap: ({ className }: { className?: string }) => <div data-testid="zap-icon" className={className} />,
+  };
+});
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, 'aria-label': ariaLabel, ...props }: any) => (
+    <button onClick={onClick} disabled={disabled} aria-label={ariaLabel} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Select components - use importOriginal to avoid missing ChevronDown
+vi.mock('../../Select/Select', async () => {
+  const actual = await vi.importActual('../../Select/Select');
+  return {
+    ...actual,
+    Select: ({ children, value, onValueChange, disabled }: any) => (
+      <div data-testid="select" data-value={value} data-disabled={disabled}>
+        <button onClick={() => onValueChange && onValueChange('20')}>Change</button>
+        {children}
+      </div>
+    ),
+    SelectTrigger: ({ children, className, 'aria-label': ariaLabel }: any) => (
+      <button data-testid="select-trigger" className={className} aria-label={ariaLabel}>
+        {children}
+      </button>
+    ),
+    SelectContent: ({ children }: any) => <div data-testid="select-content">{children}</div>,
+    SelectItem: ({ children, value }: any) => <div data-testid={`select-item-${value}`}>{children}</div>,
+    SelectValue: () => <span data-testid="select-value">10</span>,
+  };
+});
+
+// Mock pagination utilities
+const mockPaginationState = {
+  currentPageIndex: 0,
+  currentPageSize: 10,
+  pageCount: 5,
+  totalRows: 50,
+  canPreviousPage: false,
+  canNextPage: true,
+  startRow: 1,
+  endRow: 10,
+};
+
+const mockPaginationActions = {
+  goToFirstPage: vi.fn(),
+  goToPreviousPage: vi.fn(),
+  goToNextPage: vi.fn(),
+  goToLastPage: vi.fn(),
+  goToPage: vi.fn(),
+  setPageSize: vi.fn(),
+};
+
+vi.mock('../../utils/paginationUtils', () => ({
+  getPaginationBinding: vi.fn(() => ({
+    state: mockPaginationState,
+    actions: mockPaginationActions,
+  })),
+  getPageSizeOptions: vi.fn((mode: string, options: number[]) => options || [10, 20, 30, 40, 50]),
+}));
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+}
+
+const createMockTable = (overrides: Partial<Table<TestData>> = {}): Table<TestData> => ({
+  getState: vi.fn(() => ({
+    pagination: { pageIndex: 0, pageSize: 10 },
+    sorting: [],
+    columnFilters: [],
+    columnVisibility: {},
+    globalFilter: '',
+    grouping: [],
+    expanded: {},
+  })),
+  setPageIndex: vi.fn(),
+  setPageSize: vi.fn(),
+  previousPage: vi.fn(),
+  nextPage: vi.fn(),
+  getRowCount: vi.fn(() => 50),
+  getCanPreviousPage: vi.fn(() => false),
+  getCanNextPage: vi.fn(() => true),
+  getPageCount: vi.fn(() => 5),
+  ...overrides,
+} as unknown as Table<TestData>);
+
+describe('[component] PaginationControls', () => {
+  let mockTable: Table<TestData>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockTable = createMockTable();
+    mockPaginationState.currentPageIndex = 0;
+    mockPaginationState.currentPageSize = 10;
+    mockPaginationState.pageCount = 5;
+    mockPaginationState.canPreviousPage = false;
+    mockPaginationState.canNextPage = true;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders pagination controls with footer element', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      const footer = document.querySelector('footer[aria-label="pagination"]');
+      expect(footer).toBeInTheDocument();
+    });
+
+    it('displays current page information', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByText(/Page 1 of 5/i)).toBeInTheDocument();
+    });
+
+    it('renders page size selector', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByLabelText('Rows per page')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders navigation buttons', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByRole('button', { name: 'Go to first page' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to previous page' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to next page' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to last page' })).toBeInTheDocument();
+    });
+
+    it('renders navigation icons', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByTestId('chevrons-left')).toBeInTheDocument();
+      expect(screen.getByTestId('chevron-left')).toBeInTheDocument();
+      expect(screen.getByTestId('chevron-right')).toBeInTheDocument();
+      expect(screen.getByTestId('chevrons-right')).toBeInTheDocument();
+    });
+  });
+
+  describe('Page Navigation', () => {
+    it('calls goToFirstPage when first page button is clicked', async () => {
+      const user = userEvent.setup();
+      mockPaginationState.canPreviousPage = true;
+
+      render(<PaginationControls table={mockTable} />);
+
+      const firstButton = screen.getByRole('button', { name: 'Go to first page' });
+      await user.click(firstButton);
+
+      expect(mockPaginationActions.goToFirstPage).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls goToPreviousPage when previous button is clicked', async () => {
+      const user = userEvent.setup();
+      mockPaginationState.canPreviousPage = true;
+      mockPaginationState.currentPageIndex = 2;
+
+      render(<PaginationControls table={mockTable} />);
+
+      const prevButton = screen.getByRole('button', { name: 'Go to previous page' });
+      await user.click(prevButton);
+
+      expect(mockPaginationActions.goToPreviousPage).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls goToNextPage when next button is clicked', async () => {
+      const user = userEvent.setup();
+
+      render(<PaginationControls table={mockTable} />);
+
+      const nextButton = screen.getByRole('button', { name: 'Go to next page' });
+      await user.click(nextButton);
+
+      expect(mockPaginationActions.goToNextPage).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls goToLastPage when last page button is clicked', async () => {
+      const user = userEvent.setup();
+      mockPaginationState.canNextPage = true;
+
+      render(<PaginationControls table={mockTable} />);
+
+      const lastButton = screen.getByRole('button', { name: 'Go to last page' });
+      await user.click(lastButton);
+
+      expect(mockPaginationActions.goToLastPage).toHaveBeenCalledTimes(1);
+    });
+
+    it('disables first and previous buttons on first page', () => {
+      mockPaginationState.canPreviousPage = false;
+      mockPaginationState.currentPageIndex = 0;
+
+      render(<PaginationControls table={mockTable} />);
+
+      const firstButton = screen.getByRole('button', { name: 'Go to first page' });
+      const prevButton = screen.getByRole('button', { name: 'Go to previous page' });
+
+      expect(firstButton).toBeDisabled();
+      expect(prevButton).toBeDisabled();
+    });
+
+    it('disables next and last buttons on last page', () => {
+      mockPaginationState.canNextPage = false;
+      mockPaginationState.currentPageIndex = 4;
+      mockPaginationState.pageCount = 5;
+
+      render(<PaginationControls table={mockTable} />);
+
+      const nextButton = screen.getByRole('button', { name: 'Go to next page' });
+      const lastButton = screen.getByRole('button', { name: 'Go to last page' });
+
+      expect(nextButton).toBeDisabled();
+      expect(lastButton).toBeDisabled();
+    });
+
+    it('updates page display when page changes', () => {
+      mockPaginationState.currentPageIndex = 2;
+
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByText(/Page 3 of 5/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Page Size Selection', () => {
+    it('allows changing page size', async () => {
+      const user = userEvent.setup();
+      const onPageSizeChange = vi.fn();
+
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          onPageSizeChange={onPageSizeChange}
+          pageSizeOptions={[10, 20, 50]}
+        />
+      );
+
+      // Open the select dropdown
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      // Wait for options to be visible and select a different page size
+      await waitFor(() => {
+        expect(screen.getByText('20')).toBeInTheDocument();
+      });
+      
+      const option20 = screen.getByText('20');
+      await user.click(option20);
+
+      expect(mockPaginationActions.setPageSize).toHaveBeenCalled();
+    });
+
+    it('disables page size selector when loading', () => {
+      render(<PaginationControls table={mockTable} isLoading={true} />);
+
+      // When loading, the Select component should be disabled
+      // Check the trigger button which has the disabled state
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeDisabled();
+    });
+
+    it('uses custom page size options', () => {
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          pageSizeOptions={[5, 15, 25]}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+  });
+
+  describe('Performance Mode Indicators', () => {
+    it('shows client-side indicator when showPerformanceInfo is true', () => {
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          paginationMode="client"
+          showPerformanceInfo={true}
+        />
+      );
+
+      expect(screen.getByTestId('zap-icon')).toBeInTheDocument();
+      expect(screen.getByText('Client-side')).toBeInTheDocument();
+    });
+
+    it('shows server-side indicator when showPerformanceInfo is true', () => {
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          paginationMode="server"
+          showPerformanceInfo={true}
+        />
+      );
+
+      expect(screen.getByTestId('server-icon')).toBeInTheDocument();
+      expect(screen.getByText('Server-side')).toBeInTheDocument();
+    });
+
+    it('shows hybrid indicator when showPerformanceInfo is true', () => {
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          paginationMode="hybrid"
+          showPerformanceInfo={true}
+        />
+      );
+
+      expect(screen.getByTestId('database-icon')).toBeInTheDocument();
+      expect(screen.getByText('Hybrid')).toBeInTheDocument();
+    });
+
+    it('hides performance info when showPerformanceInfo is false', () => {
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          paginationMode="server"
+          showPerformanceInfo={false}
+        />
+      );
+
+      expect(screen.queryByTestId('server-icon')).not.toBeInTheDocument();
+      expect(screen.queryByText('Server-side')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Loading State', () => {
+    it('disables all navigation buttons when loading', () => {
+      render(<PaginationControls table={mockTable} isLoading={true} />);
+
+      const firstButton = screen.getByRole('button', { name: 'Go to first page' });
+      const prevButton = screen.getByRole('button', { name: 'Go to previous page' });
+      const nextButton = screen.getByRole('button', { name: 'Go to next page' });
+      const lastButton = screen.getByRole('button', { name: 'Go to last page' });
+
+      expect(firstButton).toBeDisabled();
+      expect(prevButton).toBeDisabled();
+      expect(nextButton).toBeDisabled();
+      expect(lastButton).toBeDisabled();
+    });
+
+    it('applies disabled styling to page size selector when loading', () => {
+      render(<PaginationControls table={mockTable} isLoading={true} />);
+
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger.className).toContain('opacity-50');
+      expect(selectTrigger.className).toContain('cursor-not-allowed');
+    });
+  });
+
+  describe('Server-side Pagination', () => {
+    it('works with server-side data', () => {
+      // Update mock to return server-side state
+      const serverData: ServerSideResponse<TestData> = {
+        data: [],
+        totalCount: 100,
+        pageIndex: 0,
+        pageSize: 10,
+        pageCount: 10,
+        hasNextPage: true,
+        hasPreviousPage: false,
+      };
+
+      // Mock pagination state for server mode
+      mockPaginationState.pageCount = 10;
+      mockPaginationState.totalRows = 100;
+
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          paginationMode="server"
+          serverData={serverData}
+        />
+      );
+
+      expect(screen.getByText(/Page 1 of 10/i)).toBeInTheDocument();
+    });
+
+    it('calls onPageChange when navigating in server mode', async () => {
+      const user = userEvent.setup();
+      const onPageChange = vi.fn();
+      const serverData: ServerSideResponse<TestData> = {
+        data: [],
+        totalCount: 100,
+        pageIndex: 0,
+        pageSize: 10,
+        pageCount: 10,
+        hasNextPage: true,
+        hasPreviousPage: false,
+      };
+
+      render(
+        <PaginationControls 
+          table={mockTable} 
+          paginationMode="server"
+          serverData={serverData}
+          onPageChange={onPageChange}
+        />
+      );
+
+      const nextButton = screen.getByRole('button', { name: 'Go to next page' });
+      await user.click(nextButton);
+
+      expect(mockPaginationActions.goToNextPage).toHaveBeenCalled();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles single page correctly', () => {
+      mockPaginationState.pageCount = 1;
+      mockPaginationState.currentPageIndex = 0;
+      mockPaginationState.canNextPage = false;
+
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByText(/Page 1 of 1/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to next page' })).toBeDisabled();
+    });
+
+    it('handles zero rows correctly', () => {
+      mockPaginationState.totalRows = 0;
+      mockPaginationState.pageCount = 1;
+
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByText(/Page 1 of 1/i)).toBeInTheDocument();
+    });
+
+    it('handles undefined pageSizeOptions gracefully', () => {
+      render(<PaginationControls table={mockTable} pageSizeOptions={undefined} />);
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+
+    it('handles missing table gracefully', () => {
+      expect(() => {
+        render(<PaginationControls table={null as any} />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper aria-label on footer', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      const footer = document.querySelector('footer[aria-label="pagination"]');
+      expect(footer).toBeInTheDocument();
+      expect(footer).toHaveAttribute('aria-label', 'pagination');
+    });
+
+    it('provides aria-labels for all navigation buttons', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      expect(screen.getByRole('button', { name: 'Go to first page' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to previous page' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to next page' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Go to last page' })).toBeInTheDocument();
+    });
+
+    it('provides aria-label for page size selector', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      const selector = screen.getByLabelText('Rows per page');
+      expect(selector).toBeInTheDocument();
+    });
+
+    it('maintains keyboard navigation with tabIndex', () => {
+      render(<PaginationControls table={mockTable} />);
+
+      const buttons = screen.getAllByRole('button');
+      const navButtons = buttons.filter(btn => 
+        btn.getAttribute('aria-label')?.includes('page')
+      );
+      
+      navButtons.forEach(button => {
+        expect(button).toHaveAttribute('tabIndex', '0');
+      });
+    });
+  });
+});