@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/FileDisplay/FileDisplay.test.tsx

@@ -13,10 +13,16 @@ const mockUseIsPublicPage = vi.hoisted(() => vi.fn(() => false));
 const publicPageContextStore = vi.hoisted(() => ({ value: null as React.Context<any> | null }));
 
 // Mock useIsPublicPage to return false so FileDisplay uses authenticated version by default
-vi.mock('../PublicLayout/PublicPageProvider', () => {
-  publicPageContextStore.value = React.createContext(null);
+vi.mock('../PublicLayout/usePublicPageContext', () => {
   return {
     useIsPublicPage: (...args: unknown[]) => mockUseIsPublicPage(...args),
+  };
+});
+
+// Mock PublicPageContext
+vi.mock('../PublicLayout/PublicPageContext', () => {
+  publicPageContextStore.value = React.createContext(null);
+  return {
     PublicPageContext: publicPageContextStore.value,
   };
 });
@@ -31,11 +37,11 @@ vi.mock('../../hooks/useFileReference', () => ({
 }));
 
 // Mock useFileDisplay hook which is used by FileDisplayAuthenticated
-vi.mock('../../hooks/useFileDisplay', () => ({
+vi.mock('./useFileDisplay', () => ({
   useFileDisplay: vi.fn()
 }));
 
-vi.mock('../../hooks/public/usePublicFileDisplay', () => ({
+vi.mock('./usePublicFileDisplay', () => ({
   usePublicFileDisplay: vi.fn()
 }));
 
@@ -45,7 +51,7 @@ vi.mock('../../hooks/useFileUrl', () => ({
 
 vi.mock('../../utils/storage/helpers', () => ({
   getPublicUrl: vi.fn((_, path: string) => `https://example.com/${path}`),
-  getSignedUrl: vi.fn(async (_: unknown, path: string) => ({ url: `https://signed.example.com/${path}` })),
+  getSignedUrl: vi.fn(async (_: unknown, path: string) => ({ ok: true, data: { url: `https://signed.example.com/${path}`, expiresAt: new Date().toISOString() } })),
 }));
 
 // Helper to render with UnifiedAuthProvider
@@ -96,7 +102,7 @@ describe('[component] FileDisplay', () => {
     });
     
     // Set up default mock for useFileDisplay
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -108,7 +114,7 @@ describe('[component] FileDisplay', () => {
       refetch: vi.fn(),
     });
 
-    const usePublicFileDisplay = (await import('../../hooks/public/usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
+    const usePublicFileDisplay = (await import('./usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
     usePublicFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -132,7 +138,7 @@ describe('[component] FileDisplay', () => {
 
   it('renders error state and clears error on retry', async () => {
     const refetch = vi.fn();
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: new Error('boom'),
@@ -153,7 +159,7 @@ describe('[component] FileDisplay', () => {
   });
 
   it('renders empty state when no files are found', async () => {
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -183,7 +189,7 @@ describe('[component] FileDisplay', () => {
     const fileUrlsMap = new Map<string, string>();
     fileUrlsMap.set('fr-1', 'https://example.com/file.png');
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -212,7 +218,7 @@ describe('[component] FileDisplay', () => {
       try {
         const dialog = screen.getByRole('dialog');
         expect(dialog).toBeInTheDocument();
-      } catch (e) {
+      } catch (_e) {
         // Fallback for test environments - just check that dialog exists in DOM
         const dialog = document.querySelector('dialog[role="dialog"]');
         if (!dialog) {
@@ -241,7 +247,7 @@ describe('[component] FileDisplay', () => {
       file_metadata: { fileName: 'report.pdf', fileSize: 4096, fileType: 'application/pdf' },
     };
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -285,7 +291,7 @@ describe('[component] FileDisplay', () => {
     fileUrlsMap.set('f1', 'https://example.com/bucket/path/a.png');
     fileUrlsMap.set('f2', 'https://signed.example.com/bucket/path/b.pdf');
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -338,7 +344,7 @@ describe('[component] FileDisplay', () => {
     const fileUrlsMap = new Map<string, string>();
     fileUrlsMap.set('fr-3', 'https://example.com/logo.png');
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -379,7 +385,7 @@ describe('[component] FileDisplay', () => {
     const fileUrlsMap = new Map<string, string>();
     fileUrlsMap.set('fr-4', 'https://example.com/logo.png');
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -409,7 +415,7 @@ describe('[component] FileDisplay', () => {
       try {
         const dialog = screen.getByRole('dialog');
         expect(dialog).toBeInTheDocument();
-      } catch (e) {
+      } catch (_e) {
         // Fallback for test environments - just check that dialog exists in DOM
         const dialog = document.querySelector('dialog[role="dialog"]');
         if (!dialog) {
@@ -448,7 +454,7 @@ describe('[component] FileDisplay', () => {
     const fileUrlsMap = new Map<string, string>();
     fileUrlsMap.set('fr-img', 'https://example.com/image.png');
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -472,7 +478,7 @@ describe('[component] FileDisplay', () => {
   });
 
   it('renders fallback UI when showFallback is enabled and an error occurs', async () => {
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: new Error('explode'),
@@ -503,7 +509,7 @@ describe('[component] FileDisplay', () => {
       file_metadata: { fileName: 'doc.pdf', fileSize: 1024, fileType: 'application/pdf' },
     };
 
-    const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+    const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
     useFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -564,7 +570,7 @@ describe('[component] FileDisplay', () => {
     };
 
     const fileUrlsMap = new Map<string, string>([['pub-1', 'https://public.example.com/hero.png']]);
-    const usePublicFileDisplay = (await import('../../hooks/public/usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
+    const usePublicFileDisplay = (await import('./usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
     usePublicFileDisplay.mockReturnValue({
       isLoading: false,
       error: null,
@@ -587,18 +593,21 @@ describe('[component] FileDisplay', () => {
   });
 
   describe('Document link rendering in displayOnly mode', () => {
-    it('renders non-image files as clickable links when displayOnly is true and fileUrl exists', async () => {
-      const pdfFile = {
-        id: 'fr-pdf',
-        table_name: 'person',
-        record_id: 'rec-1',
-        organisation_id: 'org-1',
-        file_path: 'bucket/path/document.pdf',
-        is_public: false,
-        file_metadata: { fileName: 'document.pdf', fileSize: 2048, fileType: 'application/pdf' },
-      };
+    const createNonImageFile = (id: string, fileName: string, fileType: string) => ({
+      id,
+      table_name: 'person',
+      record_id: 'rec-1',
+      organisation_id: 'org-1',
+      file_path: `bucket/path/${fileName}`,
+      is_public: false,
+      file_metadata: { fileName, fileSize: 2048, fileType },
+    });
+
+    it('renders non-image files as clickable links with correct attributes', async () => {
+      const pdfFile = createNonImageFile('fr-pdf', 'document.pdf', 'application/pdf');
+      const fileUrlsMap = new Map([['fr-pdf', 'https://signed.example.com/document.pdf']]);
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
@@ -606,88 +615,59 @@ describe('[component] FileDisplay', () => {
         fileReference: pdfFile,
         fileReferences: [pdfFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/document.pdf']]),
+        fileUrls: fileUrlsMap,
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl to return URL from map (since it's in the map, hook won't be used, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
-        isLoading: false,
-        error: null,
-        clear: vi.fn(),
-      });
-
       renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
 
       const link = await screen.findByRole('link', { name: /Open document\.pdf in new tab/i });
-      expect(link).toBeInTheDocument();
       expect(link).toHaveAttribute('href', 'https://signed.example.com/document.pdf');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+      expect(link).toHaveTextContent('document.pdf');
     });
 
-    it('renders link with target="_blank" for new tab', async () => {
-      const docFile = {
-        id: 'fr-doc',
-        table_name: 'person',
-        record_id: 'rec-1',
-        organisation_id: 'org-1',
-        file_path: 'bucket/path/file.docx',
-        is_public: false,
-        file_metadata: { fileName: 'file.docx', fileSize: 4096, fileType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
-      };
+    it('renders icons in document links', async () => {
+      const pdfFile = createNonImageFile('fr-pdf', 'doc.pdf', 'application/pdf');
+      const fileUrlsMap = new Map([['fr-pdf', 'https://signed.example.com/doc.pdf']]);
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/file.docx',
-        fileReference: docFile,
-        fileReferences: [docFile],
+        fileUrl: 'https://signed.example.com/doc.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-doc', 'https://signed.example.com/file.docx']]),
+        fileUrls: fileUrlsMap,
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
-        isLoading: false,
-        error: null,
-        clear: vi.fn(),
-      });
-
       renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
 
       const link = await screen.findByRole('link');
-      expect(link).toHaveAttribute('target', '_blank');
+      const fileTextIcon = link.querySelector('[data-testid="lucide-filetext"]');
+      const externalLinkIcon = link.querySelector('[data-testid="lucide-externallink"]');
+      expect(fileTextIcon).toBeInTheDocument();
+      expect(externalLinkIcon).toBeInTheDocument();
     });
 
-    it('renders link with rel="noopener noreferrer" for security', async () => {
-      const excelFile = {
-        id: 'fr-xls',
-        table_name: 'person',
-        record_id: 'rec-1',
-        organisation_id: 'org-1',
-        file_path: 'bucket/path/spreadsheet.xlsx',
-        is_public: false,
-        file_metadata: { fileName: 'spreadsheet.xlsx', fileSize: 8192, fileType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
-      };
+    it('falls back to fallback UI when fileUrl is null', async () => {
+      const pdfFile = createNonImageFile('fr-pdf', 'doc.pdf', 'application/pdf');
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/spreadsheet.xlsx',
-        fileReference: excelFile,
-        fileReferences: [excelFile],
+        fileUrl: null,
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-xls', 'https://signed.example.com/spreadsheet.xlsx']]),
+        fileUrls: new Map(),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
       const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
       useFileUrl.mockReturnValue({
         url: null,
@@ -696,133 +676,269 @@ describe('[component] FileDisplay', () => {
         clear: vi.fn(),
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showFallback fallbackText="View Document" />);
 
-      const link = await screen.findByRole('link');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+      expect(await screen.findByText('View Document')).toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
     });
 
-    it('displays correct filename in link', async () => {
-      const pdfFile = {
-        id: 'fr-pdf',
+    it('renders images inline in displayOnly mode (not as links)', async () => {
+      const imageFile = {
+        id: 'fr-img',
         table_name: 'person',
         record_id: 'rec-1',
         organisation_id: 'org-1',
-        file_path: 'bucket/path/my-document.pdf',
+        file_path: 'bucket/path/image.png',
         is_public: false,
-        file_metadata: { fileName: 'my-document.pdf', fileSize: 2048, fileType: 'application/pdf' },
+        file_metadata: { fileName: 'image.png', fileSize: 1024, fileType: 'image/png' },
       };
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/my-document.pdf',
-        fileReference: pdfFile,
-        fileReferences: [pdfFile],
+        fileUrl: 'https://signed.example.com/image.png',
+        fileReference: imageFile,
+        fileReferences: [imageFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/my-document.pdf']]),
+        fileUrls: new Map([['fr-img', 'https://signed.example.com/image.png']]),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+
+      const image = await screen.findByRole('img', { name: /image\.png/i });
+      expect(image).toBeInTheDocument();
+      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    });
+
+    it('uses wrapper behavior when showDelete is true', async () => {
+      const pdfFile = createNonImageFile('fr-pdf', 'doc.pdf', 'application/pdf');
+
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        clear: vi.fn(),
+        fileUrl: 'https://signed.example.com/doc.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/doc.pdf']]),
+        refetch: vi.fn(),
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showDelete />);
 
-      const link = await screen.findByRole('link');
-      expect(link).toHaveTextContent('my-document.pdf');
+      expect(screen.getByText('doc.pdf')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Delete file/i })).toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: /Open.*in new tab/i })).not.toBeInTheDocument();
     });
 
-    it('renders FileText and ExternalLink icons', async () => {
+    it('renders document links in public context', async () => {
+      mockUseIsPublicPage.mockReturnValueOnce(true);
+
       const pdfFile = {
-        id: 'fr-pdf',
-        table_name: 'person',
-        record_id: 'rec-1',
+        id: 'pub-pdf',
+        table_name: 'event',
+        record_id: 'event-1',
         organisation_id: 'org-1',
-        file_path: 'bucket/path/doc.pdf',
-        is_public: false,
-        file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+        file_path: 'bucket/path/public-doc.pdf',
+        is_public: true,
+        file_metadata: { fileName: 'public-doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
       };
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
-      useFileDisplay.mockReturnValue({
+      const fileUrlsMap = new Map<string, string>([['pub-pdf', 'https://public.example.com/public-doc.pdf']]);
+      const usePublicFileDisplay = (await import('./usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
+      usePublicFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/doc.pdf',
+        fileUrl: 'https://public.example.com/public-doc.pdf',
         fileReference: pdfFile,
         fileReferences: [pdfFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/doc.pdf']]),
+        fileUrls: fileUrlsMap,
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      renderWithPublicContext(
+        <FileDisplay {...baseProps} displayOnly />,
+        { supabase }
+      );
+
+      const link = await screen.findByRole('link', { name: /Open public-doc\.pdf in new tab/i });
+      expect(link).toHaveAttribute('href', 'https://public.example.com/public-doc.pdf');
+      expect(link).toHaveAttribute('target', '_blank');
+      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+
+    it('uses fallback text "Document" when fileName is missing', async () => {
+      const pdfFile = createNonImageFile('fr-pdf', '', 'application/pdf');
+      pdfFile.file_metadata.fileName = '';
+
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        clear: vi.fn(),
+        fileUrl: 'https://signed.example.com/file.pdf',
+        fileReference: pdfFile,
+        fileReferences: [pdfFile],
+        fileCount: 1,
+        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/file.pdf']]),
+        refetch: vi.fn(),
       });
 
       renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
 
-      const link = await screen.findByRole('link');
-      // Icons should be present (they have aria-hidden="true")
-      // Icons are mocked as divs with data-testid in tests
-      const fileTextIcon = link.querySelector('[data-testid="lucide-filetext"]');
-      const externalLinkIcon = link.querySelector('[data-testid="lucide-externallink"]');
-      expect(fileTextIcon).toBeInTheDocument();
-      expect(externalLinkIcon).toBeInTheDocument();
+      const link = await screen.findByRole('link', { name: /Open Document in new tab/i });
+      expect(link).toHaveTextContent('Document');
     });
+  });
 
-    it('falls back to existing behavior when fileUrl is null', async () => {
-      const pdfFile = {
-        id: 'fr-pdf',
-        table_name: 'person',
-        record_id: 'rec-1',
-        organisation_id: 'org-1',
-        file_path: 'bucket/path/doc.pdf',
-        is_public: false,
-        file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
-      };
+  describe('Loading States', () => {
+    it('renders loading spinner when isLoading is true', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: true,
+        error: null,
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} />);
+
+      // LoadingSpinner should be rendered
+      const spinner = screen.getByRole('status', { hidden: true }) || document.querySelector('[data-testid="loading-spinner"]');
+      expect(spinner || screen.getByText(/loading/i)).toBeDefined();
+    });
+
+    it('uses custom loading component when provided', async () => {
+      const CustomLoader = () => <div data-testid="custom-loader">Custom Loading...</div>;
+      
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: true,
+        error: null,
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} loadingComponent={CustomLoader} />);
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      expect(screen.getByTestId('custom-loader')).toBeInTheDocument();
+      expect(screen.getByText('Custom Loading...')).toBeInTheDocument();
+    });
+
+    it('shows fallback during loading when showFallback is enabled and fileCount is 0', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: true,
+        error: null,
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} showFallback fallbackText="Loading..." />);
+
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+    });
+  });
+
+  describe('Fallback UI', () => {
+    it('generates fallback text from filename when generateFallbackText is provided', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
         fileUrl: null,
-        fileReference: pdfFile,
-        fileReferences: [pdfFile],
-        fileCount: 1,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
         fileUrls: new Map(),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl to return null URL so fallback is shown
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      const generateFallback = vi.fn((fileName?: string) => fileName ? fileName.toUpperCase() : 'NO FILE');
+
+      renderWithUnifiedAuth(
+        <FileDisplay
+          {...baseProps}
+          showFallback
+          generateFallbackText={generateFallback}
+        />
+      );
+
+      expect(generateFallback).toHaveBeenCalled();
+    });
+
+    it('uses fallbackSourceText when provided', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        clear: vi.fn(),
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showFallback fallbackText="View Document" />);
+      const generateFallback = vi.fn((sourceText?: string) => sourceText || 'DEFAULT');
 
-      // Should show fallback, not a link
-      expect(await screen.findByText('View Document')).toBeInTheDocument();
-      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      renderWithUnifiedAuth(
+        <FileDisplay
+          {...baseProps}
+          showFallback
+          fallbackSourceText="Custom Source"
+          generateFallbackText={generateFallback}
+        />
+      );
+
+      expect(generateFallback).toHaveBeenCalledWith('Custom Source');
+    });
+
+    it('applies correct fallback size classes', async () => {
+      const sizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'> = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+      
+      for (const size of sizes) {
+        const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+        useFileDisplay.mockReturnValue({
+          isLoading: false,
+          error: null,
+          fileUrl: null,
+          fileReference: null,
+          fileReferences: [],
+          fileCount: 0,
+          fileUrls: new Map(),
+          refetch: vi.fn(),
+        });
+
+        const { unmount } = renderWithUnifiedAuth(
+          <FileDisplay {...baseProps} showFallback fallbackText="Test" fallbackSize={size} />
+        );
+
+        const fallback = screen.getByText('Test');
+        expect(fallback).toBeInTheDocument();
+        // Check that size class is applied (classes contain size-specific text)
+        expect(fallback.className).toContain('grid');
+        
+        unmount();
+      }
     });
 
-    it('still renders images inline (no regression)', async () => {
+    it('shows fallback when image fails to load and showFallback is enabled', async () => {
       const imageFile = {
         id: 'fr-img',
         table_name: 'person',
@@ -833,188 +949,304 @@ describe('[component] FileDisplay', () => {
         file_metadata: { fileName: 'image.png', fileSize: 1024, fileType: 'image/png' },
       };
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/image.png',
+        fileUrl: 'https://example.com/image.png',
         fileReference: imageFile,
         fileReferences: [imageFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-img', 'https://signed.example.com/image.png']]),
+        fileUrls: new Map([['fr-img', 'https://example.com/image.png']]),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      renderWithUnifiedAuth(
+        <FileDisplay {...baseProps} showFallback fallbackText="IMG" category={FileCategory.IMAGES} />
+      );
+
+      const image = await screen.findByRole('img', { name: /image\.png/i });
+      
+      // Simulate image error
+      act(() => {
+        const errorEvent = new Event('error', { bubbles: true });
+        image.dispatchEvent(errorEvent);
+      });
+
+      // Should show fallback after error
+      await waitFor(() => {
+        expect(screen.getByText('IMG')).toBeInTheDocument();
+      }, { timeout: 2000 });
+    });
+  });
+
+  describe('Metadata Display', () => {
+    it('shows metadata by default', async () => {
+      const file = {
+        id: 'fr-1',
+        table_name: 'person',
+        record_id: 'rec-1',
+        organisation_id: 'org-1',
+        file_path: 'bucket/path/file.pdf',
+        is_public: false,
+        file_metadata: { fileName: 'file.pdf', fileSize: 2048, fileType: 'application/pdf' },
+      };
+
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        clear: vi.fn(),
+        fileUrl: null,
+        fileReference: file,
+        fileReferences: [file],
+        fileCount: 1,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} category={FileCategory.IMAGES} />);
 
-      const image = await screen.findByRole('img', { name: /image\.png/i });
-      expect(image).toBeInTheDocument();
-      expect(screen.queryByRole('link')).not.toBeInTheDocument();
+      expect(await screen.findByText('file.pdf')).toBeInTheDocument();
+      expect(screen.getByText(/application\/pdf/i)).toBeInTheDocument();
     });
 
-    it('uses wrapper behavior when showDelete is true', async () => {
-      const pdfFile = {
-        id: 'fr-pdf',
+    it('hides metadata when showMetadata is false', async () => {
+      const file = {
+        id: 'fr-1',
         table_name: 'person',
         record_id: 'rec-1',
         organisation_id: 'org-1',
-        file_path: 'bucket/path/doc.pdf',
+        file_path: 'bucket/path/file.pdf',
         is_public: false,
-        file_metadata: { fileName: 'doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+        file_metadata: { fileName: 'file.pdf', fileSize: 2048, fileType: 'application/pdf' },
       };
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/doc.pdf',
-        fileReference: pdfFile,
-        fileReferences: [pdfFile],
+        fileUrl: null,
+        fileReference: file,
+        fileReferences: [file],
         fileCount: 1,
-        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/doc.pdf']]),
+        fileUrls: new Map(),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} category={FileCategory.IMAGES} showMetadata={false} />);
+
+      // File name might still be in alt text or title, but metadata section should not be visible
+      const figcaption = document.querySelector('figcaption');
+      expect(figcaption).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Children Rendering', () => {
+    it('renders children in empty state', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        clear: vi.fn(),
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly showDelete />);
+      renderWithUnifiedAuth(
+        <FileDisplay {...baseProps}>
+          <button>Custom Action</button>
+        </FileDisplay>
+      );
 
-      // Should show wrapper with delete button, not simplified link
-      expect(screen.getByText('doc.pdf')).toBeInTheDocument();
-      expect(screen.getByRole('button', { name: /Delete file/i })).toBeInTheDocument();
-      // Should not be a simplified link (no link with target="_blank" in simplified form)
-      const link = screen.queryByRole('link', { name: /Open.*in new tab/i });
-      expect(link).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Custom Action' })).toBeInTheDocument();
     });
 
-    it('renders document links in public context', async () => {
-      mockUseIsPublicPage.mockReturnValueOnce(true);
-
-      const pdfFile = {
-        id: 'pub-pdf',
-        table_name: 'event',
-        record_id: 'event-1',
+    it('renders children in single file display', async () => {
+      const file = {
+        id: 'fr-1',
+        table_name: 'person',
+        record_id: 'rec-1',
         organisation_id: 'org-1',
-        file_path: 'bucket/path/public-doc.pdf',
-        is_public: true,
-        file_metadata: { fileName: 'public-doc.pdf', fileSize: 2048, fileType: 'application/pdf' },
+        file_path: 'bucket/path/file.png',
+        is_public: false,
+        file_metadata: { fileName: 'file.png', fileSize: 1024, fileType: 'image/png' },
       };
 
-      const fileUrlsMap = new Map<string, string>([['pub-pdf', 'https://public.example.com/public-doc.pdf']]);
-      const usePublicFileDisplay = (await import('../../hooks/public/usePublicFileDisplay')).usePublicFileDisplay as unknown as vi.Mock;
-      usePublicFileDisplay.mockReturnValue({
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://public.example.com/public-doc.pdf',
-        fileReference: pdfFile,
-        fileReferences: [pdfFile],
+        fileUrl: 'https://example.com/file.png',
+        fileReference: file,
+        fileReferences: [file],
         fileCount: 1,
-        fileUrls: fileUrlsMap,
+        fileUrls: new Map([['fr-1', 'https://example.com/file.png']]),
         refetch: vi.fn(),
       });
 
-      renderWithPublicContext(
-        <FileDisplay {...baseProps} displayOnly />,
-        { supabase }
+      renderWithUnifiedAuth(
+        <FileDisplay {...baseProps} category={FileCategory.IMAGES}>
+          <button>Custom Button</button>
+        </FileDisplay>
       );
 
-      const link = await screen.findByRole('link', { name: /Open public-doc\.pdf in new tab/i });
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveAttribute('href', 'https://public.example.com/public-doc.pdf');
-      expect(link).toHaveAttribute('target', '_blank');
-      expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+      expect(await screen.findByRole('img', { name: /file\.png/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Custom Button' })).toBeInTheDocument();
     });
 
-    it('includes proper ARIA label for accessibility', async () => {
-      const pdfFile = {
-        id: 'fr-pdf',
+    it('renders children in displayOnly mode when enableChildren is true', async () => {
+      const file = {
+        id: 'fr-1',
         table_name: 'person',
         record_id: 'rec-1',
         organisation_id: 'org-1',
-        file_path: 'bucket/path/accessible.pdf',
+        file_path: 'bucket/path/file.png',
         is_public: false,
-        file_metadata: { fileName: 'accessible.pdf', fileSize: 2048, fileType: 'application/pdf' },
+        file_metadata: { fileName: 'file.png', fileSize: 1024, fileType: 'image/png' },
       };
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/accessible.pdf',
-        fileReference: pdfFile,
-        fileReferences: [pdfFile],
+        fileUrl: 'https://example.com/file.png',
+        fileReference: file,
+        fileReferences: [file],
         fileCount: 1,
-        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/accessible.pdf']]),
+        fileUrls: new Map([['fr-1', 'https://example.com/file.png']]),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      renderWithUnifiedAuth(
+        <FileDisplay {...baseProps} displayOnly enableChildren>
+          <button>Child Button</button>
+        </FileDisplay>
+      );
+
+      expect(await screen.findByRole('img', { name: /file\.png/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Child Button' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('uses custom error component when provided', async () => {
+      const CustomError = ({ error, retry }: { error: Error | string | null; retry?: () => void }) => (
+        <div data-testid="custom-error">
+          <p>Custom Error: {error instanceof Error ? error.message : String(error)}</p>
+          {retry && <button onClick={retry}>Retry</button>}
+        </div>
+      );
+
+      const refetch = vi.fn();
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
-        error: null,
-        clear: vi.fn(),
+        error: new Error('Test error'),
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch,
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} errorComponent={CustomError} />);
 
-      const link = await screen.findByRole('link', { name: /Open accessible\.pdf in new tab/i });
-      expect(link).toHaveAttribute('aria-label', 'Open accessible.pdf in new tab');
+      expect(screen.getByTestId('custom-error')).toBeInTheDocument();
+      expect(screen.getByText(/Custom Error: Test error/i)).toBeInTheDocument();
+      
+      const retryButton = screen.getByRole('button', { name: 'Retry' });
+      await userEvent.click(retryButton);
+      expect(refetch).toHaveBeenCalled();
     });
 
-    it('uses fallback text "Document" when fileName is missing', async () => {
-      const pdfFile = {
-        id: 'fr-pdf',
+    it('handles string error messages', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: 'String error message',
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} />);
+
+      expect(screen.getByText(/Error loading file: String error message/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Category Filtering', () => {
+    it('filters files by category when category is specified', async () => {
+      const imageFile = {
+        id: 'fr-img',
         table_name: 'person',
         record_id: 'rec-1',
         organisation_id: 'org-1',
-        file_path: 'bucket/path/file.pdf',
+        file_path: 'bucket/path/image.png',
         is_public: false,
-        file_metadata: { fileName: '', fileSize: 2048, fileType: 'application/pdf' },
+        file_metadata: { fileName: 'image.png', fileSize: 1024, fileType: 'image/png', category: FileCategory.IMAGES },
       };
 
-      const useFileDisplay = (await import('../../hooks/useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
       useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        fileUrl: 'https://signed.example.com/file.pdf',
-        fileReference: pdfFile,
-        fileReferences: [pdfFile],
+        fileUrl: 'https://example.com/image.png',
+        fileReference: imageFile,
+        fileReferences: [imageFile],
         fileCount: 1,
-        fileUrls: new Map([['fr-pdf', 'https://signed.example.com/file.pdf']]),
+        fileUrls: new Map([['fr-img', 'https://example.com/image.png']]),
         refetch: vi.fn(),
       });
 
-      // Mock useFileUrl (won't be used since URL is in map, but mock it anyway)
-      const useFileUrl = (await import('../../hooks/useFileUrl')).useFileUrl as unknown as vi.Mock;
-      useFileUrl.mockReturnValue({
-        url: null,
+      renderWithUnifiedAuth(<FileDisplay {...baseProps} category={FileCategory.IMAGES} />);
+
+      expect(await screen.findByRole('img', { name: /image\.png/i })).toBeInTheDocument();
+    });
+  });
+
+  describe('Organisation ID Handling', () => {
+    it('handles undefined organisation_id', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
         isLoading: false,
         error: null,
-        clear: vi.fn(),
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
       });
 
-      renderWithUnifiedAuth(<FileDisplay {...baseProps} displayOnly />);
+      renderWithUnifiedAuth(<FileDisplay table_name="person" record_id="rec-1" />);
 
-      const link = await screen.findByRole('link', { name: /Open Document in new tab/i });
-      expect(link).toHaveTextContent('Document');
+      expect(screen.getByText(/No files found/i)).toBeInTheDocument();
+    });
+
+    it('handles null organisation_id', async () => {
+      const useFileDisplay = (await import('./useFileDisplay')).useFileDisplay as unknown as vi.Mock;
+      useFileDisplay.mockReturnValue({
+        isLoading: false,
+        error: null,
+        fileUrl: null,
+        fileReference: null,
+        fileReferences: [],
+        fileCount: 0,
+        fileUrls: new Map(),
+        refetch: vi.fn(),
+      });
+
+      renderWithUnifiedAuth(<FileDisplay table_name="person" record_id="rec-1" organisation_id={null} />);
+
+      expect(screen.getByText(/No files found/i)).toBeInTheDocument();
     });
   });
 });