@jmruthers/pace-core 0.2.4

package/src/components/Alert/__tests__/Alert.unit.test.tsx

@@ -0,0 +1,381 @@
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
+import { describe, it, expect, vi } from 'vitest';
+import { Alert, AlertTitle, AlertDescription } from '../Alert';
+import { renderWithProviders, testComponentRendering, testComponentAccessibility } from '../../../__tests__/shared';
+
+describe('Alert Component', () => {
+  describe('Alert', () => {
+    it('renders with default variant', () => {
+      const { container } = renderWithProviders(<Alert>Test alert content</Alert>);
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveTextContent('Test alert content');
+      expect(alert).toHaveClass('bg-background', 'text-foreground');
+    });
+
+    it('renders with destructive variant', () => {
+      renderWithProviders(<Alert variant="destructive">Error message</Alert>);
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      expect(alert).toHaveClass('border-destructive', 'text-destructive');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<Alert className="custom-class">Test</Alert>);
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('custom-class');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<Alert ref={ref}>Test</Alert>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<Alert data-testid="custom-alert" aria-label="Custom alert">Test</Alert>);
+      const alert = screen.getByTestId('custom-alert');
+      expect(alert).toHaveAttribute('aria-label', 'Custom alert');
+    });
+  });
+
+  describe('AlertTitle', () => {
+    it('renders as h5 element', () => {
+      renderWithProviders(<AlertTitle>Alert Title</AlertTitle>);
+      const title = screen.getByText('Alert Title');
+      expect(title.tagName).toBe('H5');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<AlertTitle className="custom-title">Title</AlertTitle>);
+      const title = screen.getByText('Title');
+      expect(title).toHaveClass('custom-title');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<AlertTitle ref={ref}>Title</AlertTitle>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<AlertTitle data-testid="title" aria-label="Custom title">Title</AlertTitle>);
+      const title = screen.getByTestId('title');
+      expect(title).toHaveAttribute('aria-label', 'Custom title');
+    });
+  });
+
+  describe('AlertDescription', () => {
+    it('renders as p element', () => {
+      renderWithProviders(<AlertDescription>Alert description</AlertDescription>);
+      const description = screen.getByText('Alert description');
+      expect(description.tagName).toBe('P');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<AlertDescription className="custom-desc">Description</AlertDescription>);
+      const description = screen.getByText('Description');
+      expect(description).toHaveClass('custom-desc');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<AlertDescription ref={ref}>Description</AlertDescription>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<AlertDescription data-testid="desc" aria-label="Custom description">Description</AlertDescription>);
+      const description = screen.getByTestId('desc');
+      expect(description).toHaveAttribute('aria-label', 'Custom description');
+    });
+  });
+
+  describe('Alert Composition', () => {
+    it('renders complete alert with title and description', () => {
+      renderWithProviders(
+        <Alert>
+          <AlertTitle>Success</AlertTitle>
+          <AlertDescription>Your changes have been saved.</AlertDescription>
+        </Alert>
+      );
+      
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+      expect(screen.getByText('Success')).toBeInTheDocument();
+      expect(screen.getByText('Your changes have been saved.')).toBeInTheDocument();
+    });
+
+    it('renders destructive alert with title and description', () => {
+      renderWithProviders(
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>Something went wrong.</AlertDescription>
+        </Alert>
+      );
+      
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('text-destructive');
+      expect(screen.getByText('Error')).toBeInTheDocument();
+      expect(screen.getByText('Something went wrong.')).toBeInTheDocument();
+    });
+
+    it('handles nested content correctly', () => {
+      renderWithProviders(
+        <Alert>
+          <div>Icon</div>
+          <div>
+            <AlertTitle>Title</AlertTitle>
+            <AlertDescription>Description</AlertDescription>
+          </div>
+        </Alert>
+      );
+      
+      expect(screen.getByText('Icon')).toBeInTheDocument();
+      expect(screen.getByText('Title')).toBeInTheDocument();
+      expect(screen.getByText('Description')).toBeInTheDocument();
+    });
+  });
+describe('Alert Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('Alert component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: Alert component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'Alert interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('Alert prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+describe('Alert Edge Cases', () => {
+  describe('Extreme Data Values', () => {
+    it('should handle very long strings', () => {
+      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
+      
+      const { container } = renderWithProviders(<Alert>{longString}</Alert>);
+      expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+    });
+
+    it('should handle empty and null values', () => {
+      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
+      
+      emptyValues.forEach(value => {
+        const { container, unmount } = renderWithProviders(<Alert>{value as any}</Alert>);
+        expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle special characters', () => {
+      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
+      
+      const { container } = renderWithProviders(<Alert>{specialChars}</Alert>);
+      expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+    });
+
+    it('should handle unicode characters', () => {
+      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
+      
+      const { container } = renderWithProviders(<Alert>{unicodeChars}</Alert>);
+      expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  describe('Extreme Numbers', () => {
+    it('should handle very large numbers', () => {
+      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
+      
+      largeNumbers.forEach(number => {
+        const { container, unmount } = renderWithProviders(<Alert value={number} />);
+        expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+        unmount();
+      });
+    });
+
+    it('should handle very small numbers', () => {
+      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
+      
+      smallNumbers.forEach(number => {
+        const { container, unmount } = renderWithProviders(<Alert value={number} />);
+        expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  describe('Rapid State Changes', () => {
+    it('should handle rapid prop changes', async () => {
+      const stateProps = [
+        { children: 'State 1' },
+        { children: 'State 2' },
+        { children: 'State 3' },
+        { children: 'State 4' },
+        { children: 'State 5' },
+      ];
+
+      await edgeCaseUtils.testRapidStateChanges(Alert, stateProps);
+    });
+
+    it('should handle rapid user interactions', async () => {
+      renderWithProviders(<Alert />);
+      
+      const alert = screen.getByRole('alert');
+      
+      // Alert should render successfully
+      expect(alert).toBeInTheDocument();
+    });
+  });
+
+  describe('Memory Management', () => {
+    it('should not leak memory with repeated renders', () => {
+      edgeCaseUtils.testMemoryLeaks(Alert, { children: 'Memory test' });
+    });
+  });
+
+  describe('Boundary Conditions', () => {
+    it('should handle boundary prop values', () => {
+      const boundaryProps = [
+        { children: '' },
+        { children: 0 },
+        { children: false },
+        { children: [] },{ className: '' },
+        { 'data-testid': '' },
+      ];
+
+      edgeCaseUtils.testBoundaryConditions(Alert, boundaryProps);
+    });
+  });
+
+  describe('Complex Data Structures', () => {
+    it('should handle deeply nested objects', () => {
+      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
+      
+      const { container } = renderWithProviders(<Alert data={deepObject} />);
+      expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+    });
+
+    it('should handle large arrays', () => {
+      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
+      
+      const { container } = renderWithProviders(<Alert items={largeArray} />);
+      expect(container.querySelector('[data-testid="alert-root"]') || container.firstChild).toBeInTheDocument();
+    });
+  });
+
+  // Shared Utilities Tests
+  describe('Alert - Shared Utilities Tests', () => {
+    testComponentRendering(Alert, [
+      {
+        name: 'with default props',
+        props: { children: 'Test alert' },
+        expectedText: 'Test alert'
+      },
+      {
+        name: 'with destructive variant',
+        props: { variant: 'destructive', children: 'Error message' },
+        expectedText: 'Error message'
+      },
+      {
+        name: 'with custom className',
+        props: { className: 'custom-class', children: 'Custom alert' },
+        expectedText: 'Custom alert'
+      }
+    ]);
+
+    testComponentAccessibility(Alert, {
+      requiredAttributes: ['role'],
+      shouldBeKeyboardAccessible: false,
+      shouldHaveValidRole: true,
+      shouldHaveValidAriaLabel: false
+    }, {
+      children: 'Accessible alert',
+      variant: 'default' // Ensure we test with default variant that has role
+    });
+  });
+});
+}); 

package/src/components/Alert/index.ts

@@ -0,0 +1,2 @@
+
+export { Alert, AlertTitle, AlertDescription } from './Alert';

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,84 @@
+/**
+ * @file Avatar Component Suite
+ * @package @jmruthers/pace-core
+ * @module Components
+ * @since 0.1.0
+ *
+ * A flexible and accessible avatar component for displaying user profile images or initials.
+ * Includes Avatar, AvatarImage, and AvatarFallback subcomponents.
+ *
+ * Features:
+ * - Circular avatar display
+ * - Image, fallback, and initials support
+ * - Customizable size and style
+ * - Keyboard and screen reader accessible
+ * - Graceful fallback for missing images
+ *
+ * @example
+ * ```tsx
+ * // Basic avatar with image
+ * <Avatar>
+ *   <AvatarImage src="/user.jpg" alt="User" />
+ *   <AvatarFallback>AB</AvatarFallback>
+ * </Avatar>
+ *
+ * // Avatar with fallback only
+ * <Avatar>
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ *
+ * @accessibility
+ * - Uses alt text for images
+ * - Fallback content is accessible to screen readers
+ * - Keyboard focusable and navigable
+ */
+
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "../../utils/cn"
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+      className
+    )}
+    {...props}
+  />
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image
+    ref={ref}
+    className={cn("object-cover", className)}
+    {...props}
+  />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      "flex h-full w-full items-center justify-center rounded-full text-sec-50 bg-sec-500",
+      className
+    )}
+    {...props}
+  />
+))
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
+
+export { Avatar, AvatarImage, AvatarFallback }

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

@@ -0,0 +1,232 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { Avatar, AvatarImage, AvatarFallback } from '../Avatar';
+import { renderWithProviders, testComponentRendering, testComponentAccessibility } from '../../../__tests__/shared';
+
+// Mock Radix UI Avatar primitives
+vi.mock('@radix-ui/react-avatar', () => ({
+  Root: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }>(({ children, className, ...props }, ref) => (
+    <div ref={ref} className={className} data-testid="avatar-root" {...props}>
+      {children}
+    </div>
+  )),
+  Image: React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(({ src, alt, className, ...props }, ref) => (
+    <img ref={ref} src={src} alt={alt} className={className} data-testid="avatar-image" {...props} />
+  )),
+  Fallback: React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & { children?: React.ReactNode }>(({ children, className, ...props }, ref) => (
+    <div ref={ref} className={className} data-testid="avatar-fallback" {...props}>
+      {children}
+    </div>
+  )),
+}));
+
+describe('Avatar Component', () => {
+  describe('Avatar', () => {
+    it('renders with default styling', () => {
+      renderWithProviders(<Avatar />);
+      const avatar = screen.getByTestId('avatar-root');
+      expect(avatar).toBeInTheDocument();
+      expect(avatar).toHaveClass('relative', 'flex', 'h-10', 'w-10', 'shrink-0', 'overflow-hidden', 'rounded-full');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<Avatar className="custom-avatar" />);
+      const avatar = screen.getByTestId('avatar-root');
+      expect(avatar).toHaveClass('custom-avatar');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<Avatar ref={ref} />);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<Avatar data-testid="custom-avatar" aria-label="User avatar" />);
+      const avatar = screen.getByTestId('custom-avatar');
+      expect(avatar).toHaveAttribute('aria-label', 'User avatar');
+    });
+  });
+
+  describe('AvatarImage', () => {
+    it('renders with image source and alt text', () => {
+      renderWithProviders(<AvatarImage src="/user.jpg" alt="User profile" />);
+      const image = screen.getByTestId('avatar-image');
+      expect(image).toBeInTheDocument();
+      expect(image).toHaveAttribute('src', '/user.jpg');
+      expect(image).toHaveAttribute('alt', 'User profile');
+    });
+
+    it('applies default styling', () => {
+      renderWithProviders(<AvatarImage src="/user.jpg" alt="User" />);
+      const image = screen.getByTestId('avatar-image');
+      expect(image).toHaveClass('object-cover');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<AvatarImage src="/user.jpg" alt="User" className="custom-image" />);
+      const image = screen.getByTestId('avatar-image');
+      expect(image).toHaveClass('custom-image');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<AvatarImage src="/user.jpg" alt="User" ref={ref} />);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<AvatarImage src="/user.jpg" alt="User" data-testid="custom-image" />);
+      const image = screen.getByTestId('custom-image');
+      expect(image).toBeInTheDocument();
+    });
+  });
+
+  describe('AvatarFallback', () => {
+    it('renders with fallback content', () => {
+      renderWithProviders(<AvatarFallback>JD</AvatarFallback>);
+      const fallback = screen.getByTestId('avatar-fallback');
+      expect(fallback).toBeInTheDocument();
+      expect(fallback).toHaveTextContent('JD');
+    });
+
+    it('applies default styling', () => {
+      renderWithProviders(<AvatarFallback>JD</AvatarFallback>);
+      const fallback = screen.getByTestId('avatar-fallback');
+      expect(fallback).toHaveClass('flex', 'h-full', 'w-full', 'items-center', 'justify-center', 'rounded-full', 'text-sec-50', 'bg-sec-500');
+    });
+
+    it('applies custom className', () => {
+      renderWithProviders(<AvatarFallback className="custom-fallback">JD</AvatarFallback>);
+      const fallback = screen.getByTestId('avatar-fallback');
+      expect(fallback).toHaveClass('custom-fallback');
+    });
+
+    it('forwards ref correctly', () => {
+      const ref = vi.fn();
+      renderWithProviders(<AvatarFallback ref={ref}>JD</AvatarFallback>);
+      expect(ref).toHaveBeenCalled();
+    });
+
+    it('spreads additional props', () => {
+      renderWithProviders(<AvatarFallback data-testid="custom-fallback" aria-label="User initials">JD</AvatarFallback>);
+      const fallback = screen.getByTestId('custom-fallback');
+      expect(fallback).toHaveAttribute('aria-label', 'User initials');
+    });
+  });
+
+  describe('Avatar Composition', () => {
+    it('renders complete avatar with image and fallback', () => {
+      renderWithProviders(
+        <Avatar>
+          <AvatarImage src="/user.jpg" alt="User profile" />
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+      );
+      
+      expect(screen.getByTestId('avatar-root')).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-image')).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument();
+    });
+
+    it('renders avatar with fallback only', () => {
+      renderWithProviders(
+        <Avatar>
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      );
+      
+      expect(screen.getByTestId('avatar-root')).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-fallback')).toBeInTheDocument();
+      expect(screen.getByText('AB')).toBeInTheDocument();
+    });
+
+    it('renders avatar with image only', () => {
+      renderWithProviders(
+        <Avatar>
+          <AvatarImage src="/user.jpg" alt="User profile" />
+        </Avatar>
+      );
+      
+      expect(screen.getByTestId('avatar-root')).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-image')).toBeInTheDocument();
+    });
+
+    it('handles multiple avatars', () => {
+      renderWithProviders(
+        <div>
+          <Avatar>
+            <AvatarImage src="/user1.jpg" alt="User 1" />
+            <AvatarFallback>U1</AvatarFallback>
+          </Avatar>
+          <Avatar>
+            <AvatarImage src="/user2.jpg" alt="User 2" />
+            <AvatarFallback>U2</AvatarFallback>
+          </Avatar>
+        </div>
+      );
+      
+      const avatars = screen.getAllByTestId('avatar-root');
+      expect(avatars).toHaveLength(2);
+      
+      const images = screen.getAllByTestId('avatar-image');
+      expect(images).toHaveLength(2);
+      expect(images[0]).toHaveAttribute('alt', 'User 1');
+      expect(images[1]).toHaveAttribute('alt', 'User 2');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides proper alt text for images', () => {
+      renderWithProviders(<AvatarImage src="/user.jpg" alt="John Doe's profile picture" />);
+      const image = screen.getByTestId('avatar-image');
+      expect(image).toHaveAttribute('alt', "John Doe's profile picture");
+    });
+
+    it('fallback content is accessible', () => {
+      renderWithProviders(<AvatarFallback>JD</AvatarFallback>);
+      const fallback = screen.getByTestId('avatar-fallback');
+      expect(fallback).toHaveTextContent('JD');
+    });
+  });
+
+  // Shared Utilities Tests
+  describe('Avatar - Shared Utilities Tests', () => {
+    testComponentRendering(Avatar, [
+      {
+        name: 'with default props',
+        props: {},
+        expectedText: ''
+      },
+      {
+        name: 'with custom className',
+        props: { className: 'custom-avatar' },
+        expectedText: ''
+      }
+    ]);
+
+    testComponentRendering(AvatarImage, [
+      {
+        name: 'with image source',
+        props: { src: '/user.jpg', alt: 'User profile' },
+        expectedText: ''
+      }
+    ]);
+
+    testComponentRendering(AvatarFallback, [
+      {
+        name: 'with fallback content',
+        props: { children: 'JD' },
+        expectedText: 'JD'
+      }
+    ]);
+
+    testComponentAccessibility(Avatar, {
+      requiredAttributes: [],
+      shouldBeKeyboardAccessible: false,
+      shouldHaveValidRole: false,
+      shouldHaveValidAriaLabel: false
+    });
+  });
+});