@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,1093 +0,0 @@
-/**
- * @file Import Modal Component Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components/__tests__
- * @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 } 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 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
-  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;
-  
-  // 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
-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>
-  ),
-}));
-
-// 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>
-  ),
-  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(),
-  }),
-}));
-
-describe('[component] ImportModal', () => {
-  const baseProps = {
-    isOpen: true,
-    onClose: vi.fn(),
-    onImport: vi.fn(),
-  };
-
-  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(() => {
-    vi.clearAllMocks();
-    
-    // Mock showModal for dialog elements (needed for test environments)
-    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);
-          });
-        },
-      });
-    }
-  });
-
-  afterEach(() => {
-    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} />);
-      
-      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-      await user.upload(fileInput, file);
-      
-      await waitFor(() => {
-        expect(screen.getByText(`Selected: ${file.name}`)).toBeInTheDocument();
-      });
-    });
-
-    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 dialog to be accessible first, then wait for file input
-      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(() => {
-        expect(screen.getByText(`Selected: ${file.name}`)).toBeInTheDocument();
-      });
-
-      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
-      expect(screen.queryByText(`Selected: ${file.name}`)).not.toBeInTheDocument();
-    });
-  });
-
-  describe('CSV Parsing', () => {
-    it('parses valid CSV file correctly', async () => {
-      const user = userEvent.setup();
-      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
-      const file = createCSVFile(csvContent);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Upload file and wait for preview
-      await uploadFileAndWaitForPreview(user, file);
-      
-      // Once preview table is visible, check for table headers
-      await waitFor(() => {
-        expect(screen.getByText(/name/i)).toBeInTheDocument();
-        expect(screen.getByText(/email/i)).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-
-    it('shows preview table with parsed data', async () => {
-      const user = userEvent.setup();
-      const csvContent = 'name,email\nJohn,john@example.com\nJane,jane@example.com';
-      const file = createCSVFile(csvContent);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // Wait for preview table to appear
-      await waitFor(() => {
-        const table = screen.queryByRole('table') || 
-                     document.querySelector('table') ||
-                     document.querySelector('table.min-w-full');
-        expect(table).toBeInTheDocument();
-      }, { timeout: 10000 });
-      
-      // Then check for data
-      await waitFor(() => {
-        expect(screen.getByText('John')).toBeInTheDocument();
-        expect(screen.getByText('john@example.com')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('displays total 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} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // Wait for preview to appear first
-      await waitFor(() => {
-        const table = screen.queryByRole('table') || 
-                     document.querySelector('table') ||
-                     document.querySelector('table.min-w-full');
-        expect(table).toBeInTheDocument();
-      }, { timeout: 10000 });
-      
-      // Then check for total row count
-      await waitFor(() => {
-        expect(screen.getByText(/total rows to import: 3/i)).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('handles CSV with quoted 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);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // Wait for preview table first
-      await waitFor(() => {
-        const table = screen.queryByRole('table') || 
-                     document.querySelector('table') ||
-                     document.querySelector('table.min-w-full');
-        expect(table).toBeInTheDocument();
-      }, { timeout: 10000 });
-      
-      // Then check for data
-      await waitFor(() => {
-        expect(screen.getByText('John Doe')).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-
-    it('handles CSV with commas in quoted values', async () => {
-      const user = userEvent.setup();
-      const csvContent = 'name,description\nJohn,"Description, with comma"\nJane,"Another, description"';
-      const file = createCSVFile(csvContent);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // Wait for preview table first
-      await waitFor(() => {
-        const table = screen.queryByRole('table') || 
-                     document.querySelector('table') ||
-                     document.querySelector('table.min-w-full');
-        expect(table).toBeInTheDocument();
-      }, { timeout: 10000 });
-      
-      // Then check for data
-      await waitFor(() => {
-        expect(screen.getByText(/description, with comma/i)).toBeInTheDocument();
-      }, { timeout: 2000 });
-    });
-  });
-
-  describe('Error Handling', () => {
-    it('displays error for invalid CSV file', async () => {
-      const user = userEvent.setup();
-      // Create a file that will cause parsing to fail
-      // CSV with only header row (no data rows) will trigger the error
-      const invalidContent = 'name,email';
-      const file = createCSVFile(invalidContent);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // Wait for error to appear - CSV with only header should throw error
-      await waitFor(() => {
-        // Error should be displayed with AlertCircle icon or error message
-        const errorIcon = screen.queryByTestId('alert-circle-icon');
-        const errorText = screen.queryByText(/must have at least|error|failed/i);
-        expect(errorIcon || errorText).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-
-    it('displays error for CSV with only header row', async () => {
-      const user = userEvent.setup();
-      const csvContent = 'name,email';
-      const file = createCSVFile(csvContent);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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(() => {
-        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
-      });
-    });
-
-    it('clears error when new file is selected', async () => {
-      const user = userEvent.setup();
-      const invalidFile = createCSVFile('invalid');
-      const validFile = createCSVFile('name,email\nJohn,john@example.com');
-      
-      render(<ImportModal {...baseProps} />);
-      
-      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-      await user.upload(fileInput, invalidFile);
-      
-      await waitFor(() => {
-        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
-      }, { timeout: 3000 });
-
-      // Clear the file input value first
-      fileInput.value = '';
-      await user.upload(fileInput, validFile);
-      
-      await waitFor(() => {
-        expect(screen.queryByTestId('alert-circle-icon')).not.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 dialog to be accessible first, then wait for file input
-      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);
-      
-      // 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('disables import button when no file is selected', 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 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);
-      
-      render(<ImportModal {...baseProps} onImport={onImport} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // 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);
-      
-      render(<ImportModal {...baseProps} onImport={onImport} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // 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);
-      
-      render(<ImportModal {...baseProps} onClose={onClose} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // 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(onClose).toHaveBeenCalled();
-      }, { timeout: 3000 });
-    });
-  });
-
-  describe('Close Action', () => {
-    it('calls onClose when cancel button is clicked', async () => {
-      const user = userEvent.setup();
-      const onClose = vi.fn();
-      
-      render(<ImportModal {...baseProps} onClose={onClose} />);
-      
-      // 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 wait for cancel button
-      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 dialog to be accessible first, then wait for file input
-      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);
-      
-      // 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 () => {
-      render(
-        <ImportModal
-          {...baseProps}
-          config={{
-            selectFileButtonText: 'Browse Files',
-            importButtonText: 'Import Data',
-            cancelButtonText: 'Close',
-          }}
-        />
-      );
-      
-      // 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 wait for buttons
-      await waitFor(() => {
-        const browseButton = findButtonByText(/browse files/i);
-        const importDataButton = findButtonByText(/import data/i);
-        expect(browseButton).toBeInTheDocument();
-        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);
-      
-      render(
-        <ImportModal
-          {...baseProps}
-          config={{ previewHeaderText: 'Data Preview' }}
-        />
-      );
-      
-      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-      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);
-      
-      render(
-        <ImportModal
-          {...baseProps}
-          config={{ totalRowsText: 'Found {count} records' }}
-        />
-      );
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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);
-      
-      // 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('Edge Cases', () => {
-    it('handles empty CSV file', async () => {
-      const user = userEvent.setup();
-      const file = createCSVFile('');
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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(() => {
-        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
-      }, { timeout: 3000 });
-    });
-
-    it('handles CSV with only whitespace', async () => {
-      const user = userEvent.setup();
-      const file = createCSVFile('   \n   \n   ');
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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(() => {
-        expect(screen.getByTestId('alert-circle-icon')).toBeInTheDocument();
-      }, { timeout: 3000 });
-    });
-
-    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);
-      
-      render(<ImportModal {...baseProps} />);
-      
-      // Wait for dialog to be accessible first, then wait for file input
-      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(() => {
-        expect(screen.getByText(/total rows to import: 1000/i)).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('provides accessible file input', () => {
-      render(<ImportModal {...baseProps} />);
-      
-      const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
-      expect(fileInput).toBeInTheDocument();
-      expect(fileInput).toHaveAttribute('type', 'file');
-      expect(fileInput).toHaveAttribute('accept', '.csv');
-    });
-
-    it('provides accessible button labels', 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 wait for buttons
-      await waitFor(() => {
-        const selectFileButton = findButtonByText(/select file/i);
-        const importButton = findButtonByText(/^import$/i);
-        const cancelButton = findButtonByText(/cancel/i);
-        expect(selectFileButton).toBeInTheDocument();
-        expect(importButton).toBeInTheDocument();
-        expect(cancelButton).toBeInTheDocument();
-      }, { timeout: 5000 });
-    });
-  });
-});
-