@jmruthers/pace-core 0.5.181 → 0.5.182

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

@@ -1,214 +1,594 @@
+/**
+ * @file FileUpload Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/FileUpload/__tests__
+ * 
+ * Comprehensive test suite for FileUpload component following testing standards.
+ * Tests cover file selection, validation, upload workflows, error handling, and accessibility.
+ */
+
 import React from 'react';
-import { renderWithProviders, screen, fireEvent, userEvent, act } from '../../__tests__/helpers/test-utils';
+import { renderWithProviders, screen, fireEvent, act, waitFor } from '../../__tests__/helpers/test-utils';
 import { FileUpload } from './FileUpload';
 import { createMockSupabaseClient } from '../../__tests__/helpers/test-utils';
 import { FileCategory } from '../../types/file-reference';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
 
-vi.mock('../../hooks/useFileReference', () => {
-  return {
-    useFileReference: () => ({
-      isLoading: false,
-      error: null,
-      uploadFile: vi.fn(async () => ({
-        file_reference: {
-          id: 'file-ref-1',
-          table_name: 'person',
-          record_id: 'rec-1',
-          organisation_id: 'org-1',
-          file_path: 'bucket/path/file.png',
-          is_public: false,
-          file_metadata: {
-            fileName: 'file.png',
-            fileSize: 1024,
-            fileType: 'image/png',
-            category: FileCategory.PROFILE_PHOTOS,
-          },
-        },
-      })),
-    }),
-  };
+// Mock dependencies
+import * as useFileReferenceModule from '../../hooks/useFileReference';
+import * as appNameResolver from '../../utils/app/appNameResolver';
+import * as appIdResolver from '../../utils/app/appIdResolver';
+
+const mockUseFileReference = vi.fn();
+const mockGetCurrentAppName = vi.fn();
+const mockGetAppId = vi.fn();
+
+const createMockUploadResult = () => ({
+  file_reference: {
+    id: 'file-ref-1',
+    table_name: 'person',
+    record_id: 'rec-1',
+    organisation_id: 'org-1',
+    file_path: 'bucket/path/file.png',
+    is_public: false,
+    file_metadata: {
+      fileName: 'file.png',
+      fileSize: 1024,
+      fileType: 'image/png',
+      category: FileCategory.PROFILE_PHOTOS,
+    },
+  },
+  file_url: 'https://example.com/file.png',
+});
+
+beforeEach(() => {
+  vi.clearAllMocks();
+
+  mockUseFileReference.mockReturnValue({
+    uploadFile: vi.fn(async () => createMockUploadResult()),
+    isLoading: false,
+    error: null,
+  });
+
+  mockGetCurrentAppName.mockReturnValue('test-app');
+  mockGetAppId.mockResolvedValue('test-app-id');
+
+  vi.spyOn(useFileReferenceModule, 'useFileReference').mockImplementation(mockUseFileReference);
+  vi.spyOn(appNameResolver, 'getCurrentAppName').mockImplementation(mockGetCurrentAppName);
+  vi.spyOn(appIdResolver, 'getAppId').mockImplementation(mockGetAppId);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
 });
 
 describe('[component] FileUpload', () => {
-  const supabase = createMockSupabaseClient() as any;
+  const supabase = createMockSupabaseClient();
   const baseProps = {
     supabase,
     table_name: 'person',
     record_id: 'rec-1',
     organisation_id: 'org-1',
-    app_id: 'app-123', // pass app_id to avoid async resolution
+    app_id: 'app-123',
     category: FileCategory.PROFILE_PHOTOS,
     accept: 'image/*',
   } as const;
 
-  it('renders call-to-action text by default', () => {
-    renderWithProviders(<FileUpload {...baseProps} />);
-    expect(screen.getByText(/Click to upload/i)).toBeInTheDocument();
-    expect(screen.getByText(/drag and drop/i)).toBeInTheDocument();
+  const createTestFile = (name = 'test.png', type = 'image/png', size = 1024): File => {
+    return new File([new Uint8Array(size)], name, { type, size });
+  };
+
+  describe('Rendering', () => {
+    it('renders call-to-action text by default', () => {
+      renderWithProviders(<FileUpload {...baseProps} />);
+      expect(screen.getByText(/Click to upload/i)).toBeInTheDocument();
+      expect(screen.getByText(/drag and drop/i)).toBeInTheDocument();
+    });
+
+    it('renders with custom children', () => {
+      renderWithProviders(
+        <FileUpload {...baseProps}>
+          <div>Custom upload area</div>
+        </FileUpload>
+      );
+      expect(screen.getByText('Custom upload area')).toBeInTheDocument();
+      expect(screen.queryByText(/Click to upload/i)).not.toBeInTheDocument();
+    });
+
+    it('shows accepted formats when accept prop is provided', () => {
+      renderWithProviders(<FileUpload {...baseProps} accept="image/*" />);
+      expect(screen.getByText(/Accepted formats: image\/\*/i)).toBeInTheDocument();
+    });
+
+    it('shows max size information when provided', () => {
+      renderWithProviders(<FileUpload {...baseProps} maxSize={5 * 1024 * 1024} />);
+      expect(screen.getByText(/Max size: 5MB/i)).toBeInTheDocument();
+    });
+
+    it('shows multiple files allowed message when multiple is true', () => {
+      renderWithProviders(<FileUpload {...baseProps} multiple />);
+      expect(screen.getByText(/Multiple files allowed/i)).toBeInTheDocument();
+    });
   });
 
-  it('shows drag state message on dragover and resets on dragleave', async () => {
-    const user = userEvent.setup();
-    renderWithProviders(<FileUpload {...baseProps} />);
+  describe('Drag and Drop', () => {
+    it('shows drag state message on dragover', () => {
+      renderWithProviders(<FileUpload {...baseProps} />);
+      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+
+      fireEvent.dragOver(dropArea);
+      expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
+    });
+
+    it('resets drag state on dragleave', () => {
+      renderWithProviders(<FileUpload {...baseProps} />);
+      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+
+      fireEvent.dragOver(dropArea);
+      expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
+
+      fireEvent.dragLeave(dropArea);
+      expect(screen.getByText(/Click to upload/i)).toBeInTheDocument();
+    });
 
-    const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+    it('handles file drop', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadSuccess={onUploadSuccess} showProgress />
+      );
 
-    fireEvent.dragOver(dropArea);
-    expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
+      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      const file = createTestFile('test.png', 'image/png');
 
-    fireEvent.dragLeave(dropArea);
-    expect(screen.getByText(/Click to upload/i)).toBeInTheDocument();
+      await act(async () => {
+        fireEvent.drop(dropArea, {
+          dataTransfer: {
+            files: [file],
+          },
+        });
+      });
+
+      await waitFor(() => {
+        expect(onUploadSuccess).toHaveBeenCalled();
+      });
+    });
+
+    it('does not handle drop when disabled', () => {
+      renderWithProviders(<FileUpload {...baseProps} disabled />);
+      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+
+      fireEvent.dragOver(dropArea);
+      expect(screen.queryByText(/Drop files here/i)).not.toBeInTheDocument();
+    });
   });
 
-  it('handles upload failure and shows error', async () => {
-    // Override the mocked hook just for this test to simulate a failed upload
-    const { useFileReference } = await import('../../hooks/useFileReference');
-    const hookSpy = vi.spyOn({ useFileReference }, 'useFileReference' as any).mockReturnValue({
-      isLoading: false,
-      error: null,
-      uploadFile: vi.fn(async () => undefined),
-    } as any);
+  describe('File Selection', () => {
+    it('handles file input change', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadSuccess={onUploadSuccess} showProgress />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
 
-    const onUploadError = vi.fn();
-    renderWithProviders(
-      <FileUpload {...baseProps} onUploadError={onUploadError} showProgress />
-    );
+      await waitFor(() => {
+        expect(onUploadSuccess).toHaveBeenCalled();
+      });
+    });
+
+    it('handles multiple file selection when multiple is true', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} multiple onUploadSuccess={onUploadSuccess} showProgress />
+      );
 
-    const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
-    fireEvent.click(dropArea);
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file1 = createTestFile('test1.png', 'image/png');
+      const file2 = createTestFile('test2.png', 'image/png');
 
-    const input = screen.getByTestId('file-input') as HTMLInputElement;
-    const file = new File([new Uint8Array([1, 2, 3])], 'avatar.png', { type: 'image/png' });
-    await act(async () => {
-      fireEvent.change(input, { target: { files: [file] } });
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file1, file2] } });
+      });
+
+      await waitFor(() => {
+        expect(onUploadSuccess).toHaveBeenCalledTimes(2);
+      });
     });
 
-    // Expect error UI and error callback
-    await screen.findByText(/Upload failed/i);
-    expect(onUploadError).toHaveBeenCalled();
+    it('triggers file input click when drop area is clicked', () => {
+      renderWithProviders(<FileUpload {...baseProps} />);
+      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const clickSpy = vi.spyOn(input, 'click');
 
-    hookSpy.mockRestore();
+      fireEvent.click(dropArea);
+      expect(clickSpy).toHaveBeenCalled();
+    });
   });
 
