@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,992 +0,0 @@
-/**
- * @vitest-environment jsdom
- */
-
-import React from 'react';
-import { screen, fireEvent, waitFor, act } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { FileUpload } from '../FileUpload';
-import { SupabaseClient } from '@supabase/supabase-js';
-import { renderWithProviders, testUserWorkflow, testDataFlow, testServiceIntegration } from '../../../__tests__/shared';
-
-// Mock the storage utilities at the module level
-vi.mock('../../../utils/storage', () => ({
-  validateFileSize: vi.fn(),
-  formatFileSize: vi.fn()
-}));
-
-// Mock the useFileUpload hook at the module level
-vi.mock('../../../hooks/useStorage', () => ({
-  useFileUpload: vi.fn()
-}));
-
-// Mock the Button component
-vi.mock('../../Button/Button', () => ({
-  Button: ({ children, onClick, disabled, className, type, variant, ...props }: any) => (
-    <button
-      onClick={onClick}
-      disabled={disabled}
-      className={className}
-      type={type}
-      data-variant={variant}
-      {...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;
-};
-
-describe('FileUpload Integration Tests', () => {
-  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({
-      uploadWithProgress: vi.fn(),
-      uploadProgress: 0,
-      isUploading: false,
-      uploadError: null
-    });
-  });
-
-  afterEach(() => {
-    vi.clearAllTimers();
-  });
-
-  describe('Component 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.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 Handling', () => {
-    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 and validate files', () => {
-      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 Functionality', () => {
-    it('should handle drag enter and show drop message', () => {
-      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 and hide drop message', () => {
-      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 and show drop message', () => {
-      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 and process files', () => {
-      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 with mixed results', () => {
-      (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);
-      const mockUploadWithProgress = vi.fn().mockResolvedValue({ success: true, path: 'test/path' });
-      
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: mockUploadWithProgress,
-        uploadProgress: 0,
-        isUploading: false,
-        uploadError: null
-      });
-      
-      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)
-      ];
-      const mockUploadWithProgress = vi.fn()
-        .mockResolvedValueOnce({ success: true, path: 'test/path1' })
-        .mockResolvedValueOnce({ success: true, path: 'test/path2' });
-      
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: mockUploadWithProgress,
-        uploadProgress: 0,
-        isUploading: false,
-        uploadError: null
-      });
-      
-      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 mockUploadWithProgress = vi.fn();
-      
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: mockUploadWithProgress,
-        uploadProgress: 0,
-        isUploading: false,
-        uploadError: null
-      });
-      
-      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(mockUploadWithProgress).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);
-      const mockUploadWithProgress = vi.fn().mockResolvedValue({ success: true, path: 'test/path' });
-      
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: mockUploadWithProgress,
-        uploadProgress: 0,
-        isUploading: false,
-        uploadError: null
-      });
-      
-      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 and Error States', () => {
-    it('should display upload progress when uploading', () => {
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: vi.fn(),
-        uploadProgress: 50,
-        isUploading: true,
-        uploadError: null
-      });
-
-      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();
-    });
-
-    it('should display upload error', () => {
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: vi.fn(),
-        uploadProgress: 0,
-        isUploading: false,
-        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 and State Management', () => {
-    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({
-        uploadWithProgress: vi.fn(),
-        uploadProgress: 0,
-        isUploading: true,
-        uploadError: null
-      });
-
-      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({
-        uploadWithProgress: vi.fn(),
-        uploadProgress: 0,
-        isUploading: true,
-        uploadError: null
-      });
-
-      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);
-      const mockUploadWithProgress = vi.fn().mockResolvedValue({ 
-        success: false, 
-        error: 'Network error' 
-      });
-      
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: mockUploadWithProgress,
-        uploadProgress: 0,
-        isUploading: false,
-        uploadError: null
-      });
-      
-      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);
-      const mockUploadWithProgress = vi.fn().mockResolvedValue({ success: true, path: 'test/path' });
-      
-      (useFileUpload as any).mockReturnValue({
-        uploadWithProgress: mockUploadWithProgress,
-        uploadProgress: 0,
-        isUploading: false,
-        uploadError: null
-      });
-      
-      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(mockUploadWithProgress).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('Enhanced Integration Workflows', () => {
-    it('should handle complete file upload workflow', async () => {
-      const mockSupabaseClient = {
-        storage: {
-          from: vi.fn(() => ({
-            upload: vi.fn().mockResolvedValue({ data: { path: 'test-file.jpg' }, error: null })
-          }))
-        }
-      };
-
-      await testUserWorkflow(async () => {
-        renderWithProviders(
-          <FileUpload
-            supabaseClient={mockSupabaseClient as any}
-            onUploadComplete={vi.fn()}
-            onError={vi.fn()}
-          />
-        );
-
-        const fileInput = screen.getByRole('button', { name: 'Select Files' });
-        await userEvent.click(fileInput);
-
-        // Simulate file selection and upload process
-        const file = new File(['test content'], 'test.jpg', { type: 'image/jpeg' });
-        const input = screen.getByRole('button', { name: 'Select Files' });
-        
-        // This would trigger the actual file upload workflow
-        expect(input).toBeInTheDocument();
-      });
-    });
-
-    it('should handle data flow through upload process', async () => {
-      const mockSupabaseClient = {
-        storage: {
-          from: vi.fn(() => ({
-            upload: vi.fn().mockResolvedValue({ data: { path: 'test-file.jpg' }, error: null })
-          }))
-        }
-      };
-
-      await testDataFlow(async () => {
-        renderWithProviders(
-          <FileUpload
-            supabaseClient={mockSupabaseClient as any}
-            onUploadComplete={vi.fn()}
-            onError={vi.fn()}
-          />
-        );
-
-        // Test data flow from file selection to upload completion
-        const fileInput = screen.getByRole('button', { name: 'Select Files' });
-        expect(fileInput).toBeInTheDocument();
-      });
-    });
-
-    it('should integrate with storage service properly', async () => {
-      const mockSupabaseClient = {
-        storage: {
-          from: vi.fn(() => ({
-            upload: vi.fn().mockResolvedValue({ data: { path: 'test-file.jpg' }, error: null })
-          }))
-        }
-      };
-
-      testServiceIntegration(
-        FileUpload,
-        {
-          supabaseClient: mockSupabaseClient as any,
-          onUploadComplete: vi.fn(),
-          onError: vi.fn()
-        },
-        {
-          serviceName: 'Supabase Storage',
-          mockService: mockSupabaseClient,
-          integrationTests: [
-            {
-              name: 'upload file successfully',
-              serviceCall: async () => {
-                const fileInput = screen.getByRole('button', { name: 'Select Files' });
-                expect(fileInput).toBeInTheDocument();
-                expect(mockSupabaseClient.storage.from).toBeDefined();
-              },
-              expectedBehavior: () => {
-                // Verify service integration
-                expect(mockSupabaseClient.storage.from).toHaveBeenCalled();
-              }
-            }
-          ]
-        }
-      );
-    });
-  });
-});