@jmruthers/pace-core 0.2.4

package/src/components/FileUpload/__tests__/FileUpload.unit.test.tsx

@@ -0,0 +1,1311 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import React from 'react';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { FileUpload } from '../FileUpload';
+import { SupabaseClient } from '@supabase/supabase-js';
+import { renderWithProviders, testComponentRendering, testComponentAccessibility, testComponentEvents, mockComponents } from '../../../__tests__/shared';
+
+// Mock the storage utilities
+vi.mock('../../../utils/storage', () => ({
+  validateFileSize: vi.fn(),
+  formatFileSize: vi.fn()
+}));
+
+// Mock the useFileUpload hook
+vi.mock('../../../hooks/useStorage', () => ({
+  useFileUpload: vi.fn()
+}));
+
+// Mock the Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, disabled, className, ...props }: any) => (
+    <button 
+      onClick={onClick} 
+      disabled={disabled} 
+      className={className} 
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}));
+
+// Mock the Progress component
+vi.mock('../../Progress/Progress', () => ({
+  Progress: ({ value, max, className, ...props }: any) => (
+    <div className={className} data-value={value} data-max={max} {...props}>
+      Progress: {value}%
+    </div>
+  )
+}));
+
+// Mock the Alert component
+vi.mock('../../Alert/Alert', () => ({
+  Alert: ({ children, variant, className, ...props }: any) => (
+    <div className={className} data-variant={variant} {...props}>
+      {children}
+    </div>
+  )
+}));
+
+// Import mocked functions
+import { validateFileSize, formatFileSize } from '../../../utils/storage';
+import { useFileUpload } from '../../../hooks/useStorage';
+
+// Mock data
+const mockSupabase = {} as SupabaseClient;
+const mockAppName = 'TEST_APP';
+const mockOrgId = 'test-org-id';
+
+// Test file factory
+const createMockFile = (name: string, size: number, type: string = 'image/jpeg'): File => {
+  const file = new File(['test content'], name, { type });
+  Object.defineProperty(file, 'size', { value: size });
+  return file;
+};
+
+// Helper function to get file input
+const getFileInput = (container: HTMLElement): HTMLInputElement => {
+  return container.querySelector('input[type="file"]') as HTMLInputElement;
+};
+
+// Mock useFileUpload return values
+const mockUseFileUpload = {
+  uploadWithProgress: vi.fn(),
+  uploadProgress: 0,
+  isUploading: false,
+  uploadError: null
+};
+
+describe('FileUpload', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    
+    // Setup default mocks
+    (validateFileSize as any).mockReturnValue({ isValid: true, error: null });
+    (formatFileSize as any).mockReturnValue('1.0 MB');
+    (useFileUpload as any).mockReturnValue(mockUseFileUpload);
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+  });
+
+  describe('Rendering', () => {
+    it('should render with default props', () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.getByText('Drag and drop files here or click to select')).toBeInTheDocument();
+      expect(screen.getByText('Select Files')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Select Files' })).toBeInTheDocument();
+    });
+
+    it('should render with custom children', () => {
+      const customContent = <div data-testid="custom-content">Custom Upload Area</div>;
+      
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        >
+          {customContent}
+        </FileUpload>
+      );
+
+      expect(screen.getByTestId('custom-content')).toBeInTheDocument();
+      expect(screen.queryByText('Drag and drop files here or click to select')).not.toBeInTheDocument();
+    });
+
+    it('should apply custom className', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          className="custom-class"
+        />
+      );
+
+      expect(container.querySelector('.file-upload')).toHaveClass('custom-class');
+    });
+
+    it('should render with disabled state', () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          disabled={true}
+        />
+      );
+
+      const fileInput = screen.getByRole('button', { name: 'Select Files' });
+      expect(fileInput).toBeDisabled();
+    });
+  });
+
+  describe('File Input', () => {
+    it('should have correct input attributes', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          accept="image/*"
+          multiple={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      expect(fileInput).toHaveAttribute('accept', 'image/*');
+      expect(fileInput).toHaveAttribute('multiple');
+    });
+
+    it('should handle file input change', () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(validateFileSize).toHaveBeenCalledWith(mockFile);
+      expect(screen.getByText('Selected Files:')).toBeInTheDocument();
+      expect(screen.getByText('test.jpg')).toBeInTheDocument();
+    });
+
+    it('should handle multiple file selection', () => {
+      const mockFiles = [
+        createMockFile('test1.jpg', 1024),
+        createMockFile('test2.jpg', 2048)
+      ];
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          multiple={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: mockFiles } });
+
+      expect(validateFileSize).toHaveBeenCalledTimes(2);
+      expect(screen.getByText('test1.jpg')).toBeInTheDocument();
+      expect(screen.getByText('test2.jpg')).toBeInTheDocument();
+    });
+  });
+
+  describe('Drag and Drop', () => {
+    it('should handle drag enter', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      fireEvent.dragEnter(dropzone!);
+      
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+    });
+
+    it('should handle drag leave', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      fireEvent.dragEnter(dropzone!);
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+      
+      fireEvent.dragLeave(dropzone!);
+      expect(screen.getByText('Drag and drop files here or click to select')).toBeInTheDocument();
+    });
+
+    it('should handle drag over', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      fireEvent.dragOver(dropzone!);
+      
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+    });
+
+    it('should handle file drop', () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      const mockDataTransfer = {
+        files: [mockFile]
+      };
+
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      fireEvent.drop(dropzone!, { dataTransfer: mockDataTransfer });
+
+      expect(validateFileSize).toHaveBeenCalledWith(mockFile);
+      expect(screen.getByText('Selected Files:')).toBeInTheDocument();
+    });
+
+    it('should not handle file drop when disabled', () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      const mockDataTransfer = {
+        files: [mockFile]
+      };
+
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          disabled={true}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      fireEvent.drop(dropzone!, { dataTransfer: mockDataTransfer });
+
+      expect(validateFileSize).not.toHaveBeenCalled();
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('File Validation', () => {
+    it('should display validation errors for invalid files', () => {
+      (validateFileSize as any).mockReturnValue({ 
+        isValid: false, 
+        error: 'File too large' 
+      });
+
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByText('File 1: File too large')).toBeInTheDocument();
+    });
+
+    it('should validate custom max size', () => {
+      const mockFile = createMockFile('test.jpg', 5 * 1024 * 1024); // 5MB
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          maxSize={2 * 1024 * 1024} // 2MB limit
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByText('File 1: Size (5MB) exceeds limit (2MB)')).toBeInTheDocument();
+    });
+
+    it('should validate multiple files', () => {
+      (validateFileSize as any)
+        .mockReturnValueOnce({ isValid: false, error: 'File too large' })
+        .mockReturnValueOnce({ isValid: true, error: null });
+
+      const mockFiles = [
+        createMockFile('test1.jpg', 1024),
+        createMockFile('test2.jpg', 2048)
+      ];
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          multiple={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: mockFiles } });
+
+      expect(screen.getByText('File 1: File too large')).toBeInTheDocument();
+      expect(screen.getByText('test2.jpg')).toBeInTheDocument();
+    });
+  });
+
+  describe('File Display', () => {
+    it('should display selected files with formatted sizes', () => {
+      (formatFileSize as any).mockReturnValue('1.5 MB');
+      
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByText('test.jpg')).toBeInTheDocument();
+      expect(screen.getByText('1.5 MB')).toBeInTheDocument();
+      expect(formatFileSize).toHaveBeenCalledWith(1024);
+    });
+
+    it('should not display files section when no files selected', () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Upload Flow', () => {
+    it('should call onUploadStart when upload begins', async () => {
+      const onUploadStart = vi.fn();
+      const mockFile = createMockFile('test.jpg', 1024);
+      mockUseFileUpload.uploadWithProgress.mockResolvedValue({ success: true, path: 'test/path' });
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          onUploadStart={onUploadStart}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      await userEvent.click(uploadButton);
+
+      expect(onUploadStart).toHaveBeenCalled();
+    });
+
+    it('should call onUploadComplete for each file', async () => {
+      const onUploadComplete = vi.fn();
+      const mockFiles = [
+        createMockFile('test1.jpg', 1024),
+        createMockFile('test2.jpg', 2048)
+      ];
+      mockUseFileUpload.uploadWithProgress
+        .mockResolvedValueOnce({ success: true, path: 'test/path1' })
+        .mockResolvedValueOnce({ success: true, path: 'test/path2' });
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          onUploadComplete={onUploadComplete}
+          multiple={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: mockFiles } });
+
+      const uploadButton = screen.getByRole('button', { name: 'Upload 2 files' });
+      await userEvent.click(uploadButton);
+
+      expect(onUploadComplete).toHaveBeenCalledTimes(2);
+      expect(onUploadComplete).toHaveBeenNthCalledWith(1, { success: true, path: 'test/path1' });
+      expect(onUploadComplete).toHaveBeenNthCalledWith(2, { success: true, path: 'test/path2' });
+    });
+
+    it('should not upload when validation errors exist', async () => {
+      (validateFileSize as any).mockReturnValue({ 
+        isValid: false, 
+        error: 'File too large' 
+      });
+      
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      expect(uploadButton).toBeDisabled();
+      
+      await userEvent.click(uploadButton);
+      expect(mockUseFileUpload.uploadWithProgress).not.toHaveBeenCalled();
+    });
+
+    it('should not upload when no files selected', async () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const uploadButton = screen.queryByRole('button', { name: /Upload/ });
+      expect(uploadButton).not.toBeInTheDocument();
+    });
+
+    it('should reset files after upload', async () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      mockUseFileUpload.uploadWithProgress.mockResolvedValue({ success: true, path: 'test/path' });
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByText('Selected Files:')).toBeInTheDocument();
+
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      await userEvent.click(uploadButton);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Upload Progress', () => {
+    it('should display upload progress when uploading', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true,
+        uploadProgress: 50
+      });
+
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.getByText('Progress: 50%')).toBeInTheDocument();
+      expect(screen.getByText('Uploading... 50%')).toBeInTheDocument();
+    });
+
+    it('should not display progress when not uploading', () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.queryByText(/Progress:/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Upload Error', () => {
+    it('should display upload error', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        uploadError: 'Upload failed'
+      });
+
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.getByText('Upload failed')).toBeInTheDocument();
+    });
+
+    it('should not display error when no error', () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.queryByText(/Upload failed/)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Actions', () => {
+    it('should show upload and clear buttons when files selected', () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByRole('button', { name: 'Upload 1 file' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Clear' })).toBeInTheDocument();
+    });
+
+    it('should disable upload button when uploading', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true
+      });
+
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      const uploadButton = screen.getByRole('button', { name: 'Uploading...' });
+      expect(uploadButton).toBeDisabled();
+    });
+
+    it('should disable clear button when uploading', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true
+      });
+
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      const clearButton = screen.getByRole('button', { name: 'Clear' });
+      expect(clearButton).toBeDisabled();
+    });
+
+    it('should clear files when clear button clicked', async () => {
+      const user = userEvent.setup();
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByText('Selected Files:')).toBeInTheDocument();
+
+      const clearButton = screen.getByRole('button', { name: 'Clear' });
+      await user.click(clearButton);
+
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+
+    it('should show correct upload button text for single file', () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByRole('button', { name: 'Upload 1 file' })).toBeInTheDocument();
+    });
+
+    it('should show correct upload button text for multiple files', () => {
+      const mockFiles = [
+        createMockFile('test1.jpg', 1024),
+        createMockFile('test2.jpg', 2048)
+      ];
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          multiple={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: mockFiles } });
+
+      expect(screen.getByRole('button', { name: 'Upload 2 files' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle null file list', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: null } });
+
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+
+    it('should handle empty file list', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [] } });
+
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+
+    it('should handle upload error during upload', async () => {
+      const onUploadComplete = vi.fn();
+      const mockFile = createMockFile('test.jpg', 1024);
+      mockUseFileUpload.uploadWithProgress.mockResolvedValue({ 
+        success: false, 
+        error: 'Network error' 
+      });
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          onUploadComplete={onUploadComplete}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      await userEvent.click(uploadButton);
+
+      expect(onUploadComplete).toHaveBeenCalledWith({ 
+        success: false, 
+        error: 'Network error' 
+      });
+    });
+
+    it('should handle upload with no callbacks', async () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      mockUseFileUpload.uploadWithProgress.mockResolvedValue({ success: true, path: 'test/path' });
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      await userEvent.click(uploadButton);
+
+      // Should not throw error
+      expect(mockUseFileUpload.uploadWithProgress).toHaveBeenCalledWith(mockFile);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have proper ARIA attributes', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      expect(fileInput).toHaveAttribute('type', 'file');
+    });
+
+    it('should be keyboard accessible', async () => {
+      const user = userEvent.setup();
+      
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const selectButton = screen.getByRole('button', { name: 'Select Files' });
+      await user.click(selectButton);
+
+      // The file input should be triggered
+      expect(selectButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Additional Edge Cases', () => {
+    it('should handle drag event with unknown type', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      // Create a custom drag event with an unknown type
+      const customEvent = new Event('dragend') as any;
+      customEvent.preventDefault = vi.fn();
+      customEvent.stopPropagation = vi.fn();
+      
+      fireEvent(dropzone!, customEvent);
+      
+      // Should not change drag state
+      expect(screen.getByText('Drag and drop files here or click to select')).toBeInTheDocument();
+    });
+
+    it('should handle drag event with dragend type', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      // First set drag active
+      fireEvent.dragEnter(dropzone!);
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+      
+      // Then trigger dragend
+      fireEvent.dragEnd(dropzone!);
+      
+      // Should remain in drag state since dragend is not handled
+      expect(screen.getByText('Drop files here')).toBeInTheDocument();
+    });
+
+    it('should handle file input change with empty FileList', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      // Create empty FileList
+      const emptyFileList = {
+        length: 0,
+        [Symbol.iterator]: function* () {}
+      } as FileList;
+      
+      fireEvent.change(fileInput, { target: { files: emptyFileList } });
+
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+
+    it('should handle upload when disabled but files are selected', async () => {
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          disabled={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      // When disabled, upload button should be present but disabled
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      expect(uploadButton).toBeDisabled();
+    });
+
+    it('should handle upload when isUploading is true', async () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true
+      });
+
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      // Upload button should be disabled when uploading
+      const uploadButton = screen.getByRole('button', { name: 'Uploading...' });
+      expect(uploadButton).toBeDisabled();
+    });
+
+    it('should handle upload with validation errors and no files', async () => {
+      (validateFileSize as any).mockReturnValue({ 
+        isValid: false, 
+        error: 'File too large' 
+      });
+      
+      const mockFile = createMockFile('test.jpg', 1024);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      // Upload button should be disabled due to validation errors
+      const uploadButton = screen.getByRole('button', { name: 'Upload 1 file' });
+      expect(uploadButton).toBeDisabled();
+      
+      // Try to click upload - should not call uploadWithProgress
+      await userEvent.click(uploadButton);
+      expect(mockUseFileUpload.uploadWithProgress).not.toHaveBeenCalled();
+    });
+
+    it('should handle upload with no files selected', async () => {
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      // No files selected, so no upload button should be visible
+      const uploadButton = screen.queryByRole('button', { name: /Upload/ });
+      expect(uploadButton).not.toBeInTheDocument();
+    });
+
+    it('should handle drag drop with empty files', () => {
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const dropzone = container.querySelector('.file-upload__dropzone');
+      
+      // Create empty FileList
+      const emptyFileList = {
+        length: 0,
+        [Symbol.iterator]: function* () {}
+      } as FileList;
+      
+      const mockDataTransfer = {
+        files: emptyFileList
+      };
+      
+      fireEvent.drop(dropzone!, { dataTransfer: mockDataTransfer });
+
+      expect(screen.queryByText('Selected Files:')).not.toBeInTheDocument();
+    });
+
+    it('should handle file selection with mixed valid and invalid files', () => {
+      (validateFileSize as any)
+        .mockReturnValueOnce({ isValid: true, error: null })
+        .mockReturnValueOnce({ isValid: false, error: 'File too large' })
+        .mockReturnValueOnce({ isValid: true, error: null });
+
+      const mockFiles = [
+        createMockFile('valid1.jpg', 1024),
+        createMockFile('invalid.jpg', 5 * 1024 * 1024), // 5MB
+        createMockFile('valid2.jpg', 2048)
+      ];
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          multiple={true}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: mockFiles } });
+
+      // Should show validation error for the invalid file
+      expect(screen.getByText('File 2: File too large')).toBeInTheDocument();
+      
+      // Should show all files in the list
+      expect(screen.getByText('valid1.jpg')).toBeInTheDocument();
+      expect(screen.getByText('invalid.jpg')).toBeInTheDocument();
+      expect(screen.getByText('valid2.jpg')).toBeInTheDocument();
+      
+      // Upload button should be disabled due to validation errors
+      const uploadButton = screen.getByRole('button', { name: 'Upload 3 files' });
+      expect(uploadButton).toBeDisabled();
+    });
+
+    it('should handle custom max size validation with exact limit', () => {
+      const mockFile = createMockFile('test.jpg', 2 * 1024 * 1024); // Exactly 2MB
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          maxSize={2 * 1024 * 1024} // 2MB limit
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      // Should not show validation error for file at exact limit
+      expect(screen.queryByText(/exceeds limit/)).not.toBeInTheDocument();
+      expect(screen.getByText('Selected Files:')).toBeInTheDocument();
+    });
+
+    it('should handle upload progress with different progress values', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true,
+        uploadProgress: 75
+      });
+
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.getByText('Progress: 75%')).toBeInTheDocument();
+      expect(screen.getByText('Uploading... 75%')).toBeInTheDocument();
+    });
+
+    it('should handle upload progress at 100%', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true,
+        uploadProgress: 100
+      });
+
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.getByText('Progress: 100%')).toBeInTheDocument();
+      expect(screen.getByText('Uploading... 100%')).toBeInTheDocument();
+    });
+
+    it('should handle upload progress at 0%', () => {
+      (useFileUpload as any).mockReturnValue({
+        ...mockUseFileUpload,
+        isUploading: true,
+        uploadProgress: 0
+      });
+
+      renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      expect(screen.getByText('Progress: 0%')).toBeInTheDocument();
+      expect(screen.getByText('Uploading... 0%')).toBeInTheDocument();
+    });
+
+    it('should handle multiple validation errors for same file', () => {
+      (validateFileSize as any).mockReturnValue({ 
+        isValid: false, 
+        error: 'File too large' 
+      });
+
+      const mockFile = createMockFile('test.jpg', 5 * 1024 * 1024); // 5MB
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          maxSize={2 * 1024 * 1024} // 2MB limit
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      // Should show both validation errors
+      expect(screen.getByText('File 1: File too large')).toBeInTheDocument();
+      expect(screen.getByText('File 1: Size (5MB) exceeds limit (2MB)')).toBeInTheDocument();
+    });
+
+    it('should handle file size formatting edge cases', () => {
+      (formatFileSize as any).mockReturnValue('0 B');
+      
+      const mockFile = createMockFile('empty.txt', 0);
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      expect(screen.getByText('empty.txt')).toBeInTheDocument();
+      expect(screen.getByText('0 B')).toBeInTheDocument();
+      expect(formatFileSize).toHaveBeenCalledWith(0);
+    });
+
+    it('should handle very large file sizes in validation', () => {
+      const mockFile = createMockFile('huge.jpg', 10 * 1024 * 1024 * 1024); // 10GB
+      
+      const { container } = renderWithProviders(
+        <FileUpload
+          supabase={mockSupabase}
+          appName={mockAppName}
+          orgId={mockOrgId}
+          maxSize={1024 * 1024} // 1MB limit
+        />
+      );
+
+      const fileInput = getFileInput(container);
+      
+      fireEvent.change(fileInput, { target: { files: [mockFile] } });
+
+      // Should show validation error for huge file
+      expect(screen.getByText(/Size \(10240MB\) exceeds limit \(1MB\)/)).toBeInTheDocument();
+    });
+  });
+describe('FileUpload Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('FileUpload component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: FileUpload component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'FileUpload interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('FileUpload prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+});