@jmruthers/pace-core 0.5.114 → 0.5.116

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

@@ -0,0 +1,456 @@
+/**
+ * @file DataTable Modals 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.
+ */
+
+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 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 () => {
+            try {
+              const mockData = [{ name: 'Test', email: 'test@example.com' }];
+              const result = onImport(mockData);
+              if (result && typeof result.then === 'function') {
+                await result;
+              }
+            } catch (error) {
+              // Errors are expected in error handling tests
+              // The component should handle them
+            }
+          }}
+          data-testid="import-modal-import"
+        >
+          Import
+        </button>
+      </div>
+    ) : null
+  ),
+}));
+
+interface TestData extends Record<string, unknown> {
+  name: string;
+  email: string;
+}
+
+describe('[component] DataTableModals', () => {
+  const defaultProps = {
+    showImportModal: false,
+    onCloseImportModal: vi.fn(),
+    onImport: vi.fn(),
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders nothing when no modals are open', () => {
+      const { container } = render(<DataTableModals {...defaultProps} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders ImportModal when showImportModal is true', () => {
+      render(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={true}
+        />
+      );
+
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+    });
+
+    it('does not render ImportModal when showImportModal is false', () => {
+      render(<DataTableModals {...defaultProps} />);
+
+      expect(screen.queryByTestId('import-modal')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Import Modal Integration', () => {
+    it('passes isOpen prop to ImportModal', () => {
+      render(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={true}
+        />
+      );
+
+      expect(screen.getByTestId('import-modal')).toBeInTheDocument();
+    });
+
+    it('passes onClose prop to ImportModal', async () => {
+      const user = userEvent.setup();
+      const onCloseImportModal = vi.fn();
+
+      render(
+        <DataTableModals
+          {...defaultProps}
+          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
+          {...defaultProps}
+          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
+          {...defaultProps}
+          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
+          {...defaultProps}
+          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
+          {...defaultProps}
+          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
+          {...defaultProps}
+          showImportModal={false}
+          onStoreFocus={onStoreFocus}
+        />
+      );
+
+      rerender(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={true}
+          onStoreFocus={onStoreFocus}
+        />
+      );
+
+      expect(onStoreFocus).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onRestoreFocus when import modal closes', async () => {
+      const onRestoreFocus = vi.fn();
+
+      const { rerender } = render(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={true}
+          onRestoreFocus={onRestoreFocus}
+        />
+      );
+
+      rerender(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={false}
+          onRestoreFocus={onRestoreFocus}
+        />
+      );
+
+      await waitFor(() => {
+        expect(onRestoreFocus).toHaveBeenCalled();
+      }, { timeout: 200 });
+    });
+
+    it('does not call focus handlers when not provided', () => {
+      const { rerender } = render(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={false}
+        />
+      );
+
+      expect(() => {
+        rerender(
+          <DataTableModals
+            {...defaultProps}
+            showImportModal={true}
+          />
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles import errors gracefully', async () => {
+      const user = userEvent.setup();
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const onImport = vi.fn(() => {
+        throw new Error('Import failed');
+      });
+
+      render(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={true}
+          onImport={onImport}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      
+      // DataTableModals re-throws errors to ImportModal, so we expect the error to propagate
+      // The error should be logged before being re-thrown
+      await user.click(importButton);
+      
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalled();
+        expect(onImport).toHaveBeenCalled();
+      }, { timeout: 500 });
+      
+      consoleErrorSpy.mockRestore();
+    });
+
+    it('handles async import errors', async () => {
+      const user = userEvent.setup();
+      const consoleErrorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+      const onImport = vi.fn(() => Promise.reject(new Error('Async import failed')));
+
+      render(
+        <DataTableModals
+          {...defaultProps}
+          showImportModal={true}
+          onImport={onImport}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      
+      // DataTableModals re-throws errors to ImportModal, so we expect the error to propagate
+      // The error should be logged before being re-thrown
+      await user.click(importButton);
+      
+      await waitFor(() => {
+        expect(consoleErrorSpy).toHaveBeenCalled();
+        expect(onImport).toHaveBeenCalled();
+      }, { timeout: 500 });
+      
+      consoleErrorSpy.mockRestore();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty columns array', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+
+      render(
+        <DataTableModals
+          {...defaultProps}
+          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
+          {...defaultProps}
+          showImportModal={true}
+          onImport={onImport}
+          columns={columns}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      await user.click(importButton);
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      });
+    });
+
+    it('handles missing onImport callback', async () => {
+      const user = userEvent.setup();
+
+      render(
+        <DataTableModals
+          {...defaultProps}
+          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
+          {...defaultProps}
+          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
+          {...defaultProps}
+          showImportModal={true}
+          onImport={onImport}
+          columns={columns}
+        />
+      );
+
+      const importButton = screen.getByTestId('import-modal-import');
+      await user.click(importButton);
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      });
+    });
+  });
+});
+