@jmruthers/pace-core 0.5.187 → 0.5.189

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

@@ -1,38 +1,50 @@
 /**
  * @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';
 
+// Size classes for testing
+const sizeClasses = {
+  xs: 'h-4 w-4 text-xs',
+  sm: 'h-6 w-6 text-sm',
+  md: 'h-10 w-10 text-base',
+  lg: 'h-12 w-12 text-lg',
+  xl: 'h-16 w-16 text-xl',
+  '2xl': 'h-20 w-20 text-2xl'
+};
+
 // Helper function to get the avatar container element
 const getAvatarContainer = (fallbackText: string) => {
-  return screen.getByText(fallbackText).closest('span')?.parentElement;
+  return screen.getByText(fallbackText).closest('div');
 };
 
 describe('Avatar Component', () => {
-    describe('Rendering', () => {
-    it('renders with default props', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  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');
+      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 +53,35 @@ 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="h-16 w-16" />
       );
       
       const avatar = getAvatarContainer('LG');
       expect(avatar).toHaveClass('h-16', 'w-16');
     });
 
+    it('renders with size prop', () => {
+      renderWithProviders(
+        <Avatar fallback="SM" size="sm" />
+      );
+      
+      const avatar = getAvatarContainer('SM');
+      expect(avatar).toHaveClass('h-6', 'w-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);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
     });
 
     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 +89,126 @@ 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 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');
+      expect(image).toHaveClass('object-cover', 'h-full', 'w-full', '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(
+        'flex',
+        'h-full',
+        'w-full',
+        'items-center',
+        'justify-center',
+        'rounded-full',
+        '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 +216,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 +268,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 +279,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 +297,17 @@ 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
+      // Avatar container should exist even with empty fallback
       const avatar = document.querySelector('.relative.flex.h-10.w-10');
       expect(avatar).toBeInTheDocument();
     });
 
     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 +315,7 @@ describe('Avatar Component', () => {
 
     it('handles special characters in fallback', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>@#$%</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="@#$%" />
       );
       
       expect(screen.getByText('@#$%')).toBeInTheDocument();
@@ -372,23 +323,37 @@ describe('Avatar Component', () => {
 
     it('handles numeric fallback content', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>123</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="123" />
       );
       
       expect(screen.getByText('123')).toBeInTheDocument();
     });
+
+    it('prioritizes direct URL over file props', () => {
+      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"
+        />
+      );
+      
+      // Should show image, not FileDisplay
+      const image = screen.getByAltText('User');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', '/user.jpg');
+    });
   });
 
   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 +361,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 +369,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 +387,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,9 +401,7 @@ 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');
@@ -459,9 +418,7 @@ describe('Avatar Component', () => {
 
     it('applies correct fallback styling', () => {
       renderWithProviders(
-        <Avatar>
-          <AvatarFallback>FS</AvatarFallback>
-        </Avatar>
+        <Avatar fallback="FS" />
       );
       
       const fallback = screen.getByText('FS');
@@ -479,13 +436,30 @@ describe('Avatar Component', () => {
 
     it('handles custom size overrides', () => {
       renderWithProviders(
-        <Avatar className="h-20 w-20">
-          <AvatarFallback>CS</AvatarFallback>
-        </Avatar>
+        <Avatar className="h-20 w-20" fallback="CS" />
       );
       
       const avatar = getAvatarContainer('CS');
       expect(avatar).toHaveClass('h-20', 'w-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('h-10', 'w-10');
+        } else {
+          expect(avatar).toHaveClass(sizeClasses[size].split(' ')[0], sizeClasses[size].split(' ')[1]);
+        }
+        
+        unmount();
+      });
+    });
   });
-});
+});