RouterTab.tsx: add types and add router dom types and unit test

Author: clairep94

client/common/RouterTab.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Tab from './RouterTab';
+
+describe('Tab', () => {
+  it('renders a NavLink with correct text and link', () => {
+    render(
+      <MemoryRouter>
+        <Tab to="/dashboard">Dashboard</Tab>
+      </MemoryRouter>
+    );
+
+    const linkElement = screen.getByText('Dashboard');
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement.getAttribute('href')).toBe('/dashboard');
+  });
+
+  it('includes the dashboard-header class names', () => {
+    const { container } = render(
+      <MemoryRouter>
+        <Tab to="/settings">Settings</Tab>
+      </MemoryRouter>
+    );
+
+    const listItem = container.querySelector('li');
+    const link = container.querySelector('a');
+
+    expect(listItem).toHaveClass('dashboard-header__tab');
+    expect(link).toHaveClass('dashboard-header__tab__title');
+  });
+});

client/common/RouterTab.tsx

@@ -1,11 +1,14 @@
-import PropTypes from 'prop-types';
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { NavLink } from 'react-router-dom';
 
+type TabProps = {
+  children: ReactNode,
+  to: string
+};
 /**
  * Wraps the react-router `NavLink` with dashboard-header__tab styling.
  */
-const Tab = ({ children, to }) => (
+const Tab = ({ children, to }: TabProps) => (
   <li className="dashboard-header__tab">
     <NavLink
       className="dashboard-header__tab__title"
@@ -17,9 +20,4 @@ const Tab = ({ children, to }) => (
   </li>
 );
 
-Tab.propTypes = {
-  children: PropTypes.string.isRequired,
-  to: PropTypes.string.isRequired
-};
-
 export default Tab;

package-lock.json

@@ -130,6 +130,7 @@
     "@types/node": "^16.18.126",
     "@types/react": "^16.14.0",
     "@types/react-dom": "^16.9.25",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "babel-core": "^7.0.0-bridge.0",