-  it('rejects files that do not match accept filter and calls onUploadError', async () => {
-    const onUploadError = vi.fn();
-    renderWithProviders(
-      <FileUpload {...baseProps} onUploadError={onUploadError} accept={'.pdf'} />
-    );
+  describe('File Validation', () => {
+    it('rejects files that do not match accept filter', async () => {
+      const onUploadError = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadError={onUploadError} accept=".pdf" />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const badFile = createTestFile('avatar.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [badFile] } });
+      });
+
+      expect(onUploadError).toHaveBeenCalledTimes(1);
+      expect(onUploadError.mock.calls[0][0]).toMatch(/not an accepted format/i);
+    });
+
+    it('rejects files over max size', async () => {
+      const onUploadError = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadError={onUploadError} maxSize={1} />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const bigFile = createTestFile('big.bin', 'application/octet-stream', 5 * 1024);
 
-    const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
-    const input = screen.getByTestId('file-input') as HTMLInputElement;
-    const badFile = new File([new Uint8Array([1, 2, 3])], 'avatar.png', { type: 'image/png' });
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [bigFile] } });
+      });
 
-    await act(async () => {
-      fireEvent.change(input, { target: { files: [badFile] } });
+      expect(onUploadError).toHaveBeenCalledTimes(1);
+      expect(onUploadError.mock.calls[0][0]).toMatch(/exceeds maximum size/i);
     });
 
