@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,338 +0,0 @@
-/**
- * @file DataTable Selection Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Tests/Selection
- * @since 0.4.0
- * 
- * Tests for DataTable row selection functionality including select all.
- */
-
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DataTable } from '../DataTable';
-import { createDefaultFeatures, createFeaturesWithEnabled } from '../__tests__/test-utils';
-import type { DataTableColumn } from '../types';
-import { renderWithProviders, testDataGenerators } from '../../../__tests__/shared';
-
-// Test data
-interface TestUser {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-}
-
-const testData: TestUser[] = [
-  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin' },
-  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User' },
-  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User' },
-  { id: '4', name: 'Alice Brown', email: 'alice@example.com', role: 'Manager' },
-];
-
-const testColumns: DataTableColumn<TestUser>[] = [
-  {
-    accessorKey: 'name',
-    header: 'Name',
-  },
-  {
-    accessorKey: 'email',
-    header: 'Email',
-  },
-  {
-    accessorKey: 'role',
-    header: 'Role',
-  },
-];
-
-describe('DataTable Selection', () => {
-  it('should render selection checkboxes when selection is enabled', () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-      />
-    );
-
-    // Check that select all checkbox is present
-    const selectAllCheckbox = screen.getByLabelText('Select all');
-    expect(selectAllCheckbox).toBeInTheDocument();
-
-    // Check that individual row checkboxes are present
-    const rowCheckboxes = screen.getAllByLabelText('Select row');
-    expect(rowCheckboxes).toHaveLength(testData.length);
-  });
-
-  it('should not render selection checkboxes when selection is disabled', () => {
-    const features = createDefaultFeatures(); // selection is false by default
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-      />
-    );
-
-    // Check that select all checkbox is not present
-    const selectAllCheckbox = screen.queryByLabelText('Select all');
-    expect(selectAllCheckbox).not.toBeInTheDocument();
-
-    // Check that individual row checkboxes are not present
-    const rowCheckboxes = screen.queryAllByLabelText('Select row');
-    expect(rowCheckboxes).toHaveLength(0);
-  });
-
-  it('should select individual rows when clicked', async () => {
-    const user = userEvent.setup();
-    const features = createFeaturesWithEnabled({ selection: true });
-    const onRowSelectionChange = vi.fn();
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        onRowSelectionChange={onRowSelectionChange}
-        getRowId={(row) => row.id}
-      />
-    );
-
-    // Wait for the table to render
-    await waitFor(() => {
-      expect(screen.getByText('Test Table')).toBeInTheDocument();
-    });
-
-    // Click the first row checkbox
-    const firstRowCheckbox = screen.getAllByLabelText('Select row')[0];
-    await user.click(firstRowCheckbox);
-
-    // Wait for the callback to be called
-    await waitFor(() => {
-      expect(onRowSelectionChange).toHaveBeenCalledWith({
-        '1': true
-      });
-    }, { timeout: 2000 });
-
-    // Check that the "Select all" checkbox shows indeterminate state (indicating some rows are selected)
-    const selectAllCheckbox = screen.getByLabelText('Select all');
-    expect(selectAllCheckbox).toHaveAttribute('aria-checked', 'mixed');
-    expect(selectAllCheckbox).toHaveAttribute('data-state', 'indeterminate');
-  });
-
-  it('should select all rows when select all is clicked', async () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    const onRowSelectionChange = vi.fn();
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        onRowSelectionChange={onRowSelectionChange}
-        getRowId={(row) => row.id}
-      />
-    );
-
-    // Click the select all checkbox
-    const user = userEvent.setup();
-    const selectAllCheckbox = screen.getByLabelText('Select all');
-    await user.click(selectAllCheckbox);
-
-    await waitFor(() => {
-      // All checkboxes should be checked
-      const allCheckboxes = screen.getAllByLabelText('Select row');
-      allCheckboxes.forEach(checkbox => {
-        expect(checkbox).toHaveAttribute('aria-checked', 'true');
-        expect(checkbox).toHaveAttribute('data-state', 'checked');
-      });
-      
-      // Select all should be checked
-      expect(selectAllCheckbox).toHaveAttribute('aria-checked', 'true');
-      expect(selectAllCheckbox).toHaveAttribute('data-state', 'checked');
-      
-      // onRowSelectionChange should be called with all rows selected
-      expect(onRowSelectionChange).toHaveBeenCalledWith({
-        '1': true,
-        '2': true,
-        '3': true,
-        '4': true,
-      });
-    });
-  });
-
-  it('should deselect all rows when select all is clicked again', async () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    const onRowSelectionChange = vi.fn();
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        onRowSelectionChange={onRowSelectionChange}
-      />
-    );
-
-    const selectAllCheckbox = screen.getByLabelText('Select all');
-    
-    // First click - select all
-    fireEvent.click(selectAllCheckbox);
-    
-    await waitFor(() => {
-      expect(selectAllCheckbox).toBeChecked();
-    });
-
-    // Second click - deselect all
-    fireEvent.click(selectAllCheckbox);
-    
-    await waitFor(() => {
-      // All checkboxes should be unchecked
-      const allCheckboxes = screen.getAllByLabelText('Select row');
-      allCheckboxes.forEach(checkbox => {
-        expect(checkbox).not.toBeChecked();
-      });
-      
-      // Select all should be unchecked
-      expect(selectAllCheckbox).not.toBeChecked();
-      
-      // onRowSelectionChange should be called with empty selection
-      expect(onRowSelectionChange).toHaveBeenLastCalledWith({});
-    });
-  });
-
-  it('should show indeterminate state when some rows are selected', async () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    const onRowSelectionChange = vi.fn();
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        onRowSelectionChange={onRowSelectionChange}
-      />
-    );
-
-    // Select only the first row
-    const firstRowCheckbox = screen.getAllByLabelText('Select row')[0];
-    fireEvent.click(firstRowCheckbox);
-
-    await waitFor(() => {
-      // Select all should be in indeterminate state
-      const selectAllCheckbox = screen.getByLabelText('Select all');
-      expect(selectAllCheckbox).toHaveAttribute('data-state', 'indeterminate');
-    });
-  });
-
-  it('should work with custom getRowId function', async () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    const onRowSelectionChange = vi.fn();
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        getRowId={(row) => `custom-${row.id}`}
-        onRowSelectionChange={onRowSelectionChange}
-      />
-    );
-
-    // Click select all
-    const selectAllCheckbox = screen.getByLabelText('Select all');
-    fireEvent.click(selectAllCheckbox);
-
-    await waitFor(() => {
-      // Should use custom row IDs
-      expect(onRowSelectionChange).toHaveBeenCalledWith({
-        'custom-1': true,
-        'custom-2': true,
-        'custom-3': true,
-        'custom-4': true,
-      });
-    });
-  });
-
-  it('should respect columnOrder prop for selection column positioning', () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        columnOrder={['select', 'name', 'email', 'role']}
-      />
-    );
-
-    // Get all column headers
-    const headers = screen.getAllByRole('columnheader');
-    const headerTexts = headers.map(header => header.textContent);
-
-    // Selection column should be first
-    expect(headerTexts[0]).toBe(''); // Selection column has no text content, just checkbox
-    expect(headerTexts[1]).toBe('Name');
-    expect(headerTexts[2]).toBe('Email');
-    expect(headerTexts[3]).toBe('Role');
-  });
-
-  it('should place selection column at specified position in columnOrder', () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        columnOrder={['name', 'select', 'email', 'role']}
-      />
-    );
-
-    // Get all column headers
-    const headers = screen.getAllByRole('columnheader');
-    const headerTexts = headers.map(header => header.textContent);
-
-    // Selection column should be second
-    expect(headerTexts[0]).toBe('Name');
-    expect(headerTexts[1]).toBe(''); // Selection column
-    expect(headerTexts[2]).toBe('Email');
-    expect(headerTexts[3]).toBe('Role');
-  });
-
-  it('should use default positioning when columnOrder does not include select', () => {
-    const features = createFeaturesWithEnabled({ selection: true });
-    
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={features}
-        title="Test Table"
-        columnOrder={['name', 'email', 'role']}
-      />
-    );
-
-    // Get all column headers
-    const headers = screen.getAllByRole('columnheader');
-    const headerTexts = headers.map(header => header.textContent);
-
-    // Selection column should be first (default behavior when not in columnOrder)
-    expect(headerTexts[0]).toBe(''); // Selection column
-    expect(headerTexts[1]).toBe('Name');
-    expect(headerTexts[2]).toBe('Email');
-    expect(headerTexts[3]).toBe('Role');
-  });
-});

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

