Test user clicks on dropdown

Not sure if we want to test the UI library in such detail though

app/scripts/components/common/page-header/page-header.test.tsx

@@ -1,5 +1,6 @@
 import React, { ComponentType } from 'react';
 import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 
 import NasaLogoColor from '../nasa-logo-color';
@@ -11,6 +12,25 @@ import PageHeader from './index';
 // config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path
 
 const mockMainNavItems: NavItem[] = [
+  {
+    id: 'dropdown',
+    title: 'Dropdown',
+    type: NavItemType.DROPDOWN,
+    children: [
+      {
+        id: 'submenu-1',
+        title: 'Submenu 1',
+        to: '/submenu-1',
+        type: NavItemType.INTERNAL_LINK
+      },
+      {
+        id: 'submenu-2',
+        title: 'Submenu 2',
+        to: '/submenu-2',
+        type: NavItemType.INTERNAL_LINK
+      }
+    ]
+  },
   {
     id: 'data-catalog',
     title: 'Data Catalog',
@@ -78,11 +98,24 @@ describe('PageHeader', () => {
 
     expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length);
     expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length);
+    expect(within(primaryNav).getByText('Dropdown')).toBeInTheDocument();
     expect(within(primaryNav).getByText('Data Catalog')).toBeInTheDocument();
     expect(within(primaryNav).getByText('Exploration')).toBeInTheDocument();
     expect(within(primaryNav).getByText('Stories')).toBeInTheDocument();
 
     expect(within(secondaryNav).getByText('About')).toBeInTheDocument();
     expect(within(secondaryNav).getByText('Contact')).toBeInTheDocument();
   });
+
+  test('the nav items are clickable and open the drop down', async () => {
+    const user = userEvent.setup();
+    const navElement = screen.getByRole('navigation');
+    expect(navElement).toBeInTheDocument();
+
+    const primaryNav = within(navElement).getAllByRole('list')[0];
+    const navItem = screen.getByText('Dropdown');
+    expect(within(primaryNav).getByText('Submenu 1')).not.toBeVisible();
+    await user.click(navItem);
+    expect(within(primaryNav).getByText('Submenu 1')).toBeVisible();
+  });
 });

package.json

@@ -59,6 +59,7 @@
     "@playwright/test": "^1.46.1",
     "@testing-library/jest-dom": "^5.16.2",
     "@testing-library/react": "^12.1.2",
+    "@testing-library/user-event": "^14.5.2",
     "@types/d3": "^7.4.0",
     "@types/mapbox-gl": "^2.7.5",
     "@types/node": "^22.5.0",

yarn.lock

@@ -3862,6 +3862,11 @@
     "@testing-library/dom" "^8.0.0"
     "@types/react-dom" "<18.0.0"
 
+"@testing-library/user-event@^14.5.2":
+  version "14.5.2"
+  resolved "http://verdaccio.ds.io:4873/@testing-library%2fuser-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd"
+  integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==
+
 "@tippyjs/react@^4.2.6":
   version "4.2.6"
   resolved "http://verdaccio.ds.io:4873/@tippyjs%2freact/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71"