⚗️(frontend) show username on AccountDropDown

- show username instead of "My account"

CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to
 
 - ✨(domains) add endpoint to list and retrieve domain accesses @sdemagny #404
 - 🍱(dev) embark dimail-api as container by @mjeammet #366
+- ⚗️(frontend) show username on AccountDropDown #412
 
 ## [1.1.0] - 2024-09-10
 

src/frontend/apps/desk/src/features/header/AccountDropdown.tsx

@@ -7,32 +7,38 @@ import { useAuthStore } from '@/core/auth';
 
 export const AccountDropdown = () => {
   const { t } = useTranslation();
-  const { logout } = useAuthStore();
+  const { userData, logout } = useAuthStore();
 
+  const userName = userData?.name || t('No Username');
   return (
     <DropButton
-      aria-label={t('My account')}
+      aria-label={userName}
       button={
         <Box $flex $direction="row" $align="center">
-          <Text $theme="primary">{t('My account')}</Text>
+          <Text $theme="primary">{userName}</Text>
           <Text className="material-icons" $theme="primary" aria-hidden="true">
             arrow_drop_down
           </Text>
         </Box>
       }
     >
-      <Button
-        onClick={logout}
-        color="primary-text"
-        icon={
-          <span className="material-icons" aria-hidden="true">
-            logout
-          </span>
-        }
-        aria-label={t('Logout')}
-      >
-        <Text $weight="normal">{t('Logout')}</Text>
-      </Button>
+      <Box $css="display: flex; direction: column; gap: 0.5rem">
+        <Box>
+          <Button
+            onClick={logout}
+            key="logout"
+            color="primary-text"
+            icon={
+              <span className="material-icons" aria-hidden="true">
+                logout
+              </span>
+            }
+            aria-label={t('Logout')}
+          >
+            <Text $weight="normal">{t('Logout')}</Text>
+          </Button>
+        </Box>
+      </Box>
     </DropButton>
   );
 };

src/frontend/apps/desk/src/features/header/__tests__/AccountDropdown.test.tsx

@@ -0,0 +1,69 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { useAuthStore } from '@/core/auth';
+import { AppWrapper } from '@/tests/utils';
+
+import { AccountDropdown } from '../AccountDropdown';
+
+jest.mock('@/core/auth', () => ({
+  useAuthStore: jest.fn(),
+}));
+
+describe('AccountDropdown', () => {
+  const mockLogout = jest.fn();
+  const mockUserData = {
+    id: '1',
+    email: 'test@example.com',
+    name: 'Test User',
+  };
+
+  const renderAccountDropdown = () =>
+    render(<AccountDropdown />, { wrapper: AppWrapper });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useAuthStore as unknown as jest.Mock).mockReturnValue({
+      userData: mockUserData,
+      logout: mockLogout,
+    });
+  });
+
+  it('renders the user name correctly', async () => {
+    renderAccountDropdown();
+
+    expect(await screen.findByText('Test User')).toBeInTheDocument();
+  });
+
+  it('renders "No Username" when userData name is missing', () => {
+    (useAuthStore as unknown as jest.Mock).mockReturnValue({
+      userData: { id: '1', email: 'test@example.com' }, // No name property
+      logout: mockLogout,
+    });
+    renderAccountDropdown();
+    expect(screen.getByText('No Username')).toBeInTheDocument();
+  });
+
+  it('opens the dropdown and shows logout button when clicked', async () => {
+    renderAccountDropdown();
+
+    const dropButton = await screen.findByText('Test User');
+    fireEvent.click(dropButton);
+
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+    expect(screen.getByLabelText('Logout')).toBeInTheDocument();
+  });
+
+  it('calls logout function when logout button is clicked', async () => {
+    renderAccountDropdown();
+
+    // Open the dropdown first
+    const dropButton = await screen.findByText('Test User');
+    fireEvent.click(dropButton);
+
+    // Click the logout button
+    const logoutButton = screen.getByLabelText('Logout');
+    fireEvent.click(logoutButton);
+
+    expect(mockLogout).toHaveBeenCalledTimes(1);
+  });
+});

src/frontend/apps/desk/src/i18n/translations.json

@@ -93,9 +93,9 @@
       "Member icon": "Icône de membre",
       "Member {{name}} added to the team": "Membre {{name}} ajouté au groupe",
       "More info?": "Plus d'infos ?",
-      "My account": "Mon compte",
       "Names": "Noms",
       "New name...": "Nouveau nom...",
+      "No Username": "Aucun nom d'utilisateur",
       "No domains exist.": "Aucun domaine existant.",
       "No mail box was created with this mail domain.": "Aucune boîte mail n'a été créée avec ce nom de domaine.",
       "Nothing exceptional, no special privileges related to a .gouv.fr.": "Rien d'exceptionnel, pas de privilèges spéciaux liés à un .gouv.fr.",

src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts

@@ -8,7 +8,7 @@ test.beforeEach(async ({ page, browserName }) => {
 });
 
 test.describe('Header', () => {
-  test('checks all the elements are visible', async ({ page }) => {
+  test('checks all the elements are visible', async ({ page, browserName }) => {
     const header = page.locator('header').first();
 
     await expect(header.getByAltText('Marianne Logo')).toBeVisible();
@@ -37,13 +37,15 @@ test.describe('Header', () => {
     ).toBeVisible();
 
     await expect(header.getByRole('combobox').getByText('EN')).toBeVisible();
-    await expect(header.getByText('My account')).toBeVisible();
+    await expect(
+      header.getByText(new RegExp(`E2E ${browserName}`, 'i')),
+    ).toBeVisible();
   });
 
-  test('checks logout button', async ({ page }) => {
+  test('checks logout button', async ({ page, browserName }) => {
     await page
       .getByRole('button', {
-        name: 'My account',
+        name: new RegExp(`E2E ${browserName}`, 'i'),
       })
       .click();