@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -0,0 +1,467 @@
+/**
+ * @file DataTableLayout Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.1.0
+ *
+ * Comprehensive tests for DataTableLayout component covering rendering, export functionality,
+ * toolbar integration, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, renderHook } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
+import { DataTableLayout } from '../DataTableLayout';
+import type { DataRecord, DataTableColumn, NormalizedDataTableFeatureConfig } from '../../types';
+import { createTestData, createTestColumns } from '../../__tests__/test-utils/dataFactories';
+
+// Mock dependencies
+vi.mock('../DataTableToolbar', () => ({
+  DataTableToolbar: ({ title, description, onCreateRow, onExport, onDeleteSelected }: any) => (
+    <div data-testid="data-table-toolbar">
+      {title && <div>{title}</div>}
+      {description && <div>{description}</div>}
+      {onCreateRow && <button onClick={onCreateRow} data-testid="create-row-btn">Create</button>}
+      {onExport && <button onClick={onExport} data-testid="export-btn">Export</button>}
+      {onDeleteSelected && (
+        <button onClick={() => onDeleteSelected({ 'row-1': true })} data-testid="delete-selected-btn">
+          Delete Selected
+        </button>
+      )}
+    </div>
+  ),
+}));
+
+vi.mock('../UnifiedTableBody', () => ({
+  UnifiedTableBody: ({ isCreating, editingRowId }: any) => (
+    <tbody data-testid="unified-table-body">
+      {isCreating && <tr data-testid="creating-row"><td>Creating...</td></tr>}
+      {editingRowId && <tr data-testid="editing-row"><td>Editing {editingRowId}</td></tr>}
+      <tr data-testid="data-row"><td>Data Row</td></tr>
+    </tbody>
+  ),
+}));
+
+vi.mock('../PaginationControls', () => ({
+  PaginationControls: ({ _table, totalCount }: any) => (
+    <div data-testid="pagination-controls">Pagination: {totalCount} items</div>
+  ),
+  EnhancedPaginationControls: ({ _table, totalCount }: any) => (
+    <div data-testid="enhanced-pagination-controls">Enhanced Pagination: {totalCount} items</div>
+  ),
+}));
+
+vi.mock('../DataTableModals', () => ({
+  DataTableModals: ({ showImportModal, onCloseImportModal, onImport }: any) => (
+    <div data-testid="data-table-modals">
+      {showImportModal && (
+        <div data-testid="import-modal">
+          <button onClick={onCloseImportModal} data-testid="close-import-modal">Close</button>
+          <button onClick={() => onImport([{ id: '1', name: 'Imported' }])} data-testid="confirm-import">
+            Import
+          </button>
+        </div>
+      )}
+    </div>
+  ),
+}));
+
+const mockToast = vi.fn();
+vi.mock('../../../hooks/useToast', () => ({
+  toast: mockToast,
+}));
+
+vi.mock('../../utils/exportUtils', () => ({
+  exportToCSVWithTableRows: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock('../../utils/a11yUtils', () => ({
+  announceSortChange: vi.fn(),
+  getAriaSortState: vi.fn(() => 'none'),
+}));
+
+vi.mock('../../styles', () => ({
+  getTableClasses: vi.fn(() => 'table-classes'),
+}));
+
+const mockLogger = {
+  debug: vi.fn(),
+  info: vi.fn(),
+  warn: vi.fn(),
+  error: vi.fn(),
+};
+
+vi.mock('../../../utils/core/logger', () => ({
+  createLogger: () => mockLogger,
+}));
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  age: number;
+  status: string;
+}
+
+describe('DataTableLayout', () => {
+  const testData = createTestData(5) as TestData[];
+  const testColumns = createTestColumns() as DataTableColumn<TestData>[];
+
+  const getDefaultProps = () => {
+    const { result } = renderHook(() =>
+      useReactTable({
+        data: testData,
+        columns: testColumns.map((col) => ({
+          id: col.id || col.accessorKey,
+          accessorKey: col.accessorKey,
+          header: col.header,
+        })),
+        getCoreRowModel: getCoreRowModel(),
+      })
+    );
+
+    return {
+      table: result.current,
+    title: 'Test Table',
+    description: 'Test Description',
+    variant: 'default' as const,
+    columns: testColumns,
+    secureFeatures: {
+      search: true,
+      grouping: true,
+      columnVisibility: true,
+      filtering: true,
+      creation: true,
+      import: true,
+      export: true,
+      selection: true,
+      deletion: true,
+      deleteSelected: true,
+      pagination: true,
+      hierarchical: false,
+    } as NormalizedDataTableFeatureConfig,
+    enhancedPagination: false,
+    searchQuery: '',
+    onSearch: vi.fn(),
+    state: {
+      editingRowId: null,
+      editingData: {},
+      isCreating: false,
+      creationData: {},
+      grouping: [],
+      columnVisibility: {},
+      columnFilters: [],
+      showFilterRow: false,
+      showImportModal: false,
+    },
+    stateActions: {
+      setEditingRow: vi.fn(),
+      clearEditing: vi.fn(),
+      setCreating: vi.fn(),
+      clearCreationData: vi.fn(),
+      setGrouping: vi.fn(),
+      setColumnVisibility: vi.fn(),
+      setColumnFilters: vi.fn(),
+      setFilterRow: vi.fn(),
+      setImportModal: vi.fn(),
+      clearRowSelection: vi.fn(),
+    },
+    rowSelection: {},
+    rbac: { pageId: 'test-page' },
+    permissions: {
+      canCreate: { can: true, isLoading: false },
+      canImport: { can: true, isLoading: false },
+      canExport: { can: true, isLoading: false },
+      canDelete: { can: true, isLoading: false },
+    },
+    effectiveActions: [],
+    finalPageSizeOptions: [10, 25, 50, 100],
+    finalPaginationMode: 'client' as const,
+    finalDataCount: testData.length,
+    isLoading: false,
+    finalTableData: testData,
+    aggregates: [],
+    resolvedGetRowId: (row: TestData) => row.id,
+    data: testData,
+    virtualHeight: 400,
+    hierarchicalState: undefined,
+    logger: mockLogger,
+    secureHandlers: {
+      onCreateRow: vi.fn(),
+      onEditRow: vi.fn(),
+      onDeleteRow: vi.fn(),
+      onImport: vi.fn(),
+      onExport: vi.fn(),
+      onDeleteSelected: vi.fn(),
+    },
+      keyboardNavigation: {
+        getHeaderKeyboardHandlers: vi.fn(() => ({})),
+      },
+      lastFocusedElementRef: React.createRef<HTMLElement>(),
+    };
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders table with title and description', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      expect(screen.getByText('Test Table')).toBeInTheDocument();
+      expect(screen.getByText('Test Description')).toBeInTheDocument();
+    });
+
+    it('renders table without title and description', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} title={undefined} description={undefined} />);
+
+      expect(screen.queryByText('Test Table')).not.toBeInTheDocument();
+      expect(screen.queryByText('Test Description')).not.toBeInTheDocument();
+    });
+
+    it('renders toolbar component', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      expect(screen.getByTestId('data-table-toolbar')).toBeInTheDocument();
+    });
+
+    it('renders table body', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      expect(screen.getByTestId('unified-table-body')).toBeInTheDocument();
+    });
+
+    it('renders pagination when enabled', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      expect(screen.getByTestId('pagination-controls')).toBeInTheDocument();
+    });
+
+    it('renders enhanced pagination when enabled', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} enhancedPagination={true} />);
+
+      expect(screen.getByTestId('enhanced-pagination-controls')).toBeInTheDocument();
+    });
+
+    it('does not render pagination when disabled', () => {
+      const defaultProps = getDefaultProps();
+      const propsWithoutPagination = {
+        ...defaultProps,
+        secureFeatures: {
+          ...defaultProps.secureFeatures,
+          pagination: false,
+        },
+      };
+
+      render(<DataTableLayout {...propsWithoutPagination} />);
+
+      expect(screen.queryByTestId('pagination-controls')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Export Functionality', () => {
+    it('renders export button when export feature is enabled', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      expect(screen.getByTestId('export-btn')).toBeInTheDocument();
+    });
+
+    it('passes onExport handler to toolbar', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      // Verify export button exists (indicates handler is passed)
+      const exportButton = screen.getByTestId('export-btn');
+      expect(exportButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Row Creation', () => {
+    it('handles create row action', async () => {
+      const user = userEvent.setup();
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        state: {
+          ...defaultProps.state,
+          isCreating: false,
+        },
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      const createButton = screen.getByTestId('create-row-btn');
+      await user.click(createButton);
+
+      expect(props.stateActions.setCreating).toHaveBeenCalledWith(true);
+    });
+
+    it('handles save creation', async () => {
+      const onCreateRow = vi.fn();
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        onCreateRow,
+        state: {
+          ...defaultProps.state,
+          isCreating: true,
+          creationData: { name: 'New Row' },
+        },
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      // The save creation is handled internally by UnifiedTableBody
+      // This test verifies the component structure supports creation
+      expect(screen.getByTestId('creating-row')).toBeInTheDocument();
+    });
+  });
+
+  describe('Row Editing', () => {
+    it('displays editing row when editingRowId is set', () => {
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        state: {
+          ...defaultProps.state,
+          editingRowId: 'row-1',
+          editingData: { name: 'Edited Name' },
+        },
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      expect(screen.getByTestId('editing-row')).toBeInTheDocument();
+    });
+  });
+
+  describe('Delete Selected', () => {
+    it('renders delete selected button when handler is provided', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      expect(screen.getByTestId('delete-selected-btn')).toBeInTheDocument();
+    });
+  });
+
+  describe('Import Modal', () => {
+    it('renders import modal when showImportModal is true', () => {
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        state: {
+          ...defaultProps.state,
+          showImportModal: true,
+        },
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+    });
+
+    it('renders import modal with correct props', () => {
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        onImport: vi.fn(),
+        state: {
+          ...defaultProps.state,
+          showImportModal: true,
+        },
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+      expect(screen.getByTestId('confirm-import')).toBeInTheDocument();
+      expect(screen.getByTestId('close-import-modal')).toBeInTheDocument();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('sets aria-label on table', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      const table = screen.getByRole('table');
+      expect(table).toHaveAttribute('aria-label', 'Test Table');
+    });
+
+    it('sets aria-describedby when description is provided', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} />);
+
+      const table = screen.getByRole('table');
+      expect(table).toHaveAttribute('aria-describedby', 'table-description');
+    });
+
+    it('sets aria-busy when loading', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} isLoading={true} />);
+
+      const table = screen.getByRole('table');
+      expect(table).toHaveAttribute('aria-busy', 'true');
+    });
+
+    it('sets aria-busy to false when not loading', () => {
+      const defaultProps = getDefaultProps();
+      render(<DataTableLayout {...defaultProps} isLoading={false} />);
+
+      const table = screen.getByRole('table');
+      expect(table).toHaveAttribute('aria-busy', 'false');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty data array', () => {
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        data: [],
+        finalTableData: [],
+        finalDataCount: 0,
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      expect(screen.getByTestId('unified-table-body')).toBeInTheDocument();
+    });
+
+    it('handles missing onCreateRow handler', () => {
+      const defaultProps = getDefaultProps();
+      const props = {
+        ...defaultProps,
+        onCreateRow: undefined,
+      };
+
+      render(<DataTableLayout {...props} />);
+
+      // Should still render without errors
+      expect(screen.getByTestId('data-table-toolbar')).toBeInTheDocument();
+    });
+
+    it('handles different variants', () => {
+      const defaultProps = getDefaultProps();
+      const { rerender } = render(<DataTableLayout {...defaultProps} variant="compact" />);
+      expect(screen.getByRole('table')).toBeInTheDocument();
+
+      const defaultProps2 = getDefaultProps();
+      rerender(<DataTableLayout {...defaultProps2} variant="spacious" />);
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+  });
+});

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

@@ -1,11 +1,11 @@
 /**
- * @file DataTable Modals Component Tests
+ * @file DataTableModals Component Tests
  * @package @jmruthers/pace-core
  * @module Components/DataTable/Components/__tests__
  * @since 0.4.0
- * 
- * Comprehensive test suite for DataTableModals component following testing guidelines.
- * Tests cover all major functionality, edge cases, and user interactions.
+ *
+ * Tests focus on behavior: modal visibility, import functionality, CSV column mapping, and error handling.
+ * Removed redundant rendering tests and implementation detail checks.
  */
 
 import React from 'react';
