updated unit tests from #477 PR

app/(main)/league/all/page.test.tsx

@@ -1,124 +1,235 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import {
+  render,
+  screen,
+  waitFor,
+  waitForElementToBeRemoved,
+  fireEvent,
+} from '@testing-library/react';
 import Leagues from './page';
 import { useDataStore } from '@/store/dataStore';
 import { getUserLeagues } from '@/utils/utils';
-import {
-  getGameWeek,
-  getAllLeagues,
-  getUserDocumentId,
-} from '@/api/apiFunctions';
-import { AuthContext } from '@/context/AuthContextProvider';
+import { getAllLeagues, addUserToLeague } from '@/api/apiFunctions';
+import { toast } from 'react-hot-toast';
+import Alert from '@/components/AlertNotification/AlertNotification';
+import { AlertVariants } from '@/components/AlertNotification/Alerts.enum';
+
+const mockUseAuthContext = {
+  isSignedIn: false,
+};
+
+jest.mock('@/context/AuthContextProvider', () => ({
+  useAuthContext() {
+    return {
+      ...mockUseAuthContext,
+    };
+  },
+}));
 
 jest.mock('@/store/dataStore', () => ({
-  useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })),
+  useDataStore: jest.fn(() => ({
+    user: { id: '1234', leagues: [] },
+    allLeagues: [
+      {
+        leagueId: '123',
+        leagueName: 'Test League',
+        logo: 'logo.png',
+        participants: ['123456', '78'],
+        survivors: ['123456', '78', '9'],
+      },
+    ],
+  })),
 }));
 
 jest.mock('@/utils/utils', () => ({
   getUserLeagues: jest.fn(() => Promise.resolve([])),
 }));
 
 jest.mock('@/api/apiFunctions', () => ({
-  getGameWeek: jest.fn(() =>
-    Promise.resolve({
-      week: 1,
-    }),
-  ),
   getAllLeagues: jest.fn(() =>
     Promise.resolve([
       {
         leagueId: '123',
         leagueName: 'Test League',
-        logo: 'https://example.com/logo.png',
+        logo: 'logo.png',
         participants: ['123456', '78', '9'],
         survivors: ['123456', '78'],
       },
     ]),
   ),
+  addUserToLeague: jest.fn(() => Promise.resolve({})),
 }));
 