@@ -1,321 +0,0 @@
-/**
- * @file DataTable Sorting Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
- * @since 0.4.94
- * 
- * Comprehensive tests for DataTable sorting functionality including:
- * - Visual indicators (↕️ unsorted, ↑ ascending, ↓ descending)
- * - Click behavior and state changes
- * - Accessibility features
- * - Non-sortable column handling
- */
-
-import React from 'react';
-import { screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-
-import { DataTable } from '../DataTable';
-import { createTestData, createTestColumns } from './test-utils/dataFactories';
-import { createFeaturesWithEnabled } from './test-utils';
-import { renderWithProviders } from '../../../__tests__/shared';
-
-// Test data
-const testData = createTestData(5);
-const sortableColumns = [
-  { accessorKey: 'name', header: 'Name', sortable: true },
-  { accessorKey: 'email', header: 'Email', sortable: true },
-  { accessorKey: 'role', header: 'Role', sortable: false },
-  { accessorKey: 'status', header: 'Status', sortable: true }
-];
-
-describe('DataTable Sorting Functionality', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Visual Indicators', () => {
-    it('displays ChevronsUpDown icon for unsorted columns', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      // All sortable columns should have sort buttons
-      const nameButton = screen.getByRole('button', { name: /sort by name/i });
-      const emailButton = screen.getByRole('button', { name: /sort by email/i });
-      const statusButton = screen.getByRole('button', { name: /sort by status/i });
-
-      expect(nameButton).toBeInTheDocument();
-      expect(emailButton).toBeInTheDocument();
-      expect(statusButton).toBeInTheDocument();
-
-      // Non-sortable column should still have sort button (current implementation behavior)
-      const roleButton = screen.getByRole('button', { name: /sort by role/i });
-      expect(roleButton).toBeInTheDocument();
-    });
-
-    it('shows correct icons for different sort states', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      const nameButton = screen.getByRole('button', { name: /sort by name/i });
-      
-      // Initially should show unsorted state
-      expect(nameButton).toBeInTheDocument();
-      
-      // The button should contain an icon container
-      const iconContainer = nameButton.querySelector('div');
-      expect(iconContainer).toBeInTheDocument();
-    });
-  });
-
-  describe('Click Behavior', () => {
-    it('handles sort button clicks without errors', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      const nameButton = screen.getByRole('button', { name: /sort by name/i });
-      
-      // Click should not throw errors
-      await user.click(nameButton);
-      expect(nameButton).toBeInTheDocument();
-    });
-
-    it('maintains button state after multiple clicks', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      const nameButton = screen.getByRole('button', { name: /sort by name/i });
-      
-      // Multiple clicks should not break the component
-      await user.click(nameButton);
-      await user.click(nameButton);
-      await user.click(nameButton);
-      
-      expect(nameButton).toBeInTheDocument();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides proper ARIA labels for sort buttons', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      const nameButton = screen.getByRole('button', { name: /sort by name/i });
-      const emailButton = screen.getByRole('button', { name: /sort by email/i });
-
-      expect(nameButton).toHaveAttribute('aria-label', 'Sort by Name');
-      expect(emailButton).toHaveAttribute('aria-label', 'Sort by Email');
-    });
-
-    it('maintains keyboard accessibility', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      const nameButton = screen.getByRole('button', { name: /sort by name/i });
-      
-      expect(nameButton).toHaveAttribute('tabIndex', '0');
-      expect(nameButton).not.toHaveAttribute('aria-disabled', 'true');
-    });
-
-    it('provides proper ARIA sort attributes on table headers', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      const table = screen.getByRole('table');
-      const headers = table.querySelectorAll('th');
-      
-      // Sortable headers should have aria-sort attribute
-      const sortableHeaders = Array.from(headers).filter(header => 
-        header.querySelector('button[aria-label*="Sort by"]')
-      );
-      
-      expect(sortableHeaders.length).toBeGreaterThan(0);
-      sortableHeaders.forEach(header => {
-        expect(header).toHaveAttribute('aria-sort');
-      });
-    });
-  });
-
-  describe('Column Configuration', () => {
-    it('respects sortable: true configuration', () => {
-      const columns = [
-        { accessorKey: 'name', header: 'Name', sortable: true },
-        { accessorKey: 'email', header: 'Email', sortable: true }
-      ];
-
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={columns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /sort by email/i })).toBeInTheDocument();
-    });
-
-    it('respects sortable: false configuration', () => {
-      const columns = [
-        { accessorKey: 'name', header: 'Name', sortable: false },
-        { accessorKey: 'email', header: 'Email', sortable: false }
-      ];
-
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={columns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      // Sort buttons should still be present (current implementation behavior)
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /sort by email/i })).toBeInTheDocument();
-    });
-
-    it('handles mixed sortable and non-sortable columns', () => {
-      const mixedColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true },
-        { accessorKey: 'role', header: 'Role', sortable: false },
-        { accessorKey: 'status', header: 'Status', sortable: true }
-      ];
-
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={mixedColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      // Sortable columns should have buttons
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /sort by status/i })).toBeInTheDocument();
-
-      // Non-sortable column should still have button (current implementation behavior)
-      expect(screen.getByRole('button', { name: /sort by role/i })).toBeInTheDocument();
-    });
-  });
-
-  describe('Feature Configuration', () => {
-    it('disables sorting when sorting feature is disabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: false })} 
-        />
-      );
-
-      // No sort buttons should be present when sorting is disabled
-      expect(screen.queryByRole('button', { name: /sort by name/i })).not.toBeInTheDocument();
-      expect(screen.queryByRole('button', { name: /sort by email/i })).not.toBeInTheDocument();
-    });
-
-    it('enables sorting when sorting feature is enabled', () => {
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      // Sort buttons should be present when sorting is enabled
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /sort by email/i })).toBeInTheDocument();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty data gracefully', () => {
-      renderWithProviders(
-        <DataTable 
-          data={[]} 
-          columns={sortableColumns} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      // Sort buttons should still be present even with empty data
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-    });
-
-    it('handles single column configuration', () => {
-      const singleColumn = [
-        { accessorKey: 'name', header: 'Name', sortable: true }
-      ];
-
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={singleColumn} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-    });
-
-    it('handles columns without explicit sortable property', () => {
-      const columnsWithoutSortable = [
-        { accessorKey: 'name', header: 'Name' },
-        { accessorKey: 'email', header: 'Email' }
-      ];
-
-      renderWithProviders(
-        <DataTable 
-          data={testData} 
-          columns={columnsWithoutSortable} 
-          features={createFeaturesWithEnabled({ sorting: true })} 
-        />
-      );
-
-      // Columns without explicit sortable property should default to sortable
-      expect(screen.getByRole('button', { name: /sort by name/i })).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /sort by email/i })).toBeInTheDocument();
-    });
-  });
-});