test(headerPanel/Container/Menu): increase coverage (#17786)

carbon-design-system · Oct 28, 2024 · 098bfb8 · 098bfb8
1 parent 818722e
commit 098bfb8
Show file tree

Hide file tree

Showing 4 changed files with 153 additions and 3 deletions.
diff --git a/packages/react/src/components/UIShell/HeaderPanel.tsx b/packages/react/src/components/UIShell/HeaderPanel.tsx
@@ -119,7 +119,7 @@ const HeaderPanel: React.FC<HeaderPanelProps> = React.forwardRef(
       const childJsxElement = children as JSX.Element;
 
       if (
-        childJsxElement.type?.displayName === 'Switcher' &&
+        childJsxElement?.type?.displayName === 'Switcher' &&
         !focusedElement?.closest(`.${prefix}--header-panel--expanded`) &&
         !focusedElement?.closest(`.${prefix}--header__action`) &&
         !headerPanelReference?.current?.classList.contains(

diff --git a/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js b/packages/react/src/components/UIShell/__tests__/HeaderContainer-test.js
@@ -10,6 +10,7 @@ import React from 'react';
 import { act } from 'react';
 
 import { HeaderContainer } from '../';
+import userEvent from '@testing-library/user-event';
 
 describe('HeaderContainer', () => {
   it('should support rendering through a render prop', () => {
@@ -72,4 +73,19 @@ describe('HeaderContainer', () => {
       {}
     );
   });
+
+  it('should close the side nav on Escape', async () => {
+    const renderProp = jest.fn(() => null);
+
+    render(<HeaderContainer render={renderProp} isSideNavExpanded />);
+
+    await userEvent.keyboard('[Escape]');
+    expect(renderProp).toHaveBeenCalledWith(
+      {
+        isSideNavExpanded: false,
+        onClickSideNavExpand: expect.any(Function),
+      },
+      {}
+    );
+  });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js b/packages/react/src/components/UIShell/__tests__/HeaderMenu-test.js
@@ -8,6 +8,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { HeaderMenu, HeaderMenuItem } from '../';
+import userEvent from '@testing-library/user-event';
 
 describe('HeaderMenu', () => {
   it('should set the current class if `isActive` is true', () => {
@@ -66,4 +67,77 @@ describe('HeaderMenu', () => {
     );
     expect(ref).toHaveBeenCalledWith(screen.getByText('test-link'));
   });
+
+  it('should handle on click on the menu', async () => {
+    const { container } = render(
+      <HeaderMenu aria-label="test-label" menuLinkName="test-link">
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
+    );
+
+    expect(container.firstChild.firstChild).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    );
+    await userEvent.click(container.firstChild);
+    expect(container.firstChild.firstChild).toHaveAttribute(
+      'aria-expanded',
+      'true'
+    );
+  });
+
+  it('should handle on key down on the menu', async () => {
+    const { container } = render(
+      <HeaderMenu aria-label="test-label" menuLinkName="test-link">
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
+    );
+
+    expect(container.firstChild.firstChild).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    );
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+    expect(container.firstChild.firstChild).toHaveAttribute(
+      'aria-expanded',
+      'true'
+    );
+    await userEvent.keyboard('[Escape]');
+    expect(container.firstChild.firstChild).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    );
+  });
+
+  it('should handle blur on the menu', async () => {
+    const { container } = render(
+      <HeaderMenu aria-label="test-label" menuLinkName="test-link">
+        <HeaderMenuItem href="/a">a</HeaderMenuItem>
+        <HeaderMenuItem href="/b">b</HeaderMenuItem>
+        <HeaderMenuItem href="/c">c</HeaderMenuItem>
+      </HeaderMenu>
+    );
+
+    // tab and open the menu
+    await userEvent.tab();
+    await userEvent.keyboard('[Enter]');
+
+    // tab through items
+    await userEvent.tab();
+    await userEvent.tab();
+    await userEvent.tab();
+
+    // tab and close the menu
+    await userEvent.tab();
+
+    expect(container.firstChild.firstChild).toHaveAttribute(
+      'aria-expanded',
+      'false'
+    );
+  });
 });
diff --git a/packages/react/src/components/UIShell/__tests__/HeaderPanel-test.js b/packages/react/src/components/UIShell/__tests__/HeaderPanel-test.js
@@ -7,7 +7,9 @@
 
 import React from 'react';
 import HeaderPanel from '../HeaderPanel';
-import { render, screen } from '@testing-library/react';
+import Switcher from '../Switcher';
+import SwitcherItem from '../SwitcherItem';
+import { render, screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 describe('HeaderPanel', () => {
@@ -68,7 +70,7 @@ describe('HeaderPanel', () => {
     it('should call `onHeaderPanelFocus` callback, when defined', async () => {
       const onHeaderPanelFocus = jest.fn();
       render(
-        <HeaderPanel onHeaderPanelFocus={onHeaderPanelFocus}>
+        <HeaderPanel onHeaderPanelFocus={onHeaderPanelFocus} expanded>
           <button type="button">Test</button>
         </HeaderPanel>
       );
@@ -91,5 +93,63 @@ describe('HeaderPanel', () => {
         await userEvent.keyboard('{Escape}');
       }).not.toThrow();
     });
+
+    it('should handle click', async () => {
+      const onClick = jest.fn();
+
+      render(
+        <HeaderPanel
+          aria-label="test-aria"
+          expanded
+          href="#"
+          onHeaderPanelFocus={onClick}>
+          <Switcher aria-label="Switcher Container">
+            <SwitcherItem aria-label="Link 1" href="#">
+              Link 1
+            </SwitcherItem>
+          </Switcher>
+        </HeaderPanel>
+      );
+
+      await userEvent.click(document.body);
+
+      expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should handle onKeyDown', async () => {
+      const onKeyDown = jest.fn();
+
+      render(
+        <HeaderPanel
+          expanded
+          href="#"
+          onHeaderPanelFocus={onKeyDown}
+          data-testid="header-panel">
+          <button type="button">Test</button>
+        </HeaderPanel>
+      );
+
+      screen.getByRole('button', { name: 'Test' }).focus();
+
+      await userEvent.keyboard('{Escape}');
+      expect(onKeyDown).toHaveBeenCalled();
+    });
+
+    it('should handle onBlur', async () => {
+      const onBlur = jest.fn();
+
+      render(
+        <HeaderPanel href="#" expanded onHeaderPanelFocus={onBlur}>
+          <div>Panel Content</div>
+        </HeaderPanel>
+      );
+
+      const panel = screen.getByText('Panel Content').parentElement;
+      fireEvent.blur(panel, {
+        relatedTarget: null,
+      });
+
+      expect(onBlur).toHaveBeenCalled();
+    });
   });
 });