@jmruthers/pace-core 0.5.1 → 0.5.4

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

@@ -0,0 +1,702 @@
+/**
+ * @file UserMenu Component Tests
+ * @description Comprehensive test suite for UserMenu and UserMenuLoading components
+ * @example Excellent test patterns and best practices following testing guidelines
+ */
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { User } from '@supabase/supabase-js';
+import { UserMenu, UserMenuLoading } from './UserMenu';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  ChevronDown: () => <span data-testid="chevron-down">▼</span>,
+  LogOut: () => <span data-testid="log-out">🚪</span>,
+  KeyRound: () => <span data-testid="key-round">🔑</span>,
+}));
+
+// Mock the PasswordChangeForm component
+vi.mock('../PasswordReset/PasswordChangeForm', () => ({
+  PasswordChangeForm: ({ onSubmit }: { onSubmit: (values: any) => Promise<{ error?: any }> }) => {
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+    
+    const handleSubmit = async (e: React.FormEvent) => {
+      e.preventDefault();
+      setIsSubmitting(true);
+      setError(null);
+      try {
+        const result = await onSubmit({ newPassword: 'newpass123', confirmPassword: 'newpass123' });
+        if (result.error) {
+          setError(result.error.message);
+        }
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setIsSubmitting(false);
+      }
+    };
+    
+    return (
+      <form data-testid="password-change-form" onSubmit={handleSubmit}>
+        <input data-testid="new-password" type="password" placeholder="New Password" />
+        <input data-testid="confirm-password" type="password" placeholder="Confirm Password" />
+        {error && <div data-testid="error-message">{error}</div>}
+        <button 
+          type="submit" 
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? 'Changing...' : 'Change Password'}
+        </button>
+      </form>
+    );
+  },
+}));
+
+// Mock the Select components
+vi.mock('../Select', () => ({
+  Select: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="select" className={className}>
+      {children}
+    </div>
+  ),
+  SelectContent: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="select-content" role="menu">
+      {children}
+    </div>
+  ),
+  SelectItem: ({ children, value, onClick }: { children: React.ReactNode; value: string; onClick?: () => void }) => (
+    <button data-testid={`select-item-${value}`} onClick={onClick} role="menuitem">
+      {children}
+    </button>
+  ),
+  SelectLabel: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="select-label" className={className}>
+      {children}
+    </div>
+  ),
+  SelectSeparator: () => <hr data-testid="select-separator" />,
+  SelectTrigger: ({ children, asChild }: { children: React.ReactNode; asChild?: boolean }) => (
+    <div data-testid="select-trigger">
+      {asChild ? children : <button>{children}</button>}
+    </div>
+  ),
+  SelectValue: () => <span data-testid="select-value" />,
+}));
+
+// Mock the Dialog components
+vi.mock('../Dialog', () => ({
+  Dialog: ({ children, open, onOpenChange }: { children: React.ReactNode; open: boolean; onOpenChange: (open: boolean) => void }) => (
+    <div data-testid="dialog" data-open={open}>
+      {children}
+    </div>
+  ),
+  DialogContent: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="dialog-content" className={className}>
+      {children}
+    </div>
+  ),
+  DialogHeader: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="dialog-header">
+      {children}
+    </div>
+  ),
+  DialogTitle: ({ children }: { children: React.ReactNode }) => (
+    <h2 data-testid="dialog-title">{children}</h2>
+  ),
+  DialogTrigger: ({ children, asChild }: { children: React.ReactNode; asChild?: boolean }) => (
+    <div data-testid="dialog-trigger">
+      {asChild ? children : <button>{children}</button>}
+    </div>
+  ),
+  DialogOverlay: () => <div data-testid="dialog-overlay" />,
+}));
+
+// Mock the Avatar components
+vi.mock('../Avatar', () => ({
+  Avatar: ({ children, className }: { children: React.ReactNode; className?: string }) => (
+    <div data-testid="avatar" className={className}>
+      {children}
+    </div>
+  ),
+  AvatarFallback: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="avatar-fallback">{children}</div>
+  ),
+  AvatarImage: ({ src, alt }: { src?: string; alt?: string }) => (
+    <img data-testid="avatar-image" src={src} alt={alt} />
+  ),
+}));
+
+// Mock the Button component
+vi.mock('../Button', () => ({
+  Button: ({ children, variant, className, ...props }: any) => (
+    <button 
+      data-testid="button" 
+      className={className}
+      data-variant={variant}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Test data factories
+const createMockUser = (overrides: Partial<User> = {}): User => ({
+  id: '1',
+  email: 'test@example.com',
+  user_metadata: {
+    display_name: 'Test User',
+    full_name: 'Test User Full',
+    avatar_url: 'https://example.com/avatar.jpg',
+  },
+  ...overrides,
+} as User);
+
+const createMockUserWithEmailOnly = (): User => ({
+  id: '2',
+  email: 'user@example.com',
+  user_metadata: {},
+} as User);
+
+describe('UserMenu Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders with user information', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'Test User' })).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-image')).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+    });
+
+    it('renders with custom className', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} className="custom-menu" />);
+      
+      expect(screen.getByTestId('select')).toHaveClass('custom-menu');
+    });
+
+    it('renders without avatar when showAvatar is false', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} showAvatar={false} />);
+      
+      expect(screen.queryByTestId('avatar')).not.toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Test User' })).toBeInTheDocument();
+    });
+
+    it('renders with avatar when showAvatar is true (default)', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByTestId('avatar')).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-image')).toHaveAttribute('src', 'https://example.com/avatar.jpg');
+      expect(screen.getByTestId('avatar-image')).toHaveAttribute('alt', 'Test User');
+    });
+
+    it('renders with fallback initial when no avatar URL', () => {
+      const user = createMockUser({ user_metadata: { display_name: 'John Doe' } });
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('J');
+    });
+
+    it('renders with email as display name when no display_name or full_name', () => {
+      const user = createMockUserWithEmailOnly();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'user' })).toBeInTheDocument();
+    });
+
+    it('renders with email fallback initial when no name metadata', () => {
+      const user = createMockUserWithEmailOnly();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('U');
+    });
+
+    it('renders with U fallback when no user metadata at all', () => {
+      const user = { id: '3', email: null } as User;
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('U');
+    });
+  });
+
+  describe('User Information Display', () => {
+    it('displays user name and email in dropdown', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      // Open the dropdown by clicking the trigger
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      trigger.click();
+      
+      expect(screen.getByRole('menuitem', { name: '🔑 Change Password' })).toBeInTheDocument();
+      expect(screen.getByText('test@example.com')).toBeInTheDocument();
+    });
+
+    it('prioritizes display_name over full_name', () => {
+      const user = createMockUser({
+        user_metadata: {
+          display_name: 'Display Name',
+          full_name: 'Full Name',
+        }
+      });
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'Display Name' })).toBeInTheDocument();
+    });
+
+    it('falls back to full_name when display_name is not available', () => {
+      const user = createMockUser({
+        user_metadata: {
+          full_name: 'Full Name',
+        }
+      });
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'Full Name' })).toBeInTheDocument();
+    });
+
+    it('falls back to email prefix when no name metadata', () => {
+      const user = createMockUserWithEmailOnly();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'user' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Menu Items', () => {
+    it('renders change password menu item', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      trigger.click();
+      
+      expect(screen.getByTestId('select-item-change-password')).toBeInTheDocument();
+      expect(screen.getByRole('menuitem', { name: '🔑 Change Password' })).toBeInTheDocument();
+    });
+
+    it('renders sign out menu item', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      trigger.click();
+      
+      expect(screen.getByTestId('select-item-sign-out')).toBeInTheDocument();
+      expect(screen.getByText('Sign out')).toBeInTheDocument();
+    });
+
+    it('renders menu separator', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      trigger.click();
+      
+      expect(screen.getByTestId('select-separator')).toBeInTheDocument();
+    });
+  });
+
+  describe('Event Handling', () => {
+    it('calls onSignOut when sign out is clicked', async () => {
+      const user = createMockUser();
+      const handleSignOut = vi.fn();
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onSignOut={handleSignOut} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const signOutButton = screen.getByTestId('select-item-sign-out');
+      await userEventInstance.click(signOutButton);
+      
+      expect(handleSignOut).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onSignOut when not provided', async () => {
+      const user = createMockUser();
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const signOutButton = screen.getByTestId('select-item-sign-out');
+      await userEventInstance.click(signOutButton);
+      
+      // Should not throw error
+      expect(screen.getByTestId('select-item-sign-out')).toBeInTheDocument();
+    });
+
+    it('opens password change dialog when change password is clicked', async () => {
+      const user = createMockUser();
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+      expect(screen.getByRole('heading', { name: 'Change Password' })).toBeInTheDocument();
+    });
+  });
+
+  describe('Password Change Dialog', () => {
+    it('renders password change form in dialog', async () => {
+      const user = createMockUser();
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      expect(screen.getByTestId('password-change-form')).toBeInTheDocument();
+      expect(screen.getByTestId('new-password')).toBeInTheDocument();
+      expect(screen.getByTestId('confirm-password')).toBeInTheDocument();
+    });
+
+    it('calls onChangePassword when form is submitted', async () => {
+      const user = createMockUser();
+      const handleChangePassword = vi.fn().mockResolvedValue({});
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onChangePassword={handleChangePassword} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      await userEventInstance.click(submitButton);
+      
+      expect(handleChangePassword).toHaveBeenCalledWith('newpass123', 'newpass123');
+    });
+
+    it('calls onChangePassword when form is submitted successfully', async () => {
+      const user = createMockUser();
+      const handleChangePassword = vi.fn().mockResolvedValue({});
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onChangePassword={handleChangePassword} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      await userEventInstance.click(submitButton);
+      
+      // Wait for the form submission to complete
+      await waitFor(() => {
+        expect(handleChangePassword).toHaveBeenCalledWith('newpass123', 'newpass123');
+      });
+    });
+
+    it('keeps dialog open when password change fails', async () => {
+      const user = createMockUser();
+      const handleChangePassword = vi.fn().mockResolvedValue({ error: { message: 'Password too weak' } });
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onChangePassword={handleChangePassword} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      await userEventInstance.click(submitButton);
+      
+      // Wait for the error to be handled
+      await waitFor(() => {
+        expect(handleChangePassword).toHaveBeenCalled();
+        expect(screen.getByTestId('error-message')).toHaveTextContent('Password too weak');
+      });
+      
+      // Dialog should still be open
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+    });
+
+    it('handles password change error gracefully', async () => {
+      const user = createMockUser();
+      const handleChangePassword = vi.fn().mockRejectedValue(new Error('Network error'));
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onChangePassword={handleChangePassword} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const changePasswordButton = screen.getByTestId('select-item-change-password');
+      await userEventInstance.click(changePasswordButton);
+      
+      const submitButton = screen.getByRole('button', { name: 'Change Password' });
+      await userEventInstance.click(submitButton);
+      
+      // Wait for the error to be handled
+      await waitFor(() => {
+        expect(handleChangePassword).toHaveBeenCalled();
+        expect(screen.getByTestId('error-message')).toHaveTextContent('Network error');
+      });
+      
+      // Should not throw error and dialog should remain open
+      expect(screen.getByTestId('dialog-content')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('returns null when user is null', () => {
+      const { container } = renderWithProviders(<UserMenu user={null} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('returns null when user is undefined', () => {
+      const { container } = renderWithProviders(<UserMenu user={undefined as any} />);
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles user with minimal data', () => {
+      const user = { id: '1', email: 'minimal@example.com' } as User;
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'minimal' })).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('M');
+    });
+
+    it('handles user with empty user_metadata', () => {
+      const user = { id: '1', email: 'empty@example.com', user_metadata: {} } as User;
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'empty' })).toBeInTheDocument();
+      expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('E');
+    });
+
+    it('handles user with null email', () => {
+      const user = { id: '1', email: null, user_metadata: {} } as User;
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByTestId('avatar-fallback')).toHaveTextContent('U');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA labels', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'Test User' })).toBeInTheDocument();
+    });
+
+    it('supports keyboard navigation', async () => {
+      const user = createMockUser();
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      trigger.focus();
+      expect(trigger).toHaveFocus();
+      
+      await userEventInstance.keyboard('{Enter}');
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('has proper menu structure', () => {
+      const user = createMockUser();
+      renderWithProviders(<UserMenu user={user} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      trigger.click();
+      
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+      expect(screen.getAllByRole('menuitem')).toHaveLength(2);
+    });
+  });
+
+  describe('Performance', () => {
+    it('memoizes user info calculation', () => {
+      const user = createMockUser();
+      const { rerender } = renderWithProviders(<UserMenu user={user} />);
+      
+      // Re-render with same user
+      rerender(<UserMenu user={user} />);
+      
+      expect(screen.getByRole('button', { name: 'Test User' })).toBeInTheDocument();
+    });
+
+    it('updates when user changes', () => {
+      const user1 = createMockUser({ user_metadata: { display_name: 'User 1' } });
+      const user2 = createMockUser({ user_metadata: { display_name: 'User 2' } });
+      
+      const { rerender } = renderWithProviders(<UserMenu user={user1} />);
+      expect(screen.getByRole('button', { name: 'User 1' })).toBeInTheDocument();
+      
+      rerender(<UserMenu user={user2} />);
+      expect(screen.getByRole('button', { name: 'User 2' })).toBeInTheDocument();
+    });
+  });
+});
+
+describe('UserMenuLoading Component', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders loading state', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      expect(screen.getByText('Loading...')).toBeInTheDocument();
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+
+    it('renders with proper loading classes', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      const button = screen.getByRole('button');
+      expect(button).toHaveClass('flex', 'items-center', 'space-x-2');
+      
+      // Check for animate-pulse on the inner div
+      const animatedDiv = button.querySelector('.animate-pulse');
+      expect(animatedDiv).toBeInTheDocument();
+    });
+
+    it('renders loading avatar placeholder', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      const avatarPlaceholder = screen.getByRole('button').querySelector('.animate-pulse');
+      expect(avatarPlaceholder).toBeInTheDocument();
+    });
+
+    it('renders with proper accessibility attributes', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      expect(screen.getByRole('status')).toBeInTheDocument();
+      expect(screen.getByLabelText('Loading user menu')).toBeInTheDocument();
+    });
+
+    it('renders with aria-live polite', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      const statusElement = screen.getByRole('status');
+      expect(statusElement).toHaveAttribute('aria-live', 'polite');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('is not focusable when disabled', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      const button = screen.getByRole('button');
+      expect(button).toBeDisabled();
+    });
+
+    it('provides loading status to screen readers', () => {
+      renderWithProviders(<UserMenuLoading />);
+      
+      expect(screen.getByLabelText('Loading user menu')).toBeInTheDocument();
+    });
+  });
+});
+
+describe('UserMenu Component Integration', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Complex Scenarios', () => {
+    it('handles rapid menu interactions', async () => {
+      const user = createMockUser();
+      const handleSignOut = vi.fn();
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onSignOut={handleSignOut} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      
+      // Rapid clicks
+      for (let i = 0; i < 3; i++) {
+        await userEventInstance.click(trigger);
+        await userEventInstance.click(trigger);
+      }
+      
+      expect(screen.getByTestId('select-content')).toBeInTheDocument();
+    });
+
+    it('works with multiple UserMenu instances', () => {
+      const user1 = createMockUser({ user_metadata: { display_name: 'User 1' } });
+      const user2 = createMockUser({ user_metadata: { display_name: 'User 2' } });
+      
+      renderWithProviders(
+        <div>
+          <UserMenu user={user1} />
+          <UserMenu user={user2} />
+        </div>
+      );
+      
+      expect(screen.getByRole('button', { name: 'User 1' })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'User 2' })).toBeInTheDocument();
+    });
+
+    it('handles async operations correctly', async () => {
+      const user = createMockUser();
+      const handleSignOut = vi.fn().mockImplementation(() => new Promise(resolve => setTimeout(resolve, 100)));
+      const userEventInstance = userEvent.setup();
+      
+      renderWithProviders(<UserMenu user={user} onSignOut={handleSignOut} />);
+      
+      const trigger = screen.getByRole('button', { name: 'Test User' });
+      await userEventInstance.click(trigger);
+      
+      const signOutButton = screen.getByTestId('select-item-sign-out');
+      await userEventInstance.click(signOutButton);
+      
+      expect(handleSignOut).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Error Boundaries', () => {
+    it('handles component errors gracefully', () => {
+      const user = createMockUser();
+      
+      // This should not throw an error
+      expect(() => {
+        renderWithProviders(<UserMenu user={user} />);
+      }).not.toThrow();
+    });
+
+    it('handles missing callbacks gracefully', () => {
+      const user = createMockUser();
+      
+      expect(() => {
+        renderWithProviders(<UserMenu user={user} />);
+      }).not.toThrow();
+    });
+  });
+});