From 062603a26d0430ffad01491dfa95c665172cfe32 Mon Sep 17 00:00:00 2001
From: Eduardo Vazquez <80133388+vazquezea96@users.noreply.github.com>
Date: Mon, 14 Oct 2024 09:37:39 -0700
Subject: [PATCH 1/4] Eddie/450-add-users-leagues-to-side-menu (#460)
Adding the user's leagues to the side menu.
Actions done:
- [x] Updated Api call so it only gets called once.
---------
Co-authored-by: Shashi Lo <362527+shashilo@users.noreply.github.com>
---
components/Nav/Nav.test.tsx | 39 +++++++++++++++++++++++++++++++++++++
components/Nav/Nav.tsx | 15 +++++++++++++-
2 files changed, 53 insertions(+), 1 deletion(-)
diff --git a/components/Nav/Nav.test.tsx b/components/Nav/Nav.test.tsx
index 47abd352..b23ea7d9 100644
--- 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();
+
+ 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();
+
+ 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
index 47ed1bd0..9eba9c7e 100644
--- 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 => {
Gridiron Survivor
+ -
+ setOpen(false)}
+ >
+ Leagues
+
+
-