@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,780 +0,0 @@
-/**
- * @file ImportModal Unit Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/ImportModal/Tests
- * @since 0.3.0
- */
-
-import React from 'react';
-import { screen, waitFor, fireEvent } from '@testing-library/react';
-import { renderWithProviders } from '../../../../__tests__/shared';
-import userEvent from '@testing-library/user-event';
-import { vi, describe, it, expect, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-
-// Mock Radix UI directly to prevent portal rendering
-vi.mock('@radix-ui/react-dialog', () => ({
-  Root: ({ children, open }: { children: React.ReactNode; open?: boolean }) => (
-    <div data-testid="radix-dialog-root" data-open={String(open)}>
-      {open && children}
-    </div>
-  ),
-  Portal: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="radix-portal">{children}</div>
-  ),
-  Overlay: ({ children, className }: { children: React.ReactNode; className?: string }) => (
-    <div data-testid="radix-overlay" className={className}>{children}</div>
-  ),
-  Content: ({ children, className }: { children: React.ReactNode; className?: string }) => (
-    <div data-testid="radix-content" className={className} role="dialog">
-      {children}
-    </div>
-  ),
-  Title: ({ children }: { children: React.ReactNode }) => (
-    <h2 data-testid="radix-title">{children}</h2>
-  ),
-  Description: ({ children }: { children: React.ReactNode }) => (
-    <p data-testid="radix-description">{children}</p>
-  ),
-  Trigger: ({ children }: { children: React.ReactNode }) => (
-    <button data-testid="radix-trigger">{children}</button>
-  ),
-  Close: ({ children }: { children: React.ReactNode }) => (
-    <button data-testid="radix-close">{children}</button>
-  ),
-}));
-
-// Mock our Dialog wrapper components
-vi.mock('../../Dialog', () => ({
-  Dialog: ({ children, open }: { children: React.ReactNode; open?: boolean }) => (
-    <div data-testid="dialog-root" data-open={String(open)}>
-      {children}
-    </div>
-  ),
-  DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
-    <div data-testid="dialog-content" className={className} role="dialog">
-      {children}
-    </div>
-  ),
-  DialogHeader: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="dialog-header">{children}</div>
-  ),
-  DialogTitle: ({ children }: { children: React.ReactNode }) => (
-    <h2 data-testid="dialog-title">{children}</h2>
-  ),
-  DialogDescription: ({ children }: { children: React.ReactNode }) => (
-    <p data-testid="dialog-description">{children}</p>
-  ),
-}));
-
-vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, ...props }: any) => (
-    <button onClick={onClick} {...props}>{children}</button>
-  ),
-}));
-
-vi.mock('../../Input/Input', () => ({
-  Input: React.forwardRef<HTMLInputElement, any>(({ className, ...props }, ref) => (
-    <input ref={ref} className={className} {...props} />
-  )),
-}));
-
-vi.mock('lucide-react', () => ({
-  Upload: () => <div data-testid="upload-icon" />,
-  FileText: () => <div data-testid="file-text-icon" />,
-  AlertCircle: () => <div data-testid="alert-circle-icon" />,
-  X: () => <div data-testid="x-icon" />,
-}));
-
-// Import the component after mocks
-import { ImportModal } from '../ImportModal';
-
-const defaultProps = {
-  isOpen: true,
-  onClose: vi.fn(),
-  onImport: vi.fn(),
-};
-
-// Helper function to create a proper File mock with text() method
-const createMockFile = (content: string, filename: string = 'test.csv'): File => {
-  const mockFile = new File([content], filename, { type: 'text/csv' });
-  
-  // Mock the text() method that ImportModal uses
-  Object.defineProperty(mockFile, 'text', {
-    value: () => Promise.resolve(content),
-    writable: false,
-    configurable: true,
-  });
-  
-  return mockFile;
-};
-
-// Helper function to simulate file upload for hidden inputs
-const simulateFileUpload = (fileInput: HTMLInputElement | null, file: File) => {
-  if (!fileInput) {
-    throw new Error('File input not found');
-  }
-  
-  // Create a mock FileList
-  const mockFileList = {
-    0: file,
-    length: 1,
-    item: (index: number) => index === 0 ? file : null,
-    [Symbol.iterator]: function* () {
-      yield file;
-    }
-  };
-  
-  Object.defineProperty(fileInput, 'files', {
-    value: mockFileList,
-    writable: false,
-    configurable: true,
-  });
-  
-  fireEvent.change(fileInput);
-};
-
-describe('ImportModal', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('DEBUG: should render file input in DOM', () => {
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    console.log('=== USING SCREEN.DEBUG ===');
-    screen.debug();
-    
-    console.log('=== CONTAINER CHECK ===');
-    console.log('container.innerHTML length:', container.innerHTML.length);
-    console.log('container.innerHTML:', container.innerHTML);
-    
-    console.log('=== DOM QUERIES ===');
-    console.log('All elements:', container.querySelectorAll('*').length);
-    console.log('Text content:', container.textContent);
-    
-    // This test is just for debugging - it should always pass
-    expect(true).toBe(true);
-  });
-
-  it('should render when open', () => {
-    renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    expect(screen.getByText('Import Data')).toBeInTheDocument();
-    expect(screen.getByText('Choose a CSV file to upload')).toBeInTheDocument();
-    expect(screen.getByText('Select File')).toBeInTheDocument();
-    expect(screen.getByText('Cancel')).toBeInTheDocument();
-    expect(screen.getByText('Import')).toBeInTheDocument();
-  });
-
-  it('should not render when closed', () => {
-    renderWithProviders(<ImportModal {...defaultProps} isOpen={false} />);
-    
-    expect(screen.queryByText('Import Data')).not.toBeInTheDocument();
-  });
-
-  it('should upload file successfully', async () => {
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const csvContent = 'name,email,age\nJohn Doe,john@example.com,30\nJane Smith,jane@example.com,25';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('Selected: test.csv')).toBeInTheDocument();
-    });
-  });
-
-  it('should show preview when file is selected', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const csvContent = 'name,email,age\nJohn Doe,john@example.com,30\nJane Smith,jane@example.com,25';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('Preview (first 5 rows)')).toBeInTheDocument();
-      expect(screen.getByText('John Doe')).toBeInTheDocument();
-      expect(screen.getByText('jane@example.com')).toBeInTheDocument();
-      expect(screen.getByText('Total rows to import: 2')).toBeInTheDocument();
-    });
-  });
-
-  it('should show error for invalid CSV', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const invalidContent = 'invalid csv content';
-    const file = createMockFile(invalidContent, 'invalid.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText(/CSV must have at least a header row and one data row/)).toBeInTheDocument();
-    });
-  });
-
-  it('should handle import successfully', async () => {
-    const user = userEvent.setup();
-    const mockOnImport = vi.fn();
-    const mockOnClose = vi.fn();
-    
-    const { container } = renderWithProviders(
-      <ImportModal
-        isOpen={true}
-        onClose={mockOnClose}
-        onImport={mockOnImport}
-      />
-    );
-    
-    const csvContent = 'name,email,age\nJohn Doe,john@example.com,30\nJane Smith,jane@example.com,25';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('Import')).toBeEnabled();
-    });
-    
-    const importButton = screen.getByText('Import');
-    await user.click(importButton);
-    
-    await waitFor(() => {
-      expect(mockOnImport).toHaveBeenCalledWith([
-        { name: 'John Doe', email: 'john@example.com', age: '30' },
-        { name: 'Jane Smith', email: 'jane@example.com', age: '25' },
-      ]);
-      expect(mockOnClose).toHaveBeenCalled();
-    });
-  });
-
-  it('should show processing state during import', async () => {
-    const user = userEvent.setup();
-    
-    // Mock a delay to see processing state
-    const mockOnImport = vi.fn().mockImplementation(() => new Promise<void>(resolve => setTimeout(resolve, 100)));
-    const { container } = renderWithProviders(
-      <ImportModal
-        isOpen={true}
-        onClose={vi.fn()}
-        onImport={mockOnImport}
-      />
-    );
-    
-    const csvContent = 'name,email\nJohn,john@example.com';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-              expect(screen.getByRole('button', { name: /import/i, hidden: true })).toBeEnabled();
-    });
-    
-    const importButton = screen.getByRole('button', { name: /import/i, hidden: true });
-    await user.click(importButton);
-    
-    // Should show processing state by disabling the button during operation
-    await waitFor(() => {
-      const updatedImportButton = screen.getByRole('button', { name: /import/i, hidden: true });
-      expect(updatedImportButton).toBeDisabled();
-    });
-  });
-
-  it('should handle cancel button', async () => {
-    const user = userEvent.setup();
-    const mockOnClose = vi.fn();
-    
-    renderWithProviders(
-      <ImportModal
-        isOpen={true}
-        onClose={mockOnClose}
-        onImport={vi.fn()}
-      />
-    );
-    
-    const cancelButton = screen.getByText('Cancel');
-    await user.click(cancelButton);
-    
-    expect(mockOnClose).toHaveBeenCalled();
-  });
-
-  it('should disable import button when no file selected', () => {
-    renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const importButton = screen.getByText('Import');
-    expect(importButton).toBeDisabled();
-  });
-
-  it('should handle CSV with quoted values', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const csvContent = '"name","email","description"\n"John Doe","john@example.com","A person with, comma"';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('John Doe')).toBeInTheDocument();
-      // CSV parser correctly handles quoted values with commas
-      expect(screen.getByText('A person with, comma')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle CSV with empty cells', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const csvContent = 'name,email,phone\nJohn,john@example.com,\nJane,,555-1234';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('John')).toBeInTheDocument();
-      expect(screen.getByText('555-1234')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle large CSV files', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    // Create a CSV with 100 rows
-    let csvContent = 'name,email,id\n';
-    for (let i = 1; i <= 100; i++) {
-      csvContent += `User ${i},user${i}@example.com,${i}\n`;
-    }
-    
-    const file = createMockFile(csvContent, 'large.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('Total rows to import: 100')).toBeInTheDocument();
-      expect(screen.getByText('Preview (first 5 rows)')).toBeInTheDocument();
-      // Should only show first 5 rows in preview
-      expect(screen.getByText('User 1')).toBeInTheDocument();
-      expect(screen.getByText('User 5')).toBeInTheDocument();
-      expect(screen.queryByText('User 6')).not.toBeInTheDocument();
-    });
-  });
-
-  it('should handle error during file processing', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    // Create an invalid file that will cause an error when processed
-    const invalidContent = '';
-    const file = createMockFile(invalidContent, 'empty.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText(/CSV must have at least a header row and one data row/)).toBeInTheDocument();
-    });
-  });
-
-  it('should clear file when modal is closed', async () => {
-    const user = userEvent.setup();
-    const mockOnClose = vi.fn();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} onClose={mockOnClose} />);
-    
-    const csvContent = 'name,email\nJohn,john@example.com';
-    const file = createMockFile(csvContent, 'test.csv');
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    simulateFileUpload(fileInput, file);
-    
-    await waitFor(() => {
-      expect(screen.getByText('Selected: test.csv')).toBeInTheDocument();
-    });
-    
-    // Close modal
-    const cancelButton = screen.getByText('Cancel');
-    await user.click(cancelButton);
-    
-    expect(mockOnClose).toHaveBeenCalled();
-  });
-
-  it('should handle file selection through button click', async () => {
-    const user = userEvent.setup();
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const selectFileButton = screen.getByText('Select File');
-    
-    // Mock the file input click
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    if (fileInput) {
-      const originalClick = fileInput.click;
-      fileInput.click = vi.fn();
-      
-      await user.click(selectFileButton);
-      
-      expect(fileInput.click).toHaveBeenCalled();
-      fileInput.click = originalClick;
-    } else {
-      // If we can't find the file input, at least verify the button works
-      await user.click(selectFileButton);
-      expect(selectFileButton).toBeInTheDocument();
-    }
-  });
-
-  it('should show responsive design on small screens', () => {
-    // Mock window.innerWidth for responsive design
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 400,
-    });
-    
-    renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-    expect(screen.getByText('Import Data')).toBeInTheDocument();
-    
-    // Reset window width
-    Object.defineProperty(window, 'innerWidth', {
-      writable: true,
-      configurable: true,
-      value: 1024,
-    });
-  });
-
-  it('should handle keyboard navigation', async () => {
-    const user = userEvent.setup();
-    const mockOnClose = vi.fn();
-    
-    renderWithProviders(
-      <ImportModal
-        isOpen={true}
-        onClose={mockOnClose}
-        onImport={vi.fn()}
-      />
-    );
-    
-    // Test that modal is keyboard accessible (ESC behavior varies with mocked Radix components)
-    const dialog = screen.getByRole('dialog');
-    expect(dialog).toBeInTheDocument();
-    
-    // Test that buttons are focusable
-    const cancelButton = screen.getByRole('button', { name: /cancel/i, hidden: true });
-    expect(cancelButton).toHaveAttribute('type', 'button');
-    expect(cancelButton).not.toBeDisabled();
-  });
-
-  it('should accept only CSV files', () => {
-    const { container } = renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-    expect(fileInput).toBeInTheDocument();
-    expect(fileInput.accept).toBe('.csv');
-  });
-
-  it('should maintain accessibility standards', () => {
-    renderWithProviders(<ImportModal {...defaultProps} />);
-    
-    // Check for proper ARIA labels and roles
-    expect(screen.getByRole('dialog')).toBeInTheDocument();
-    
-    // Check that dialog title is present (accessible name may vary with mocked components)
-    expect(screen.getByText('Import Data')).toBeInTheDocument();
-    
-    // Check for form controls
-    expect(screen.getByRole('button', { name: /select file/i, hidden: true })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /cancel/i, hidden: true })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /import/i, hidden: true })).toBeInTheDocument();
-    
-    // Check for close button
-    expect(screen.getByRole('button', { name: /close/i, hidden: true })).toBeInTheDocument();
-  });
-
-  // ============================================================================
-  // CUSTOMIZATION TESTS
-  // ============================================================================
-
-  describe('Customization Configuration', () => {
-    it('should render with custom title and description', () => {
-      const customConfig = {
-        title: 'Import Customer Data',
-        description: 'Upload a CSV file with customer information to import multiple customer records.',
-      };
-
-      renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={customConfig}
-        />
-      );
-
-      expect(screen.getByText('Import Customer Data')).toBeInTheDocument();
-      expect(screen.getByText('Upload a CSV file with customer information to import multiple customer records.')).toBeInTheDocument();
-    });
-
-    it('should render with custom upload text and button text', () => {
-      const customConfig = {
-        uploadText: 'Choose a customer CSV file to upload',
-        selectFileButtonText: 'Browse Customer Files',
-      };
-
-      renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={customConfig}
-        />
-      );
-
-      expect(screen.getByText('Choose a customer CSV file to upload')).toBeInTheDocument();
-      expect(screen.getByText('Browse Customer Files')).toBeInTheDocument();
-    });
-
-    it('should render with custom button texts', () => {
-      const customConfig = {
-        importButtonText: 'Import Customers',
-        importButtonProcessingText: 'Processing customers...',
-        cancelButtonText: 'Close Modal',
-      };
-
-      renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={customConfig}
-        />
-      );
-
-      expect(screen.getByText('Import Customers')).toBeInTheDocument();
-      expect(screen.getByText('Close Modal')).toBeInTheDocument();
-    });
-
-    it('should render with custom preview header text', async () => {
-      const customConfig = {
-        previewHeaderText: 'Customer Preview (first 5 records)',
-      };
-
-      const { container } = renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={customConfig}
-        />
-      );
-
-      const csvContent = 'name,email,age\nJohn Doe,john@example.com,30\nJane Smith,jane@example.com,25';
-      const file = createMockFile(csvContent, 'test.csv');
-
-      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-      simulateFileUpload(fileInput, file);
-
-      await waitFor(() => {
-        expect(screen.getByText('Customer Preview (first 5 records)')).toBeInTheDocument();
-      });
-    });
-
-    it('should render with custom total rows text pattern', async () => {
-      const customConfig = {
-        totalRowsText: 'Found {count} customer records to import',
-      };
-
-      const { container } = renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={customConfig}
-        />
-      );
-
-      const csvContent = 'name,email,age\nJohn Doe,john@example.com,30\nJane Smith,jane@example.com,25\nBob Wilson,bob@example.com,35';
-      const file = createMockFile(csvContent, 'test.csv');
-
-      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-      simulateFileUpload(fileInput, file);
-
-      await waitFor(() => {
-        expect(screen.getByText('Found 3 customer records to import')).toBeInTheDocument();
-      });
-    });
-
-    it('should show custom processing text during import', async () => {
-      const user = userEvent.setup();
-      const customConfig = {
-        importButtonText: 'Import Customers',
-        importButtonProcessingText: 'Processing customers...',
-      };
-
-      // Mock a delay to see processing state
-      const mockOnImport = vi.fn().mockImplementation(() => new Promise<void>(resolve => setTimeout(resolve, 100)));
-      const { container } = renderWithProviders(
-        <ImportModal
-          isOpen={true}
-          onClose={vi.fn()}
-          onImport={mockOnImport}
-          config={customConfig}
-        />
-      );
-
-      const csvContent = 'name,email\nJohn,john@example.com';
-      const file = createMockFile(csvContent, 'test.csv');
-
-      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-      simulateFileUpload(fileInput, file);
-
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /import customers/i, hidden: true })).toBeEnabled();
-      });
-
-      const importButton = screen.getByRole('button', { name: /import customers/i, hidden: true });
-      await user.click(importButton);
-
-      // Should show processing state
-      await waitFor(() => {
-        expect(screen.getByText('Processing customers...')).toBeInTheDocument();
-      });
-    });
-
-    it('should use custom cancel button text in event handlers', async () => {
-      const user = userEvent.setup();
-      const mockOnClose = vi.fn();
-      const customConfig = {
-        cancelButtonText: 'Close Modal',
-      };
-
-      renderWithProviders(
-        <ImportModal
-          isOpen={true}
-          onClose={mockOnClose}
-          onImport={vi.fn()}
-          config={customConfig}
-        />
-      );
-
-      const cancelButton = screen.getByText('Close Modal');
-      await user.click(cancelButton);
-
-      expect(mockOnClose).toHaveBeenCalled();
-    });
-
-    it('should handle all custom configuration options together', async () => {
-      const user = userEvent.setup();
-      const fullCustomConfig = {
-        title: 'Import Customer Database',
-        description: 'Upload a CSV file containing customer information to bulk import customer records.',
-        uploadText: 'Select a customer CSV file from your computer',
-        selectFileButtonText: 'Choose Customer File',
-        importButtonText: 'Import All Customers',
-        importButtonProcessingText: 'Importing customers, please wait...',
-        cancelButtonText: 'Cancel Import',
-        previewHeaderText: 'Customer Data Preview (showing first 5 entries)',
-        totalRowsText: 'Ready to import {count} customer records',
-      };
-
-      const { container } = renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={fullCustomConfig}
-        />
-      );
-
-      // Check title and description
-      expect(screen.getByText('Import Customer Database')).toBeInTheDocument();
-      expect(screen.getByText('Upload a CSV file containing customer information to bulk import customer records.')).toBeInTheDocument();
-
-      // Check upload text and button
-      expect(screen.getByText('Select a customer CSV file from your computer')).toBeInTheDocument();
-      expect(screen.getByText('Choose Customer File')).toBeInTheDocument();
-
-      // Check button texts
-      expect(screen.getByText('Import All Customers')).toBeInTheDocument();
-      expect(screen.getByText('Cancel Import')).toBeInTheDocument();
-
-      // Upload a file to test preview customization
-      const csvContent = 'name,email,company\nJohn Doe,john@example.com,Acme Corp\nJane Smith,jane@example.com,Tech Inc';
-      const file = createMockFile(csvContent, 'customers.csv');
-
-      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-      simulateFileUpload(fileInput, file);
-
-      await waitFor(() => {
-        expect(screen.getByText('Customer Data Preview (showing first 5 entries)')).toBeInTheDocument();
-        expect(screen.getByText('Ready to import 2 customer records')).toBeInTheDocument();
-      });
-    });
-
-    it('should fall back to default values when config is not provided', () => {
-      renderWithProviders(<ImportModal {...defaultProps} />);
-
-      // Check that default values are used
-      expect(screen.getByText('Import Data')).toBeInTheDocument();
-      expect(screen.getByText('Upload a CSV file to import multiple records at once.')).toBeInTheDocument();
-      expect(screen.getByText('Choose a CSV file to upload')).toBeInTheDocument();
-      expect(screen.getByText('Select File')).toBeInTheDocument();
-      expect(screen.getByText('Import')).toBeInTheDocument();
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-
-    it('should fall back to default values when config is empty', () => {
-      renderWithProviders(<ImportModal {...defaultProps} config={{}} />);
-
-      // Check that default values are used even with empty config
-      expect(screen.getByText('Import Data')).toBeInTheDocument();
-      expect(screen.getByText('Upload a CSV file to import multiple records at once.')).toBeInTheDocument();
-      expect(screen.getByText('Choose a CSV file to upload')).toBeInTheDocument();
-      expect(screen.getByText('Select File')).toBeInTheDocument();
-      expect(screen.getByText('Import')).toBeInTheDocument();
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-
-    it('should handle partial config with mixed custom and default values', () => {
-      const partialConfig = {
-        title: 'Custom Import Title',
-        importButtonText: 'Start Import',
-        // description, uploadText, etc. should use defaults
-      };
-
-      renderWithProviders(<ImportModal {...defaultProps} config={partialConfig} />);
-
-      // Check custom values
-      expect(screen.getByText('Custom Import Title')).toBeInTheDocument();
-      expect(screen.getByText('Start Import')).toBeInTheDocument();
-
-      // Check default values for non-specified config
-      expect(screen.getByText('Upload a CSV file to import multiple records at once.')).toBeInTheDocument();
-      expect(screen.getByText('Choose a CSV file to upload')).toBeInTheDocument();
-      expect(screen.getByText('Select File')).toBeInTheDocument();
-      expect(screen.getByText('Cancel')).toBeInTheDocument();
-    });
-
-    it('should properly replace placeholder in totalRowsText', async () => {
-      const customConfig = {
-        totalRowsText: 'Processing {count} items for import',
-      };
-
-      const { container } = renderWithProviders(
-        <ImportModal
-          {...defaultProps}
-          config={customConfig}
-        />
-      );
-
-      // Test with different row counts
-      const csvContent = 'id,name\n1,First\n2,Second\n3,Third\n4,Fourth\n5,Fifth\n6,Sixth\n7,Seventh';
-      const file = createMockFile(csvContent, 'test.csv');
-
-      const fileInput = container.querySelector('input[type="file"]') as HTMLInputElement;
-      simulateFileUpload(fileInput, file);
-
-      await waitFor(() => {
-        expect(screen.getByText('Processing 7 items for import')).toBeInTheDocument();
-      });
-    });
-  });
-});