@jmruthers/pace-core 0.5.114 → 0.5.116

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

@@ -0,0 +1,734 @@
+/**
+ * @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';
+
+// Mock Dialog components - Use simple mock without importActual to avoid Radix UI dependencies
+vi.mock('../../Dialog', () => ({
+  Dialog: ({ children, open, onOpenChange }: any) => (
+    open ? <div role="dialog" data-testid="dialog">{children}</div> : null
+  ),
+  DialogContent: ({ children, className }: any) => (
+    <div data-testid="dialog-content" className={className}>{children}</div>
+  ),
+  DialogHeader: ({ children }: any) => (
+    <div data-testid="dialog-header">{children}</div>
+  ),
+  DialogTitle: ({ children }: any) => (
+    <h2 data-testid="dialog-title" role="heading" aria-level={2}>{children}</h2>
+  ),
+  DialogDescription: ({ children }: any) => (
+    <p data-testid="dialog-description">{children}</p>
+  ),
+}));
+
+// 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/logger', () => ({
+  createLogger: () => ({
+    debug: vi.fn(),
+    info: vi.fn(),
+    warn: vi.fn(),
+    error: vi.fn(),
+  }),
+}));
+
+describe('[component] ImportModal', () => {
+  const defaultProps = {
+    isOpen: true,
+    onClose: vi.fn(),
+    onImport: vi.fn(),
+  };
+
+  const createCSVFile = (content: string, filename = 'test.csv'): File => {
+    const blob = new Blob([content], { type: 'text/csv' });
+    return new File([blob], filename, { type: 'text/csv' });
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Mock File.text() method for jsdom compatibility
+    // File.text() reads the file content asynchronously using FileReader
+    if (!File.prototype.text) {
+      Object.defineProperty(File.prototype, 'text', {
+        writable: true,
+        configurable: true,
+        value: async function(this: File) {
+          return new Promise((resolve, reject) => {
+            // Use FileReader to read the file content
+            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 {...defaultProps} isOpen={false} />
+      );
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders modal when open', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      // Dialog renders with role="dialog" from Radix UI
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+      // Check for content instead of testids
+      expect(screen.getByText('Import Data')).toBeInTheDocument();
+    });
+
+    it('renders default title', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      // DialogTitle renders as h2
+      expect(screen.getByRole('heading', { name: 'Import Data' })).toBeInTheDocument();
+    });
+
+    it('renders custom title from config', () => {
+      render(
+        <ImportModal
+          {...defaultProps}
+          config={{ title: 'Custom Import Title' }}
+        />
+      );
+      
+      // DialogTitle renders as h2
+      expect(screen.getByRole('heading', { name: 'Custom Import Title' })).toBeInTheDocument();
+    });
+
+    it('renders default description', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      // DialogDescription renders as p
+      expect(screen.getByText('Upload a CSV file to import multiple records at once.')).toBeInTheDocument();
+    });
+
+    it('renders custom description from config', () => {
+      render(
+        <ImportModal
+          {...defaultProps}
+          config={{ description: 'Custom description' }}
+        />
+      );
+      
+      // DialogDescription renders as p
+      expect(screen.getByText('Custom description')).toBeInTheDocument();
+    });
+
+    it('renders file upload area', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      expect(screen.getByText(/choose a csv file/i)).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /select file/i })).toBeInTheDocument();
+    });
+
+    it('renders cancel button', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+
+    it('renders import button', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      expect(screen.getByRole('button', { name: /import/i })).toBeInTheDocument();
+    });
+  });
+
+  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 {...defaultProps} />);
+      
+      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 {...defaultProps} />);
+      
+      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 {...defaultProps} isOpen={false} />);
+      rerender(<ImportModal {...defaultProps} isOpen={true} />);
+
+      // 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 {...defaultProps} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // Once preview table is visible, check for table headers
+      await waitFor(() => {
+        expect(screen.getByText(/name/i)).toBeInTheDocument();
+        expect(screen.getByText(/email/i)).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+
+    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 {...defaultProps} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // 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 {...defaultProps} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // 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 {...defaultProps} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // 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 {...defaultProps} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      // 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 {...defaultProps} />);
+      
+      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 {...defaultProps} />);
+      
+      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 {...defaultProps} />);
+      
+      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 {...defaultProps} onImport={onImport} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = screen.getByRole('button', { name: /import/i });
+      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', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      const importButton = screen.getByRole('button', { name: /import/i });
+      expect(importButton).toBeDisabled();
+    });
+
+    it('disables import button while processing', async () => {
+      const user = userEvent.setup();
+      const onImport = vi.fn(() => new Promise(resolve => setTimeout(resolve, 100)));
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      render(<ImportModal {...defaultProps} onImport={onImport} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = screen.getByRole('button', { name: /import/i });
+      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(() => new Promise(resolve => setTimeout(resolve, 100)));
+      const csvContent = 'name,email\nJohn,john@example.com';
+      const file = createCSVFile(csvContent);
+      
+      render(<ImportModal {...defaultProps} onImport={onImport} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = screen.getByRole('button', { name: /import/i });
+      await user.click(importButton);
+
+      // Button text changes to "Processing..." when isProcessing is true
+      await waitFor(() => {
+        const processingButton = screen.getByRole('button', { name: /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 {...defaultProps} onClose={onClose} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      const importButton = screen.getByRole('button', { name: /import/i });
+      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 {...defaultProps} onClose={onClose} />);
+      
+      const cancelButton = screen.getByRole('button', { name: /cancel/i });
+      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 {...defaultProps} />);
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      await waitFor(() => {
+        expect(screen.getByText('John')).toBeInTheDocument();
+      }, { timeout: 2000 });
+
+      rerender(<ImportModal {...defaultProps} isOpen={false} />);
+      rerender(<ImportModal {...defaultProps} 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', () => {
+      render(
+        <ImportModal
+          {...defaultProps}
+          config={{
+            selectFileButtonText: 'Browse Files',
+            importButtonText: 'Import Data',
+            cancelButtonText: 'Close',
+          }}
+        />
+      );
+      
+      expect(screen.getByRole('button', { name: /browse files/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /import data/i })).toBeInTheDocument();
+      // Dialog has a close button too, so get all close buttons and find the Cancel one
+      const closeButtons = screen.getAllByRole('button', { name: /close/i });
+      const cancelButton = closeButtons.find(btn => btn.textContent === 'Close');
+      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
+          {...defaultProps}
+          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
+          {...defaultProps}
+          config={{ totalRowsText: 'Found {count} records' }}
+        />
+      );
+      
+      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');
+        expect(table).toBeInTheDocument();
+      }, { timeout: 5000 });
+      
+      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 {...defaultProps} />);
+      
+      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 {...defaultProps} />);
+      
+      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 {...defaultProps} />);
+      
+      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 {...defaultProps} />);
+      
+      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', () => {
+      render(<ImportModal {...defaultProps} />);
+      
+      expect(screen.getByRole('button', { name: /select file/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /import/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    });
+  });
+});
+