refactoring and optimising tests

Altinn · Oct 7, 2024 · 25e7286 · 25e7286
1 parent fc8192b
commit 25e7286
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/frontend/app-development/layout/PageHeader/PageHeader.tsx b/frontend/app-development/layout/PageHeader/PageHeader.tsx
@@ -66,14 +66,13 @@ const RightContent = (): ReactElement => {
 
   const isSmallScreen = useMediaQuery(MEDIA_QUERY_MAX_WIDTH);
   const userNameAndOrg = useUserNameAndOrg(user, org, repository);
-  const shouldDisplayText = !isSmallScreen;
 
   if (isSmallScreen) {
     return <SmallHeaderMenu />;
   }
   return (
     <StudioPageHeader.ProfileMenu
-      triggerButtonText={shouldDisplayText ? userNameAndOrg : undefined}
+      triggerButtonText={userNameAndOrg}
       ariaLabelTriggerButton={userNameAndOrg}
       profileImage={
         <StudioAvatar

diff --git a/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.test.tsx b/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.test.tsx
@@ -6,6 +6,8 @@ import { PageHeaderContext } from 'app-development/contexts/PageHeaderContext';
 import { pageHeaderContextMock } from 'app-development/test/headerMocks';
 import userEvent from '@testing-library/user-event';
 import { renderWithProviders } from 'app-development/test/mocks';
+import { type PageHeaderContextProps } from 'app-development/contexts/PageHeaderContext/PageHeaderContext';
+import { HeaderMenuGroupKey } from 'app-development/enums/HeaderMenuGroupKey';
 
 describe('SmallHeaderMenu', () => {
   afterEach(() => {
@@ -90,11 +92,28 @@ describe('SmallHeaderMenu', () => {
       expect(screen.getByRole('menuitem', { name: profileMenuItem.itemName })).toBeInTheDocument();
     });
   });
+
+  it('should show the header name when group is "Tools"', async () => {
+    const user = userEvent.setup();
+    renderSmallHeaderMenu({
+      ...pageHeaderContextMock,
+      menuItems: [{ ...pageHeaderContextMock.menuItems[0], group: HeaderMenuGroupKey.Tools }],
+    });
+
+    const button = screen.getByRole('button', { name: textMock('top_menu.menu') });
+    await user.click(button);
+
+    const heading = screen.getByRole('heading', {
+      name: textMock(HeaderMenuGroupKey.Tools),
+      level: 2,
+    });
+    expect(heading).toBeInTheDocument();
+  });
 });
 
-const renderSmallHeaderMenu = () => {
+const renderSmallHeaderMenu = (contextProps: Partial<PageHeaderContextProps> = {}) => {
   return renderWithProviders()(
-    <PageHeaderContext.Provider value={pageHeaderContextMock}>
+    <PageHeaderContext.Provider value={{ ...pageHeaderContextMock, ...contextProps }}>
       <SmallHeaderMenu />
     </PageHeaderContext.Provider>,
   );

diff --git a/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx b/frontend/app-development/layout/PageHeader/SmallHeaderMenu/SmallHeaderMenu.tsx
@@ -94,9 +94,6 @@ const DropdownMenuGroups = ({
   const { t } = useTranslation();
   const { menuItems, profileMenuItems } = usePageHeaderContext();
 
-  const menuGroupHeader = (menuGroup: NavigationMenuSmallGroup): string =>
-    menuGroup.showName ? t(menuGroup.name) : '';
-
   const groupedMenuItems: HeaderMenuGroup[] = groupMenuItemsByGroup(menuItems);
 
   const profileMenuGroup: NavigationMenuSmallGroup = {
@@ -113,9 +110,9 @@ const DropdownMenuGroups = ({
     profileMenuGroup,
   ];
 
-  return menuGroups.map((menuGroup: NavigationMenuSmallGroup, index: number) => (
+  return menuGroups.map((menuGroup: NavigationMenuSmallGroup) => (
     <DropdownMenu.Group
-      heading={menuGroupHeader(menuGroup)}
+      heading={menuGroup.showName && t(menuGroup.name)}
       className={classes.dropDownMenuGroup}
       key={menuGroup.name}
     >