From 3d7dfa019cb57917f1d9ca72f635d1697f0eba18 Mon Sep 17 00:00:00 2001 From: daproclaima Date: Thu, 19 Sep 2024 16:17:03 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9A=97=EF=B8=8F(frontend)=20show=20username?= =?UTF-8?q?=20on=20AccountDropDown?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - show username instead of "My account" - udpate translations and tests --- CHANGELOG.md | 1 + .../src/features/header/AccountDropdown.tsx | 33 ++++----- .../header/__tests__/AccountDropdown.test.tsx | 67 +++++++++++++++++++ .../apps/desk/src/i18n/translations.json | 2 +- .../e2e/__tests__/app-desk/header.spec.ts | 10 +-- 5 files changed, 93 insertions(+), 20 deletions(-) create mode 100644 src/frontend/apps/desk/src/features/header/__tests__/AccountDropdown.test.tsx 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} } > - + + + ); }; 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();