From 668444d502b965ec6a98f5d54b93f1be25a04156 Mon Sep 17 00:00:00 2001
From: Michael Stedman <46408716+recondesigns@users.noreply.github.com>
Date: Tue, 5 Mar 2024 01:38:07 -0600
Subject: [PATCH] migrated NavMobile files to .tsx and updated snapshot

---
 .../NavMobile/{NavMobile.js => NavMobile.tsx} | 67 +++++++++++++------
 .../{NavMobile.test.js => NavMobile.test.tsx} |  8 ++-
 ...e.test.js.snap => NavMobile.test.tsx.snap} |  0
 3 files changed, 52 insertions(+), 23 deletions(-)
 rename components/Nav/NavMobile/{NavMobile.js => NavMobile.tsx} (68%)
 rename components/Nav/NavMobile/__tests__/{NavMobile.test.js => NavMobile.test.tsx} (89%)
 rename components/Nav/NavMobile/__tests__/__snapshots__/{NavMobile.test.js.snap => NavMobile.test.tsx.snap} (100%)

diff --git a/components/Nav/NavMobile/NavMobile.js b/components/Nav/NavMobile/NavMobile.tsx
similarity index 68%
rename from components/Nav/NavMobile/NavMobile.js
rename to components/Nav/NavMobile/NavMobile.tsx
index 90ea76707..840dc204e 100644
--- a/components/Nav/NavMobile/NavMobile.js
+++ b/components/Nav/NavMobile/NavMobile.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { func, bool, string, arrayOf, shape } from 'prop-types';
 import classNames from 'classnames';
 import { s3 } from 'common/constants/urls';
 import HamburgerIcon from 'static/images/icons/hamburger.svg';
@@ -8,25 +7,53 @@ import ScreenReaderOnly from 'components/ScreenReaderOnly/ScreenReaderOnly';
 import Image from 'next/image';
 import styles from './NavMobile.module.css';
 
-NavMobile.propTypes = {
-  isOpen: bool.isRequired,
-  openMenu: func.isRequired,
-  closeMenu: func.isRequired,
-  navItems: arrayOf(
-    shape({
-      href: string.isRequired,
-      name: string.isRequired,
-      sublinks: arrayOf(
-        shape({
-          name: string.isRequired,
-          href: string.isRequired,
-        }),
-      ),
-    }),
-  ).isRequired,
+type SublinkType = {
+  /**
+   * String used as the link label.
+   */
+  name: string;
+  /**
+   * String used for the URL.
+   */
+  href: string;
 };
 
-function NavMobile({ isOpen, openMenu, closeMenu, navItems }) {
+type NavItemType = {
+  /**
+   * String used as the link label.
+   */
+  name: string;
+
+  /**
+   * String used for the URL.
+   */
+  href: string;
+  /**
+   * Adds nested sublinks.
+   */
+  sublinks?: SublinkType[];
+};
+
+export type NavMobilePropsType = {
+  /**
+   * Sets if the mobile navigation is open or closed.
+   */
+  isOpen: boolean;
+  /**
+   * Function called when open button is clicked.
+   */
+  openMenu: () => void;
+  /**
+   * Function called when close button is clicked.
+   */
+  closeMenu: () => void;
+  /**
+   * List of navigations items.
+   */
+  navItems: NavItemType[];
+};
+
+function NavMobile({ isOpen, openMenu, closeMenu, navItems }: NavMobilePropsType) {
   return (
     <header className={styles.NavMobile} data-testid="Mobile Nav Container">
       <Link href="/">
@@ -64,9 +91,7 @@ function NavMobile({ isOpen, openMenu, closeMenu, navItems }) {
           <ul className={styles.ul}>
             <li className={styles.li} key="Home">
               <Link href="/">
-                <a className={styles.link} name="dropdown">
-                  Home
-                </a>
+                <a className={styles.link}>Home</a>
               </Link>
             </li>
             {navItems.map(navlink => (
diff --git a/components/Nav/NavMobile/__tests__/NavMobile.test.js b/components/Nav/NavMobile/__tests__/NavMobile.test.tsx
similarity index 89%
rename from components/Nav/NavMobile/__tests__/NavMobile.test.js
rename to components/Nav/NavMobile/__tests__/NavMobile.test.tsx
index 5feacb8d1..494b8482d 100644
--- a/components/Nav/NavMobile/__tests__/NavMobile.test.js
+++ b/components/Nav/NavMobile/__tests__/NavMobile.test.tsx
@@ -49,7 +49,9 @@ describe('NavMobile', () => {
       />,
     );
 
-    fireEvent.click(wrapper.queryByTestId('Hamburger Button'));
+    const hamburgerButton = wrapper.queryByTestId('Hamburger Button')!;
+
+    fireEvent.click(hamburgerButton);
 
     expect(mockOpen).toHaveBeenCalled();
   });
@@ -61,7 +63,9 @@ describe('NavMobile', () => {
       <NavMobile navItems={mobileNavItems} isOpen openMenu={() => {}} closeMenu={mockClose} />,
     );
 
-    fireEvent.click(wrapper.queryByTestId(CLOSE_BUTTON));
+    const closeButton = wrapper.queryByTestId(CLOSE_BUTTON)!;
+
+    fireEvent.click(closeButton);
 
     expect(mockClose).toHaveBeenCalled();
   });
diff --git a/components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.js.snap b/components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.tsx.snap
similarity index 100%
rename from components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.js.snap
rename to components/Nav/NavMobile/__tests__/__snapshots__/NavMobile.test.tsx.snap