@@ -41,10 +41,8 @@ vi.mock('../ImportModal', () => ({
               if (result && typeof result.then === 'function') {
                 await result;
               }
-            } catch (error) {
+            } catch (_error) {
               // DataTableModals catches and logs the error, then re-throws it
-              // We catch it here to prevent unhandled rejections in tests
-              // The error has already been logged by DataTableModals
             }
           }}
           data-testid="import-modal-import"
@@ -56,10 +54,7 @@ vi.mock('../ImportModal', () => ({
   ),
 }));
 
-interface TestData extends Record<string, unknown> {
-  name: string;
-  email: string;
-}
+// TestData interface removed - not used in tests
 
 describe('[component] DataTableModals', () => {
   const baseProps = {
@@ -76,7 +71,7 @@ describe('[component] DataTableModals', () => {
     vi.clearAllMocks();
   });
 
-  describe('Rendering', () => {
+  describe('Modal Visibility', () => {
     it('renders nothing when no modals are open', () => {
       const { container } = render(<DataTableModals {...baseProps} />);
       expect(container.firstChild).toBeNull();
@@ -101,18 +96,7 @@ describe('[component] DataTableModals', () => {
   });
 
   describe('Import Modal Integration', () => {
-    it('passes isOpen prop to ImportModal', () => {
-      render(
-        <DataTableModals
-          {...baseProps}
-          showImportModal={true}
-        />
-      );
-
-      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
-    });
-
-    it('passes onClose prop to ImportModal', async () => {
+    it('closes modal when close button is clicked', async () => {
       const user = userEvent.setup();
       const onCloseImportModal = vi.fn();
 
@@ -270,24 +254,6 @@ describe('[component] DataTableModals', () => {
         expect(onRestoreFocus).toHaveBeenCalled();
       }, { timeout: 200 });
     });
-
-    it('does not call focus handlers when not provided', () => {
-      const { rerender } = render(
-        <DataTableModals
-          {...baseProps}
-          showImportModal={false}
-        />
-      );
-
-      expect(() => {
-        rerender(
-          <DataTableModals
-            {...baseProps}
-            showImportModal={true}
-          />
-        );
-      }).not.toThrow();
-    });
   });
 
   describe('Error Handling', () => {
@@ -308,18 +274,12 @@ describe('[component] DataTableModals', () => {
 
       const importButton = screen.getByTestId('import-modal-import');
       
-      // DataTableModals wraps onImport and should handle errors gracefully
-      // Click the button - the error should be caught and handled
       await user.click(importButton);
       
-      // Wait for the async error handling to complete
       await waitFor(() => {
         expect(onImport).toHaveBeenCalled();
-        // The error should be handled gracefully (component doesn't crash)
-        // Note: logger.error may be called, but mock setup may not capture it reliably
       }, { timeout: 1000 });
       
-      // Verify the component is still rendered (error was handled)
       expect(screen.getByTestId('import-modal')).toBeInTheDocument();
     });
 
@@ -338,18 +298,12 @@ describe('[component] DataTableModals', () => {
 
       const importButton = screen.getByTestId('import-modal-import');
       
-      // DataTableModals wraps onImport and should handle errors gracefully
-      // Click the button - the error should be caught and handled
       await user.click(importButton);
       
-      // Wait for the async error handling to complete
       await waitFor(() => {
         expect(onImport).toHaveBeenCalled();
-        // The error should be handled gracefully (component doesn't crash)
-        // Note: logger.error may be called, but mock setup may not capture it reliably
       }, { timeout: 1000 });
       
-      // Verify the component is still rendered (error was handled)
       expect(screen.getByTestId('import-modal')).toBeInTheDocument();
     });
   });
@@ -400,76 +354,5 @@ describe('[component] DataTableModals', () => {
         expect(onImport).toHaveBeenCalled();
       });
     });
-
-    it('handles missing onImport callback', async () => {
-      const user = userEvent.setup();
-
-      render(
-        <DataTableModals
-          {...baseProps}
-          showImportModal={true}
-          onImport={undefined as any}
-        />
-      );
-
-      const importButton = screen.getByTestId('import-modal-import');
-      
-      // Should handle gracefully
-      expect(() => {
-        user.click(importButton);
-      }).not.toThrow();
-    });
-  });
-
-  describe('Data Transformation', () => {
-    it('transforms CSV data to match table column structure', async () => {
-      const user = userEvent.setup();
-      const onImport = vi.fn();
-      const columns = [
-        { id: 'name', header: 'Name', accessorKey: 'name' },
-        { id: 'email', header: 'Email Address', accessorKey: 'email' },
-      ];
-
-      render(
-        <DataTableModals
-          {...baseProps}
-          showImportModal={true}
-          onImport={onImport}
-          columns={columns}
-        />
-      );
-
-      const importButton = screen.getByTestId('import-modal-import');
-      await user.click(importButton);
-
-      await waitFor(() => {
-        expect(onImport).toHaveBeenCalled();
-      });
-    });
-
-    it('handles case-insensitive column header matching', async () => {
-      const user = userEvent.setup();
-      const onImport = vi.fn();
-      const columns = [
-        { id: 'name', header: 'Name', accessorKey: 'name' },
-      ];
-
-      render(
-        <DataTableModals
-          {...baseProps}
-          showImportModal={true}
-          onImport={onImport}
-          columns={columns}
-        />
-      );
-
-      const importButton = screen.getByTestId('import-modal-import');
-      await user.click(importButton);
-
-      await waitFor(() => {
-        expect(onImport).toHaveBeenCalled();
-      });
-    });
   });
 });
-