@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/AppSwitcher/AppSwitcher.test.tsx

@@ -0,0 +1,1250 @@
+/**
+ * @file AppSwitcher Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/AppSwitcher
+ */
+
+import React from 'react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AppSwitcher } from './AppSwitcher';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// Mock useAccessibleApps - use vi.hoisted() to make mock available
+const mockApps = [
+  { id: 'app-1', name: 'CAKE', displayName: 'Cake App' },
+  { id: 'app-2', name: 'TRAC', displayName: 'Trac App' },
+];
+
+const mockUseAccessibleApps = vi.hoisted(() => vi.fn(() => ({
+  apps: mockApps,
+  loading: false,
+  error: null,
+  refetch: vi.fn(),
+})));
+
+vi.mock('../../hooks/useAccessibleApps', () => ({
+  useAccessibleApps: mockUseAccessibleApps,
+}));
+
+// Mock buildAppUrl - use vi.hoisted() to make mock available in both factory and tests
+const mockBuildAppUrl = vi.hoisted(() => vi.fn(({ appName }: { appName: string }) => {
+  // Use actual port map values
+  const portMap: Record<string, number> = {
+    'CAKE': 8083,
+    'TRAC': 8088,
+    'CORE': 8080,
+  };
+  const port = portMap[appName] || 3000;
+  return `http://localhost:${port}/`;
+}));
+
+vi.mock('../../utils/app/buildAppUrl', () => ({
+  buildAppUrl: mockBuildAppUrl,
+}));
+
+// Mock useUnifiedAuth - use vi.hoisted() to make mock available
+const mockUseUnifiedAuth = vi.hoisted(() => vi.fn(() => ({
+  user: { id: 'user-1', email: 'test@example.com' },
+  session: {
+    access_token: 'test-token',
+    refresh_token: 'test-refresh-token',
+    expires_at: Date.now() + 3600000,
+    expires_in: 3600,
+    token_type: 'bearer',
+    user: { id: 'user-1', email: 'test@example.com' },
+  },
+  isAuthenticated: true,
+  loading: false,
+  error: null,
+  appName: 'CORE',
+})));
+
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: mockUseUnifiedAuth,
+}));
+
+// Mock window.open
+const mockWindowOpen = vi.hoisted(() => vi.fn());
+
+// Mock getAppIcon
+const mockGetAppIcon = vi.hoisted(() => vi.fn((appName: string) => {
+  const iconMap: Record<string, string> = {
+    'CAKE': '/icons/cake.svg',
+    'TRAC': '/icons/trac.svg',
+    'CORE': '/icons/core.svg',
+    'PACE': '/icons/pace.svg',
+    'ADMIN': '/icons/admin.svg',
+    'TEAM': '/icons/team.svg',
+  };
+  return iconMap[appName.toUpperCase()] || undefined;
+}));
+
+vi.mock('../../assets/app-icons', () => ({
+  getAppIcon: mockGetAppIcon,
+}));
+
+// Store onValueChange callback for testing - use vi.hoisted to make it available
+const storedOnValueChangeRef = vi.hoisted(() => ({ current: null as ((value: string) => void) | null }));
+
+// Mock Select component
+vi.mock('../Select', () => ({
+  Select: ({ children, onValueChange, disabled, className }: any) => {
+    // Store onValueChange for testing
+    storedOnValueChangeRef.current = onValueChange;
+    return (
+      <div data-testid="select" data-disabled={disabled} className={className}>
+        {children}
+      </div>
+    );
+  },
+  SelectTrigger: ({ children, asChild, disabled, variant, showChevron, className }: any) => {
+    if (asChild && children) {
+      return <div data-testid="select-trigger" data-disabled={disabled} data-variant={variant} data-show-chevron={showChevron}>{children}</div>;
+    }
+    return (
+      <div 
+        data-testid="select-trigger" 
+        role="combobox"
+        data-disabled={disabled} 
+        data-variant={variant} 
+        data-show-chevron={showChevron}
+        className={className}
+      >
+        {children}
+      </div>
+    );
+  },
+  SelectContent: ({ children, className }: any) => (
+    <div data-testid="select-content" className={className}>
+      {children}
+    </div>
+  ),
+  SelectItem: ({ children, value, className, onClick }: any) => (
+    <div 
+      data-testid={`select-item-${value}`} 
+      data-value={value}
+      className={className}
+      onClick={() => {
+        if (storedOnValueChangeRef.current) {
+          storedOnValueChangeRef.current(value);
+        }
+        if (onClick) {
+          onClick();
+        }
+      }}
+    >
+      {children}
+    </div>
+  ),
+  SelectValue: ({ placeholder, className }: any) => (
+    <div data-testid="select-value" data-placeholder={placeholder} className={className}>
+      {placeholder}
+    </div>
+  ),
+}));
+
+// Following testing standards: use timeout parameter to prevent hanging
+const TEST_TIMEOUT = 10000; // 10 seconds per test
+
+describe('AppSwitcher', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    storedOnValueChangeRef.current = null;
+    // Clear sessionStorage
+    if (typeof window !== 'undefined' && window.sessionStorage) {
+      window.sessionStorage.clear();
+    }
+    // Reset window.open mock
+    window.open = mockWindowOpen;
+    // Restore JSON.stringify if it was mocked
+    vi.restoreAllMocks();
+    // Reset mock to default state
+    mockUseAccessibleApps.mockReturnValue({
+      apps: mockApps,
+      loading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+    mockUseUnifiedAuth.mockReturnValue({
+      user: { id: 'user-1', email: 'test@example.com' },
+      session: {
+        access_token: 'test-token',
+        refresh_token: 'test-refresh-token',
+        expires_at: Date.now() + 3600000,
+        expires_in: 3600,
+        token_type: 'bearer',
+        user: { id: 'user-1', email: 'test@example.com' },
+      },
+      isAuthenticated: true,
+      loading: false,
+      error: null,
+      appName: 'CORE',
+    });
+    mockGetAppIcon.mockImplementation((appName: string) => {
+      const iconMap: Record<string, string> = {
+        'CAKE': '/icons/cake.svg',
+        'TRAC': '/icons/trac.svg',
+        'CORE': '/icons/core.svg',
+        'PACE': '/icons/pace.svg',
+        'ADMIN': '/icons/admin.svg',
+        'TEAM': '/icons/team.svg',
+      };
+      return iconMap[appName.toUpperCase()] || undefined;
+    });
+  });
+
+  it('should render trigger when provided', () => {
+    const trigger = <div data-testid="custom-trigger">Logo</div>;
+    
+    renderWithProviders(
+      <AppSwitcher currentAppName="CORE" trigger={trigger} />
+    );
+
+    expect(screen.getByTestId('custom-trigger')).toBeInTheDocument();
+  });
+
+  it('should render default trigger when not provided', () => {
+    renderWithProviders(
+      <AppSwitcher currentAppName="CORE" />
+    );
+
+    // SelectTrigger should be rendered
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('should not render when showSwitcher is false', () => {
+    const { container } = renderWithProviders(
+      <AppSwitcher currentAppName="CORE" showSwitcher={false} />
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should not render when no apps available', () => {
+    mockUseAccessibleApps.mockReturnValueOnce({
+      apps: [],
+      loading: false,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    const { container } = renderWithProviders(
+      <AppSwitcher currentAppName="CORE" />
+    );
+
+    // When no apps available and not loading, AppSwitcher returns null (no trigger)
+    // This matches the actual behavior: if (!showSwitcher || (!loading && apps.length === 0))
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should handle app selection and navigate', async () => {
+    const user = userEvent.setup();
+    
+    renderWithProviders(
+      <AppSwitcher currentAppName="CORE" />
+    );
+
+    const trigger = screen.getByRole('combobox');
+    await user.click(trigger);
+
+    await waitFor(() => {
+      expect(screen.getByText('Cake App')).toBeInTheDocument();
+    });
+
+    const cakeApp = screen.getByText('Cake App');
+    await user.click(cakeApp);
+
+    expect(mockBuildAppUrl).toHaveBeenCalledWith({ appName: 'CAKE', path: '/' });
+    // Verify window.open was called with the correct URL
+    // The URL should start with the base URL and may include session parameter
+    expect(mockWindowOpen).toHaveBeenCalledTimes(1);
+    const [url, target] = mockWindowOpen.mock.calls[0];
+    expect(url).toContain('http://localhost:8083/');
+    expect(target).toBe('_blank');
+    // Session should be included when user has a session
+    expect(url).toContain('session=');
+  });
+
+  it('should be disabled when loading', () => {
+    mockUseAccessibleApps.mockReturnValueOnce({
+      apps: [],
+      loading: true,
+      error: null,
+      refetch: vi.fn(),
+    });
+
+    renderWithProviders(
+      <AppSwitcher currentAppName="CORE" />
+    );
+
+    // When loading, Select should be disabled
+    const select = screen.getByTestId('select');
+    expect(select).toHaveAttribute('data-disabled', 'true');
+  });
+
+  it('should handle errors gracefully', () => {
+    mockUseAccessibleApps.mockReturnValueOnce({
+      apps: [],
+      loading: false,
+      error: new Error('Failed to fetch'),
+      refetch: vi.fn(),
+    });
+
+    const trigger = <div data-testid="trigger">Logo</div>;
+    const { container } = renderWithProviders(
+      <AppSwitcher currentAppName="CORE" trigger={trigger} />
+    );
+
+    // Should still render trigger
+    expect(screen.getByTestId('trigger')).toBeInTheDocument();
+  });
+
+  // Cache functionality tests
+  describe('Cache Functionality', () => {
+    it('loads apps from cache on mount when user is available', async () => {
+      const cachedApps = [
+        { id: 'app-1', name: 'CAKE', displayName: 'Cake App', logoUrl: '/icons/cake.svg', sortId: 10 },
+        { id: 'app-2', name: 'TRAC', displayName: 'Trac App', logoUrl: '/icons/trac.svg', sortId: 8 },
+      ];
+
+      // Set up cache
+      if (typeof window !== 'undefined' && window.sessionStorage) {
+        window.sessionStorage.setItem('pace-core:appswitcher:apps:user-1', JSON.stringify(cachedApps));
+      }
+
+      // Mock useAccessibleApps to return empty initially (cache will be used)
+      mockUseAccessibleApps.mockReturnValueOnce({
+        apps: [],
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Cache should be loaded and apps should be available
+      // The component will use cached apps if available
+      await waitFor(() => {
+        const trigger = screen.queryByRole('combobox');
+        expect(trigger).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('saves apps to cache when new data arrives', async () => {
+      mockUseAccessibleApps.mockReturnValue({
+        apps: mockApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        // Verify cache was saved
+        if (typeof window !== 'undefined' && window.sessionStorage) {
+          const cached = window.sessionStorage.getItem('pace-core:appswitcher:apps:user-1');
+          expect(cached).toBeTruthy();
+          if (cached) {
+            const parsed = JSON.parse(cached);
+            expect(Array.isArray(parsed)).toBe(true);
+            expect(parsed.length).toBeGreaterThan(0);
+          }
+        }
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('clears cache when user changes', async () => {
+      // Set up cache for user-1
+      if (typeof window !== 'undefined' && window.sessionStorage) {
+        window.sessionStorage.setItem('pace-core:appswitcher:apps:user-1', JSON.stringify([{ id: 'app-1', name: 'CAKE' }]));
+      }
+
+      // Change user
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { id: 'user-2', email: 'test2@example.com' },
+        session: null,
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Cache for user-1 should still exist, but component should not use it
+      // New user should trigger cache load for user-2 (which will be empty)
+      await waitFor(() => {
+        expect(screen.queryByRole('combobox')).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('handles cache load errors gracefully', () => {
+      // Mock sessionStorage.getItem to throw
+      const originalGetItem = window.sessionStorage.getItem;
+      window.sessionStorage.getItem = vi.fn(() => {
+        throw new Error('Storage error');
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Should still render without crashing
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+
+      // Restore
+      window.sessionStorage.getItem = originalGetItem;
+    });
+
+    it('handles cache save errors gracefully', () => {
+      // Mock sessionStorage.setItem to throw
+      const originalSetItem = window.sessionStorage.setItem;
+      window.sessionStorage.setItem = vi.fn(() => {
+        throw new Error('Quota exceeded');
+      });
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: mockApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Should still render without crashing
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+
+      // Restore
+      window.sessionStorage.setItem = originalSetItem;
+    });
+
+    it('handles invalid cache data gracefully', () => {
+      // Set invalid cache data
+      if (typeof window !== 'undefined' && window.sessionStorage) {
+        window.sessionStorage.setItem('pace-core:appswitcher:apps:user-1', 'invalid json');
+      }
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Should still render without crashing
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+    });
+  });
+
+  // App sorting and filtering tests
+  describe('App Sorting and Filtering', () => {
+    it('filters out current app from the list', async () => {
+      const allApps = [
+        { id: 'app-1', name: 'CAKE', displayName: 'Cake App' },
+        { id: 'app-2', name: 'TRAC', displayName: 'Trac App' },
+        { id: 'app-3', name: 'CORE', displayName: 'Core App' },
+      ];
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: allApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const trigger = screen.getByRole('combobox');
+        expect(trigger).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // CORE should be filtered out
+      expect(screen.queryByText('Core App')).not.toBeInTheDocument();
+    });
+
+    it('filters out current app case-insensitively', async () => {
+      const allApps = [
+        { id: 'app-1', name: 'CAKE', displayName: 'Cake App' },
+        { id: 'app-2', name: 'core', displayName: 'Core App' }, // lowercase
+      ];
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: allApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const trigger = screen.getByRole('combobox');
+        expect(trigger).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // core (lowercase) should be filtered out when currentAppName is CORE (uppercase)
+      expect(screen.queryByText('Core App')).not.toBeInTheDocument();
+    });
+
+    it('sorts apps by display order when apps are in APP_DISPLAY_ORDER', async () => {
+      const allApps = [
+        { id: 'app-1', name: 'TRAC', displayName: 'Trac App' },
+        { id: 'app-2', name: 'CAKE', displayName: 'Cake App' },
+        { id: 'app-3', name: 'ADMIN', displayName: 'Admin App' },
+      ];
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: allApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const content = screen.queryByTestId('select-content');
+        expect(content).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // ADMIN should come before CAKE, which should come before TRAC (based on APP_DISPLAY_ORDER)
+      const items = screen.queryAllByTestId(/select-item-/);
+      expect(items.length).toBeGreaterThan(0);
+    });
+
+    it('sorts apps alphabetically when not in APP_DISPLAY_ORDER', async () => {
+      const allApps = [
+        { id: 'app-1', name: 'ZAPP', displayName: 'Z App' },
+        { id: 'app-2', name: 'AAPP', displayName: 'A App' },
+        { id: 'app-3', name: 'MAPP', displayName: 'M App' },
+      ];
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: allApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const content = screen.queryByTestId('select-content');
+        expect(content).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Apps not in display order should be sorted alphabetically
+      const items = screen.queryAllByTestId(/select-item-/);
+      expect(items.length).toBe(3);
+    });
+
+    it('prioritizes apps in display order over alphabetical sorting', async () => {
+      const allApps = [
+        { id: 'app-1', name: 'ZAPP', displayName: 'Z App' }, // Not in order
+        { id: 'app-2', name: 'ADMIN', displayName: 'Admin App' }, // In order (index 0)
+        { id: 'app-3', name: 'AAPP', displayName: 'A App' }, // Not in order
+      ];
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: allApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const content = screen.queryByTestId('select-content');
+        expect(content).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // ADMIN (in order) should come before apps not in order
+      const items = screen.queryAllByTestId(/select-item-/);
+      expect(items.length).toBe(3);
+    });
+  });
+
+  // Session encoding tests
+  describe('Session Encoding', () => {
+    it('includes session data in URL when session is available', async () => {
+      const user = userEvent.setup();
+      
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { id: 'user-1', email: 'test@example.com' },
+        session: {
+          access_token: 'test-access-token',
+          refresh_token: 'test-refresh-token',
+          expires_at: Date.now() + 3600000,
+          expires_in: 3600,
+          token_type: 'bearer',
+          user: { id: 'user-1', email: 'test@example.com' },
+        },
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('CAKE');
+      }
+
+      expect(mockWindowOpen).toHaveBeenCalled();
+      const [url] = mockWindowOpen.mock.calls[0];
+      expect(url).toContain('session=');
+    });
+
+    it('does not include session data when session is not available', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { id: 'user-1', email: 'test@example.com' },
+        session: null,
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('CAKE');
+      }
+
+      expect(mockWindowOpen).toHaveBeenCalled();
+      const [url] = mockWindowOpen.mock.calls[0];
+      expect(url).not.toContain('session=');
+    });
+
+    it('handles session encoding errors gracefully', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { id: 'user-1', email: 'test@example.com' },
+        session: {
+          access_token: 'test-token',
+          refresh_token: 'test-refresh-token',
+          expires_at: Date.now() + 3600000,
+          expires_in: 3600,
+          token_type: 'bearer',
+          user: { id: 'user-1', email: 'test@example.com' },
+        },
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Create a spy on JSON.stringify that throws only when called
+      const stringifySpy = vi.spyOn(JSON, 'stringify').mockImplementationOnce(() => {
+        throw new Error('Stringify error');
+      });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('CAKE');
+      }
+
+      // Should fall back to session_token parameter
+      expect(mockWindowOpen).toHaveBeenCalled();
+      const [url] = mockWindowOpen.mock.calls[0];
+      expect(url).toContain('session_token=');
+
+      // Restore
+      stringifySpy.mockRestore();
+    });
+
+    it('includes minimal user data in session encoding', async () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { id: 'user-1', email: 'test@example.com' },
+        session: {
+          access_token: 'test-access-token',
+          refresh_token: 'test-refresh-token',
+          expires_at: Date.now() + 3600000,
+          expires_in: 3600,
+          token_type: 'bearer',
+          user: { id: 'user-1', email: 'test@example.com' },
+        },
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('CAKE');
+      }
+
+      expect(mockWindowOpen).toHaveBeenCalled();
+      const [url] = mockWindowOpen.mock.calls[0];
+      
+      // Decode and verify session data
+      const urlObj = new URL(url);
+      const sessionParam = urlObj.searchParams.get('session');
+      if (sessionParam) {
+        const decoded = JSON.parse(atob(sessionParam));
+        expect(decoded.user).toHaveProperty('id');
+        expect(decoded.user).toHaveProperty('email');
+        expect(decoded.user.id).toBe('user-1');
+        expect(decoded.user.email).toBe('test@example.com');
+      }
+    });
+  });
+
+  // Error handling tests
+  describe('Error Handling', () => {
+    it('renders trigger when error occurs and trigger is provided', () => {
+      mockUseAccessibleApps.mockReturnValueOnce({
+        apps: [],
+        loading: false,
+        error: new Error('Network error'),
+        refetch: vi.fn(),
+      });
+
+      const trigger = <div data-testid="error-trigger">Logo</div>;
+      renderWithProviders(<AppSwitcher currentAppName="CORE" trigger={trigger} />);
+
+      expect(screen.getByTestId('error-trigger')).toBeInTheDocument();
+    });
+
+    it('returns null when error occurs and no trigger is provided', () => {
+      mockUseAccessibleApps.mockReturnValueOnce({
+        apps: [],
+        loading: false,
+        error: new Error('Network error'),
+        refetch: vi.fn(),
+      });
+
+      const { container } = renderWithProviders(
+        <AppSwitcher currentAppName="CORE" />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles different error types gracefully', () => {
+      const errorTypes = [
+        new Error('Network error'),
+        new Error('Permission denied'),
+      ];
+
+      errorTypes.forEach((error, index) => {
+        mockUseAccessibleApps.mockReturnValueOnce({
+          apps: [],
+          loading: false,
+          error: error as Error,
+          refetch: vi.fn(),
+        });
+
+        const trigger = <div data-testid={`trigger-${index}`}>Logo</div>;
+        const { unmount } = renderWithProviders(
+          <AppSwitcher currentAppName="CORE" trigger={trigger} />
+        );
+
+        expect(screen.getByTestId(`trigger-${index}`)).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+
+  // Loading state tests
+  describe('Loading States', () => {
+    it('disables select when loading', () => {
+      mockUseAccessibleApps.mockReturnValue({
+        apps: mockApps, // Provide apps so component renders
+        loading: true,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      const select = screen.getByTestId('select');
+      expect(select).toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('disables select when no apps available but still loading', () => {
+      mockUseAccessibleApps.mockReturnValue({
+        apps: [],
+        loading: true,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // When loading, component should render but be disabled
+      const select = screen.getByTestId('select');
+      expect(select).toHaveAttribute('data-disabled', 'true');
+    });
+
+    it('enables select when apps are available and not loading', async () => {
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        // When apps are available and not loading, disabled should be false
+        expect(select).toHaveAttribute('data-disabled', 'false');
+      }, { timeout: TEST_TIMEOUT });
+    });
+  });
+
+  // User state tests
+  describe('User State Variations', () => {
+    it('handles no user gracefully', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: null,
+        session: null,
+        isAuthenticated: false,
+        loading: false,
+        error: null,
+        appName: undefined,
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Without user, cache won't load, but component should still render if apps are available
+      // Component may return null if no apps and not loading
+      const { container } = renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+      // Component behavior depends on apps availability
+      expect(container).toBeDefined();
+    });
+
+    it('handles user without id gracefully', () => {
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { email: 'test@example.com' } as any,
+        session: null,
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      // Should not crash - component should handle missing user.id
+      const { container } = renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+      expect(container).toBeDefined();
+    });
+
+    it('handles user change correctly', async () => {
+      const { rerender } = renderWithProviders(
+        <AppSwitcher currentAppName="CORE" />
+      );
+
+      await waitFor(() => {
+        expect(screen.queryByRole('combobox')).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Change user
+      mockUseUnifiedAuth.mockReturnValue({
+        user: { id: 'user-2', email: 'test2@example.com' },
+        session: null,
+        isAuthenticated: true,
+        loading: false,
+        error: null,
+        appName: 'CORE',
+      });
+
+      rerender(<AppSwitcher currentAppName="CORE" />);
+
+      // Should handle user change without crashing
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+    });
+  });
+
+  // Trigger rendering tests
+  describe('Trigger Rendering', () => {
+    it('renders custom trigger with asChild', () => {
+      const trigger = <img src="/logo.svg" alt="Logo" data-testid="custom-logo" />;
+      
+      renderWithProviders(
+        <AppSwitcher currentAppName="CORE" trigger={trigger} />
+      );
+
+      expect(screen.getByTestId('custom-logo')).toBeInTheDocument();
+      const triggerElement = screen.getByTestId('select-trigger');
+      expect(triggerElement).toBeInTheDocument();
+      expect(triggerElement).toHaveAttribute('data-variant', 'ghost');
+      expect(triggerElement).toHaveAttribute('data-show-chevron', 'false');
+    });
+
+    it('renders default trigger with PACE icon when no trigger provided', () => {
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeInTheDocument();
+      expect(trigger).toHaveAttribute('data-variant', 'ghost');
+      expect(trigger).toHaveAttribute('data-show-chevron', 'false');
+      
+      // Should have PACE icon
+      const img = trigger.querySelector('img');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('alt', 'PACE');
+    });
+
+    it('applies className to Select component', () => {
+      renderWithProviders(
+        <AppSwitcher currentAppName="CORE" className="custom-class" />
+      );
+
+      const select = screen.getByTestId('select');
+      expect(select).toHaveClass('custom-class');
+    });
+
+    it('applies className to default trigger', () => {
+      renderWithProviders(
+        <AppSwitcher currentAppName="CORE" className="custom-class" />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      expect(trigger).toBeInTheDocument();
+    });
+  });
+
+  // App selection and navigation tests
+  describe('App Selection and Navigation', () => {
+    it('opens app URL in new tab when app is selected', async () => {
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('CAKE');
+      }
+
+      expect(mockBuildAppUrl).toHaveBeenCalledWith({ appName: 'CAKE', path: '/' });
+      expect(mockWindowOpen).toHaveBeenCalledWith(
+        expect.stringContaining('http://localhost:8083/'),
+        '_blank'
+      );
+    });
+
+    it('calls buildAppUrl with correct parameters', async () => {
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('TRAC');
+      }
+
+      expect(mockBuildAppUrl).toHaveBeenCalledWith({ appName: 'TRAC', path: '/' });
+    });
+
+    it('handles window.open errors gracefully', async () => {
+      // Mock window.open to throw
+      const originalOpen = window.open;
+      const mockOpenWithError = vi.fn(() => {
+        throw new Error('Popup blocked');
+      });
+      window.open = mockOpenWithError;
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      // The component calls window.open directly, so the error will be thrown
+      // but the component should handle it gracefully (not crash the app)
+      if (storedOnValueChangeRef.current) {
+        // The error will be thrown, but we're testing that the component doesn't crash
+        try {
+          storedOnValueChangeRef.current('CAKE');
+        } catch (error) {
+          // Error is expected - component should handle it
+          expect(error).toBeInstanceOf(Error);
+        }
+      }
+
+      // Verify window.open was called (even though it threw)
+      expect(mockOpenWithError).toHaveBeenCalled();
+
+      // Restore
+      window.open = originalOpen;
+    });
+  });
+
+  // ShowSwitcher prop tests
+  describe('ShowSwitcher Prop', () => {
+    it('returns trigger when showSwitcher is false and trigger is provided', () => {
+      const trigger = <div data-testid="trigger">Logo</div>;
+      
+      const { container } = renderWithProviders(
+        <AppSwitcher currentAppName="CORE" showSwitcher={false} trigger={trigger} />
+      );
+
+      expect(screen.getByTestId('trigger')).toBeInTheDocument();
+    });
+
+    it('returns null when showSwitcher is false and no trigger is provided', () => {
+      const { container } = renderWithProviders(
+        <AppSwitcher currentAppName="CORE" showSwitcher={false} />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('uses default showSwitcher value (true)', () => {
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      expect(screen.getByRole('combobox')).toBeInTheDocument();
+    });
+  });
+
+  // Edge cases
+  describe('Edge Cases', () => {
+    it('handles empty apps array', () => {
+      mockUseAccessibleApps.mockReturnValue({
+        apps: [],
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      const { container } = renderWithProviders(
+        <AppSwitcher currentAppName="CORE" />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles apps with missing displayName', async () => {
+      const appsWithMissingData = [
+        { id: 'app-1', name: 'CAKE', displayName: '' },
+        { id: 'app-2', name: 'TRAC' } as any,
+      ];
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: appsWithMissingData,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('handles apps with missing logoUrl', async () => {
+      mockGetAppIcon.mockReturnValueOnce(undefined);
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('handles very long app names', async () => {
+      const longNameApp = {
+        id: 'app-1',
+        name: 'A'.repeat(100),
+        displayName: 'Very Long App Name',
+      };
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: [longNameApp],
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('handles special characters in app names', async () => {
+      const specialCharApp = {
+        id: 'app-1',
+        name: 'APP-NAME',
+        displayName: 'App with Special Chars',
+      };
+
+      mockUseAccessibleApps.mockReturnValue({
+        apps: [specialCharApp],
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+    });
+
+    it('handles currentAppName with special characters', () => {
+      renderWithProviders(<AppSwitcher currentAppName="APP-NAME" />);
+
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('handles empty currentAppName', () => {
+      renderWithProviders(<AppSwitcher currentAppName="" />);
+
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+    });
+
+    it('handles undefined className', () => {
+      renderWithProviders(<AppSwitcher currentAppName="CORE" className={undefined} />);
+
+      const select = screen.getByTestId('select');
+      expect(select).toBeInTheDocument();
+    });
+  });
+
+  // Integration scenarios
+  describe('Integration Scenarios', () => {
+    it('handles full flow: load cache, fetch apps, save cache, render, select app', async () => {
+      // Set up initial cache
+      const cachedApps = [
+        { id: 'app-1', name: 'CAKE', displayName: 'Cake App', logoUrl: '/icons/cake.svg', sortId: 10 },
+      ];
+
+      if (typeof window !== 'undefined' && window.sessionStorage) {
+        window.sessionStorage.setItem('pace-core:appswitcher:apps:user-1', JSON.stringify(cachedApps));
+      }
+
+      // Mock apps to be fetched
+      mockUseAccessibleApps.mockReturnValue({
+        apps: mockApps,
+        loading: false,
+        error: null,
+        refetch: vi.fn(),
+      });
+
+      renderWithProviders(<AppSwitcher currentAppName="CORE" />);
+
+      await waitFor(() => {
+        const select = screen.getByTestId('select');
+        expect(select).toBeInTheDocument();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Verify cache was updated
+      await waitFor(() => {
+        if (typeof window !== 'undefined' && window.sessionStorage) {
+          const cached = window.sessionStorage.getItem('pace-core:appswitcher:apps:user-1');
+          expect(cached).toBeTruthy();
+        }
+      }, { timeout: TEST_TIMEOUT });
+
+      // Wait for apps to be processed and callback to be set
+      await waitFor(() => {
+        expect(storedOnValueChangeRef.current).toBeTruthy();
+      }, { timeout: TEST_TIMEOUT });
+
+      // Simulate app selection using stored callback
+      if (storedOnValueChangeRef.current) {
+        storedOnValueChangeRef.current('CAKE');
+      }
+
+      expect(mockWindowOpen).toHaveBeenCalled();
+    });
+
+    it('handles rapid user changes', async () => {
+      const { rerender } = renderWithProviders(
+        <AppSwitcher currentAppName="CORE" />
+      );
+
+      // Rapidly change users
+      for (let i = 1; i <= 5; i++) {
+        mockUseUnifiedAuth.mockReturnValue({
+          user: { id: `user-${i}`, email: `test${i}@example.com` },
+          session: null,
+          isAuthenticated: true,
+          loading: false,
+          error: null,
+          appName: 'CORE',
+        });
+
+        rerender(<AppSwitcher currentAppName="CORE" />);
+      }
+
+      // Should handle rapid changes without crashing
+      expect(screen.queryByRole('combobox')).toBeInTheDocument();
+    });
+  });
+});