-    expect(onUploadError).toHaveBeenCalledTimes(1);
-    expect(onUploadError.mock.calls[0][0]).toMatch(/not an accepted format/i);
+    it('accepts files matching MIME type wildcard', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} accept="image/*" onUploadSuccess={onUploadSuccess} showProgress />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.jpg', 'image/jpeg');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(onUploadSuccess).toHaveBeenCalled();
+      });
+    });
+
+    it('accepts files matching exact MIME type', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} accept="image/png" onUploadSuccess={onUploadSuccess} showProgress />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(onUploadSuccess).toHaveBeenCalled();
+      });
+    });
   });
 
-  it('rejects files over max size and shows error', async () => {
-    const onUploadError = vi.fn();
-    renderWithProviders(
-      <FileUpload {...baseProps} onUploadError={onUploadError} maxSize={1} />
-    );
+  describe('Upload Workflow', () => {
+    it('handles successful upload', async () => {
+      const onUploadSuccess = vi.fn();
+      const onProgress = vi.fn();
+      renderWithProviders(
+        <FileUpload
+          {...baseProps}
+          onUploadSuccess={onUploadSuccess}
+          onProgress={onProgress}
+          showProgress
+        />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(onUploadSuccess).toHaveBeenCalled();
+        expect(onProgress).toHaveBeenCalled();
+      });
+    });
+
+    it('handles upload failure', async () => {
+      mockUseFileReference.mockReturnValue({
+        uploadFile: vi.fn(async () => null),
+        isLoading: false,
+        error: null,
+      });
 
-    const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
-    const input = screen.getByTestId('file-input') as HTMLInputElement;
-    const big = new File([new Uint8Array(5)], 'big.bin', { type: 'application/octet-stream' });
+      const onUploadError = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadError={onUploadError} showProgress />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(onUploadError).toHaveBeenCalled();
+      });
+    });
 
-    await act(async () => {
-      fireEvent.change(input, { target: { files: [big] } });
+    it('handles upload error exception', async () => {
+      mockUseFileReference.mockReturnValue({
+        uploadFile: vi.fn(async () => {
+          throw new Error('Network error');
+        }),
+        isLoading: false,
+        error: null,
+      });
+
+      const onUploadError = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadError={onUploadError} showProgress />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(onUploadError).toHaveBeenCalledWith('Network error', file);
+      });
     });
 
-    expect(onUploadError).toHaveBeenCalledTimes(1);
-    expect(onUploadError.mock.calls[0][0]).toMatch(/exceeds maximum size/i);
+    it('shows progress when showProgress is true', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload {...baseProps} onUploadSuccess={onUploadSuccess} showProgress />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png', 10240);
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('test.png')).toBeInTheDocument();
+      });
+    });
+
+    it('shows file icon when preview is not available', async () => {
+      const onUploadSuccess = vi.fn();
+      renderWithProviders(
+        <FileUpload 
+          {...baseProps} 
+          accept="application/pdf,image/*"
+          onUploadSuccess={onUploadSuccess} 
+          showProgress 
+          showPreview={false} 
+        />
+      );
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.pdf', 'application/pdf', 1024);
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      await waitFor(() => {
+        expect(screen.getByText('test.pdf')).toBeInTheDocument();
+        // File icon should be shown (emoji or icon)
+        const fileIcon = document.querySelector('.w-12.h-12');
+        expect(fileIcon).toBeInTheDocument();
+      });
+    });
+
+    it('shows loading spinner when showProgress is false', async () => {
+      // Mock a slow upload to ensure spinner appears
+      let resolveUpload: (value: ReturnType<typeof createMockUploadResult>) => void;
+      const slowUploadPromise = new Promise<ReturnType<typeof createMockUploadResult>>((resolve) => {
+        resolveUpload = resolve;
+      });
+
+      mockUseFileReference.mockReturnValue({
+        uploadFile: vi.fn(() => slowUploadPromise),
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(<FileUpload {...baseProps} showProgress={false} />);
+
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      // Wait for spinner to appear
+      await waitFor(() => {
+        const spinnerContainer = screen.getByRole('status', { name: 'Uploading file' });
+        const spinner = spinnerContainer.querySelector('.animate-spin');
+        expect(spinner).toBeInTheDocument();
+      });
+
+      // Resolve upload to clean up
+      resolveUpload!(createMockUploadResult());
+    });
   });
 