-jest.mock('@/context/AuthContextProvider', () => ({
-  useAuthContext: jest.fn(() => ({ user: { id: '123' } })),
+jest.mock('react-hot-toast', () => ({
+  toast: {
+    custom: jest.fn(),
+  },
 }));
 
 describe('Leagues Component', () => {
   const mockUseDataStore = useDataStore as unknown as jest.Mock;
   const mockGetUserLeagues = getUserLeagues as jest.Mock;
-  const mockGetGameWeek = getGameWeek as jest.Mock;
   const mockGetAllLeagues = getAllLeagues as jest.Mock;
+  const mockAddUserToLeague = addUserToLeague as jest.Mock;
 
   beforeEach(() => {
-    jest.clearAllMocks();
+    jest.resetAllMocks();
+    mockUseAuthContext.isSignedIn = false;
   });
 
-  xtest('should render "You are not enrolled in any leagues" message when no leagues are found', async () => {
-    mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
+  test('should render "You are not enrolled in any leagues" message when no leagues are found', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    mockUseDataStore.mockReturnValue({
+      user: { id: '123', leagues: [] },
+      allLeagues: [],
+    });
     mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
+
     render(<Leagues />);
 
-    await waitFor(() => {
-      expect(
-        screen.getByText('You are not enrolled in any leagues'),
-      ).toBeInTheDocument();
+    await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner'));
+
+    expect(screen.getByTestId('no-leagues-message')).toBeInTheDocument();
+  });
+
+  test('should display GlobalSpinner while loading data', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    mockUseDataStore.mockReturnValueOnce({
+      user: { id: '123', leagues: [] },
+      allLeagues: [],
     });
+
+    render(<Leagues />);
+
+    expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
   });
 
-  xtest('should display GlobalSpinner while loading data', async () => {
-    mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
+  test('should not display GlobalSpinner after loading data', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    mockUseDataStore.mockReturnValue({
+      user: { id: '123', leagues: [] },
+      allLeagues: [
+        {
+          leagueId: '123',
+          leagueName: 'Test League',
+          logo: 'logo.png',
+          participants: ['123456', '78'],
+          survivors: ['123456', '78', '9'],
+        },
+      ],
+    });
     mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
+
     render(<Leagues />);
 
-    await waitFor(() => {
-      expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
-    });
+    await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner'));
+
+    expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
   });
-  xtest('should not display GlobalSpinner after loading data', async () => {
-    mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
+
+  test('should handle form submission to join a league', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    mockUseDataStore.mockReturnValue({
+      user: { id: '123', leagues: [] },
+      allLeagues: [
+        {
+          leagueId: '123',
+          leagueName: 'Test League',
+          participants: [],
+          survivors: [],
+        },
+      ],
+    });
+
+    mockGetAllLeagues.mockResolvedValueOnce([
+      {
+        leagueId: '123',
+        leagueName: 'Test League',
+        participants: [],
+        survivors: [],
+      },
+    ]);
     mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
+    mockAddUserToLeague.mockResolvedValueOnce({});
 
     render(<Leagues />);
 
-    expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
-
     await waitFor(() => {
       expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
     });
+
+    const selectElement = screen.getByTestId('select-available-leagues');
+    fireEvent.change(selectElement, { target: { value: '123' } });
+    fireEvent.click(screen.getByText(/Join League/i));
+
+    await waitFor(() => {
+      expect(mockAddUserToLeague).toHaveBeenCalledWith({
+        leagueId: '123',
+        userId: '123',
+      });
+
+      expect(toast.custom).toHaveBeenCalledWith(
+        <Alert
+          variant={AlertVariants.Success}
+          message={`Added Test League to your leagues!`}
+        />,
+      );
+    });
   });
 
-  xtest('should handle form submission to join a league', async () => {
-    mockUseDataStore.mockReturnValueOnce({
+  test('should show error if adding to league fails', async () => {
+    mockUseAuthContext.isSignedIn = true;
+
+    mockUseDataStore.mockReturnValue({
       user: { id: '123', leagues: [] },
       allLeagues: [
         {
           leagueId: '123',
           leagueName: 'Test League',
-          logo: 'https://findmylogo.com/logo.png',
-          participants: ['123456', '78'],
-          survivors: ['123456', '78', '9'],
+          participants: [],
+          survivors: [],
         },
       ],
     });
+
     mockGetUserLeagues.mockResolvedValueOnce([]);
-    mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
+    mockGetAllLeagues.mockResolvedValueOnce([
+      {
+        leagueId: '123',
+        leagueName: 'Test League',
+        participants: [],
+        survivors: [],
+      },
+    ]);
+    mockAddUserToLeague.mockRejectedValueOnce(
+      new Error('Failed to join league'),
+    );
 
     render(<Leagues />);
 
     await waitFor(() => {
       expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
     });
 
-    const selectElement = screen.getByLabelText(/Select league to join/i);
-    expect(selectElement).toBeInTheDocument();
-
+    const selectElement = screen.getByTestId('select-available-leagues');
     fireEvent.change(selectElement, { target: { value: '123' } });
     fireEvent.click(screen.getByText(/Join League/i));
 
     await waitFor(() => {
-      expect(
-        screen.getByText('Added Test League to your leagues!'),
-      ).toBeInTheDocument();
+      expect(mockAddUserToLeague).toHaveBeenCalledWith({
+        leagueId: '123',
+        userId: '123',
+      });
+
+      expect(toast.custom).toHaveBeenCalledWith(
+        <Alert
+          variant={AlertVariants.Error}
+          message="Failed to add the league. Please try again."
+        />,
+      );
     });
   });
 });

app/(main)/league/all/page.tsx

@@ -124,7 +124,7 @@ const Leagues = (): JSX.Element => {
   return (
     <div className="Leagues mx-auto max-w-3xl pt-10">
       {loadingData ? (
-        <GlobalSpinner />
+        <GlobalSpinner data-testid="global-spinner" />
       ) : (
         <>
           <h1 className="pb-10 text-center text-3xl font-bold tracking-tight">
@@ -145,7 +145,10 @@ const Leagues = (): JSX.Element => {
               ))
             ) : (
               <div className="text-center">
-                <p className="text-lg font-bold">
+                <p
+                  className="text-lg font-bold"
+                  data-testid="no-leagues-message"
+                >
                   You are not enrolled in any leagues
                 </p>
               </div>
@@ -169,6 +172,7 @@ const Leagues = (): JSX.Element => {
                 render={({ field, fieldState }) => (
                   <>
                     <select
+                      data-testid="select-available-leagues"
                       {...field}
                       id="available-leagues"
                       className={`border border-border rounded p-2 w-full text-secondary ${

store/dataStore.test.ts

@@ -3,6 +3,7 @@ import { useDataStore } from './dataStore';
 
 // test values
 const userData = {
+  documentId: '123',
   userId: '123',
   userEmail: '[email protected]',
   leagues: ['123456'],
@@ -44,7 +45,7 @@ const allLeagues = [
 ];
 
 describe('Data Store', () => {
-  xdescribe('User Test', () => {
+  describe('User Test', () => {
     it('Check the default user state', () => {
       const { result } = renderHook(() => useDataStore());
       expect(result.current.user.id).toBe('');
@@ -56,6 +57,7 @@ describe('Data Store', () => {
 
       act(() => {
         result.current.updateUser(
+          userData.documentId,
           userData.userId,
           userData.userEmail,
           userData.leagues,
@@ -70,6 +72,7 @@ describe('Data Store', () => {
 
       act(() => {
         result.current.updateUser(
+          userData.documentId,
           userData.userId,
           userData.userEmail,
           userData.leagues,
@@ -112,18 +115,22 @@ describe('Data Store', () => {
         leagueId: '123',
         gameWeekId: '456',
         userResults: {
-          '66281d5ec5614f76bc91': {
-            team: '66218f22b40deef340f8',
-            correct: false,
-          },
-          '6628077faeeedd272637': {
-            team: '6621b30ea57bd075e9d3',
-            correct: false,
-          },
-          '66174f2362ec891167be': {
-            team: '6621b30ea57bd075e9d3',
-            correct: true,
-          },
+          '123': {
+            '456': {
+            'entry1': {
+              teamName: 'New England Patriots',
+              correct:true
+            },
+            'entry2': {
+              teamName: 'Kansas City Chiefs',
+              correct:false
+            },
+            'entry3': {
+              teamName: 'New England Patriots',
+              correct:false
+            }
+          }
+          }
         },
       };
       act(() => {