updated unit tests from #477 PR #538
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,124 +1,277 @@ | ||
| 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 { 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: { | ||
| documentId: '123', | ||
| id: '1234', | ||
| email: '[email protected]', | ||
| leagues: ['league1'], | ||
| }, | ||
| allLeagues: [ | ||
| { | ||
| leagueId: '123', | ||
| leagueName: 'Test League', | ||
| logo: 'logo.png', | ||
| participants: ['123456', '78'], | ||
| survivors: ['123456', '78'], | ||
| }, | ||
| ], | ||
| updateUser: jest.fn(), | ||
| })), | ||
| })); | ||
|
|
||
| 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 mockGetAllLeagues = getAllLeagues as jest.Mock; | ||
| const mockAddUserToLeague = addUserToLeague as jest.Mock; | ||
|
|
||
| beforeEach(() => { | ||
| jest.clearAllMocks(); | ||
| }); | ||
|
|
||
| test('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: '[email protected]', | ||
| id: '123', | ||
| leagues: [], | ||
| }, | ||
| allLeagues: [], | ||
| }); | ||
|
|
||
| render(<Leagues />); | ||
|
|
||
| await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner')); | ||
|
|
||
| await waitFor(() => { | ||
| const messageElement = screen.getByTestId('no-leagues-message'); | ||
| expect(messageElement).toBeInTheDocument(); | ||
| }); | ||
| }); | ||
|
|
||
| test('should display GlobalSpinner while loading data', async () => { | ||
| mockUseAuthContext.isSignedIn = true; | ||
|
|
||
| mockUseDataStore.mockReturnValueOnce({ | ||
| user: { | ||
| documentId: '123', | ||
| email: '[email protected]', | ||
| id: '123', | ||
| leagues: [], | ||
| }, | ||
| allLeagues: [], | ||
| }); | ||
|
|
||
| render(<Leagues />); | ||
|
|
||
| expect(screen.getByTestId('global-spinner')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should not display GlobalSpinner after loading data', async () => { | ||
| mockUseAuthContext.isSignedIn = true; | ||
|
|
||
| mockUseDataStore.mockReturnValue({ | ||
| user: { | ||
| documentId: '123', | ||
| email: '[email protected]', | ||
| id: '123', | ||
| leagues: [], | ||
| }, | ||
| allLeagues: [ | ||
| { | ||
| leagueId: '123', | ||
| leagueName: 'Test League', | ||
| logo: 'logo.png', | ||
| participants: ['123456', '78'], | ||
| survivors: ['123456', '78'], | ||
| }, | ||
| ], | ||
| }); | ||
|
|
||
| mockGetUserLeagues.mockResolvedValueOnce([]); | ||
|
|
||
| render(<Leagues />); | ||
|
|
||
| await waitForElementToBeRemoved(() => screen.getByTestId('global-spinner')); | ||
|
|
||
| expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| test('should handle form submission to join a league', async () => { | ||
| mockUseAuthContext.isSignedIn = true; | ||
|
|
||
| const user = { | ||
| documentId: '123', | ||
| email: '[email protected]', | ||
| 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(<Leagues />); | ||
|
|
||
| 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.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( | ||
| <Alert | ||
| variant={AlertVariants.Success} | ||
| message={`Added ${league.leagueName} to your leagues!`} | ||
| />, | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| test('should show error if adding to league fails', async () => { | ||
| mockUseAuthContext.isSignedIn = true; | ||
|
|
||
| const user = { | ||
| documentId: '123', | ||
| email: '[email protected]', | ||
| 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(<Leagues />); | ||
|
|
||
| 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.getByTestId('join-league-button')); | ||
|
|
||
| await waitFor(() => { | ||
| expect(mockAddUserToLeague).toHaveBeenCalledWith({ | ||
| userDocumentId: user.documentId, | ||
|
There was a problem hiding this comment. same comment: There was a problem hiding this comment. The reason why I set up this code like this is to match the code in league/page.tsx file. What are your thoughts on the different formats? There was a problem hiding this comment. @vmaineng it's not about different formats. It's about what they are doing. In page.tsx, the code handles adding a new participant/survivor as follows:
The test is verifying that the function is called with the correct data you're passing into it. By having it the same way as page.tsx you are duplicating code. |
||
| selectedLeague: league.leagueId, | ||
| selectedLeagues: [league.leagueId], | ||
| participants: [user.id], | ||
| survivors: [user.id], | ||
| }); | ||
|
|
||
| expect(toast.custom).toHaveBeenCalledWith( | ||
| <Alert | ||
| variant={AlertVariants.Error} | ||
| message="Failed to add the league. Please try again." | ||
| />, | ||
| ); | ||
| }); | ||
| }); | ||
| }); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Chang all
testtoitThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated to
it