@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,139 +0,0 @@
-/**
- * @file LoadingState Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
- * @since 0.4.0
- * 
- * Comprehensive test suite for LoadingState component following testing guidelines.
- * Tests cover all major functionality and accessibility.
- */
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { LoadingState } from '../LoadingState';
-
-describe('[component] LoadingState', () => {
-  describe('Rendering', () => {
-    it('renders loading spinner and text', () => {
-      render(<LoadingState />);
-
-      // There are two "Loading..." texts: one in sr-only span, one in strong
-      const loadingTexts = screen.getAllByText('Loading...');
-      expect(loadingTexts.length).toBeGreaterThan(0);
-    });
-
-    it('renders with centered layout', () => {
-      render(<LoadingState />);
-
-      // Component uses <p> with grid place-items-center, not flex
-      const container = screen.getByRole('status').parentElement; // <p> element
-      expect(container).toHaveClass('text-center', 'p-8', 'grid', 'place-items-center');
-    });
-
-    it('renders with padding', () => {
-      render(<LoadingState />);
-
-      // Component uses <p> with p-8 class
-      const container = screen.getByRole('status').parentElement;
-      expect(container).toHaveClass('p-8');
-    });
-
-    it('renders spinner with animation class', () => {
-      render(<LoadingState />);
-
-      // Spinner is the canvas element with role="status"
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('animate-spin');
-    });
-
-    it('renders grid container with items centered', () => {
-      render(<LoadingState />);
-
-      // Component uses <p> with grid place-items-center, not flex
-      const container = screen.getByRole('status').parentElement;
-      expect(container).toHaveClass('grid', 'place-items-center');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides aria-live region for loading state', () => {
-      render(<LoadingState />);
-
-      // aria-live is on the canvas element (spinner), not the text
-      const spinner = screen.getByRole('status');
-      // Note: aria-live is not directly on the spinner, it's on the parent container
-      // The spinner has role="status" which provides the live region
-      expect(spinner).toBeInTheDocument();
-    });
-
-    it('announces loading state to screen readers', () => {
-      render(<LoadingState />);
-
-      // There are two "Loading..." texts: one in sr-only span, one in strong
-      const loadingTexts = screen.getAllByText('Loading...');
-      expect(loadingTexts.length).toBeGreaterThan(0);
-    });
-  });
-
-  describe('Visual Structure', () => {
-    it('renders spinner before loading text', () => {
-      render(<LoadingState />);
-
-      // Container is <p> element
-      const container = screen.getByRole('status').parentElement;
-      const spinner = container?.firstElementChild; // canvas element
-      const text = container?.lastElementChild; // strong element
-
-      expect(spinner).toBeInTheDocument();
-      expect(text).toHaveTextContent('Loading...');
-    });
-
-    it('applies grid layout for centering', () => {
-      render(<LoadingState />);
-
-      // Component doesn't use space-x-2, it uses grid layout
-      // The spacing is handled by the grid layout itself
-      const container = screen.getByRole('status').parentElement;
-      expect(container).toBeInTheDocument();
-    });
-  });
-
-  describe('Styling', () => {
-    it('renders visible loading text', () => {
-      render(<LoadingState />);
-
-      // The visible text is in a <strong> element, not with muted color
-      // The sr-only text doesn't have muted color either
-      const textElements = screen.getAllByText('Loading...');
-      // Find the visible one (strong element, not sr-only)
-      const visibleText = textElements.find(el => el.tagName === 'STRONG');
-      expect(visibleText).toBeInTheDocument();
-    });
-
-    it('spinner has rounded-full class', () => {
-      render(<LoadingState />);
-
-      // Spinner is the canvas element with role="status"
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('rounded-full');
-    });
-
-    it('spinner has border styling', () => {
-      render(<LoadingState />);
-
-      // Spinner uses border-2 border-solid border-current border-r-transparent
-      const spinner = screen.getByRole('status');
-      expect(spinner).toHaveClass('border-2', 'border-solid', 'border-current', 'border-r-transparent');
-    });
-
-    it('spinner has appropriate size', () => {
-      render(<LoadingState />);
-
-      // Spinner is the canvas element with role="status"
-      const spinner = screen.getByRole('status');
-      // LoadingState spinner uses Tailwind v4 size-* utility instead of h-* w-*
-      expect(spinner).toHaveClass('size-6');
-    });
-  });
-});

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

@@ -1,519 +0,0 @@
-/**
- * @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');
-      });
-    });
-  });
-});