@jmruthers/pace-core 0.6.10 → 0.6.11

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

@@ -0,0 +1,1834 @@
+/**
+ * @file Import Modal Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for ImportModal component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, waitFor, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ImportModal } from './ImportModal';
+
+// Helper function to wait for dialog to be accessible
+// Native dialog elements are only accessible after showModal() completes
+// In test environments, we use querySelector as fallback since getByRole may not work
+// Note: In test environments (jsdom), dialog.open may not be set even when dialog is rendered
+// Also note: Dialog uses requestAnimationFrame before showModal(), so we need to wait for content
+const waitForDialog = async (): Promise<HTMLElement> => {
+  return await waitFor(
+    () => {
+      // Try getByRole first (works in browsers with full dialog support)
+      try {
+        const dialog = screen.getByRole('dialog');
+        expect(dialog).toBeInTheDocument();
+        return dialog;
+      } catch (_e) {
+        // Fallback: use querySelector for test environments that don't fully support dialog accessibility
+        const dialog = document.querySelector('dialog[role="dialog"]') as HTMLDialogElement;
+        if (!dialog) {
+          throw new Error('Dialog not found in DOM');
+        }
+        // In test environments, dialog.open may not be set even when dialog is rendered
+        // Just check that dialog exists in DOM - that's sufficient for testing
+        return dialog;
+      }
+    },
+    { timeout: 5000 }
+  );
+};
+
+// Helper function to find buttons in dialogs (more reliable than getByRole in test environments)
+const findButtonByText = (text: string | RegExp): HTMLButtonElement | null => {
+  // Try getByRole first
+  try {
+    const button = screen.getByRole('button', { name: text });
+    return button as HTMLButtonElement;
+    } catch (_e) {
+    // Fallback: search all buttons by text content
+    const buttons = Array.from(document.querySelectorAll('button'));
+    const regex = typeof text === 'string' ? new RegExp(text, 'i') : text;
+    return buttons.find(btn => regex.test(btn.textContent || '')) as HTMLButtonElement || null;
+  }
+};
+
+// Helper function to ensure fresh modal state (clears any persistent state from previous tests)
+// This works by rendering a modal, opening it, clicking close button to trigger handleClose,
+// then closing it programmatically to ensure cleanup
+const ensureFreshModalState = async () => {
+  const onClose = vi.fn();
+  const user = userEvent.setup();
+  
+  // Render a modal and open it
+  const { rerender, unmount } = render(
+    <ImportModal
+      isOpen={true}
+      onClose={onClose}
+      onImport={vi.fn()}
+    />
+  );
+  
+  // Wait for modal to initialize
+  try {
+    await waitFor(() => {
+      const dialog = document.querySelector('dialog[role="dialog"]');
+      if (!dialog) throw new Error('Dialog not found');
+    }, { timeout: 1000 });
+  } catch (_e) {
+    // If modal didn't render, that's okay, we'll still close it
+  }
+  
+  // Check if there's a summary - if so, click close button to trigger handleClose
+  await waitForDialog();
+  const hasSummary = screen.queryByText(/import completed/i);
+  if (hasSummary) {
+    const closeButton = findButtonByText(/^close$/i) || findButtonByText(/cancel/i);
+    if (closeButton) {
+      await user.click(closeButton);
+      await new Promise(resolve => setTimeout(resolve, 100));
+    }
+  }
+  
+    // Close the modal by setting isOpen to false
+    // This triggers the useEffect that clears persistent storage when there's no importSummary
+    rerender(
+      <ImportModal
+        isOpen={false}
+        onClose={onClose}
+        onImport={vi.fn() as (data: Array<Record<string, unknown>>) => void | Promise<void>}
+      />
+    );
+  
+  // Wait for React to process the state change and run cleanup effects
+  // The component's useEffect (lines 152-173) clears persistent storage when isOpen becomes false
+  // We need to wait for this effect to complete
+  await new Promise(resolve => setTimeout(resolve, 500));
+  
+  // Unmount to ensure cleanup
+  unmount();
+  cleanup();
+  
+  // Additional wait to ensure module-level state is cleared
+  await new Promise(resolve => setTimeout(resolve, 200));
+};
+
+// Helper function to wait for file input to be available
+// This function handles the case where persistent state might have leaked from previous tests
+const waitForFileInput = async (
+  rerender?: (element: React.ReactElement) => void,
+  props?: { isOpen?: boolean; onClose: () => void; onImport: (data: Array<Record<string, unknown>>) => void | Promise<void>; config?: any }
+): Promise<HTMLInputElement> => {
+  // First wait for dialog to be accessible
+  await waitForDialog();
+  
+  // Then wait for dialog content to be rendered (check for title)
+  await waitFor(() => {
+    try {
+      expect(screen.getByText('Import Data')).toBeInTheDocument();
+    } catch (_e) {
+      // Fallback: check if any element with "Import Data" exists
+      const elements = screen.getAllByText('Import Data');
+      expect(elements.length).toBeGreaterThan(0);
+    }
+  }, { timeout: 5000 });
+  
+  // Check if a file is already selected OR if there's a summary (from persistent state leakage)
+  const selectedFileText = screen.queryByText(/selected:/i);
+  const hasSummary = screen.queryByText(/import completed/i);
+  
+  if ((selectedFileText || hasSummary) && rerender) {
+    // Persistent state leaked from a previous test - clear it by closing and reopening the modal
+    const closeProps = props || getBaseProps();
+    
+    // Strategy: Always click cancel/close button to trigger handleClose which clears everything
+    // This is more reliable than relying on useEffect cleanup
+    const closeButton = findButtonByText(/^close$/i) || findButtonByText(/cancel/i);
+    if (closeButton) {
+      const user = userEvent.setup();
+      await user.click(closeButton);
+      // Wait for handleClose to execute (clears all persistent storage)
+      await new Promise(resolve => setTimeout(resolve, 150));
+    }
+    
+    // Close the modal programmatically (onClose is just a mock, so we need to set isOpen=false)
+    rerender(<ImportModal {...closeProps} isOpen={false} />);
+    
+    // Wait for modal to close
+    await waitFor(() => {
+      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+    }, { timeout: 2000 });
+    
+    // Wait for cleanup effect to run (clears persistent storage)
+    // The useEffect at line 152-173 clears persistentFile when isOpen=false and !importSummary
+    // Since handleClose already cleared persistentSummary, the cleanup should run
+    await new Promise(resolve => setTimeout(resolve, 500));
+    
+    // Reopen the modal with fresh state
+    const reopenProps = props || getBaseProps();
+    rerender(<ImportModal {...reopenProps} isOpen={true} />);
+    
+    // Wait for dialog to be accessible again
+    await waitForDialog();
+    
+    // Wait for dialog content to be rendered
+    await waitFor(() => {
+      expect(screen.getByText('Import Data')).toBeInTheDocument();
+    }, { timeout: 5000 });
+    
+    // Wait for any state restoration to complete (useEffect at line 134-149)
+    // But since we cleared persistent storage, nothing should be restored
+    await new Promise(resolve => setTimeout(resolve, 300));
+    
+    // Verify state was cleared - check multiple times
+    for (let i = 0; i < 5; i++) {
+      const stillSelected = screen.queryByText(/selected:/i);
+      const stillHasSummary = screen.queryByText(/import completed/i);
+      if (!stillSelected && !stillHasSummary) {
+        break; // State is cleared
+      }
+      if (i === 4) {
+        // Last attempt - if still not cleared, we have a problem
+        throw new Error('Persistent state was not cleared after close/reopen. Still seeing selected file or summary.');
+      }
+      // Wait a bit more and check again
+      await new Promise(resolve => setTimeout(resolve, 200));
+      // Re-render to force state refresh
+      rerender(<ImportModal {...reopenProps} isOpen={true} />);
+      await waitForDialog();
+      await new Promise(resolve => setTimeout(resolve, 200));
+    }
+  } else if (selectedFileText || hasSummary) {
+    // Can't clear it without rerender function
+    throw new Error('File input not available because a file is already selected or summary exists. The test needs to pass rerender (and optionally props) to waitForFileInput to clear persistent state.');
+  }
+  
+  // Wait for file input to be in the DOM (it's only rendered when !file)
+  // After clearing state, wait a bit more to ensure component is fully initialized
+  if ((selectedFileText || hasSummary) && rerender) {
+    await new Promise(resolve => setTimeout(resolve, 200));
+  }
+  
+  return await waitFor(() => {
+    const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+    if (!fileInput) {
+      // Double-check if file is still selected
+      const stillSelected = screen.queryByText(/selected:/i);
+      if (stillSelected) {
+        throw new Error('File input not found because a file is already selected. Persistent state may not have been cleared.');
+      }
+      throw new Error('File input not found in DOM. The dialog may not be fully rendered yet.');
+    }
+    // Ensure file input is enabled and ready
+    if (fileInput.disabled) {
+      throw new Error('File input is disabled. Component may not be fully initialized.');
+    }
+    return fileInput;
+  }, { timeout: 5000 });
+};
+
+// Helper function to upload a file and wait for preview to appear
+const uploadFileAndWaitForPreview = async (user: ReturnType<typeof userEvent.setup>, file: File) => {
+  // Wait for dialog and file input
+  const fileInput = await waitForFileInput();
+  
+  // Upload the file
+  await user.upload(fileInput, file);
+  
+  // Wait for preview table to appear (file processing is async)
+  // Try multiple ways to find the table since queryByRole may not work in all test environments
+  await waitFor(() => {
+    const table = screen.queryByRole('table') || 
+                  document.querySelector('table') ||
+                  document.querySelector('table.min-w-full');
+    expect(table).toBeInTheDocument();
+  }, { timeout: 10000 });
+};
+
+// Mock Button component (Dialog uses IconButton from same module - must export both)
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, variant, size, disabled, className }: any) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      data-variant={variant}
+      data-size={size}
+      className={className}
+    >
+      {children}
+    </button>
+  ),
+  IconButton: React.forwardRef(({ onClick, icon, 'aria-label': ariaLabel, className, ...props }: any, ref: any) => (
+    <button ref={ref} onClick={onClick} aria-label={ariaLabel} className={className} {...props}>
+      {icon}
+    </button>
+  )),
+}));
+
+// Mock Input component
+vi.mock('../../Input/Input', () => ({
+  Input: React.forwardRef(({ type, accept, onChange, className, ...props }: any, ref: any) => (
+    <input
+      ref={ref}
+      type={type}
+      accept={accept}
+      onChange={onChange}
+      className={className}
+      {...props}
+    />
+  )),
+}));
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  Upload: ({ className }: { className?: string }) => (
+    <span data-testid="upload-icon" className={className}>Upload</span>
+  ),
+  FileText: ({ className }: { className?: string }) => (
+    <span data-testid="file-text-icon" className={className}>File</span>
+  ),
+  AlertCircle: ({ className }: { className?: string }) => (
+    <span data-testid="alert-circle-icon" className={className}>Alert</span>
+  ),
+  CheckCircle2: ({ className }: { className?: string }) => (
+    <span data-testid="check-circle-icon" className={className}>Check</span>
+  ),
+  X: ({ className }: { className?: string }) => (
+    <span data-testid="x-icon" className={className}>X</span>
+  ),
+}));
+
+// Mock logger
+vi.mock('../../../utils/core/logger', () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+// Base props for tests - defined outside describe so helpers can access it
+const getBaseProps = () => ({
+  isOpen: true,
+  onClose: vi.fn(),
+  onImport: vi.fn(),
+});
+
+describe('[component] ImportModal', () => {
+  const baseProps = getBaseProps();
+
+  const createCSVFile = (content: string, filename = 'test.csv'): File => {
+    const blob = new Blob([content], { type: 'text/csv' });
+    const file = new File([blob], filename, { type: 'text/csv' });
+    // Store content for File.text() mock to access
+    (file as any)._content = content;
+    return file;
+  };
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+    
+    // Clear any rendered components from previous tests
+    cleanup();
+    
+    // Mock showModal for dialog elements (needed for test environments)
+    // MUST be set up before any components are rendered
+    HTMLDialogElement.prototype.showModal = vi.fn(function(this: HTMLDialogElement) {
+      this.setAttribute('open', '');
+      this.dispatchEvent(new Event('show', { bubbles: true }));
+    });
+    HTMLDialogElement.prototype.close = vi.fn(function(this: HTMLDialogElement) {
+      this.removeAttribute('open');
+      this.dispatchEvent(new Event('close', { bubbles: true }));
+    });
+    
+    // Mock File.text() method for jsdom compatibility
+    // File.text() reads the file content asynchronously
+    // In tests, we read directly from the Blob content synchronously
+    if (!File.prototype.text) {
+      Object.defineProperty(File.prototype, 'text', {
+        writable: true,
+        configurable: true,
+        value: async function(this: File) {
+          // For test files, read from the stored content or from the Blob
+          const file = this as any;
+          if (file._content) {
+            // Use stored content if available
+            return Promise.resolve(file._content);
+          }
+          // Otherwise, try to read from Blob using FileReader
+          return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+              resolve(e.target?.result as string);
+            };
+            reader.onerror = () => {
+              reject(new Error('Failed to read file'));
+            };
+            // Read the file as text
+            reader.readAsText(this);
+          });
+        },
+      });
+    }
+    
+    // Clear ImportModal's persistent state by opening and closing a modal
+    // The ImportModal uses module-level persistent storage that can leak between tests
+    // We need to ensure it's cleared by closing a modal (which calls handleClose and clears persistent storage)
+    await ensureFreshModalState();
+  });
+
+  afterEach(() => {
+    // Clean up all rendered components to ensure state doesn't leak
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('returns null when modal is closed', () => {
+      const { container } = render(
+        <ImportModal {...baseProps} isOpen={false} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders modal when open', async () => {
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog to be accessible
+      await waitForDialog();
+      // Check for content instead of testids
+      expect(screen.getByText('Import Data')).toBeInTheDocument();
+    });
+
+    it('renders default title', async () => {
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog content to be rendered (showModal is async via requestAnimationFrame)
+      await waitFor(() => {
+        // Try by role first, fallback to text content
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          expect(screen.getByText('Import Data')).toBeInTheDocument();
+        }
+      }, { timeout: 5000 });
+    });
+
+    it('renders custom title from config', async () => {
+      render(
+        <ImportModal
+          {...baseProps}
+          config={{ title: 'Custom Import Title' }}
+        />
+      );
+      
+      // Wait for dialog content to be rendered (showModal is async via requestAnimationFrame)
+      await waitFor(() => {
+        // Try by role first, fallback to text content
+        try {
+          expect(screen.getByRole('heading', { name: 'Custom Import Title' })).toBeInTheDocument();
+        } catch (_e) {
+          expect(screen.getByText('Custom Import Title')).toBeInTheDocument();
+        }
+      }, { timeout: 5000 });
+    });
+
+    it('renders default description', async () => {
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog to be accessible
+      await waitForDialog();
+      // Description is rendered as p in DialogHeader
+      expect(screen.getByText('Upload a CSV file to import multiple records at once.')).toBeInTheDocument();
+    });
+
+    it('renders custom description from config', async () => {
+      render(
+        <ImportModal
+          {...baseProps}
+          config={{ description: 'Custom description' }}
+        />
+      );
+      
+      // Wait for dialog to be accessible
+      await waitForDialog();
+      // Description is rendered as p in DialogHeader
+      expect(screen.getByText('Custom description')).toBeInTheDocument();
+    });
+
+    it('renders file upload area', async () => {
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog title first (most reliable indicator dialog is rendered)
+      // Use getByRole for heading to avoid multiple matches (h2 and button both have "Import Data")
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          // Fallback: check if any element with "Import Data" exists
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Then check for upload area text and button (use querySelector as fallback for buttons in dialogs)
+      await waitFor(() => {
+        expect(screen.getByText(/choose a csv file/i)).toBeInTheDocument();
+        const selectFileButton = findButtonByText(/select file/i);
+        expect(selectFileButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('renders cancel button', async () => {
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog title first (most reliable indicator dialog is rendered)
+      // Use getByRole for heading to avoid multiple matches (h2 and button both have "Import Data")
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          // Fallback: check if any element with "Import Data" exists
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Then check for cancel button (use querySelector as fallback for buttons in dialogs)
+      await waitFor(() => {
+        const cancelButton = screen.queryByRole('button', { name: /cancel/i })
+          || Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.match(/cancel/i));
+        expect(cancelButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('renders import button', async () => {
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog title first (most reliable indicator dialog is rendered)
+      // Use getByRole for heading to avoid multiple matches (h2 and button both have "Import Data")
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          // Fallback: check if any element with "Import Data" exists
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Then check for import button (use querySelector as fallback for buttons in dialogs)
+      await waitFor(() => {
+        const importButton = screen.queryByRole('button', { name: /import/i })
+          || Array.from(document.querySelectorAll('button')).find(btn => btn.textContent?.match(/^import$/i));
+        expect(importButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('File Selection', () => {
+    it('displays selected file name', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      render(<ImportModal {...baseProps} />);
+      
+      // Wait for file input to be available
+      const fileInput = await waitForFileInput();
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        // Text is split across elements with <br/>, so use getAllByText and check first match
+        const elements = screen.getAllByText((content, element) => {
+          return element?.textContent?.includes(`Selected: ${file.name}`) ?? false;
+        });
+        expect(elements.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('resets file when modal closes and reopens', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        // Text is split across elements with <br/>, so use getAllByText and check first match
+        const elements = screen.getAllByText((content, element) => {
+          return element?.textContent?.includes(`Selected: ${file.name}`) ?? false;
+        });
+        expect(elements.length).toBeGreaterThan(0);
+      });
+
+      rerender(<ImportModal {...baseProps} isOpen={false} />);
+      
+      // Wait for dialog to close
+      await waitFor(() => {
+        const dialog = document.querySelector('dialog[role="dialog"]');
+        expect(dialog).not.toBeInTheDocument();
+      });
+      
+      rerender(<ImportModal {...baseProps} isOpen={true} />);
+      
+      // Wait for dialog to reopen
+      await waitForDialog();
+
+      // File should be reset - use queryAllByText since text may be split
+      const elements = screen.queryAllByText((content, element) => {
+        return element?.textContent?.includes(`Selected: ${file.name}`) ?? false;
+      });
+      expect(elements.length).toBe(0);
+    });
+  });
+
+  describe('CSV Parsing', () => {
+    it('parses valid CSV and shows preview with data and row count', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com\nBob,bob@example.com';
+      const file = createCSVFile(csvContent);
+      
+      render(<ImportModal {...baseProps} />);
+      
+      await uploadFileAndWaitForPreview(user, file);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/name/i)).toBeInTheDocument();
+        expect(screen.getByText(/email/i)).toBeInTheDocument();
+        expect(screen.getByText('John')).toBeInTheDocument();
+        expect(screen.getByText('john@example.com')).toBeInTheDocument();
+        expect(screen.getByText(/total rows to import: 3/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('handles CSV with quoted values and commas in values', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,description\n"John Doe","Description, with comma"\n"Jane Smith","Another, description"';
+      const file = createCSVFile(csvContent);
+      
+      render(<ImportModal {...baseProps} />);
+      
+      await waitForDialog();
+      await waitFor(() => {
+        const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+        expect(fileInput).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John Doe')).toBeInTheDocument();
+        expect(screen.getByText(/description, with comma/i)).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('displays error for invalid CSV files (empty, only header, whitespace)', async () => {
+      // Clear any persistent state from previous tests first
+      await ensureFreshModalState();
+      
+      const user = userEvent.setup();
+      const onClose = vi.fn();
+      
+      // Test empty file
+      const emptyFile = createCSVFile('');
+      const testProps = { ...baseProps, onClose };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      let fileInput = await waitForFileInput(rerender, testProps);
+      
+      // Ensure we have a fresh file input reference (in case it was recreated after state clear)
+      fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      expect(fileInput).toBeInTheDocument();
+      expect(fileInput.value).toBe(''); // Ensure file input is cleared
+      
+      await user.upload(fileInput, emptyFile);
+      
+      // When a file is selected but invalid, the error is set but file is also set
+      // The error should be displayed - wait for it to appear
+      // Note: The error might be in the CardContent section even when file is selected
+      await waitFor(() => {
+        // Check for error text or alert icon - error should be displayed somewhere
+        const errorText = screen.queryByText(/failed to preview file|CSV must have at least/i);
+        const alertIcon = screen.queryByTestId('alert-circle-icon');
+        if (!errorText && !alertIcon) {
+          throw new Error('Error message or alert icon not found after uploading invalid file');
+        }
+      }, { timeout: 3000 });
+
+      // Test CSV with only header
+      // Clear the file input value first to allow new file selection
+      fileInput.value = '';
+      const headerOnlyFile = createCSVFile('name,email');
+      await user.upload(fileInput, headerOnlyFile);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
+      }, { timeout: 3000 });
+
+      // Test CSV with only whitespace
+      fileInput.value = '';
+      const whitespaceFile = createCSVFile('   \n   \n   ');
+      await user.upload(fileInput, whitespaceFile);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+
+    it('clears error when new file is selected', async () => {
+      // Clear any persistent state from previous tests first
+      await ensureFreshModalState();
+      
+      const user = userEvent.setup();
+      const onClose = vi.fn();
+      const invalidFile = createCSVFile('invalid');
+      const validFile = createCSVFile('name,email\nJohn,john@example.com');
+      
+      const testProps = { ...baseProps, onClose };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      let fileInput = await waitForFileInput(rerender, testProps);
+      
+      // Ensure we have a fresh file input reference (in case it was recreated after state clear)
+      fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      expect(fileInput).toBeInTheDocument();
+      expect(fileInput.value).toBe(''); // Ensure file input is cleared
+      
+      await user.upload(fileInput, invalidFile);
+      
+      await waitFor(() => {
+        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
+      }, { timeout: 3000 });
+
+      // Clear the file input value first to allow new file selection
+      fileInput.value = '';
+      
+      // Get a fresh file input reference (it might have been recreated)
+      await waitFor(() => {
+        const freshInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+        expect(freshInput).toBeInTheDocument();
+        expect(freshInput.value).toBe('');
+      }, { timeout: 1000 });
+      
+      const freshFileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+      await user.upload(freshFileInput, validFile);
+      
+      // Wait for error to be cleared and preview to appear
+      await waitFor(() => {
+        expect(screen.queryByTestId('alert-circle-icon')).not.toBeInTheDocument();
+        // Also verify that preview appears (indicating valid file was processed)
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Import Action', () => {
+    it('calls onImport with parsed data when import button is clicked', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      render(<ImportModal {...baseProps} onImport={onImport} />);
+      
+      // Wait for file input to be available
+      const fileInput = await waitForFileInput();
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = findButtonByText(/^import$/i);
+      expect(importButton).toBeInTheDocument();
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalledTimes(1);
+        expect(onImport).toHaveBeenCalledWith(
+          expect.arrayContaining([
+            expect.objectContaining({
+              name: 'John',
+              email: 'john@example.com',
+            }),
+          ])
+        );
+      }, { timeout: 3000 });
+    });
+
+    it('shows app-returned ImportSummary counts in summary section', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn().mockResolvedValue({
+        successCount: 2,
+        totalCount: 3,
+        failedCount: 1,
+        failedRows: [{ row: 3, reason: 'Invalid meal type' }],
+      });
+      const csvContent = 'name,email\nAlice,a@x.com\nBob,b@x.com\nCarol,c@x.com';
+      const file = createCSVFile(csvContent);
+
+      render(<ImportModal {...baseProps} onImport={onImport} />);
+
+      const fileInput = await waitForFileInput();
+      await user.upload(fileInput, file);
+
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      const importButton = findButtonByText(/^import$/i);
+      expect(importButton).toBeInTheDocument();
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText(/2 of 3.*imported successfully/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+      await waitFor(() => {
+        const failedTexts = screen.getAllByText(/1.*row.*failed to import/i);
+        expect(failedTexts.length).toBeGreaterThanOrEqual(1);
+      }, { timeout: 2000 });
+    });
+
+    it('disables import button when no file is selected', async () => {
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      // Check if there's persistent state (file selected or summary) - if so, clear it first
+      await waitForDialog();
+      const selectedFileText = screen.queryByText(/selected:/i);
+      const hasSummary = screen.queryByText(/import completed/i);
+      
+      if (selectedFileText || hasSummary) {
+        // Clear persistent state by closing and reopening
+        if (hasSummary) {
+          const closeButton = findButtonByText(/^close$/i);
+          if (closeButton) {
+            const user = userEvent.setup();
+            await user.click(closeButton);
+            await new Promise(resolve => setTimeout(resolve, 100));
+          }
+        }
+        // Close programmatically (onClose is just a mock, so we need to set isOpen=false)
+        rerender(<ImportModal {...baseProps} isOpen={false} />);
+        await waitFor(() => {
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        }, { timeout: 2000 });
+        
+        await new Promise(resolve => setTimeout(resolve, 500));
+        rerender(<ImportModal {...baseProps} isOpen={true} />);
+        await waitForDialog();
+        // Verify state was cleared
+        await waitFor(() => {
+          const stillSelected = screen.queryByText(/selected:/i);
+          const stillHasSummary = screen.queryByText(/import completed/i);
+          if (stillSelected || stillHasSummary) {
+            throw new Error('State was not cleared');
+          }
+        }, { timeout: 2000 });
+      }
+      
+      // Wait for dialog title first (most reliable indicator dialog is rendered)
+      // Use getByRole for heading to avoid multiple matches (h2 and button both have "Import Data")
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          // Fallback: check if any element with "Import Data" exists
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Then check for import button and its disabled state
+      await waitFor(() => {
+        const importButton = findButtonByText(/^import$/i);
+        expect(importButton).toBeInTheDocument();
+        expect(importButton).toBeDisabled();
+      }, { timeout: 5000 });
+    });
+
+    it('disables import button while processing', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn(async () => {
+        await new Promise<void>(resolve => setTimeout(resolve, 100));
+      });
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = findButtonByText(/^import$/i);
+      expect(importButton).toBeInTheDocument();
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      await waitFor(() => {
+        expect(importButton).toBeDisabled();
+      }, { timeout: 1000 });
+    });
+
+    it('shows processing text while importing', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn(async () => {
+        await new Promise<void>(resolve => setTimeout(resolve, 100));
+      });
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = findButtonByText(/^import$/i);
+      expect(importButton).toBeInTheDocument();
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      // Button text changes to "Processing..." when isProcessing is true
+      await waitFor(() => {
+        const processingButton = findButtonByText(/processing/i);
+        expect(processingButton).toBeInTheDocument();
+      }, { timeout: 1000 });
+    });
+
+    it('calls onClose after successful import', async () => {
+      const user = userEvent.setup();
+      const onClose = vi.fn();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockResolvedValue({ successCount: 1, totalCount: 1, failedCount: 0 });
+      
+      const testProps = { ...baseProps, onClose, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = findButtonByText(/^import$/i);
+      expect(importButton).toBeInTheDocument();
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      // Wait for import to complete and summary to appear
+      await waitFor(() => {
+        expect(screen.getByText(/import completed successfully/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+
+      // Click the Close button to trigger onClose
+      const closeButton = findButtonByText(/^close$/i);
+      expect(closeButton).toBeInTheDocument();
+      if (closeButton) {
+        await user.click(closeButton);
+      }
+
+      // Verify onClose was called
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
+  describe('Close Action', () => {
+    it('calls onClose when cancel button is clicked', async () => {
+      const user = userEvent.setup();
+      const onClose = vi.fn();
+      const { rerender } = render(<ImportModal {...baseProps} onClose={onClose} />);
+      
+      // Wait for dialog title first (most reliable indicator dialog is rendered)
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Check if there's persistent state (summary or selected file) - if so, clear it first
+      const hasSummary = screen.queryByText(/import completed/i);
+      const hasSelectedFile = screen.queryByText(/selected:/i);
+      if (hasSummary || hasSelectedFile) {
+        // If there's a summary, click close button to trigger handleClose
+        if (hasSummary) {
+          const closeButton = findButtonByText(/^close$/i);
+          if (closeButton) {
+            await user.click(closeButton);
+            await new Promise(resolve => setTimeout(resolve, 100));
+          }
+        }
+        // Close and reopen to clear state
+        rerender(<ImportModal {...baseProps} isOpen={false} onClose={onClose} />);
+        await waitFor(() => {
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        }, { timeout: 2000 });
+        await new Promise(resolve => setTimeout(resolve, 500));
+        // Reset the mock call count since we called onClose when clearing state
+        onClose.mockClear();
+        rerender(<ImportModal {...baseProps} isOpen={true} onClose={onClose} />);
+        await waitForDialog();
+        await waitFor(() => {
+          expect(screen.getByText('Import Data')).toBeInTheDocument();
+        }, { timeout: 5000 });
+        // Verify state was cleared
+        await waitFor(() => {
+          const stillHasSummary = screen.queryByText(/import completed/i);
+          const stillHasSelected = screen.queryByText(/selected:/i);
+          if (stillHasSummary || stillHasSelected) {
+            throw new Error('State was not cleared');
+          }
+        }, { timeout: 2000 });
+      }
+      
+      // Then wait for cancel button (should exist when no summary)
+      await waitFor(() => {
+        const cancelButton = findButtonByText(/cancel/i);
+        expect(cancelButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      const cancelButton = findButtonByText(/cancel/i);
+      expect(cancelButton).toBeInTheDocument();
+      if (cancelButton) {
+        await user.click(cancelButton);
+      }
+      
+      expect(onClose).toHaveBeenCalledTimes(1);
+    });
+
+    it('resets state when modal closes', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      // Wait for file input to be available (pass rerender to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      rerender(<ImportModal {...baseProps} isOpen={false} />);
+      rerender(<ImportModal {...baseProps} isOpen={true} />);
+
+      // State should be reset - wait for modal to reopen
+      await waitFor(() => {
+        expect(screen.queryByText('John')).not.toBeInTheDocument();
+      }, { timeout: 1000 });
+    });
+  });
+
+  describe('Custom Configuration', () => {
+    it('uses custom button texts from config', async () => {
+      const testProps = {
+        ...baseProps,
+        config: {
+          selectFileButtonText: 'Browse Files',
+          importButtonText: 'Import Data',
+          cancelButtonText: 'Close',
+        }
+      };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for dialog title first
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Check if there's a summary - if so, clear it first
+      const hasSummary = screen.queryByText(/import completed/i);
+      if (hasSummary) {
+        rerender(
+          <ImportModal
+            {...baseProps}
+            isOpen={false}
+            config={{
+              selectFileButtonText: 'Browse Files',
+              importButtonText: 'Import Data',
+              cancelButtonText: 'Close',
+            }}
+          />
+        );
+        await waitFor(() => {
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        }, { timeout: 2000 });
+        await new Promise(resolve => setTimeout(resolve, 300));
+        rerender(
+          <ImportModal
+            {...baseProps}
+            isOpen={true}
+            config={{
+              selectFileButtonText: 'Browse Files',
+              importButtonText: 'Import Data',
+              cancelButtonText: 'Close',
+            }}
+          />
+        );
+        await waitForDialog();
+        await waitFor(() => {
+          expect(screen.getByText('Import Data')).toBeInTheDocument();
+        }, { timeout: 5000 });
+      }
+      
+      // Then wait for buttons (should exist when no summary)
+      await waitFor(() => {
+        const browseButton = findButtonByText(/browse files/i);
+        expect(browseButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        const importDataButton = findButtonByText(/import data/i);
+        expect(importDataButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+      // Dialog has a close button too, so find the Cancel one by text
+      const cancelButton = findButtonByText(/^close$/i);
+      expect(cancelButton).toBeInTheDocument();
+    });
+
+    it('uses custom preview header text from config', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const testProps = { ...baseProps, config: { previewHeaderText: 'Data Preview' } };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        expect(screen.getByText('Data Preview')).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('uses custom total rows text from config', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const testProps = { ...baseProps, config: { totalRowsText: 'Found {count} records' } };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      // Wait for file input to be available (pass rerender and props to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      // Wait for preview to appear
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || 
+                     document.querySelector('table') ||
+                     document.querySelector('table.min-w-full');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText(/found 2 records/i)).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Import Progress Tracking', () => {
+    it('shows parsing progress during CSV parsing', async () => {
+      const user = userEvent.setup();
+      const headers = 'name,email\n';
+      const rows = Array.from({ length: 200 }, (_, i) => `User${i},user${i}@example.com`).join('\n');
+      const csvContent = headers + rows;
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      expect(importButton).toBeInTheDocument();
+      if (importButton && !importButton.disabled) {
+        await user.click(importButton);
+      }
+      
+      // Should show parsing progress (may be very brief)
+      await waitFor(() => {
+        const parsingText = screen.queryByText(/parsing csv file|importing data/i);
+        if (parsingText) {
+          expect(parsingText).toBeInTheDocument();
+        }
+      }, { timeout: 5000 });
+    });
+
+    it('shows importing progress during data import', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn(async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+      });
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      // Should show importing progress
+      await waitFor(() => {
+        expect(screen.getByText(/importing data/i)).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    it('shows chunk progress when processing large datasets', async () => {
+      const user = userEvent.setup();
+      const headers = 'name,email\n';
+      const rows = Array.from({ length: 250 }, (_, i) => `User${i},user${i}@example.com`).join('\n');
+      const csvContent = headers + rows;
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn(async () => {
+        await new Promise(resolve => setTimeout(resolve, 50));
+      });
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      // Should show chunk progress
+      await waitFor(() => {
+        const progressText = screen.queryByText(/chunk \d+ of \d+/i);
+        if (progressText) {
+          expect(progressText).toBeInTheDocument();
+        }
+      }, { timeout: 3000 });
+    });
+  });
+
+  describe('Import Summary', () => {
+    it('displays success summary when all rows imported successfully', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockResolvedValue({ successCount: 2, totalCount: 2, failedCount: 0 });
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        expect(screen.getByText(/import completed successfully/i)).toBeInTheDocument();
+        expect(screen.getByText(/2 of 2.*imported/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('displays error summary when some rows fail', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      let callCount = 0;
+      const onImport = vi.fn(async () => {
+        callCount++;
+        if (callCount === 1) {
+          throw new Error('Import failed for chunk');
+        }
+      });
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        expect(screen.getByText(/import completed with errors/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('displays failed rows table when failures occur', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockRejectedValue(new Error('Import failed'));
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        const failedRowsTable = screen.queryByText(/failed rows/i);
+        if (failedRowsTable) {
+          expect(failedRowsTable).toBeInTheDocument();
+        }
+      }, { timeout: 5000 });
+    });
+
+    it('limits failed rows display to 50 rows', async () => {
+      const user = userEvent.setup();
+      const headers = 'name,email\n';
+      const rows = Array.from({ length: 100 }, (_, i) => `User${i},user${i}@example.com`).join('\n');
+      const csvContent = headers + rows;
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockRejectedValue(new Error('Import failed'));
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        const failedRowsText = screen.queryByText(/showing first \d+ of \d+ failed/i);
+        if (failedRowsText) {
+          expect(failedRowsText).toBeInTheDocument();
+        }
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Chunk Processing', () => {
+    it('processes data in chunks for large datasets', async () => {
+      const user = userEvent.setup();
+      const headers = 'name,email\n';
+      const rows = Array.from({ length: 150 }, (_, i) => `User${i},user${i}@example.com`).join('\n');
+      const csvContent = headers + rows;
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockResolvedValue(undefined);
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        // Should be called multiple times for chunks
+        expect(onImport).toHaveBeenCalled();
+      }, { timeout: 5000 });
+    });
+
+    it('handles chunk processing errors gracefully', async () => {
+      const user = userEvent.setup();
+      const headers = 'name,email\n';
+      const rows = Array.from({ length: 150 }, (_, i) => `User${i},user${i}@example.com`).join('\n');
+      const csvContent = headers + rows;
+      const file = createCSVFile(csvContent);
+      let callCount = 0;
+      const onImport = vi.fn(async () => {
+        callCount++;
+        if (callCount === 2) {
+          throw new Error('Chunk processing failed');
+        }
+      });
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        // Should show summary with failures
+        const summary = screen.queryByText(/import completed/i);
+        expect(summary).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles very large CSV files', async () => {
+      const user = userEvent.setup();
+      const headers = 'name,email\n';
+      const rows = Array.from({ length: 1000 }, (_, i) => `User${i},user${i}@example.com`).join('\n');
+      const csvContent = headers + rows;
+      const file = createCSVFile(csvContent);
+      
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      // Wait for file input to be available (pass rerender to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/total rows to import: 1000/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('handles CSV with only one data row', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        expect(screen.getByText(/total rows to import: 1/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('handles CSV with empty values', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,\n,jane@example.com';
+      const file = createCSVFile(csvContent);
+      
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles CSV with special characters in values', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\n"John, Doe","john@example.com"\n"Jane; Smith","jane@example.com"';
+      const file = createCSVFile(csvContent);
+      
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+    });
+
+    it('handles async onImport that returns Promise', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn(() => Promise.resolve());
+      
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      await waitFor(() => {
+        expect(onImport).toHaveBeenCalled();
+      }, { timeout: 5000 });
+    });
+
+    it('prevents closing modal during processing', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn(async () => {
+        await new Promise(resolve => setTimeout(resolve, 200));
+      });
+      const onClose = vi.fn();
+      
+      const testProps = { ...baseProps, onImport, onClose };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      // Try to close modal during processing
+      await waitFor(() => {
+        const dialog = document.querySelector('dialog[role="dialog"]');
+        if (dialog) {
+          // Simulate escape key or outside click
+          const event = new KeyboardEvent('keydown', { key: 'Escape' });
+          dialog.dispatchEvent(event);
+        }
+      }, { timeout: 1000 });
+      
+      // Modal should still be open
+      await waitFor(() => {
+        expect(screen.queryByText('Import Data')).toBeInTheDocument();
+      }, { timeout: 1000 });
+    });
+
+    it('prevents closing modal when summary exists', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockResolvedValue(undefined);
+      const onClose = vi.fn();
+      
+      const testProps = { ...baseProps, onImport, onClose };
+      const { rerender } = render(<ImportModal {...testProps} />);
+      
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+      
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+      
+      // Wait for summary to appear
+      await waitFor(() => {
+        expect(screen.getByText(/import completed/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // Try to close modal - should be prevented
+      const dialog = document.querySelector('dialog[role="dialog"]');
+      if (dialog) {
+        const event = new KeyboardEvent('keydown', { key: 'Escape' });
+        dialog.dispatchEvent(event);
+      }
+      
+      // Modal should still be open
+      await waitFor(() => {
+        expect(screen.queryByText('Import Data')).toBeInTheDocument();
+      }, { timeout: 1000 });
+    });
+  });
+
+  describe('Full import flow and section content', () => {
+    it('full flow renders and asserts File, Preview, Summary section content', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockResolvedValue({ successCount: 2, totalCount: 2, failedCount: 0 });
+
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+
+      await waitFor(() => {
+        expect(screen.getByText(/selected:/i)).toBeInTheDocument();
+      }, { timeout: 3000 });
+      const fileSection = document.body;
+      expect(fileSection.textContent).toMatch(new RegExp(file.name, 'i'));
+
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+      expect(screen.getByText(/total rows to import: 2/i)).toBeInTheDocument();
+      expect(screen.getByText('John')).toBeInTheDocument();
+      expect(screen.getByText('Jane')).toBeInTheDocument();
+
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText(/import completed successfully/i)).toBeInTheDocument();
+        expect(screen.getByText(/2 of 2.*imported/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+
+    it('full flow with import error renders Summary and FailedRows section content', async () => {
+      const user = userEvent.setup();
+      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
+      const file = createCSVFile(csvContent);
+      const onImport = vi.fn().mockRejectedValue(new Error('Import failed'));
+
+      const testProps = { ...baseProps, onImport };
+      const { rerender } = render(<ImportModal {...testProps} />);
+
+      const fileInput = await waitForFileInput(rerender, testProps);
+      await user.upload(fileInput, file);
+
+      await waitFor(() => {
+        const table = screen.queryByRole('table') || document.querySelector('table');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 10000 });
+
+      const importButton = findButtonByText(/^import$/i);
+      if (importButton) {
+        await user.click(importButton);
+      }
+
+      await waitFor(() => {
+        expect(screen.getByText(/import completed with errors/i)).toBeInTheDocument();
+      }, { timeout: 5000 });
+      const failedRowsHeading = screen.queryByText(/failed rows/i);
+      if (failedRowsHeading) {
+        expect(failedRowsHeading).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides accessible file input', async () => {
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      // Wait for file input to be available (pass rerender to handle persistent state)
+      const fileInput = await waitForFileInput(rerender, baseProps);
+      expect(fileInput).toBeInTheDocument();
+      expect(fileInput).toHaveAttribute('type', 'file');
+      expect(fileInput).toHaveAttribute('accept', '.csv');
+    });
+
+    it('provides accessible button labels', async () => {
+      const { rerender } = render(<ImportModal {...baseProps} />);
+      
+      // Wait for dialog title first
+      await waitFor(() => {
+        try {
+          expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+        } catch (_e) {
+          const elements = screen.getAllByText('Import Data');
+          expect(elements.length).toBeGreaterThan(0);
+        }
+      }, { timeout: 5000 });
+      
+      // Check if there's a summary or file already selected - if so, clear it first
+      const hasSummary = screen.queryByText(/import completed/i);
+      const hasSelectedFile = screen.queryByText(/selected:/i);
+      if (hasSummary || hasSelectedFile) {
+        rerender(<ImportModal {...baseProps} isOpen={false} />);
+        await waitFor(() => {
+          expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+        }, { timeout: 2000 });
+        await new Promise(resolve => setTimeout(resolve, 300));
+        rerender(<ImportModal {...baseProps} isOpen={true} />);
+        await waitForDialog();
+        await waitFor(() => {
+          expect(screen.getByText('Import Data')).toBeInTheDocument();
+        }, { timeout: 5000 });
+      }
+      
+      // Wait for file selection area to be rendered (default uploadText is "Choose a CSV file to upload")
+      await waitFor(() => {
+        const uploadText = screen.queryByText(/choose a csv file/i);
+        expect(uploadText).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // Then wait for buttons (should exist when no summary and no file selected)
+      await waitFor(() => {
+        const selectFileButton = findButtonByText(/select file/i);
+        expect(selectFileButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        const importButton = findButtonByText(/^import$/i);
+        expect(importButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        const cancelButton = findButtonByText(/cancel/i);
+        expect(cancelButton).toBeInTheDocument();
+      }, { timeout: 5000 });
+    });
+  });
+});
+