-  it('shows app ID resolution error when app_id is not provided and cannot be resolved', async () => {
-    // Force resolver failure for this test
-    mockGetCurrentAppName.mockReturnValueOnce(undefined as any);
-    mockGetAppId.mockResolvedValueOnce(null as any);
+  describe('App ID Resolution', () => {
+    it('uses provided app_id directly', () => {
+      renderWithProviders(<FileUpload {...baseProps} app_id="provided-app-id" />);
+      expect(screen.queryByText(/Resolving app configuration/i)).not.toBeInTheDocument();
+    });
+
+    it('resolves app_id from app name when not provided', async () => {
+      renderWithProviders(
+        <FileUpload
+          {...baseProps}
+          app_id={undefined as unknown as string}
+        />
+      );
+
+      await waitFor(() => {
+        expect(mockGetCurrentAppName).toHaveBeenCalled();
+        expect(mockGetAppId).toHaveBeenCalled();
+      });
+    });
+
+    it('shows error when app_id cannot be resolved', async () => {
+      mockGetCurrentAppName.mockReturnValueOnce(undefined);
+      mockGetAppId.mockResolvedValueOnce(null);
 
-    const { rerender } = renderWithProviders(
-      <FileUpload
-        {...baseProps}
-        // force resolution path
-        app_id={undefined as unknown as string}
-      />
-    );
+      renderWithProviders(
+        <FileUpload
+          {...baseProps}
+          app_id={undefined as unknown as string}
+        />
+      );
 
-    // Error should appear when app id cannot be resolved
-    await screen.findByText(/App ID is required/i);
+      await waitFor(() => {
+        expect(screen.getByText(/App ID is required/i)).toBeInTheDocument();
+      });
+    });
+
+    it('shows error when app name is not set', async () => {
+      mockGetCurrentAppName.mockReturnValueOnce(undefined);
+      mockGetAppId.mockResolvedValueOnce(null);
 
-    // cleanup mock side-effects and re-render with explicit app_id to avoid impact on other tests
-    rerender(<FileUpload {...baseProps} />);
+      renderWithProviders(
+        <FileUpload
+          {...baseProps}
+          app_id={undefined as unknown as string}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/App ID is required/i)).toBeInTheDocument();
+      });
+    });
   });
-});
 
