@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/ui/modals/DataTableModals.test.tsx

@@ -0,0 +1,749 @@
+/**
+ * @file DataTableModals Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ *
+ * 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';
+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 { DataTableModals } from './DataTableModals';
+
+// Mock the logger utility
+const mockLogger = {
+  warn: vi.fn(),
+  error: vi.fn(),
+  debug: vi.fn(),
+  info: vi.fn(),
+};
+
+vi.mock('../../../utils/core/logger', () => ({
+  createLogger: () => mockLogger,
+}));
+
+// Mock ImportModal
+vi.mock('./ImportModal', () => ({
+  ImportModal: ({ isOpen, onClose, onImport, config }: any) => (
+    isOpen ? (
+      <div data-testid="import-modal">
+        <div data-testid="import-modal-title">{config?.title || 'Import Data'}</div>
+        <button onClick={onClose} data-testid="import-modal-close">Close</button>
+        <button
+          onClick={async () => {
+            const mockData = [{ name: 'Test', email: 'test@example.com' }];
+            // Always call onImport - DataTableModals will handle undefined case
+            // onImport is handleImport from DataTableModals
+            // handleImport calls the test's onImport mock, awaits it, catches errors, logs them, then re-throws
+            // We catch the re-thrown error here to prevent unhandled rejection
+            try {
+              const result = onImport(mockData);
+              if (result && typeof result.then === 'function') {
+                await result;
+              }
+            } catch (_error) {
+              // Error is caught by handleImport's try-catch, logged via logger.error, then re-thrown
+              // We catch it here to prevent unhandled rejection in tests
+              // The logger.error should have been called by handleImport before this catch
+            }
+          }}
+          data-testid="import-modal-import"
+        >
+          Import
+        </button>
+      </div>
+    ) : null
+  ),
+}));
+
+// TestData interface removed - not used in tests
+
+describe('[component] DataTableModals', () => {
+  const baseProps = {
+    showImportModal: false,
+    onCloseImportModal: vi.fn(),
+    onImport: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Modal Visibility', () => {
+    it('renders nothing when no modals are open', () => {
+      const { container } = render(<DataTableModals {...baseProps} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders ImportModal when showImportModal is true', () => {
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+        />
+      );
+
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+    });
+
+    it('does not render ImportModal when showImportModal is false', () => {
+      render(<DataTableModals {...baseProps} />);
+
+      expect(screen.queryByTestId('import-modal')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Import Modal Integration', () => {
+    it('closes modal when close button is clicked', async () => {
+      const user = userEvent.setup();
+      const onCloseImportModal = vi.fn();
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onCloseImportModal={onCloseImportModal}
+        />
+      );
+
+      const closeButton = screen.getByTestId('import-modal-close');
+      await user.click(closeButton);
+
+      expect(onCloseImportModal).toHaveBeenCalledTimes(1);
+    });
+
+    it('passes config to ImportModal', () => {
+      const config = {
+        title: 'Custom Import Title',
+        description: 'Custom description',
+      };
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          importModalConfig={config}
+        />
+      );
+
+      expect(screen.getByTestId('import-modal-title')).toHaveTextContent('Custom Import Title');
+    });
+  });
+
+  describe('CSV Column Mapping', () => {
+    it('maps CSV columns to table columns using column definitions', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        { id: 'name', header: 'Name', accessorKey: 'name' },
+        { id: 'email', header: 'Email', 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('uses editAccessorKey when available for column mapping', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'type',
+          header: 'Type',
+          accessorKey: 'type',
+          editAccessorKey: 'typeId',
+        },
+      ];
+
+      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('uses raw data when no columns provided', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={onImport}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      await user.click(importButton);
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Focus Management', () => {
+    it('calls onStoreFocus when import modal opens', () => {
+      const onStoreFocus = vi.fn();
+
+      const { rerender } = render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={false}
+          onStoreFocus={onStoreFocus}
+        />
+      );
+
+      rerender(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onStoreFocus={onStoreFocus}
+        />
+      );
+
+      expect(onStoreFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onRestoreFocus when import modal closes', async () => {
+      const onRestoreFocus = vi.fn();
+
+      const { rerender } = render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onRestoreFocus={onRestoreFocus}
+        />
+      );
+
+      rerender(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={false}
+          onRestoreFocus={onRestoreFocus}
+        />
+      );
+
+      await waitFor(() => {
+        expect(onRestoreFocus).toHaveBeenCalled();
+      }, { timeout: 200 });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles import errors gracefully', async () => {
+      const user = userEvent.setup();
+      mockLogger.error.mockClear();
+      const onImport = vi.fn(() => {
+        throw new Error('Import failed');
+      });
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={onImport}
+        />
+      );
+
+      // Wait for modal to be ready
+      await waitFor(() => {
+        expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = screen.getByTestId('import-modal-import');
+      if (importButton && !importButton.disabled) {
+        await user.click(importButton);
+      }
+      
+      // Error is handled by ImportModal - verify modal is still visible
+      await waitFor(() => {
+        expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+
+    it('handles async import errors', async () => {
+      const user = userEvent.setup();
+      mockLogger.error.mockClear();
+      const onImport = vi.fn(() => Promise.reject(new Error('Async import failed')));
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={onImport}
+        />
+      );
+
+      // Wait for modal to be ready
+      await waitFor(() => {
+        expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = screen.getByTestId('import-modal-import');
+      expect(importButton).toBeInTheDocument();
+      
+      // Click button - error will be rejected
+      // Flow: mock ImportModal calls onImport (which is handleImport from DataTableModals)
+      // handleImport calls onImport(mappedData) which is the test's mock that rejects
+      // handleImport awaits the result, which throws when the promise rejects
+      // handleImport's try-catch catches it, calls logger.error('Import error:', error), then re-throws
+      // The mock ImportModal's try-catch catches the re-thrown error to prevent unhandled rejection
+      await user.click(importButton);
+      
+      // Error handling is tested in ImportModal tests
+      // This test verifies the component structure supports async error handling
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+    });
+  });
+
+  describe('Column Mapping Edge Cases', () => {
+    it('maps columns using importAliases', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'name',
+          header: 'Name',
+          accessorKey: 'name',
+          importAliases: ['Full Name', 'User Name', '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();
+      });
+    });
+
+    it('maps columns using case-insensitive 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();
+      });
+    });
+
+    it('maps columns using normalized names', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'fullName',
+          header: 'Full Name',
+          accessorKey: 'fullName',
+        },
+      ];
+
+      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('maps reference fields with editAccessorKey and ID column', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'type',
+          header: 'Type',
+          accessorKey: 'type',
+          editAccessorKey: 'typeId',
+        },
+      ];
+
+      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('uses raw data when column mapping fails', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'unknown',
+          header: 'Unknown',
+          accessorKey: 'unknown',
+        },
+      ];
+
+      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 columns with only id and no accessorKey', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'name',
+          header: '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();
+      });
+    });
+
+    it('handles columns with function headers', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: 'name',
+          header: () => 'Dynamic 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();
+      });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing onImport handler', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={undefined as any}
+        />
+      );
+
+      // Wait for modal to be ready
+      await waitFor(() => {
+        expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      // The component should render without crashing even when onImport is undefined
+      // The error handling is tested in integration tests
+      const importButton = screen.getByTestId('import-modal-import');
+      expect(importButton).toBeInTheDocument();
+    });
+
+    it('handles mapping errors gracefully', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      mockLogger.warn.mockClear();
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={onImport}
+          columns={[]}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      await user.click(importButton);
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Focus Management Edge Cases', () => {
+    it('handles missing onStoreFocus callback', () => {
+      const { rerender } = render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={false}
+          onStoreFocus={undefined}
+        />
+      );
+
+      rerender(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onStoreFocus={undefined}
+        />
+      );
+
+      // Should not throw error
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+    });
+
+    it('handles missing onRestoreFocus callback', async () => {
+      const { rerender } = render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onRestoreFocus={undefined}
+        />
+      );
+
+      rerender(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={false}
+          onRestoreFocus={undefined}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.queryByTestId('import-modal')).not.toBeInTheDocument();
+      }, { timeout: 200 });
+    });
+
+    it('calls onStoreFocus only when modal opens', () => {
+      const onStoreFocus = vi.fn();
+
+      const { rerender } = render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={false}
+          onStoreFocus={onStoreFocus}
+        />
+      );
+
+      expect(onStoreFocus).not.toHaveBeenCalled();
+
+      rerender(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onStoreFocus={onStoreFocus}
+        />
+      );
+
+      expect(onStoreFocus).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty columns array', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={onImport}
+          columns={[]}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      await user.click(importButton);
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      });
+    });
+
+    it('handles columns with missing headers', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        { id: 'name', accessorKey: 'name' },
+        { id: 'email', 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 columns with all properties undefined', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const columns = [
+        {
+          id: undefined,
+          accessorKey: undefined,
+          header: undefined,
+        },
+      ];
+
+      render(
+        <DataTableModals
+          {...baseProps}
+          showImportModal={true}
+          onImport={onImport}
+          columns={columns as any}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      await user.click(importButton);
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      });
+    });
+
+    it('handles CSV data with unmapped columns', 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();
+      });
+    });
+  });
+});