diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58e038a..d1bf349 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ and this project adheres to
- ✨(domains) add endpoint to list and retrieve domain accesses #404
- 🍱(dev) embark dimail-api as container #366
- ✨(dimail) allow la regie to request a token for another user #416
+- ⚗️(frontend) show username on AccountDropDown #412
### Changed
diff --git a/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx b/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx
index eca93d4..276ac52 100644
--- a/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx
+++ b/src/frontend/apps/desk/src/features/header/AccountDropdown.tsx
@@ -7,32 +7,35 @@ 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 (
- {t('My account')}
+ {userName}
arrow_drop_down
}
>
-
+
+
+
);
};
diff --git a/src/frontend/apps/desk/src/features/header/__tests__/AccountDropdown.test.tsx b/src/frontend/apps/desk/src/features/header/__tests__/AccountDropdown.test.tsx
new file mode 100644
index 0000000..65bf114
--- /dev/null
+++ b/src/frontend/apps/desk/src/features/header/__tests__/AccountDropdown.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { useAuthStore } from '@/core/auth';
+import { AppWrapper } from '@/tests/utils';
+
+import { AccountDropdown } from '../AccountDropdown';
+
+describe('AccountDropdown', () => {
+ const mockLogout = jest.fn();
+
+ const renderAccountDropdown = () =>
+ render(, { wrapper: AppWrapper });
+
+ beforeEach(() => {
+ jest.clearAllMocks();
+ useAuthStore.setState({
+ userData: {
+ id: '1',
+ email: 'test@example.com',
+ name: 'Test User',
+ },
+ 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.setState({
+ userData: {
+ id: '1',
+ email: 'test@example.com',
+ },
+ 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');
+ await userEvent.click(dropButton);
+
+ expect(screen.getByText('Logout')).toBeInTheDocument();
+ expect(screen.getByLabelText('Logout')).toBeInTheDocument();
+ });
+
+ it('calls logout function when logout button is clicked', async () => {
+ renderAccountDropdown();
+
+ const dropButton = await screen.findByText('Test User');
+ await userEvent.click(dropButton);
+
+ const logoutButton = screen.getByLabelText('Logout');
+ await userEvent.click(logoutButton);
+
+ expect(mockLogout).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/frontend/apps/desk/src/i18n/translations.json b/src/frontend/apps/desk/src/i18n/translations.json
index 8acf3f8..2e17aad 100644
--- a/src/frontend/apps/desk/src/i18n/translations.json
+++ b/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.",
diff --git a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts b/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
index 30a407b..fce7665 100644
--- a/src/frontend/apps/e2e/__tests__/app-desk/header.spec.ts
+++ b/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();