@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/{components/__tests__ → ui/table}/UnifiedTableBody.test.tsx

@@ -1,7 +1,7 @@
 /**
  * @file UnifiedTableBody Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
+ * @module Components/DataTable/Components
  * @since 0.4.0
  * 
  * Comprehensive test suite for UnifiedTableBody component following TEST_STANDARD.md.
@@ -14,11 +14,11 @@ import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
 import { renderHook } from '@testing-library/react';
-import { UnifiedTableBody } from '../UnifiedTableBody';
-import { createTestData, createTestColumns } from '../../__tests__/test-utils/dataFactories';
+import { UnifiedTableBody } from './UnifiedTableBody';
+import { createTestData, createTestColumns } from '../../test-utils/dataFactories';
 
 // Mock Button component
-vi.mock('../../Button/Button', () => ({
+vi.mock('../../../Button/Button', () => ({
   Button: ({ children, onClick, size, variant, className, 'aria-label': ariaLabel }: any) => (
     <button
       onClick={onClick}
@@ -33,7 +33,7 @@ vi.mock('../../Button/Button', () => ({
 }));
 
 // Mock Input component
-vi.mock('../../Input/Input', () => ({
+vi.mock('../../../Input/Input', () => ({
   Input: React.forwardRef(({ type, value, onChange, className, placeholder }: any, ref: any) => (
     <input
       ref={ref}
@@ -48,7 +48,7 @@ vi.mock('../../Input/Input', () => ({
 }));
 
 // Mock Select components
-vi.mock('../../Select/Select', () => ({
+vi.mock('../../../Select/Select', () => ({
   Select: React.forwardRef(({ children, value, onValueChange, onOpenChange }: any, ref: any) => (
     <div ref={ref} data-testid="select" data-value={value}>
       {children}
@@ -85,8 +85,8 @@ vi.mock('lucide-react', async () => {
   };
 });
 
-// Mock EmptyState component
-vi.mock('../EmptyState', () => ({
+// Mock EmptyState component (same dir as test - use ./ so mock applies)
+vi.mock('./EmptyState', () => ({
   EmptyState: ({ title, description, isFiltered, onClearFilters }: any) => (
     <div data-testid="empty-state">
       {title && <div>{title}</div>}
@@ -98,13 +98,13 @@ vi.mock('../EmptyState', () => ({
   ),
 }));
 
-// Mock FilterRow component
-vi.mock('../FilterRow', () => ({
+// Mock FilterRow component (same dir - use ./)
+vi.mock('./FilterRow', () => ({
   FilterRow: ({ table: _table }: any) => <div data-testid="filter-row">Filter Row</div>,
 }));
 
-// Mock ActionButtons component
-vi.mock('../ActionButtons', () => ({
+// Mock ActionButtons component (same dir - use ./ so RowComponent's import is mocked)
+vi.mock('../shared/ActionButtons', () => ({
   ActionButtons: ({ row, actions, isEditing: _isEditing }: any) => (
     <div data-testid="action-buttons">
       {actions?.map((action: any, idx: number) => (
@@ -116,8 +116,8 @@ vi.mock('../ActionButtons', () => ({
   ),
 }));
 
-// Mock EditableRow component
-vi.mock('../EditableRow', () => ({
+// Mock EditableRow component (same dir - use ./)
+vi.mock('./EditableRow', () => ({
   EditableRow: ({ row: _row, editingData, onEditingDataChange, onSave, onCancel }: any) => (
     <tr data-testid="editable-row">
       <td>
@@ -321,7 +321,7 @@ describe('[component] UnifiedTableBody', () => {
         </table>
       );
 
-      const saveButton = screen.getByTitle('Save new row');
+      const saveButton = screen.getByRole('button', { name: 'Save new row' });
       await user.click(saveButton);
       expect(onSaveCreation).toHaveBeenCalledTimes(1);
     });
@@ -343,7 +343,7 @@ describe('[component] UnifiedTableBody', () => {
         </table>
       );
 
-      const cancelButton = screen.getByTitle('Cancel new row');
+      const cancelButton = screen.getByRole('button', { name: 'Cancel new row' });
       await user.click(cancelButton);
       expect(onCancelCreation).toHaveBeenCalledTimes(1);
     });
@@ -860,5 +860,414 @@ describe('[component] UnifiedTableBody', () => {
       expect(screen.getByTestId('select-separator')).toBeInTheDocument();
     });
   });
+
+  describe('Virtualization Edge Cases', () => {
+    it('handles virtualization when scroll container is not available', () => {
+      const largeData = createTestData(1500);
+      const table = createMockTable(largeData);
+      
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            dataLength={1500}
+            forceVirtualization={false}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('uses standard rendering when virtualization threshold not met', () => {
+      const table = createMockTable();
+      
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            dataLength={500}
+            forceVirtualization={false}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles forceVirtualization override', () => {
+      const table = createMockTable();
+      
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            dataLength={5}
+            forceVirtualization={true}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
+
+  describe('Creation Row Edge Cases', () => {
+    it('handles creation data with nested objects', () => {
+      const table = createMockTable();
+      const creationData = {
+        name: 'New User',
+        metadata: { role: 'admin', permissions: ['read', 'write'] },
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            isCreating={true}
+            creationData={creationData as any}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles creation with empty creationData', () => {
+      const table = createMockTable();
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            isCreating={true}
+            creationData={{}}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles creation with undefined values in creationData', () => {
+      const table = createMockTable();
+      const creationData = {
+        name: undefined,
+        email: undefined,
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            isCreating={true}
+            creationData={creationData as any}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
+
+  describe('Editing Edge Cases', () => {
+    it('renders normal row when onSaveEditing is missing', () => {
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{ name: 'Edited Name' }}
+            onEditingDataChange={vi.fn()}
+            onSaveEditing={undefined}
+            onCancelEditing={vi.fn()}
+          />
+        </table>
+      );
+
+      // Should render normal row, not EditableRow (requires all handlers)
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+      expect(screen.queryByTestId('editable-row')).not.toBeInTheDocument();
+    });
+
+    it('renders normal row when onCancelEditing is missing', () => {
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{ name: 'Edited Name' }}
+            onEditingDataChange={vi.fn()}
+            onSaveEditing={vi.fn()}
+            onCancelEditing={undefined}
+          />
+        </table>
+      );
+
+      // Should render normal row, not EditableRow (requires all handlers)
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+      expect(screen.queryByTestId('editable-row')).not.toBeInTheDocument();
+    });
+
+    it('handles editing with empty editingData', () => {
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{}}
+          />
+        </table>
+      );
+
+      expect(screen.getByTestId('editable-row')).toBeInTheDocument();
+    });
+  });
+
+  describe('Hierarchical Data Edge Cases', () => {
+    it('handles hierarchical with missing state', () => {
+      const hierarchicalData = [
+        { id: '1', name: 'Parent', isParent: true },
+      ];
+      const table = createMockTable(hierarchicalData as any);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            hierarchical={{
+              enabled: true,
+              indentSize: 24,
+              state: undefined,
+            }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles hierarchical with empty expanded state', () => {
+      const hierarchicalData = [
+        { id: '1', name: 'Parent', isParent: true },
+      ];
+      const table = createMockTable(hierarchicalData as any);
+
+      const hierarchicalState = {
+        isExpanded: vi.fn(() => false),
+        hasChildren: vi.fn(() => false),
+        getChildrenCount: vi.fn(() => 0),
+        toggleRow: vi.fn(),
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            hierarchical={{
+              enabled: true,
+              indentSize: 24,
+              state: hierarchicalState,
+            }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles hierarchical with zero indent size', () => {
+      const hierarchicalData = [
+        { id: '1', name: 'Parent', isParent: true },
+        { id: '2', name: 'Child', isParent: false, parentId: '1' },
+      ];
+      const table = createMockTable(hierarchicalData as any);
+
+      const hierarchicalState = {
+        isExpanded: vi.fn((id: string) => id === '1'),
+        hasChildren: vi.fn((id: string) => id === '1'),
+        getChildrenCount: vi.fn((id: string) => id === '1' ? 1 : 0),
+        toggleRow: vi.fn(),
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            hierarchical={{
+              enabled: true,
+              indentSize: 0,
+              state: hierarchicalState,
+            }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
+
+  describe('Filter Row Edge Cases', () => {
+    it('does not render filter row when filtering is disabled', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            enableFiltering={false}
+            showFilterRow={true}
+          />
+        </table>
+      );
+
+      expect(screen.queryByTestId('filter-row')).not.toBeInTheDocument();
+    });
+
+    it('does not render filter row when showFilterRow is false', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            enableFiltering={true}
+            showFilterRow={false}
+          />
+        </table>
+      );
+
+      expect(screen.queryByTestId('filter-row')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Empty State Edge Cases', () => {
+    it('handles empty state with custom action', async () => {
+      const user = userEvent.setup();
+      const onAction = vi.fn();
+      const table = createMockTable([]);
+      const emptyState = {
+        title: 'No Records',
+        description: 'Add some data',
+        action: {
+          label: 'Create Record',
+          onClick: onAction,
+        },
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            dataLength={0}
+            emptyState={emptyState}
+          />
+        </table>
+      );
+
+      expect(screen.getByText('No Records')).toBeInTheDocument();
+    });
+
+    it('handles empty state without description', () => {
+      const table = createMockTable([]);
+      const emptyState = {
+        title: 'No Records',
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            dataLength={0}
+            emptyState={emptyState}
+          />
+        </table>
+      );
+
+      expect(screen.getByText('No Records')).toBeInTheDocument();
+    });
+  });
+
+  describe('Row Selection Integration', () => {
+    it('passes rowSelection to MemoizedRow', () => {
+      const table = createMockTable();
+      const rowSelection = { 'row-1': true, 'row-2': false };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            rowSelection={rowSelection}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
+
+  describe('Column Visibility in Creation', () => {
+    it('filters out actions column from creation row', () => {
+      const columnsWithActions = [
+        ...mockColumns,
+        {
+          id: 'actions',
+          header: 'Actions',
+          cell: () => null,
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithActions);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...baseProps}
+            table={table}
+            isCreating={true}
+            creationData={{ name: 'New User' }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
 });