@jmruthers/pace-core 0.5.68 → 0.5.70

package/src/components/Toast/Toast.test.tsx

@@ -22,12 +22,11 @@ import { useToast, reset } from '../../hooks/useToast';
 import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 describe('Toast Component System', () => {
+  // Clear toast state before each test
   beforeEach(() => {
-    vi.clearAllMocks();
-    reset(); // Reset toast state between tests
+    reset();
   });
-
-  // ToastProvider component tests
+    // ToastProvider component tests
   describe('ToastProvider Component', () => {
     it('renders provider wrapper', () => {
       renderWithProviders(
@@ -184,7 +183,10 @@ describe('Toast Component System', () => {
       const button = screen.getByText('Show Toast');
       await user.click(button);
       
-      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      // Wait for state to update through the listener system
+      await waitFor(() => {
+        expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      });
     });
 
     it('dismisses toast when dismiss is called', async () => {
@@ -207,13 +209,18 @@ describe('Toast Component System', () => {
       const showButton = screen.getByText('Show Toast');
       await user.click(showButton);
       
-      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      // Wait for toast to be added
+      await waitFor(() => {
+        expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      });
       
       const dismissButton = screen.getByText('Dismiss');
       await user.click(dismissButton);
       
-      // Toast should be marked as closed but still in array
-      expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      // Toast should be marked as closed but still in array (waiting to be removed)
+      await waitFor(() => {
+        expect(screen.getByTestId('toast-count')).toHaveTextContent('1');
+      });
     });
   });
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -26,11 +26,7 @@ const MockButton = ({ children, ...props }: { children: React.ReactNode; [key: s
 const MockIcon = () => <span data-testid="mock-icon">ℹ️</span>;
 
 describe('Tooltip Component Suite', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Tooltip Component', () => {
+    describe('Tooltip Component', () => {
     describe('Rendering', () => {
       it('renders with basic content', () => {
         renderWithProviders(

package/src/components/UserMenu/UserMenu.test.tsx

@@ -164,11 +164,7 @@ const createMockUserWithEmailOnly = (): User => ({
 } as User);
 
 describe('UserMenu Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
+    describe('Rendering', () => {
     it('renders with user information', () => {
       const user = createMockUser();
       renderWithProviders(<UserMenu user={user} />);
@@ -564,11 +560,7 @@ describe('UserMenu Component', () => {
 });
 
 describe('UserMenuLoading Component', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
+    describe('Rendering', () => {
     it('renders loading state', () => {
       renderWithProviders(<UserMenuLoading />);
       
@@ -626,11 +618,7 @@ describe('UserMenuLoading Component', () => {
 });
 
 describe('UserMenu Component Integration', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Complex Scenarios', () => {
+    describe('Complex Scenarios', () => {
     it('handles rapid menu interactions', async () => {
       const user = createMockUser();
       const handleSignOut = vi.fn();

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

@@ -0,0 +1,575 @@
+/**
+ * @file FileDisplay Component Tests
+ * @description Comprehensive test suite for FileDisplay component
+ * @package @jmruthers/pace-core
+ * @module Components/FileDisplay
+ * @since 1.0.0
+ */
+
+import React from 'react';
+import { screen, waitFor, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { FileDisplay } from '../FileDisplay';
+import { renderWithProviders, createMockSupabaseClient } from '../../__tests__/helpers/test-utils';
+import { FileCategory } from '../../types/file-reference';
+
+// Mock the useFileReferenceForRecord hook
+const mockUseFileReferenceForRecord = vi.fn();
+vi.mock('../../hooks/useFileReference', () => ({
+  useFileReferenceForRecord: () => mockUseFileReferenceForRecord(),
+}));
+
+// Mock window.confirm
+const mockConfirm = vi.fn();
+Object.defineProperty(window, 'confirm', {
+  value: mockConfirm,
+  writable: true,
+});
+
+describe('FileDisplay Component', () => {
+  const defaultProps = {
+    supabase: createMockSupabaseClient(),
+    table_name: 'test_table',
+    record_id: 'test_record_123',
+    organisation_id: 'test_org_123',
+  };
+
+  const mockFileReference = {
+    id: 'file_123',
+    table_name: 'test_table',
+    record_id: 'test_record_123',
+    file_path: 'uploads/test-file.jpg',
+    file_metadata: {
+      fileName: 'test-file.jpg',
+      fileType: 'image/jpeg',
+      fileSize: 1024000,
+      category: FileCategory.IMAGES,
+    },
+    organisation_id: 'test_org_123',
+    app_id: 'test_app',
+    is_public: true,
+    created_at: '2023-01-01T00:00:00Z',
+    updated_at: '2023-01-01T00:00:00Z',
+  };
+
+  const mockFileReferences = [
+    mockFileReference,
+    {
+      ...mockFileReference,
+      id: 'file_456',
+      file_metadata: {
+        ...mockFileReference.file_metadata,
+        fileName: 'document.pdf',
+        fileType: 'application/pdf',
+        fileSize: 2048000,
+      },
+    },
+  ];
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfirm.mockReturnValue(true);
+    
+    // Default mock implementation
+    mockUseFileReferenceForRecord.mockReturnValue({
+      isLoading: false,
+      error: null,
+      fileUrl: 'https://example.com/test-file.jpg',
+      fileReference: null,
+      fileReferences: [],
+      fileCount: 0,
+      loadFileReference: vi.fn(),
+      loadFileUrl: vi.fn(),
+      loadFileReferences: vi.fn(),
+      loadFileCount: vi.fn(),
+      deleteFile: vi.fn().mockResolvedValue(true),
+      clearError: vi.fn(),
+    });
+  });
+
+    describe('Rendering', () => {
+    it('renders with basic props', () => {
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      expect(screen.getByText('No files found')).toBeInTheDocument();
+    });
+
+    it('renders with custom className', () => {
+      const { container } = renderWithProviders(
+        <FileDisplay {...defaultProps} className="custom-class" />
+      );
+      expect(container.firstChild).toHaveClass('custom-class');
+    });
+
+    it('renders with children', () => {
+      renderWithProviders(
+        <FileDisplay {...defaultProps}>
+          <div data-testid="custom-child">Custom content</div>
+        </FileDisplay>
+      );
+      expect(screen.getByTestId('custom-child')).toBeInTheDocument();
+    });
+  });
+
+  describe('Loading State', () => {
+    it('shows loading spinner when isLoading is true', () => {
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        isLoading: true,
+      });
+
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      
+      const spinner = document.querySelector('.animate-spin');
+      expect(spinner).toBeInTheDocument();
+      expect(spinner).toHaveClass('animate-spin');
+    });
+  });
+
+  describe('Error State', () => {
+    it('displays error message when error occurs', () => {
+      const errorMessage = 'Failed to load files';
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        error: errorMessage,
+      });
+
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      
+      expect(screen.getByText(`Error loading file: ${errorMessage}`)).toBeInTheDocument();
+    });
+
+    it('calls clearError when try again button is clicked', async () => {
+      const clearError = vi.fn();
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        error: 'Test error',
+        clearError,
+      });
+
+      const user = userEvent.setup();
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      
+      await user.click(screen.getByText('Try again'));
+      expect(clearError).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Empty State', () => {
+    it('shows no files found when fileCount is 0', () => {
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileCount: 0,
+      });
+
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      expect(screen.getByText('No files found')).toBeInTheDocument();
+    });
+  });
+
+  describe('Single File Display', () => {
+    beforeEach(() => {
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+      });
+    });
+
+    it('displays image file with image element', () => {
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} />
+      );
+      
+      const image = screen.getByRole('img');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', 'https://example.com/test-file.jpg');
+      expect(image).toHaveAttribute('alt', 'test-file.jpg');
+    });
+
+    it('displays non-image file with file icon and metadata', () => {
+      const pdfFileReference = {
+        ...mockFileReference,
+        file_metadata: {
+          ...mockFileReference.file_metadata,
+          fileName: 'document.pdf',
+          fileType: 'application/pdf',
+          fileSize: 2048000,
+        },
+      };
+
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: pdfFileReference,
+        fileCount: 1,
+      });
+
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.GENERAL_DOCUMENTS} />
+      );
+      
+      expect(screen.getByText('document.pdf')).toBeInTheDocument();
+      expect(screen.getAllByText((content, element) => 
+        element?.textContent?.includes('1.95 MB') && element?.textContent?.includes('application/pdf') || false
+      )[0]).toBeInTheDocument();
+      expect(screen.getByText('📄')).toBeInTheDocument(); // PDF icon
+    });
+
+    it('handles image load error by showing file icon', async () => {
+      const user = userEvent.setup();
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} />
+      );
+      
+      const image = screen.getByRole('img');
+      await user.click(image); // Trigger error by clicking
+      
+      // Simulate image error
+      fireEvent.error(image);
+      
+      await waitFor(() => {
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+        // Check if the file is still displayed (either as img or text)
+        const imgElement = screen.queryByRole('img', { name: 'test-file.jpg' });
+        const textElement = screen.queryByText('test-file.jpg');
+        expect(imgElement || textElement).toBeInTheDocument();
+      });
+    });
+
+    it('shows delete button when showDelete is true', () => {
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} showDelete />
+      );
+      
+      const deleteButton = screen.getByTitle('Delete file');
+      expect(deleteButton).toBeInTheDocument();
+    });
+
+    it('does not show delete button when showDelete is false', () => {
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} showDelete={false} />
+      );
+      
+      expect(screen.queryByTitle('Delete file')).not.toBeInTheDocument();
+    });
+
+    it('calls deleteFile when delete button is clicked and confirmed', async () => {
+      const deleteFile = vi.fn().mockResolvedValue(true);
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+        deleteFile,
+      });
+
+      const user = userEvent.setup();
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} showDelete />
+      );
+      
+      await user.click(screen.getByTitle('Delete file'));
+      
+      expect(mockConfirm).toHaveBeenCalledWith('Are you sure you want to delete this file?');
+      expect(deleteFile).toHaveBeenCalledWith(true);
+    });
+
+    it('does not delete file when user cancels confirmation', async () => {
+      mockConfirm.mockReturnValue(false);
+      const deleteFile = vi.fn();
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+        deleteFile,
+      });
+
+      const user = userEvent.setup();
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} showDelete />
+      );
+      
+      await user.click(screen.getByTitle('Delete file'));
+      
+      expect(mockConfirm).toHaveBeenCalledWith('Are you sure you want to delete this file?');
+      expect(deleteFile).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Multiple Files Display', () => {
+    beforeEach(() => {
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReferences: mockFileReferences,
+        fileCount: 2,
+      });
+    });
+
+    it('displays multiple files in a list', () => {
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      
+      expect(screen.getByText('test-file.jpg')).toBeInTheDocument();
+      expect(screen.getByText('document.pdf')).toBeInTheDocument();
+      expect(screen.getAllByText((content, element) => 
+        element?.textContent?.includes('1000 KB') && element?.textContent?.includes('image/jpeg') || false
+      )[0]).toBeInTheDocument();
+      expect(screen.getAllByText((content, element) => 
+        element?.textContent?.includes('1.95 MB') && element?.textContent?.includes('application/pdf') || false
+      )[0]).toBeInTheDocument();
+    });
+
+    it('shows delete buttons for each file when showDelete is true', () => {
+      renderWithProviders(<FileDisplay {...defaultProps} showDelete />);
+      
+      const deleteButtons = screen.getAllByTitle('Delete file');
+      expect(deleteButtons).toHaveLength(2);
+    });
+
+    it('calls deleteFile for specific file when delete button is clicked', async () => {
+      const deleteFile = vi.fn().mockResolvedValue(true);
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReferences: mockFileReferences,
+        fileCount: 2,
+        deleteFile,
+      });
+
+      const user = userEvent.setup();
+      renderWithProviders(<FileDisplay {...defaultProps} showDelete />);
+      
+      const deleteButtons = screen.getAllByTitle('Delete file');
+      await user.click(deleteButtons[0]);
+      
+      expect(deleteFile).toHaveBeenCalledWith(true);
+    });
+  });
+
+  describe('File Icons', () => {
+    it('shows correct icon for different file types', () => {
+      const testCases = [
+        { fileType: 'image/jpeg', expectedIcon: '🖼️' },
+        { fileType: 'video/mp4', expectedIcon: '🎥' },
+        { fileType: 'audio/mp3', expectedIcon: '🎵' },
+        { fileType: 'application/pdf', expectedIcon: '📄' },
+        { fileType: 'application/msword', expectedIcon: '📝' },
+        { fileType: 'application/vnd.ms-excel', expectedIcon: '📊' },
+        { fileType: 'application/vnd.ms-powerpoint', expectedIcon: '📊' },
+        { fileType: 'text/plain', expectedIcon: '📁' },
+      ];
+
+      testCases.forEach(({ fileType, expectedIcon }) => {
+        const fileRef = {
+          ...mockFileReference,
+          file_metadata: {
+            ...mockFileReference.file_metadata,
+            fileType,
+          },
+        };
+
+        mockUseFileReferenceForRecord.mockReturnValue({
+          ...mockUseFileReferenceForRecord(),
+          fileReference: fileRef,
+          fileCount: 1,
+        });
+
+        const { unmount } = renderWithProviders(
+          <FileDisplay {...defaultProps} category={FileCategory.GENERAL_DOCUMENTS} />
+        );
+        
+        // For image files, check if it's an img element or icon
+        if (fileType.startsWith('image/')) {
+          const imgElement = screen.queryByRole('img');
+          if (imgElement) {
+            expect(imgElement).toBeInTheDocument();
+          } else {
+            expect(screen.getByText(expectedIcon)).toBeInTheDocument();
+          }
+        } else {
+          expect(screen.getByText(expectedIcon)).toBeInTheDocument();
+        }
+        unmount();
+      });
+    });
+  });
+
+  describe('File Size Formatting', () => {
+    it('formats file sizes correctly', () => {
+      const testCases = [
+        { size: 0, expected: '0 Bytes' },
+        { size: 1024, expected: '1 KB' },
+        { size: 1024 * 1024, expected: '1 MB' },
+        { size: 1024 * 1024 * 1024, expected: '1 GB' },
+        { size: 1536, expected: '1.5 KB' },
+      ];
+
+      testCases.forEach(({ size, expected }) => {
+        const fileRef = {
+          ...mockFileReference,
+          file_metadata: {
+            ...mockFileReference.file_metadata,
+            fileSize: size,
+          },
+        };
+
+        mockUseFileReferenceForRecord.mockReturnValue({
+          ...mockUseFileReferenceForRecord(),
+          fileReference: fileRef,
+          fileCount: 1,
+        });
+
+        const { unmount } = renderWithProviders(
+          <FileDisplay {...defaultProps} category={FileCategory.GENERAL_DOCUMENTS} />
+        );
+        
+        // For image files, check if it's an img element or text
+        if (fileRef.file_metadata.fileType.startsWith('image/')) {
+          const imgElement = screen.queryByRole('img');
+          if (imgElement) {
+            expect(imgElement).toBeInTheDocument();
+          } else {
+            expect(screen.getByText(expected)).toBeInTheDocument();
+          }
+        } else {
+          expect(screen.getByText(expected)).toBeInTheDocument();
+        }
+        unmount();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper alt text for images', () => {
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+      });
+
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} />
+      );
+      
+      const image = screen.getByRole('img');
+      expect(image).toHaveAttribute('alt', 'test-file.jpg');
+    });
+
+    it('has proper title attributes for delete buttons', () => {
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+      });
+
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} showDelete />
+      );
+      
+      const deleteButton = screen.getByTitle('Delete file');
+      expect(deleteButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration', () => {
+    it('loads file data on mount', () => {
+      const loadFileCount = vi.fn();
+      const loadFileReference = vi.fn();
+      const loadFileReferences = vi.fn();
+
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        loadFileCount,
+        loadFileReference,
+        loadFileReferences,
+      });
+
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} />
+      );
+      
+      expect(loadFileCount).toHaveBeenCalledTimes(1);
+      expect(loadFileReference).toHaveBeenCalledTimes(1);
+      expect(loadFileReferences).not.toHaveBeenCalled();
+    });
+
+    it('loads file references when no category is specified', () => {
+      const loadFileCount = vi.fn();
+      const loadFileReference = vi.fn();
+      const loadFileReferences = vi.fn();
+
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        loadFileCount,
+        loadFileReference,
+        loadFileReferences,
+      });
+
+      renderWithProviders(<FileDisplay {...defaultProps} />);
+      
+      expect(loadFileCount).toHaveBeenCalledTimes(1);
+      expect(loadFileReferences).toHaveBeenCalledTimes(1);
+      expect(loadFileReference).not.toHaveBeenCalled();
+    });
+
+    it('loads file URL when file reference is available', () => {
+      const loadFileUrl = vi.fn();
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+        loadFileUrl,
+      });
+
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} />
+      );
+      
+      expect(loadFileUrl).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles missing file metadata gracefully', () => {
+      const fileRefWithoutMetadata = {
+        ...mockFileReference,
+        file_metadata: {
+          fileName: undefined,
+          fileType: undefined,
+          fileSize: undefined,
+          category: FileCategory.IMAGES,
+        },
+      };
+
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: fileRefWithoutMetadata,
+        fileCount: 1,
+      });
+
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} />
+      );
+      
+      expect(screen.getByText('Unknown file')).toBeInTheDocument();
+    });
+
+    it('handles delete failure gracefully', async () => {
+      const deleteFile = vi.fn().mockResolvedValue(false);
+      mockUseFileReferenceForRecord.mockReturnValue({
+        ...mockUseFileReferenceForRecord(),
+        fileReference: mockFileReference,
+        fileCount: 1,
+        deleteFile,
+      });
+
+      const user = userEvent.setup();
+      renderWithProviders(
+        <FileDisplay {...defaultProps} category={FileCategory.IMAGES} showDelete />
+      );
+      
+      await user.click(screen.getByTitle('Delete file'));
+      
+      expect(deleteFile).toHaveBeenCalledWith(true);
+      // File should still be displayed since deletion failed
+      expect(screen.getByRole('img', { name: 'test-file.jpg' })).toBeInTheDocument();
+    });
+  });
+});