From b4d6f296ba6ae9f89a0f83c6330b4ed809b63720 Mon Sep 17 00:00:00 2001 From: Mai Vang <100221733+vmaineng@users.noreply.github.com> Date: Fri, 11 Oct 2024 15:12:59 -0700 Subject: [PATCH 1/3] updated unit tests from #477 PR (#538) # What does this PR do? - [X] Updated tests from PR #477 # Related Issues/PRs This is the PR that was submitted where tests were omitted to meet Alpha deadline. [- https://github.com/LetsGetTechnical/gridiron-survivor/issues/513](https://github.com/LetsGetTechnical/gridiron-survivor/pull/491) --- app/(main)/league/all/page.test.tsx | 277 +++++++++++++++++++++------- app/(main)/league/all/page.tsx | 13 +- store/dataStore.test.ts | 37 ++-- 3 files changed, 246 insertions(+), 81 deletions(-) diff --git a/app/(main)/league/all/page.test.tsx b/app/(main)/league/all/page.test.tsx index c38f4503..b1a783c8 100644 --- a/app/(main)/league/all/page.test.tsx +++ b/app/(main)/league/all/page.test.tsx @@ -1,107 +1,183 @@ -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'; -jest.mock('@/store/dataStore', () => ({ - useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })), -})); +const mockUseAuthContext = { + isSignedIn: false, +}; -jest.mock('@/utils/utils', () => ({ - getUserLeagues: jest.fn(() => Promise.resolve([])), +jest.mock('@/context/AuthContextProvider', () => ({ + useAuthContext() { + return { + ...mockUseAuthContext, + }; + }, })); -jest.mock('@/api/apiFunctions', () => ({ - getGameWeek: jest.fn(() => - Promise.resolve({ - week: 1, - }), - ), - getAllLeagues: jest.fn(() => - Promise.resolve([ +jest.mock('@/store/dataStore', () => ({ + useDataStore: jest.fn(() => ({ + user: { + documentId: '123', + id: '1234', + email: 'test@test.com', + leagues: ['league1'], + }, + allLeagues: [ { leagueId: '123', leagueName: 'Test League', - logo: 'https://example.com/logo.png', - participants: ['123456', '78', '9'], + logo: 'logo.png', + participants: ['123456', '78'], survivors: ['123456', '78'], }, - ]), - ), + ], + updateUser: jest.fn(), + })), })); -jest.mock('@/context/AuthContextProvider', () => ({ - useAuthContext: jest.fn(() => ({ user: { id: '123' } })), +jest.mock('@/utils/utils', () => ({ + getUserLeagues: jest.fn(() => Promise.resolve([])), + cn: jest.fn(), +})); + +jest.mock('@/api/apiFunctions', () => ({ + getAllLeagues: jest.fn(), + addUserToLeague: jest.fn(), +})); + +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(); }); - xtest('should render "You are not enrolled in any leagues" message when no leagues are found', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetUserLeagues.mockResolvedValueOnce([]); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); + it('should render "You are not enrolled in any leagues" message when no leagues are found', async () => { + mockUseAuthContext.isSignedIn = true; + mockUseDataStore.mockReturnValue({ + user: { + documentId: '123', + email: 'test@test.com', + id: '123', + leagues: [], + }, + allLeagues: [], + }); + render(); + await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner')); + await waitFor(() => { - expect( - screen.getByText('You are not enrolled in any leagues'), - ).toBeInTheDocument(); + const messageElement = screen.getByTestId('no-leagues-message'); + expect(messageElement).toBeInTheDocument(); }); }); - xtest('should display GlobalSpinner while loading data', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetUserLeagues.mockResolvedValueOnce([]); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); - render(); + it('should display GlobalSpinner while loading data', async () => { + mockUseAuthContext.isSignedIn = true; - await waitFor(() => { - expect(screen.getByTestId('global-spinner')).toBeInTheDocument(); + mockUseDataStore.mockReturnValueOnce({ + user: { + documentId: '123', + email: 'test@test.com', + id: '123', + leagues: [], + }, + allLeagues: [], }); - }); - xtest('should not display GlobalSpinner after loading data', async () => { - mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } }); - mockGetUserLeagues.mockResolvedValueOnce([]); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); render(); expect(screen.getByTestId('global-spinner')).toBeInTheDocument(); - - await waitFor(() => { - expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); - }); }); - xtest('should handle form submission to join a league', async () => { - mockUseDataStore.mockReturnValueOnce({ - user: { id: '123', leagues: [] }, + it('should not display GlobalSpinner after loading data', async () => { + mockUseAuthContext.isSignedIn = true; + + mockUseDataStore.mockReturnValue({ + user: { + documentId: '123', + email: 'test@test.com', + id: '123', + leagues: [], + }, allLeagues: [ { leagueId: '123', leagueName: 'Test League', - logo: 'https://findmylogo.com/logo.png', + logo: 'logo.png', participants: ['123456', '78'], - survivors: ['123456', '78', '9'], + survivors: ['123456', '78'], }, ], }); + mockGetUserLeagues.mockResolvedValueOnce([]); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); + + render(); + + await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner')); + + expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); + }); + + it('should handle form submission to join a league', async () => { + mockUseAuthContext.isSignedIn = true; + + const user = { + documentId: '123', + email: 'test@test.com', + id: '123', + leagues: [], + }; + + const league = { + leagueId: '123', + leagueName: 'Test League', + logo: 'logo.png', + participants: [], + survivors: [], + }; + + const updateUser = jest.fn(); + + mockUseDataStore.mockReturnValue({ + user, + allLeagues: [league], + updateUser, + }); + + mockGetAllLeagues.mockResolvedValueOnce([league]); + mockAddUserToLeague.mockResolvedValue( + Promise.resolve({ + userDocumentId: user.documentId, + selectedLeague: league.leagueId, + selectedLeagues: [league.leagueId], + participants: [user.id], + survivors: [user.id], + }), + ); render(); @@ -109,16 +185,93 @@ describe('Leagues Component', () => { 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.getByTestId('join-league-button')); + + await waitFor(() => { + expect(mockAddUserToLeague).toHaveBeenCalledWith({ + userDocumentId: user.documentId, + selectedLeague: league.leagueId, + selectedLeagues: [league.leagueId], + participants: [user.id], + survivors: [user.id], + }); + expect(updateUser).toHaveBeenCalledWith( + user.documentId, + user.id, + user.email, + [...user.leagues, league.leagueId], + ); + expect(toast.custom).toHaveBeenCalledWith( + , + ); + }); + }); + + it('should show error if adding to league fails', async () => { + mockUseAuthContext.isSignedIn = true; + + const user = { + documentId: '123', + email: 'test@test.com', + id: '123', + leagues: [], + }; + const league = { + leagueId: '123', + leagueName: 'Test League', + logo: 'logo.png', + participants: [], + survivors: [], + }; + + mockUseDataStore.mockReturnValue({ + user, + allLeagues: [league], + }); + + mockGetUserLeagues.mockResolvedValueOnce([]); + mockGetAllLeagues.mockResolvedValueOnce([league]); + mockAddUserToLeague.mockResolvedValue( + Promise.resolve({ + userDocumentId: user.documentId, + selectedLeague: league.leagueId, + selectedLeagues: [league.leagueId], + participants: [user.id], + survivors: [user.id], + }), + ); + + render(); + + 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)); + fireEvent.click(screen.getByTestId('join-league-button')); await waitFor(() => { - expect( - screen.getByText('Added Test League to your leagues!'), - ).toBeInTheDocument(); + expect(mockAddUserToLeague).toHaveBeenCalledWith({ + userDocumentId: user.documentId, + selectedLeague: league.leagueId, + selectedLeagues: [league.leagueId], + participants: [user.id], + survivors: [user.id], + }); + + expect(toast.custom).toHaveBeenCalledWith( + , + ); }); }); }); diff --git a/app/(main)/league/all/page.tsx b/app/(main)/league/all/page.tsx index 3e9e78dd..56c04323 100644 --- a/app/(main)/league/all/page.tsx +++ b/app/(main)/league/all/page.tsx @@ -124,13 +124,12 @@ const Leagues = (): JSX.Element => { return (
{loadingData ? ( - + ) : ( <>

Your Leagues

-
{leagues.length > 0 ? ( leagues.map((league) => ( @@ -145,7 +144,10 @@ const Leagues = (): JSX.Element => { )) ) : (
-

+

You are not enrolled in any leagues

@@ -169,6 +171,7 @@ const Leagues = (): JSX.Element => { render={({ field, fieldState }) => ( <>