@jmruthers/pace-core 0.5.188 → 0.5.190

package/src/components/Avatar/Avatar.test.tsx

@@ -1,38 +1,97 @@
 /**
  * @file Avatar Component Tests
- * @description Comprehensive tests for Avatar, AvatarImage, and AvatarFallback components
+ * @description Comprehensive tests for Avatar component
  */
 
 import React from 'react';
 import { screen, waitFor } from '@testing-library/react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { Avatar, AvatarImage, AvatarFallback } from './Avatar';
+import { Avatar } from './Avatar';
+import { FileCategory } from '../../types/file-reference';
 import { renderWithProviders, userEvent } from '../../__tests__/helpers/test-utils';
 
-// Helper function to get the avatar container element
+const mockUseUnifiedAuthValue = {
+  supabase: null as Record<string, unknown> | null,
+  user: { id: 'test-user' },
+  signOut: vi.fn(),
+  updatePassword: vi.fn(),
+  isAuthenticated: true,
+  isLoading: false,
+  error: null
+};
+
+const mockUseFileReferenceById = vi.fn(() => ({
+  fileReference: null,
+  fileUrl: null,
+  isLoading: false
+}));
+
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuthValue,
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>
+}));
+
+vi.mock('../../hooks/useFileReference', () => ({
+  useFileReferenceById: (...args: unknown[]) => mockUseFileReferenceById(...args)
+}));
+
+// Mock FileDisplay component
+vi.mock('../FileDisplay/FileDisplay', () => ({
+  FileDisplay: ({ fallbackText, className }: any) => (
+    <div data-testid="file-display" className={className}>
+      <p>{fallbackText}</p>
+    </div>
+  )
+}));
+
+// Size classes for testing
+const sizeClasses = {
+  xs: 'size-4 text-xs',
+  sm: 'size-6 text-sm',
+  md: 'size-10 text-base',
+  lg: 'size-12 text-lg',
+  xl: 'size-16 text-xl',
+  '2xl': 'size-20 text-2xl'
+};
+
+// Helper function to get the avatar container element (outer container, not inner fallback)
 const getAvatarContainer = (fallbackText: string) => {
-  return screen.getByText(fallbackText).closest('span')?.parentElement;
+  const fallbackNode = screen.getByText(fallbackText);
+  const container = fallbackNode.parentElement as HTMLElement | null;
+  if (!container) {
+    throw new Error('Avatar container not found');
+  }
+  return container;
 };
 
 describe('Avatar Component', () => {
-    describe('Rendering', () => {
-    it('renders with default props', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseUnifiedAuthValue.supabase = null;
+    mockUseFileReferenceById.mockReset();
+    mockUseFileReferenceById.mockReturnValue({
+      fileReference: null,
+      fileUrl: null,
+      isLoading: false
+    });
+  });
+
+  describe('Rendering', () => {
+    it('renders with fallback only', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>AB</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="AB" />
       );
       
       const avatar = getAvatarContainer('AB');
       expect(avatar).toBeInTheDocument();
-      expect(avatar).toHaveClass('relative', 'flex', 'h-10', 'w-10', 'shrink-0', 'overflow-hidden', 'rounded-full');
+      // Avatar uses Tailwind v4 size-* utility instead of h-* w-*
+      expect(avatar).toHaveClass('size-10', 'overflow-hidden', 'rounded-full');
+      expect(screen.getByText('AB')).toBeInTheDocument();
     });
 
     it('renders with custom className', () => {
       renderWithProviders(
-        <Avatar className="custom-avatar-class">
-          <AvatarFallback>JD</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="JD" className="custom-avatar-class" />
       );
       
       const avatar = getAvatarContainer('JD');
@@ -41,32 +100,36 @@ describe('Avatar Component', () => {
 
     it('renders with custom size via className', () => {
       renderWithProviders(
-        <Avatar className="h-16 w-16">
-          <AvatarFallback>LG</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="LG" className="size-16" />
       );
       
       const avatar = getAvatarContainer('LG');
-      expect(avatar).toHaveClass('h-16', 'w-16');
+      expect(avatar).toHaveClass('size-16');
+    });
+
+    it('renders with size prop', () => {
+      renderWithProviders(
+        <Avatar fallback="SM" size="sm" />
+      );
+      
+      const avatar = getAvatarContainer('SM');
+      expect(avatar).toHaveClass('size-6', 'text-sm');
     });
 
     it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLSpanElement>();
+      const ref = React.createRef<HTMLDivElement>();
       
       renderWithProviders(
-        <Avatar ref={ref}>
-          <AvatarFallback>RF</AvatarFallback>
-        </Avatar>
+        <Avatar ref={ref} fallback="RF" />
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+      // Avatar uses figure element, not div
+      expect(ref.current).toBeInstanceOf(HTMLElement);
     });
 
     it('accepts HTML attributes', () => {
       renderWithProviders(
-        <Avatar data-testid="avatar" aria-label="User avatar">
-          <AvatarFallback>AT</AvatarFallback>
-        </Avatar>
+        <Avatar data-testid="avatar" aria-label="User avatar" fallback="AT" />
       );
       
       const avatar = screen.getByTestId('avatar');
@@ -74,138 +137,128 @@ describe('Avatar Component', () => {
     });
   });
 
-  describe('AvatarImage Component', () => {
-    it('renders with src and alt attributes when image loads', async () => {
-      // Mock successful image load
-      const mockImage = {
-        onload: null as (() => void) | null,
-        onerror: null as (() => void) | null,
-        src: '',
-        alt: '',
-        addEventListener: vi.fn(),
-        removeEventListener: vi.fn(),
-      };
-      
-      Object.defineProperty(global, 'Image', {
-        value: vi.fn(() => {
-          setTimeout(() => {
-            if (mockImage.onload) mockImage.onload();
-          }, 0);
-          return mockImage;
-        }),
-        writable: true,
-      });
+  describe('Direct URL Approach', () => {
+    it('renders image with src and alt attributes', () => {
+      renderWithProviders(
+        <Avatar src="/user.jpg" alt="User profile" fallback="UI" />
+      );
+      
+      const image = screen.getByAltText('User profile');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', '/user.jpg');
+      expect(image).toHaveAttribute('alt', 'User profile');
+      expect(image.tagName).toBe('IMG');
+    });
 
+    it('shows fallback when image fails to load', async () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarImage src="/user.jpg" alt="User profile" />
-          <AvatarFallback>UI</AvatarFallback>
-        </Avatar>
+        <Avatar src="/broken-image.jpg" alt="User" fallback="FL" />
       );
       
-      // Initially shows fallback
-      expect(screen.getByText('UI')).toBeInTheDocument();
+      const image = screen.getByAltText('User');
+      expect(image).toBeInTheDocument();
+      
+      // Simulate image error
+      const errorEvent = new Event('error');
+      image.dispatchEvent(errorEvent);
       
-      // Wait for image to load
       await waitFor(() => {
-        const image = screen.queryByAltText('User profile');
-        if (image) {
-          expect(image).toHaveAttribute('src', '/user.jpg');
-          expect(image).toHaveAttribute('alt', 'User profile');
-        }
+        expect(screen.getByText('FL')).toBeInTheDocument();
       });
     });
 
-    it('shows fallback when image fails to load', () => {
+    it('uses fallback as alt text when alt not provided', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarImage src="/broken-image.jpg" alt="User" />
-          <AvatarFallback>FL</AvatarFallback>
-        </Avatar>
+        <Avatar src="/user.jpg" fallback="JD" />
       );
       
-      // Should show fallback when image fails
-      expect(screen.getByText('FL')).toBeInTheDocument();
-      expect(screen.queryByAltText('User')).not.toBeInTheDocument();
+      const image = screen.getByAltText('JD');
+      expect(image).toBeInTheDocument();
     });
 
-    it('handles missing src gracefully', () => {
+    it('applies container and image classes correctly', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarImage alt="User" />
-          <AvatarFallback>MS</AvatarFallback>
-        </Avatar>
+        <Avatar src="/user.jpg" alt="User" fallback="IC" className="custom-img-class" />
       );
       
-      // Should show fallback when image src is missing
-      expect(screen.getByText('MS')).toBeInTheDocument();
+      const image = screen.getByAltText('User');
+      // className is applied to container, not image. Image only gets base image classes
+      expect(image).toHaveClass('object-cover', 'size-full');
+      // Container should have the custom className
+      const container = image.parentElement;
+      expect(container).toHaveClass('custom-img-class');
     });
+  });
 
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLImageElement>();
-      
-      renderWithProviders(
-        <Avatar>
-          <AvatarImage ref={ref} src="/user.jpg" alt="User" />
-          <AvatarFallback>RF</AvatarFallback>
-        </Avatar>
+  describe('File Reference Props Approach', () => {
+    it('renders FileDisplay when file props provided', () => {
+      const { container } = renderWithProviders(
+        <Avatar
+          table_name="user_profiles"
+          record_id="user-123"
+          organisation_id="org-123"
+          category={FileCategory.PROFILE_PHOTOS}
+          fallback="FP"
+        />
       );
       
-      // Ref might be null if image doesn't load immediately, which is expected behavior
-      // The important thing is that the component renders without errors
-      expect(screen.getByText('RF')).toBeInTheDocument();
+      // FileDisplay should be rendered (it will show fallback if no file exists)
+      const avatar = getAvatarContainer('FP');
+      expect(avatar).toBeInTheDocument();
     });
 
-    it('accepts HTML attributes', () => {
+    it('requires all file props for file reference approach', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarImage 
-            src="/user.jpg" 
-            alt="User" 
-            data-testid="avatar-image"
-            loading="lazy"
-          />
-          <AvatarFallback>AT</AvatarFallback>
-        </Avatar>
-      );
-      
-      // Check if image element exists with attributes
-      const image = screen.queryByTestId('avatar-image');
-      if (image) {
-        expect(image).toHaveAttribute('loading', 'lazy');
-      }
+        <Avatar
+          table_name="user_profiles"
+          record_id="user-123"
+          organisation_id="org-123"
+          // category missing
+          fallback="MP"
+        />
+      );
+      
+      // Should show fallback when props incomplete
+      expect(screen.getByText('MP')).toBeInTheDocument();
     });
   });
 
-  describe('AvatarFallback Component', () => {
-    it('renders with text content', () => {
+  describe('File ID Approach', () => {
+    it('shows fallback when fileId provided but no supabase', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>AB</AvatarFallback>
-        </Avatar>
+        <Avatar
+          fileId="file-123"
+          organisation_id="org-123"
+          fallback="FI"
+        />
       );
       
-      const fallback = screen.getByText('AB');
-      expect(fallback).toBeInTheDocument();
-      expect(fallback).toHaveClass('flex', 'h-full', 'w-full', 'items-center', 'justify-center', 'rounded-full', 'text-sec-50', 'bg-sec-500');
+      // Should show fallback when supabase not available
+      expect(screen.getByText('FI')).toBeInTheDocument();
     });
+  });
 
-    it('renders with custom className', () => {
+  describe('Fallback Display', () => {
+    it('renders fallback with correct styling', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback className="custom-fallback-class">CF</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="AB" />
       );
       
-      const fallback = screen.getByText('CF');
-      expect(fallback).toHaveClass('custom-fallback-class');
+      const fallback = screen.getByText('AB');
+      expect(fallback).toBeInTheDocument();
+      expect(fallback).toHaveClass(
+        'size-full',
+        'grid',
+        'place-items-center',
+        'text-center',
+        'text-sec-50',
+        'bg-sec-500'
+      );
     });
 
     it('renders with initials', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>John Doe</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="John Doe" />
       );
       
       expect(screen.getByText('John Doe')).toBeInTheDocument();
@@ -213,90 +266,49 @@ describe('Avatar Component', () => {
 
     it('renders with single character', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>J</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="J" />
       );
       
       expect(screen.getByText('J')).toBeInTheDocument();
     });
 
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLSpanElement>();
-      
+    it('has aria-label on fallback', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback ref={ref}>RF</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="AB" alt="User avatar" />
       );
       
-      expect(ref.current).toBeInstanceOf(HTMLSpanElement);
+      const fallback = screen.getByText('AB');
+      expect(fallback).toHaveAttribute('aria-label', 'User avatar');
     });
 
-    it('accepts HTML attributes', () => {
+    it('uses fallback as aria-label when alt not provided', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback data-testid="fallback" aria-label="User initials">
-            AT
-          </AvatarFallback>
-        </Avatar>
+        <Avatar fallback="JD" />
       );
       
-      const fallback = screen.getByTestId('fallback');
-      expect(fallback).toHaveAttribute('aria-label', 'User initials');
+      const fallback = screen.getByText('JD');
+      expect(fallback).toHaveAttribute('aria-label', 'JD');
     });
   });
 
   describe('Composition', () => {
-    it('works with fallback only', () => {
-      renderWithProviders(
-        <Avatar>
-          <AvatarFallback>JD</AvatarFallback>
-        </Avatar>
-      );
-      
-      const avatar = getAvatarContainer('JD');
-      expect(avatar).toBeInTheDocument();
-      expect(screen.getByText('JD')).toBeInTheDocument();
-    });
-
     it('works with multiple avatars', () => {
       renderWithProviders(
         <div>
-          <Avatar>
-            <AvatarFallback>AB</AvatarFallback>
-          </Avatar>
-          <Avatar>
-            <AvatarFallback>CD</AvatarFallback>
-          </Avatar>
+          <Avatar fallback="AB" />
+          <Avatar fallback="CD" />
         </div>
       );
       
       expect(screen.getByText('AB')).toBeInTheDocument();
       expect(screen.getByText('CD')).toBeInTheDocument();
     });
-
-    it('works with complex fallback content', () => {
-      renderWithProviders(
-        <Avatar>
-          <AvatarFallback>
-            <span>👤</span>
-            <span>User</span>
-          </AvatarFallback>
-        </Avatar>
-      );
-      
-      expect(screen.getByText('👤')).toBeInTheDocument();
-      expect(screen.getByText('User')).toBeInTheDocument();
-    });
   });
 
   describe('Accessibility', () => {
     it('supports screen readers with fallback', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>John Doe</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="John Doe" />
       );
       
       const avatar = getAvatarContainer('John Doe');
@@ -306,9 +318,7 @@ describe('Avatar Component', () => {
 
     it('maintains focus management', () => {
       renderWithProviders(
-        <Avatar tabIndex={0}>
-          <AvatarFallback>FM</AvatarFallback>
-        </Avatar>
+        <Avatar tabIndex={0} fallback="FM" />
       );
       
       const avatar = getAvatarContainer('FM');
@@ -319,9 +329,7 @@ describe('Avatar Component', () => {
       const user = userEvent.setup();
       
       renderWithProviders(
-        <Avatar tabIndex={0}>
-          <AvatarFallback>KN</AvatarFallback>
-        </Avatar>
+        <Avatar tabIndex={0} fallback="KN" />
       );
       
       const avatar = getAvatarContainer('KN');
@@ -339,22 +347,19 @@ describe('Avatar Component', () => {
   describe('Edge Cases', () => {
     it('handles empty fallback content', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback></AvatarFallback>
-        </Avatar>
+        <Avatar fallback="" />
       );
       
-      // For empty content, we can check that the avatar container exists
-      // by looking for the specific class structure
-      const avatar = document.querySelector('.relative.flex.h-10.w-10');
-      expect(avatar).toBeInTheDocument();
+      // Avatar container should exist even with empty fallback
+      // Avatar uses figure element, not div
+      const fallback = document.querySelector('[aria-label=""]') as HTMLElement | null;
+      expect(fallback).not.toBeNull();
+      expect(fallback?.parentElement).toBeInstanceOf(HTMLElement);
     });
 
     it('handles very long fallback text', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>Very Long Username That Might Overflow</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="Very Long Username That Might Overflow" />
       );
       
       expect(screen.getByText('Very Long Username That Might Overflow')).toBeInTheDocument();
@@ -362,9 +367,7 @@ describe('Avatar Component', () => {
 
     it('handles special characters in fallback', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>@#$%</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="@#$%" />
       );
       
       expect(screen.getByText('@#$%')).toBeInTheDocument();
@@ -372,23 +375,42 @@ describe('Avatar Component', () => {
 
     it('handles numeric fallback content', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>123</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="123" />
       );
       
       expect(screen.getByText('123')).toBeInTheDocument();
     });
+
+    it('prioritizes file props over direct URL', () => {
+      // Provide mock supabase so file props can be used
+      mockUseUnifiedAuthValue.supabase = {} as any;
+      
+      renderWithProviders(
+        <Avatar
+          src="/user.jpg"
+          alt="User"
+          table_name="user_profiles"
+          record_id="user-123"
+          organisation_id="org-123"
+          category={FileCategory.PROFILE_PHOTOS}
+          fallback="PR"
+        />
+      );
+      
+      // File props take priority over direct URL, so should show FileDisplay
+      // FileDisplay will render fallback when file doesn't exist in test
+      // The fallback text "PR" should be visible
+      expect(screen.getByText('PR')).toBeInTheDocument();
+      // Since file props take priority, direct URL image should not be rendered
+      expect(screen.queryByAltText('User')).not.toBeInTheDocument();
+    });
   });
 
   describe('Integration', () => {
     it('works within user profile components', () => {
       renderWithProviders(
         <div className="user-profile">
-          <Avatar>
-            <AvatarImage src="/user.jpg" alt="Profile" />
-            <AvatarFallback>UP</AvatarFallback>
-          </Avatar>
+          <Avatar src="/user.jpg" alt="Profile" fallback="UP" />
           <div>
             <h3>User Name</h3>
             <p>User description</p>
@@ -396,7 +418,7 @@ describe('Avatar Component', () => {
         </div>
       );
       
-      expect(screen.getByText('UP')).toBeInTheDocument();
+      expect(screen.getByAltText('Profile')).toBeInTheDocument();
       expect(screen.getByText('User Name')).toBeInTheDocument();
       expect(screen.getByText('User description')).toBeInTheDocument();
     });
@@ -404,9 +426,7 @@ describe('Avatar Component', () => {
     it('works within navigation menus', () => {
       renderWithProviders(
         <nav>
-          <Avatar>
-            <AvatarFallback>NM</AvatarFallback>
-          </Avatar>
+          <Avatar fallback="NM" />
           <ul>
             <li>Dashboard</li>
             <li>Settings</li>
@@ -424,9 +444,7 @@ describe('Avatar Component', () => {
       const handleClick = vi.fn();
       
       renderWithProviders(
-        <Avatar onClick={handleClick} tabIndex={0}>
-          <AvatarFallback>CH</AvatarFallback>
-        </Avatar>
+        <Avatar onClick={handleClick} tabIndex={0} fallback="CH" />
       );
       
       const avatar = getAvatarContainer('CH');
@@ -440,18 +458,13 @@ describe('Avatar Component', () => {
   describe('Styling and Layout', () => {
     it('applies correct default styling', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>ST</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="ST" />
       );
       
       const avatar = getAvatarContainer('ST');
+      // Avatar uses Tailwind v4 size-* utility instead of h-* w-*
       expect(avatar).toHaveClass(
-        'relative',
-        'flex',
-        'h-10',
-        'w-10',
-        'shrink-0',
+        'size-10',
         'overflow-hidden',
         'rounded-full'
       );
@@ -459,19 +472,15 @@ describe('Avatar Component', () => {
 
     it('applies correct fallback styling', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>FS</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="FS" />
       );
       
       const fallback = screen.getByText('FS');
       expect(fallback).toHaveClass(
-        'flex',
-        'h-full',
-        'w-full',
-        'items-center',
-        'justify-center',
-        'rounded-full',
+        'size-full',
+        'grid',
+        'place-items-center',
+        'text-center',
         'text-sec-50',
         'bg-sec-500'
       );
@@ -479,13 +488,30 @@ describe('Avatar Component', () => {
 
     it('handles custom size overrides', () => {
       renderWithProviders(
-        <Avatar className="h-20 w-20">
-          <AvatarFallback>CS</AvatarFallback>
-        </Avatar>
+        <Avatar className="size-20" fallback="CS" />
       );
       
       const avatar = getAvatarContainer('CS');
-      expect(avatar).toHaveClass('h-20', 'w-20');
+      expect(avatar).toHaveClass('size-20');
+    });
+
+    it('applies size variants correctly', () => {
+      const sizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'> = ['xs', 'sm', 'md', 'lg', 'xl', '2xl'];
+      
+      sizes.forEach(size => {
+        const { unmount } = renderWithProviders(
+          <Avatar size={size} fallback={size.toUpperCase()} />
+        );
+        
+        const avatar = getAvatarContainer(size.toUpperCase());
+        if (size === 'md') {
+          expect(avatar).toHaveClass('size-10');
+        } else {
+          expect(avatar).toHaveClass(sizeClasses[size].split(' ')[0]);
+        }
+        
+        unmount();
+      });
     });
   });
-});
+});