From ea87e240a0ec402bb61bc2c7b8b150f021eef2f6 Mon Sep 17 00:00:00 2001 From: Danielle Lindblom Date: Mon, 4 Nov 2024 08:41:30 -0700 Subject: [PATCH 1/2] fix: remove pick history from league landing page --- .../league/[leagueId]/entry/all/page.test.tsx | 144 ------------------ .../league/[leagueId]/entry/all/page.tsx | 9 -- .../LeagueEntries/LeagueEntries.interface.ts | 1 - .../LeagueEntries/LeagueEntries.test.tsx | 43 +----- components/LeagueEntries/LeagueEntries.tsx | 36 +---- 5 files changed, 3 insertions(+), 230 deletions(-) diff --git a/app/(main)/league/[leagueId]/entry/all/page.test.tsx b/app/(main)/league/[leagueId]/entry/all/page.test.tsx index 9764ce08..7a241f78 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.test.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.test.tsx @@ -344,148 +344,4 @@ describe('League entries page (Entry Component)', () => { ); }); }); - it('should not display the user pick history if the current week is 1', async () => { - mockUseDataStore.mockReturnValue({ - ...mockUseDataStore(), - currentWeek: 1, - NFLTeams: [ - { - teamId: 'packers', - teamLogo: '/packers-logo.png', - teamName: 'Packers', - }, - ], - }); - mockGetCurrentUserEntries.mockResolvedValueOnce([ - { - $id: '123', - name: 'Test Entry', - week: 1, - selectedTeams: ['Packers', 'Bears'], - }, - ]); - mockGetGameWeek.mockResolvedValueOnce({ week: 1 }); - mockGetCurrentLeague.mockResolvedValue({ - leagueName: 'Test League', - participants: 10, - survivors: 8, - }); - mockGetNFLTeams.mockResolvedValue([ - { teamId: 'packers', teamLogo: '/packers-logo.png', teamName: 'Packers' }, - { teamId: 'bears', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ]); - - render(); - - await waitFor(() => { - expect(mockGetGameWeek).toHaveBeenCalled(); - expect(mockGetCurrentUserEntries).toHaveBeenCalled(); - expect(mockGetCurrentLeague).toHaveBeenCalled(); - expect(mockGetNFLTeams).toHaveBeenCalled(); - }); - - expect(screen.queryByTestId('user-pick-history')).not.toBeInTheDocument(); - }); - - it('should display the user pick history if the current week is greater than 1', async () => { - mockUseDataStore.mockReturnValue({ - ...mockUseDataStore(), - currentWeek: 2, - NFLTeams: [ - { - teamId: 'packers', - teamLogo: '/packers-logo.png', - teamName: 'Packers', - }, - { - teamId: 'bears', - teamLogo: '/bears-logo.png', - teamName: 'Bears', - }, - ], - }); - mockGetCurrentUserEntries.mockResolvedValueOnce([ - { - $id: '123', - name: 'Test Entry', - week: 2, - selectedTeams: ['Packers', 'Bears'], - }, - ]); - mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); - mockGetCurrentLeague.mockResolvedValue({ - leagueName: 'Test League', - participants: ['123', '456'], - survivors: ['123', '456'], - }); - mockGetNFLTeams.mockResolvedValue([ - { teamId: 'packers', teamLogo: '/packers-logo.png', teamName: 'Packers' }, - { teamId: 'bears', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ]); - - render(); - - await waitFor(() => { - expect(mockGetGameWeek).toHaveBeenCalled(); - expect(mockGetCurrentUserEntries).toHaveBeenCalled(); - expect(mockGetCurrentLeague).toHaveBeenCalled(); - expect(mockGetNFLTeams).toHaveBeenCalled(); - }); - // Add a delay to allow for any asynchronous rendering - await new Promise((resolve) => setTimeout(resolve, 0)); - - expect(screen.queryByTestId('user-pick-history')).toBeInTheDocument(); - expect(screen.getByTestId('league-history-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fpackers-logo.png&w=96&q=75', - ); - expect(screen.getByTestId('league-entry-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fbears-logo.png&w=96&q=75', - ); - }); - - it('should not display the user pick history if the entries selected teams are empty', async () => { - mockUseDataStore.mockReturnValue({ - ...mockUseDataStore(), - currentWeek: 2, - NFLTeams: [ - { - teamId: 'packers', - teamLogo: '/packers-logo.png', - teamName: 'Packers', - }, - { teamId: '2', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ], - }); - mockGetCurrentUserEntries.mockResolvedValueOnce([ - { - $id: '123', - name: 'Test Entry', - week: 2, - selectedTeams: [], - }, - ]); - mockGetGameWeek.mockResolvedValueOnce({ week: 2 }); - mockGetCurrentLeague.mockResolvedValue({ - leagueName: 'Test League', - participants: ['123', '456'], - survivors: ['123', '456'], - }); - mockGetNFLTeams.mockResolvedValue([ - { teamId: 'packers', teamLogo: '/packers-logo.png', teamName: 'Packers' }, - { teamId: 'bears', teamLogo: '/bears-logo.png', teamName: 'Bears' }, - ]); - - render(); - - await waitFor(() => { - expect(mockGetGameWeek).toHaveBeenCalled(); - expect(mockGetCurrentUserEntries).toHaveBeenCalled(); - expect(mockGetCurrentLeague).toHaveBeenCalled(); - expect(mockGetNFLTeams).toHaveBeenCalled(); - }); - - expect(screen.queryByTestId('user-pick-history')).not.toBeInTheDocument(); - }); }); diff --git a/app/(main)/league/[leagueId]/entry/all/page.tsx b/app/(main)/league/[leagueId]/entry/all/page.tsx index 5ef1214c..52c7f776 100644 --- a/app/(main)/league/[leagueId]/entry/all/page.tsx +++ b/app/(main)/league/[leagueId]/entry/all/page.tsx @@ -172,14 +172,6 @@ const Entry = ({ const selectedTeamLogo = getNFLTeamLogo(NFLTeams, selectedTeam); - let userPickHistory: string[] = []; - - if (currentWeek > 1 && entry.selectedTeams.length > 0) { - userPickHistory = entry.selectedTeams - .slice(0, currentWeek - 1) - .map((teamName) => getNFLTeamLogo(NFLTeams, teamName)); - } - return (
diff --git a/components/LeagueEntries/LeagueEntries.interface.ts b/components/LeagueEntries/LeagueEntries.interface.ts index 46d0b0ad..9bf96dff 100644 --- a/components/LeagueEntries/LeagueEntries.interface.ts +++ b/components/LeagueEntries/LeagueEntries.interface.ts @@ -6,6 +6,5 @@ export interface ILeagueEntriesProps { linkUrl: string; isEliminated?: boolean; isPickSet?: boolean; - userPickHistory: string[]; selectedTeamLogo?: string; } diff --git a/components/LeagueEntries/LeagueEntries.test.tsx b/components/LeagueEntries/LeagueEntries.test.tsx index f8f99581..78c04c25 100644 --- a/components/LeagueEntries/LeagueEntries.test.tsx +++ b/components/LeagueEntries/LeagueEntries.test.tsx @@ -5,7 +5,7 @@ import React from 'react'; describe('LeagueEntries', () => { it(`renders 'default' state without a pick made`, () => { render( - , + , ); const leagueEntryContainerCard = screen.getByTestId( @@ -16,13 +16,11 @@ describe('LeagueEntries', () => { const leagueEntryPickButton = screen.getByTestId( 'league-entry-pick-button', ); - const userHistoryPicks = screen.queryByTestId('user-pick-history'); expect(entryStatus).toHaveTextContent('alive'); expect(leagueEntryContainerCard).toBeInTheDocument(); expect(leagueEntryNumber).toHaveTextContent('Entry 1'); expect(leagueEntryPickButton).toHaveTextContent('Make Pick'); - expect(userHistoryPicks).not.toBeInTheDocument(); }); it('renders as if the user made a pick', () => { @@ -31,7 +29,6 @@ describe('LeagueEntries', () => { entryName="Entry 2" linkUrl="" isPickSet={true} - userPickHistory={['/team-a-logo.png']} />, ); @@ -48,7 +45,6 @@ describe('LeagueEntries', () => { expect(leagueEntryContainerCard).toBeInTheDocument(); expect(leagueEntryNumber).toHaveTextContent('Entry 2'); expect(leagueEntryPickButton).toHaveTextContent('Change Pick'); - expect(screen.queryByTestId('user-pick-history')).toBeInTheDocument(); }); it('renders as if the user is eliminated', () => { @@ -58,7 +54,6 @@ describe('LeagueEntries', () => { isEliminated isPickSet={false} linkUrl="" - userPickHistory={['/team-a-logo.png']} />, ); @@ -73,7 +68,7 @@ describe('LeagueEntries', () => { expect(leagueEntryNumber).toHaveTextContent('Entry 3'); }); - it('renders teamLogo when user makes a pick and shows user pick history logo', () => { + it('renders teamLogo when user makes a pick', () => { const teamLogoUrl = 'https://example.com/logo.png'; const linkUrl = '/change-pick'; @@ -83,7 +78,6 @@ describe('LeagueEntries', () => { isPickSet={true} linkUrl={linkUrl} selectedTeamLogo={teamLogoUrl} - userPickHistory={['/team-a-logo.png']} />, ); @@ -108,38 +102,5 @@ describe('LeagueEntries', () => { 'src', '/_next/image?url=https%3A%2F%2Fexample.com%2Flogo.png&w=96&q=75', ); - expect(screen.getByTestId('league-history-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fteam-a-logo.png&w=96&q=75', - ); - }); - it('renders no pick when a previous week pick is not available', () => { - const teamLogoUrl = 'https://example.com/logo.png'; - const linkUrl = '/change-pick'; - - render( - , - ); - - const leagueEntryLogo = screen.getByTestId('league-entry-logo'); - const noPick = screen.getByTestId('no-pick'); - - expect(leagueEntryLogo).toBeInTheDocument(); - expect(leagueEntryLogo).toHaveAttribute( - 'src', - '/_next/image?url=https%3A%2F%2Fexample.com%2Flogo.png&w=96&q=75', - ); - expect(screen.getByTestId('league-history-logo')).toHaveAttribute( - 'src', - '/_next/image?url=%2Fteam-a-logo.png&w=96&q=75', - ); - expect(noPick).toBeInTheDocument(); - expect(noPick).toHaveTextContent('No Pick'); }); }); diff --git a/components/LeagueEntries/LeagueEntries.tsx b/components/LeagueEntries/LeagueEntries.tsx index 9b98d80e..554505d3 100644 --- a/components/LeagueEntries/LeagueEntries.tsx +++ b/components/LeagueEntries/LeagueEntries.tsx @@ -16,7 +16,6 @@ import Image from 'next/image'; * @param props.linkUrl - the url to the user's entry page * @param props.isEliminated - If true, the user is flagged as eliminat4ed * @param props.isPickSet - if true, the team logo of the picked team shows up on the LeagueEntries card and the button changes from "make a pick" to "chagne pick" - * @param props.userPickHistory - the user's pick history for this entry * @param props.selectedTeamLogo - the team logo * @returns {React.JSX.Element} - A div element that contains the user's entry information */ @@ -25,7 +24,6 @@ const LeagueEntries = ({ linkUrl, isEliminated = false, isPickSet = false, - userPickHistory, selectedTeamLogo = '', }: ILeagueEntriesProps): JSX.Element => { return ( @@ -34,7 +32,7 @@ const LeagueEntries = ({ className={cn( 'league-entry-container-card grid h-21 min-w-fit items-center justify-between rounded-lg border border-border bg-card p-4 text-card-foreground shadow-sm', isEliminated ? 'bg-muted' : 'transparent', - userPickHistory.length === 0 ? 'grid-cols-2' : 'grid-cols-3', + 'grid-cols-2', )} >
- {userPickHistory.length > 0 && ( -
- {userPickHistory?.map((logoURL, index) => ( -
- WEEK {index + 1} - {logoURL ? ( - teamLogo - ) : ( - - No Pick - - )} -
- ))} -
- )}
Date: Wed, 6 Nov 2024 07:25:06 -0700 Subject: [PATCH 2/2] fix: move grid-cols-2 before conditional statements since it is no longer conditional upon pick history --- components/LeagueEntries/LeagueEntries.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/components/LeagueEntries/LeagueEntries.tsx b/components/LeagueEntries/LeagueEntries.tsx index 554505d3..7811c812 100644 --- a/components/LeagueEntries/LeagueEntries.tsx +++ b/components/LeagueEntries/LeagueEntries.tsx @@ -30,9 +30,8 @@ const LeagueEntries = ({