Add tests for UserMenu and WorkspaceSwitcher components

app/src/components/navigation/UserMenu.test.tsx

@@ -0,0 +1,175 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { fireEvent, waitFor } from '@testing-library/react';
+import { render } from '../../test/utils';
+import UserMenu from './UserMenu';
+import { UserRole } from '../../types/models';
+
+// Mock the contexts
+vi.mock('../../contexts/AuthContext', () => ({
+  useAuth: vi.fn(),
+}));
+
+// Mock the settings components
+vi.mock('../settings/account/AccountSettings', () => ({
+  default: ({ opened, onClose }: { opened: boolean; onClose: () => void }) => (
+    <div data-testid="account-settings-modal" data-opened={opened}>
+      <button onClick={onClose}>Close Account Settings</button>
+    </div>
+  ),
+}));
+
+vi.mock('../settings/admin/AdminDashboard', () => ({
+  default: ({ opened, onClose }: { opened: boolean; onClose: () => void }) => (
+    <div data-testid="admin-dashboard-modal" data-opened={opened}>
+      <button onClick={onClose}>Close Admin Dashboard</button>
+    </div>
+  ),
+}));
+
+const TestWrapper = ({ children }: { children: React.ReactNode }) => (
+  <div>{children}</div>
+);
+
+describe('UserMenu', () => {
+  const mockLogout = vi.fn();
+  const mockUser = {
+    id: 1,
+    email: 'test@example.com',
+    displayName: 'Test User',
+    role: UserRole.Editor,
+    createdAt: '2024-01-01T00:00:00Z',
+    lastWorkspaceId: 1,
+  };
+
+  beforeEach(async () => {
+    vi.clearAllMocks();
+
+    const { useAuth } = await import('../../contexts/AuthContext');
+    vi.mocked(useAuth).mockReturnValue({
+      user: mockUser,
+      logout: mockLogout,
+      loading: false,
+      initialized: true,
+      login: vi.fn(),
+      refreshToken: vi.fn(),
+      refreshUser: vi.fn(),
+    });
+  });
+
+  it('renders user avatar and shows user info when clicked', async () => {
+    const { getByLabelText, getByText } = render(
+      <TestWrapper>
+        <UserMenu />
+      </TestWrapper>
+    );
+
+    // Find and click the avatar
+    const avatar = getByLabelText('User menu');
+    fireEvent.click(avatar);
+
+    // Check if user info is displayed in popover
+    await waitFor(() => {
+      expect(getByText('Test User')).toBeInTheDocument();
+    });
+  });
+
+  it('shows admin dashboard option for admin users only', async () => {
+    // Test admin user sees admin option
+    const { useAuth } = await import('../../contexts/AuthContext');
+    vi.mocked(useAuth).mockReturnValue({
+      user: { ...mockUser, role: UserRole.Admin },
+      logout: mockLogout,
+      loading: false,
+      initialized: true,
+      login: vi.fn(),
+      refreshToken: vi.fn(),
+      refreshUser: vi.fn(),
+    });
+
+    const { getByLabelText, getByText } = render(
+      <TestWrapper>
+        <UserMenu />
+      </TestWrapper>
+    );
+
+    const avatar = getByLabelText('User menu');
+    fireEvent.click(avatar);
+
+    await waitFor(() => {
+      expect(getByText('Admin Dashboard')).toBeInTheDocument();
+    });
+  });
+
+  it('opens account settings modal when clicked', async () => {
+    const { getByLabelText, getByText, getByTestId } = render(
+      <TestWrapper>
+        <UserMenu />
+      </TestWrapper>
+    );
+
+    const avatar = getByLabelText('User menu');
+    fireEvent.click(avatar);
+
+    await waitFor(() => {
+      const accountSettingsButton = getByText('Account Settings');
+      fireEvent.click(accountSettingsButton);
+    });
+
+    await waitFor(() => {
+      const modal = getByTestId('account-settings-modal');
+      expect(modal).toHaveAttribute('data-opened', 'true');
+    });
+  });
+
+  it('calls logout when logout button is clicked', async () => {
+    const { getByLabelText, getByText } = render(
+      <TestWrapper>
+        <UserMenu />
+      </TestWrapper>
+    );
+
+    const avatar = getByLabelText('User menu');
+    fireEvent.click(avatar);
+
+    await waitFor(() => {
+      const logoutButton = getByText('Logout');
+      fireEvent.click(logoutButton);
+    });
+
+    expect(mockLogout).toHaveBeenCalledOnce();
+  });
+
+  it('displays user email when displayName is not available', async () => {
+    const { useAuth } = await import('../../contexts/AuthContext');
+    const userWithoutDisplayName = {
+      id: mockUser.id,
+      email: mockUser.email,
+      role: mockUser.role,
+      createdAt: mockUser.createdAt,
+      lastWorkspaceId: mockUser.lastWorkspaceId,
+    };
+
+    vi.mocked(useAuth).mockReturnValue({
+      user: userWithoutDisplayName,
+      logout: mockLogout,
+      loading: false,
+      initialized: true,
+      login: vi.fn(),
+      refreshToken: vi.fn(),
+      refreshUser: vi.fn(),
+    });
+
+    const { getByLabelText, getByText } = render(
+      <TestWrapper>
+        <UserMenu />
+      </TestWrapper>
+    );
+
+    const avatar = getByLabelText('User menu');
+    fireEvent.click(avatar);
+
+    await waitFor(() => {
+      expect(getByText('test@example.com')).toBeInTheDocument();
+    });
+  });
+});