@jmruthers/pace-core 0.5.117 → 0.5.119

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

@@ -0,0 +1,1004 @@
+/**
+ * @file UnifiedTableBody Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for UnifiedTableBody component following TEST_STANDARD.md.
+ * Tests cover rendering, virtualization, editing, hierarchical data, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+import { renderHook } from '@testing-library/react';
+import { UnifiedTableBody } from '../UnifiedTableBody';
+import type { DataRecord } from '../../types';
+import { createTestData, createTestColumns } from '../../__tests__/test-utils/dataFactories';
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, size, variant, className, 'aria-label': ariaLabel }: any) => (
+    <button
+      onClick={onClick}
+      data-size={size}
+      data-variant={variant}
+      className={className}
+      aria-label={ariaLabel}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Input component
+vi.mock('../../Input/Input', () => ({
+  Input: React.forwardRef(({ type, value, onChange, className, placeholder }: any, ref: any) => (
+    <input
+      ref={ref}
+      type={type}
+      value={value}
+      onChange={onChange}
+      className={className}
+      placeholder={placeholder}
+      data-testid={`input-${type || 'text'}`}
+    />
+  )),
+}));
+
+// Mock Select components
+vi.mock('../../Select/Select', () => ({
+  Select: React.forwardRef(({ children, value, onValueChange, onOpenChange }: any, ref: any) => (
+    <div ref={ref} data-testid="select" data-value={value}>
+      {children}
+      <button onClick={() => onOpenChange?.(true)} data-testid="select-open">Open</button>
+      <button onClick={() => onValueChange?.('option1')} data-testid="select-change">Change</button>
+    </div>
+  )),
+  SelectTrigger: ({ children, className }: any) => (
+    <div data-testid="select-trigger" className={className}>{children}</div>
+  ),
+  SelectValue: ({ placeholder }: any) => <div data-testid="select-value">{placeholder}</div>,
+  SelectContent: ({ children, searchable, searchPlaceholder }: any) => (
+    <div data-testid="select-content" data-searchable={searchable} data-placeholder={searchPlaceholder}>
+      {children}
+    </div>
+  ),
+  SelectItem: ({ children, value }: any) => (
+    <div data-testid="select-item" data-value={value}>{children}</div>
+  ),
+  SelectGroup: ({ children }: any) => <div data-testid="select-group">{children}</div>,
+  SelectLabel: ({ children }: any) => <div data-testid="select-label">{children}</div>,
+  SelectSeparator: () => <div data-testid="select-separator" />,
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', async () => {
+  const actual = await vi.importActual('lucide-react');
+  return {
+    ...actual,
+    ChevronUp: ({ className }: { className?: string }) => <span className={className} data-testid="chevron-up">↑</span>,
+    ChevronDown: ({ className }: { className?: string }) => <span className={className} data-testid="chevron-down">↓</span>,
+    ChevronRight: ({ className }: { className?: string }) => <span className={className} data-testid="chevron-right">→</span>,
+    Check: ({ className }: { className?: string }) => <span className={className} data-testid="check-icon">✓</span>,
+  };
+});
+
+// Mock EmptyState component
+vi.mock('../EmptyState', () => ({
+  EmptyState: ({ title, description, isFiltered, onClearFilters }: any) => (
+    <div data-testid="empty-state">
+      {title && <div>{title}</div>}
+      {description && <div>{description}</div>}
+      {isFiltered && onClearFilters && (
+        <button onClick={onClearFilters} data-testid="clear-filters">Clear Filters</button>
+      )}
+    </div>
+  ),
+}));
+
+// Mock FilterRow component
+vi.mock('../FilterRow', () => ({
+  FilterRow: ({ table }: any) => <div data-testid="filter-row">Filter Row</div>,
+}));
+
+// Mock ActionButtons component
+vi.mock('../ActionButtons', () => ({
+  ActionButtons: ({ row, actions, isEditing }: any) => (
+    <div data-testid="action-buttons">
+      {actions?.map((action: any, idx: number) => (
+        <button key={idx} onClick={() => action.onClick?.(row.original)} data-testid={`action-${action.testId || idx}`}>
+          {action.label}
+        </button>
+      ))}
+    </div>
+  ),
+}));
+
+// Mock EditableRow component
+vi.mock('../EditableRow', () => ({
+  EditableRow: ({ row, editingData, onEditingDataChange, onSave, onCancel }: any) => (
+    <tr data-testid="editable-row">
+      <td>
+        <input
+          data-testid="editable-input"
+          value={editingData?.name || ''}
+          onChange={(e) => onEditingDataChange?.({ ...editingData, name: e.target.value })}
+        />
+        <button onClick={onSave} data-testid="save-editable">Save</button>
+        <button onClick={onCancel} data-testid="cancel-editable">Cancel</button>
+      </td>
+    </tr>
+  ),
+}));
+
+// Mock virtualizer
+vi.mock('@tanstack/react-virtual', () => ({
+  useVirtualizer: vi.fn(() => ({
+    getVirtualItems: vi.fn(() => []),
+    getTotalSize: vi.fn(() => 0),
+    scrollToIndex: vi.fn(),
+    scrollToOffset: vi.fn(),
+  })),
+}));
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+}
+
+describe('[component] UnifiedTableBody', () => {
+  const mockData = createTestData(5);
+  const mockColumns = createTestColumns();
+
+  const createMockTable = (data: any[] = mockData, columns: any[] = mockColumns) => {
+    const { result } = renderHook(() =>
+      useReactTable({
+        data,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+      })
+    );
+    return result.current;
+  };
+
+  const defaultProps = {
+    table: createMockTable(),
+    isCreating: false,
+    creationData: {},
+    onCreationDataChange: vi.fn(),
+    onSaveCreation: vi.fn(),
+    onCancelCreation: vi.fn(),
+    editingRowId: null,
+    editingData: {},
+    onEditingDataChange: vi.fn(),
+    onSaveEditing: vi.fn(),
+    onCancelEditing: vi.fn(),
+    grouping: [],
+    aggregates: [],
+    getRowId: (row: any) => row.id || String(row.name),
+    dataLength: mockData.length,
+    virtualHeight: 600,
+    forceVirtualization: false,
+    actions: [],
+    rbac: { pageId: 'test-page' },
+    permissions: {
+      canRead: { can: true, isLoading: false },
+      canCreate: { can: true, isLoading: false },
+      canUpdate: { can: true, isLoading: false },
+      canDelete: { can: true, isLoading: false },
+      canExport: { can: true, isLoading: false },
+      canImport: { can: true, isLoading: false },
+    },
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Suppress console.log for cleaner test output
+    vi.spyOn(console, 'log').mockImplementation(() => {});
+    vi.spyOn(console, 'warn').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders table body with rows', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody {...defaultProps} table={table} />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('renders empty state when no rows', () => {
+      const table = createMockTable([]);
+      render(
+        <table>
+          <UnifiedTableBody {...defaultProps} table={table} dataLength={0} />
+        </table>
+      );
+
+      expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    });
+
+    it('renders custom empty state configuration', () => {
+      const table = createMockTable([]);
+      const emptyState = {
+        title: 'No Records',
+        description: 'Add some data',
+      };
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            dataLength={0}
+            emptyState={emptyState}
+          />
+        </table>
+      );
+
+      expect(screen.getByText('No Records')).toBeInTheDocument();
+      expect(screen.getByText('Add some data')).toBeInTheDocument();
+    });
+
+    it('renders filter row when enabled', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            enableFiltering={true}
+            showFilterRow={true}
+          />
+        </table>
+      );
+
+      expect(screen.getByTestId('filter-row')).toBeInTheDocument();
+    });
+  });
+
+  describe('Row Creation', () => {
+    it('renders creation row when isCreating is true', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ name: 'New User', email: 'new@example.com' }}
+          />
+        </table>
+      );
+
+      // Check that inputs are rendered (by placeholder or value)
+      const nameInput = screen.getByDisplayValue('New User');
+      expect(nameInput).toBeInTheDocument();
+    });
+
+    it('calls onCreationDataChange when creation input changes', async () => {
+      const user = userEvent.setup();
+      const onCreationDataChange = vi.fn();
+      const table = createMockTable();
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ name: '' }}
+            onCreationDataChange={onCreationDataChange}
+          />
+        </table>
+      );
+
+      // Find input by placeholder since mock might not have testid
+      const input = screen.getByPlaceholderText(/Enter Name/i);
+      await user.type(input, 'New Name');
+
+      expect(onCreationDataChange).toHaveBeenCalled();
+    });
+
+    it('calls onSaveCreation when save button is clicked', async () => {
+      const user = userEvent.setup();
+      const onSaveCreation = vi.fn();
+      const table = createMockTable();
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ name: 'New User' }}
+            onSaveCreation={onSaveCreation}
+          />
+        </table>
+      );
+
+      const saveButton = screen.getByTitle('Save new row');
+      await user.click(saveButton);
+
+      expect(onSaveCreation).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onCancelCreation when cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      const onCancelCreation = vi.fn();
+      const table = createMockTable();
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ name: 'New User' }}
+            onCancelCreation={onCancelCreation}
+          />
+        </table>
+      );
+
+      const cancelButton = screen.getByTitle('Cancel new row');
+      await user.click(cancelButton);
+
+      expect(onCancelCreation).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders select field for select column type in creation mode', () => {
+      const columnsWithSelect = [
+        {
+          id: 'status',
+          header: 'Status',
+          accessorKey: 'status',
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithSelect);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ status: 'active' }}
+          />
+        </table>
+      );
+
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders number input for number field type in creation mode', () => {
+      const columnsWithNumber = [
+        {
+          id: 'age',
+          header: 'Age',
+          accessorKey: 'age',
+          fieldType: 'number' as const,
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithNumber);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ age: '25' }}
+          />
+        </table>
+      );
+
+      // Find by type since the actual Input component is rendered
+      const numberInput = screen.getByDisplayValue('25');
+      expect(numberInput).toHaveAttribute('type', 'number');
+    });
+
+    it('renders date input for date field type in creation mode', () => {
+      const columnsWithDate = [
+        {
+          id: 'createdAt',
+          header: 'Created At',
+          accessorKey: 'createdAt',
+          fieldType: 'date' as const,
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithDate);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ createdAt: '2024-01-01' }}
+          />
+        </table>
+      );
+
+      // Find by type and value since the actual Input component is rendered
+      const dateInput = screen.getByDisplayValue('2024-01-01');
+      expect(dateInput).toHaveAttribute('type', 'date');
+    });
+  });
+
+  describe('Row Editing', () => {
+    it('renders EditableRow when row is being edited', () => {
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{ name: 'Edited Name' }}
+          />
+        </table>
+      );
+
+      expect(screen.getByTestId('editable-row')).toBeInTheDocument();
+    });
+
+    it('calls onEditingDataChange when editing data changes', async () => {
+      const user = userEvent.setup();
+      const onEditingDataChange = vi.fn();
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{ name: 'Current Name' }}
+            onEditingDataChange={onEditingDataChange}
+          />
+        </table>
+      );
+
+      const editableInput = screen.getByTestId('editable-input');
+      await user.clear(editableInput);
+      await user.type(editableInput, 'New Name');
+
+      expect(onEditingDataChange).toHaveBeenCalled();
+    });
+
+    it('calls onSaveEditing when save button is clicked in edit mode', async () => {
+      const user = userEvent.setup();
+      const onSaveEditing = vi.fn();
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{ name: 'Edited Name' }}
+            onSaveEditing={onSaveEditing}
+          />
+        </table>
+      );
+
+      const saveButton = screen.getByTestId('save-editable');
+      await user.click(saveButton);
+
+      expect(onSaveEditing).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onCancelEditing when cancel button is clicked in edit mode', async () => {
+      const user = userEvent.setup();
+      const onCancelEditing = vi.fn();
+      const table = createMockTable();
+      const rowId = mockData[0].id;
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            editingRowId={rowId}
+            editingData={{ name: 'Edited Name' }}
+            onCancelEditing={onCancelEditing}
+          />
+        </table>
+      );
+
+      const cancelButton = screen.getByTestId('cancel-editable');
+      await user.click(cancelButton);
+
+      expect(onCancelEditing).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Grouped Rows', () => {
+    it('renders group header row when grouping is enabled', () => {
+      const table = createMockTable();
+      // Mock grouped row
+      const mockGroupedRow = {
+        ...table.getRowModel().rows[0],
+        getIsGrouped: () => true,
+        getValue: (columnId: string) => 'Group A',
+        subRows: table.getRowModel().rows,
+        toggleExpanded: vi.fn(),
+        getIsExpanded: () => false,
+      };
+
+      const tableWithGrouped = {
+        ...table,
+        getRowModel: () => ({
+          rows: [mockGroupedRow],
+        }),
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={tableWithGrouped as any}
+            grouping={['department']}
+          />
+        </table>
+      );
+
+      // Group header should be rendered
+      expect(screen.getByText(/Group A/)).toBeInTheDocument();
+    });
+
+    it('toggles group expansion when group header is clicked', async () => {
+      const user = userEvent.setup();
+      const toggleExpanded = vi.fn();
+      const table = createMockTable();
+      const mockGroupedRow = {
+        ...table.getRowModel().rows[0],
+        getIsGrouped: () => true,
+        getValue: (columnId: string) => 'Group A',
+        subRows: table.getRowModel().rows,
+        toggleExpanded,
+        getIsExpanded: () => false,
+      };
+
+      const tableWithGrouped = {
+        ...table,
+        getRowModel: () => ({
+          rows: [mockGroupedRow],
+        }),
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={tableWithGrouped as any}
+            grouping={['department']}
+          />
+        </table>
+      );
+
+      const expandButton = screen.getByRole('button');
+      await user.click(expandButton);
+
+      expect(toggleExpanded).toHaveBeenCalled();
+    });
+  });
+
+  describe('Hierarchical Data', () => {
+    it('renders hierarchical rows with indentation', () => {
+      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
+            {...defaultProps}
+            table={table}
+            hierarchical={{
+              enabled: true,
+              indentSize: 24,
+              state: hierarchicalState,
+            }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('renders expansion button for parent rows', () => {
+      const hierarchicalData = [
+        { id: '1', name: 'Parent', isParent: true },
+      ];
+      const table = createMockTable(hierarchicalData as any);
+
+      const hierarchicalState = {
+        isExpanded: vi.fn(() => false),
+        hasChildren: vi.fn(() => true),
+        getChildrenCount: vi.fn(() => 1),
+        toggleRow: vi.fn(),
+      };
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            hierarchical={{
+              enabled: true,
+              indentSize: 24,
+              state: hierarchicalState,
+            }}
+          />
+        </table>
+      );
+
+      // Expansion button should be rendered (ChevronRight icon)
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Action Buttons', () => {
+    it('renders action buttons for each row when actions column exists', () => {
+      // Create table with actions column
+      const columnsWithActions = [
+        ...mockColumns,
+        {
+          id: 'actions',
+          header: 'Actions',
+          cell: () => null,
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithActions);
+      const actions = [
+        { label: 'Edit', onClick: vi.fn(), testId: 'edit' },
+        { label: 'Delete', onClick: vi.fn(), testId: 'delete' },
+      ];
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            actions={actions}
+          />
+        </table>
+      );
+
+      // ActionButtons mock renders with action- prefix
+      // Multiple rows mean multiple buttons, so use getAllByTestId
+      const editButtons = screen.getAllByTestId('action-edit');
+      const deleteButtons = screen.getAllByTestId('action-delete');
+      expect(editButtons.length).toBeGreaterThan(0);
+      expect(deleteButtons.length).toBeGreaterThan(0);
+    });
+
+    it('calls action onClick when action button is clicked', async () => {
+      const user = userEvent.setup();
+      const onEditClick = vi.fn();
+      // Create table with actions column
+      const columnsWithActions = [
+        ...mockColumns,
+        {
+          id: 'actions',
+          header: 'Actions',
+          cell: () => null,
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithActions);
+      const actions = [
+        { label: 'Edit', onClick: onEditClick, testId: 'edit' },
+      ];
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            actions={actions}
+          />
+        </table>
+      );
+
+      // ActionButtons mock renders with action- prefix
+      // Multiple rows mean multiple buttons, so use getAllByTestId and click the first one
+      const editButtons = screen.getAllByTestId('action-edit');
+      expect(editButtons.length).toBeGreaterThan(0);
+      await user.click(editButtons[0]);
+
+      expect(onEditClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('Empty State', () => {
+    it('shows clear filters button when filtered', async () => {
+      const user = userEvent.setup();
+      const onClearFilters = vi.fn();
+      const table = createMockTable([]);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            dataLength={0}
+            isFiltered={true}
+            onClearFilters={onClearFilters}
+          />
+        </table>
+      );
+
+      const clearButton = screen.getByTestId('clear-filters');
+      expect(clearButton).toBeInTheDocument();
+
+      await user.click(clearButton);
+      expect(onClearFilters).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Virtualization', () => {
+    it('renders standard rows when virtualization is not needed', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            dataLength={5}
+            forceVirtualization={false}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('uses virtualization when data length exceeds threshold', () => {
+      const largeData = createTestData(1500);
+      const table = createMockTable(largeData);
+      
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            dataLength={1500}
+            forceVirtualization={false}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('forces virtualization when forceVirtualization is true', () => {
+      const table = createMockTable();
+      
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            dataLength={5}
+            forceVirtualization={true}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles null values in creationData gracefully', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ name: null as any, email: null as any }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles missing getRowId function', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            getRowId={undefined}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles empty actions array', () => {
+      const table = createMockTable();
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            actions={[]}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+
+    it('handles columns with editAccessorKey', () => {
+      const columnsWithEditKey = [
+        {
+          id: 'name',
+          header: 'Name',
+          accessorKey: 'name',
+          editAccessorKey: 'fullName',
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithEditKey);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ fullName: 'New Name' }}
+          />
+        </table>
+      );
+
+      const tbody = screen.getByRole('rowgroup');
+      expect(tbody).toBeInTheDocument();
+    });
+  });
+
+  describe('SelectEditField Component', () => {
+    it('renders creatable select with create option when search term has no match', async () => {
+      const user = userEvent.setup();
+      const columnsWithCreatable = [
+        {
+          id: 'status',
+          header: 'Status',
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+          creatable: true,
+          onCreateNew: vi.fn().mockResolvedValue('new-status'),
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithCreatable);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ status: '' }}
+          />
+        </table>
+      );
+
+      const selectTrigger = screen.getByTestId('select-trigger');
+      expect(selectTrigger).toBeInTheDocument();
+    });
+
+    it('renders select with groups', () => {
+      const columnsWithGroups = [
+        {
+          id: 'category',
+          header: 'Category',
+          fieldType: 'select' as const,
+          fieldOptions: [
+            {
+              type: 'group',
+              label: 'Group 1',
+              items: [
+                { value: 'option1', label: 'Option 1' },
+                { value: 'option2', label: 'Option 2' },
+              ],
+            },
+          ],
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithGroups);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ category: '' }}
+          />
+        </table>
+      );
+
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders select with separators', () => {
+      const columnsWithSeparators = [
+        {
+          id: 'status',
+          header: 'Status',
+          fieldType: 'select' as const,
+          fieldOptions: [
+            { value: 'active', label: 'Active' },
+            { type: 'separator' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+        },
+      ];
+      const table = createMockTable(mockData, columnsWithSeparators);
+
+      render(
+        <table>
+          <UnifiedTableBody
+            {...defaultProps}
+            table={table}
+            isCreating={true}
+            creationData={{ status: '' }}
+          />
+        </table>
+      );
+
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+  });
+});
+