Merge branch 'develop' into danielle/482-notifications-needs-a-way-to…

…-exit-the-modal
LetsGetTechnical · Oct 14, 2024 · 89bf03f · 89bf03f
2 parents d254e7f + 062603a
commit 89bf03f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git a/components/Nav/Nav.test.tsx b/components/Nav/Nav.test.tsx
@@ -1,6 +1,8 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Nav from './Nav';
 import Login from '@/app/(main)/login/page';
+import { useDataStore } from '@/store/dataStore';
+import { getUserLeagues } from '@/utils/utils';
 
 const mockPush = jest.fn();
 const mockUsePathname = jest.fn();
@@ -32,6 +34,10 @@ jest.mock('../../context/AuthContextProvider', () => ({
   },
 }));
 
+jest.mock('@/store/dataStore', () => ({
+  useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })),
+}));
+
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation((query) => ({
@@ -47,10 +53,25 @@ Object.defineProperty(window, 'matchMedia', {
 });
 
 describe('Nav', () => {
+  const mockUseDataStore = useDataStore as unknown as jest.Mock;
+  const mockGetUserLeagues = getUserLeagues as jest.Mock;
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
+  it('renders link to /league/all', async () => {
+    render(<Nav />);
+
+    const drawTrigger = screen.getByTestId('drawer-trigger');
+    fireEvent.click(drawTrigger);
+
+    let linkNav: HTMLElement;
+    linkNav = await screen.getByTestId('league-link');
+    expect(linkNav).toBeInTheDocument();
+    expect(linkNav).toHaveAttribute('href', '/league/all');
+  });
+
   it('it should render the default component state', () => {
     mockUsePathname.mockImplementation(() => '/weeklyPicks');
 
@@ -163,4 +184,22 @@ describe('Nav', () => {
       expect(drawerTrigger.getAttribute('data-state')).toBe('closed');
     });
   });
+
+  it('it should close the drawer when the leagues link is clicked', async () => {
+    mockUsePathname.mockImplementation(() => '/league/all');
+
+    render(<Nav />);
+
+    const drawerTrigger = screen.getByTestId('drawer-trigger');
+
+    fireEvent.click(drawerTrigger);
+
+    const linkNav = screen.getByTestId('league-link');
+
+    fireEvent.click(linkNav);
+
+    await waitFor(() => {
+      expect(drawerTrigger.getAttribute('data-state')).toBe('closed');
+    });
+  });
 });
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
@@ -6,6 +6,7 @@ import React, { JSX } from 'react';
 import LogoNav from '../LogoNav/LogoNav';
 import { Menu } from 'lucide-react';
 import { Button } from '../Button/Button';
+import Link from 'next/link';
 import {
   Drawer,
   DrawerContent,
@@ -68,9 +69,21 @@ export const Nav = (): JSX.Element => {
                 <DrawerTitle data-testid="title">Gridiron Survivor</DrawerTitle>
               </DrawerHeader>
               <ul className="m-0 flex flex-col gap-4 p-0">
+                <li>
+                  <Link
+                    data-testid="league-link"
+                    href="/league/all"
+                    className={cn(
+                      'underline underline-offset-4 hover:text-primary-muted transition-colors',
+                    )}
+                    onClick={() => setOpen(false)}
+                  >
+                    Leagues
+                  </Link>
+                </li>
                 <li>
                   <Button
-                    className="p-0 text-base font-normal text-muted-foreground"
+                    className="p-0 text-base font-normal text-primary-foreground"
                     variant="link"
                     label="Sign Out"
                     onClick={() => {