feat(header): L3-4484 refactoring

PhillipsAuctionHouse · Nov 11, 2024 · 4580b5b · 4580b5b
1 parent 498b7e0
commit 4580b5b
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 17 deletions.
diff --git a/src/components/Navigation/NavigationItem/NavigationItem.test.tsx b/src/components/Navigation/NavigationItem/NavigationItem.test.tsx
@@ -31,20 +31,18 @@ describe('NavigationItem', () => {
 
   it('calls closeMenu, closeSubmenu, and onClick when clicked', async () => {
     const closeMenu = vi.fn();
-    const closeSubmenu = vi.fn();
     const onClick = vi.fn();
 
     render(
       <HeaderContext.Provider value={{ ...defaultHeaderContext, closeMenu }}>
-        <NavigationItem href="/" label="Home" closeSubmenu={closeSubmenu} onClick={onClick} />
+        <NavigationItem href="/" label="Home" onClick={onClick} />
       </HeaderContext.Provider>,
     );
 
     const navigationItem = screen.getByTestId('nav-item-Home');
     await userEvent.click(navigationItem);
 
     expect(closeMenu).toHaveBeenCalled();
-    expect(closeSubmenu).toHaveBeenCalled();
     expect(onClick).toHaveBeenCalled();
   });
 });
diff --git a/src/components/Navigation/NavigationItem/NavigationItem.tsx b/src/components/Navigation/NavigationItem/NavigationItem.tsx
@@ -35,10 +35,6 @@ export interface NavigationItemProps extends ComponentProps<'li'> {
    * Element to render within the navigation item, renders <Link> by default
    */
   element?: ElementType<LinkProps>;
-  /**
-   * Function to close the submenu
-   */
-  closeSubmenu?: () => void;
 }
 
 /**
@@ -61,7 +57,6 @@ const NavigationItem = forwardRef<HTMLLIElement, NavigationItemProps>(
       navGroup,
       navType,
       onClick,
-      closeSubmenu,
       element: Component = Link,
       ...props
     },
@@ -74,7 +69,6 @@ const NavigationItem = forwardRef<HTMLLIElement, NavigationItemProps>(
         {...props}
         onClick={(e) => {
           closeMenu?.();
-          closeSubmenu?.();
           onClick?.(e);
         }}
         data-testid={`nav-item-${label}`}

diff --git a/src/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.test.tsx b/src/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.test.tsx
@@ -1,5 +1,8 @@
 import { screen, render } from '@testing-library/react';
 import NavigationItemTrigger from './NavigationItemTrigger';
+import NavigationItem from '../NavigationItem/NavigationItem';
+import NavigationList from '../NavigationList/NavigationList';
+import userEvent from '@testing-library/user-event';
 
 describe('NavigationItemTrigger', () => {
   // const mockHandleSelection = vi.fn();
@@ -15,4 +18,21 @@ describe('NavigationItemTrigger', () => {
     expect(screen.queryByTestId(/nav-trigger/)).toBeInTheDocument();
     expect(screen.queryByTestId(/nav-trigger/)?.textContent).toEqual(mockLabel);
   });
+
+  it('calls onClick when clicked', async () => {
+    const onClick = vi.fn();
+
+    render(
+      <NavigationItemTrigger id="test-trigger" label="test" onClick={onClick}>
+        <NavigationList id="test-list-down">
+          <NavigationItem href="/" label="Home" onClick={onClick} />
+        </NavigationList>
+      </NavigationItemTrigger>,
+    );
+
+    const navigationItem = screen.getByTestId('nav-item-Home');
+    await userEvent.click(navigationItem);
+
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
 });
diff --git a/src/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.tsx b/src/components/Navigation/NavigationItemTrigger/NavigationItemTrigger.tsx
@@ -75,7 +75,13 @@ const NavigationItemTrigger = forwardRef<HTMLLIElement, NavigationItemTriggerPro
               <Text variant={TextVariants.snwHeaderLink}>{label}</Text>
             </button>
             {navListElement
-              ? React.cloneElement(navListElement[0], { className: `${baseClassName}__submenu`, closeSubmenu })
+              ? React.cloneElement(navListElement[0], {
+                  className: `${baseClassName}__submenu`,
+                  onClick: (e: React.MouseEvent<HTMLElement>) => {
+                    navListElement[0].props?.onClick?.(e);
+                    closeSubmenu?.();
+                  },
+                })
               : undefined}
           </li>
         </SSRMediaQuery.Media>

diff --git a/src/components/Navigation/NavigationList/NavigationList.test.tsx b/src/components/Navigation/NavigationList/NavigationList.test.tsx
@@ -1,9 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import NavigationList from './NavigationList';
 import NavigationItem from '../NavigationItem/NavigationItem';
 import { LinkVariants } from '../../Link/types';
 import NavigationItemTrigger from '../NavigationItemTrigger/NavigationItemTrigger';
 import { px } from '../../../utils';
+import userEvent from '@testing-library/user-event';
 
 describe('NavigationList', () => {
   const reqProps = { id: 'test-id' };
@@ -88,4 +89,34 @@ describe('NavigationList', () => {
     expect(getByTestId('test-id').querySelectorAll('.nav-link-start').length).toBe(1);
     expect(getByTestId('test-id').querySelectorAll('.nav-link-end').length).toBe(1);
   });
+
+  it('calls onClick handler when left section item is clicked', async () => {
+    const handleClick = vi.fn();
+    render(
+      <NavigationList {...reqProps} onClick={handleClick}>
+        <NavigationItem label="Home" href="#" navGroup="nav-link-start">
+          Large CTA 1
+        </NavigationItem>
+      </NavigationList>,
+    );
+
+    const navigationItem = screen.getByTestId('nav-item-Home');
+    await userEvent.click(navigationItem);
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('calls onClick handler when right section item is clicked', async () => {
+    const handleClick = vi.fn();
+    render(
+      <NavigationList {...reqProps} onClick={handleClick}>
+        <NavigationItem label="Home" href="#" navGroup="nav-link-end">
+          Small CTA 1
+        </NavigationItem>
+      </NavigationList>,
+    );
+
+    const navigationItem = screen.getByTestId('nav-item-Home');
+    await userEvent.click(navigationItem);
+    expect(handleClick).toHaveBeenCalled();
+  });
 });
diff --git a/src/components/Navigation/NavigationList/NavigationList.tsx b/src/components/Navigation/NavigationList/NavigationList.tsx
@@ -22,20 +22,25 @@ export interface NavigationListProps extends React.ComponentProps<'ul'> {
    */
   rightSectionHeading?: string;
   /**
-   * Function to close the submenu
-   */
-  closeSubmenu?: () => void;
+   * Rewrite the onClick event
+   * */
+  onClick?: React.MouseEventHandler<HTMLElement>;
 }
 
 const NavigationList = React.forwardRef<HTMLUListElement, NavigationListProps>(
-  ({ id, children, className, isOffScreen, leftSectionHeading, rightSectionHeading, closeSubmenu }, ref) => {
+  ({ id, children, className, isOffScreen, leftSectionHeading, rightSectionHeading, onClick }, ref) => {
     const leftSectionItems = React.Children.toArray(children)
       .map((child) => {
         if (
           React.isValidElement(child) &&
           (child as React.ReactElement<NavigationItemProps>).props.navGroup === 'nav-link-start'
         ) {
-          return React.cloneElement(child as React.ReactElement<NavigationItemProps>, { closeSubmenu });
+          return React.cloneElement(child as React.ReactElement<NavigationItemProps>, {
+            onClick: (e: React.MouseEvent<HTMLElement>) => {
+              onClick?.(e);
+              child.props?.onClick?.(e);
+            },
+          });
         }
       })
       .filter(Boolean);
@@ -46,7 +51,12 @@ const NavigationList = React.forwardRef<HTMLUListElement, NavigationListProps>(
           React.isValidElement(child) &&
           (child as React.ReactElement<NavigationItemProps>).props.navGroup === 'nav-link-end'
         ) {
-          return React.cloneElement(child as React.ReactElement<NavigationItemProps>, { closeSubmenu });
+          return React.cloneElement(child as React.ReactElement<NavigationItemProps>, {
+            onClick: (e: React.MouseEvent<HTMLElement>) => {
+              onClick?.(e);
+              child.props?.onClick?.(e);
+            },
+          });
         }
       })
       .filter(Boolean);