-/**
- * @file FileUpload Component Tests (moved into component directory)
- */
+  describe('Keyboard Navigation', () => {
+    it('triggers file input click on Enter key', () => {
+      renderWithProviders(<FileUpload {...baseProps} />);
+      const dropArea = screen.getByRole('button', { name: 'File upload area' });
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const clickSpy = vi.spyOn(input, 'click');
 
-import React from 'react';
-import { screen, waitFor, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { vi } from 'vitest';
-import { FileUpload } from './index';
-import { FileCategory } from '../../types/file-reference';
-import { renderWithProviders, createMockSupabaseClient } from '../../__tests__/helpers/test-utils';
+      fireEvent.keyDown(dropArea, { key: 'Enter' });
+      expect(clickSpy).toHaveBeenCalled();
+    });
 
-// Mock dependencies
-import * as useFileReferenceModule from '../../hooks/useFileReference';
-import * as appNameResolver from '../../utils/app/appNameResolver';
-import * as appIdResolver from '../../utils/app/appIdResolver';
+    it('triggers file input click on Space key', () => {
+      renderWithProviders(<FileUpload {...baseProps} />);
+      const dropArea = screen.getByRole('button', { name: 'File upload area' });
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const clickSpy = vi.spyOn(input, 'click');
 
-const mockUseFileReference = vi.fn();
-const mockGetCurrentAppName = vi.fn();
-const mockGetAppId = vi.fn();
+      fireEvent.keyDown(dropArea, { key: ' ' });
+      expect(clickSpy).toHaveBeenCalled();
+    });
 
-beforeEach(() => {
-  vi.clearAllMocks();
+    it('does not trigger click when disabled', () => {
+      renderWithProviders(<FileUpload {...baseProps} disabled />);
+      const dropArea = screen.getByRole('button', { name: 'File upload area' });
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const clickSpy = vi.spyOn(input, 'click');
 
-  mockUseFileReference.mockReturnValue({
-    uploadFile: vi.fn(),
-    isLoading: false,
-    error: null
+      fireEvent.keyDown(dropArea, { key: 'Enter' });
+      expect(clickSpy).not.toHaveBeenCalled();
+    });
   });
 
-  mockGetCurrentAppName.mockReturnValue('test-app');
-  mockGetAppId.mockResolvedValue('test-app-id');
+  describe('Disabled State', () => {
+    it('disables file input when disabled prop is true', () => {
+      renderWithProviders(<FileUpload {...baseProps} disabled />);
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      expect(input.disabled).toBe(true);
+    });
 
-  vi.spyOn(useFileReferenceModule, 'useFileReference').mockImplementation(mockUseFileReference as any);
-  vi.spyOn(appNameResolver, 'getCurrentAppName').mockImplementation(mockGetCurrentAppName as any);
-  vi.spyOn(appIdResolver, 'getAppId').mockImplementation(mockGetAppId as any);
-});
+    it('disables interaction when uploading', async () => {
+      // Mock a slow upload to ensure disabled state is visible
+      let resolveUpload: (value: ReturnType<typeof createMockUploadResult>) => void;
+      const slowUploadPromise = new Promise<ReturnType<typeof createMockUploadResult>>((resolve) => {
+        resolveUpload = resolve;
+      });
+
+      mockUseFileReference.mockReturnValue({
+        uploadFile: vi.fn(() => slowUploadPromise),
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProviders(<FileUpload {...baseProps} showProgress />);
+      const input = screen.getByTestId('file-input') as HTMLInputElement;
+      const file = createTestFile('test.png', 'image/png');
+
+      await act(async () => {
+        fireEvent.change(input, { target: { files: [file] } });
+      });
+
+      // Check that input is disabled during upload
+      await waitFor(() => {
+        const updatedInput = screen.getByTestId('file-input') as HTMLInputElement;
+        expect(updatedInput.disabled).toBe(true);
+      });
+
+      // Resolve upload to clean up
+      resolveUpload!(createMockUploadResult());
+    });
+  });
 
-afterEach(() => {
-  vi.restoreAllMocks();
-});
+  describe('Error Display', () => {
+    it('displays hook error when present', () => {
+      mockUseFileReference.mockReturnValue({
+        uploadFile: vi.fn(),
+        isLoading: false,
+        error: 'Hook error message',
+      });
+
+      renderWithProviders(<FileUpload {...baseProps} />);
+      expect(screen.getByText('Hook error message')).toBeInTheDocument();
+    });
+
+    it('displays app ID resolution error', async () => {
+      mockGetCurrentAppName.mockReturnValueOnce(undefined);
+      mockGetAppId.mockResolvedValueOnce(null);
 
-const defaultProps = {
-  supabase: createMockSupabaseClient(),
-  table_name: 'test_table',
-  record_id: 'test-record-123',
-  organisation_id: 'test-org-123',
-  category: FileCategory.GENERAL_DOCUMENTS
-};
-
-const createTestFile = (name = 'test.pdf', type = 'application/pdf', size = 1024) => {
-  return new File(['test content'], name, { type, size });
-};
-
-// Reuse the original test suite by importing the same test logic here would be ideal,
-// but for brevity we rely on the existing tests that were already validated at the previous path.
-// This file exists to ensure path relocation works; full assertions remain identical to original.
-
-describe('FileUpload Component (relocated)', () => {
-  it('renders with default props', () => {
-    renderWithProviders(<FileUpload {...defaultProps} app_id="test-app-id" />);
-    expect(screen.getByText((txt) => txt.includes('Click to upload'))).toBeInTheDocument();
+      renderWithProviders(
+        <FileUpload
+          {...baseProps}
+          app_id={undefined as unknown as string}
+        />
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText(/App ID is required/i)).toBeInTheDocument();
+      });
+    });
   });
 });