Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/LetsGetTechnical/gridiro…
Browse files Browse the repository at this point in the history 
…n-survivor into danielle/635-bug-homepage-flickers-as-it-checks-authentication
  • Loading branch information
@Danielle254
Danielle254 committed Nov 12, 2024
2 parents 17d1550 + 9a23398 commit b6930d0
Show file tree
Hide file tree
Showing 7 changed files with 5 additions and 233 deletions.
2 changes: 1 addition & 1 deletion app/(main)/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ const RootLayout = ({
</a>
</div>
</main>
<Toaster />
<Toaster position="bottom-left" />
</AuthContextProvider>
</ErrorBoundary>
</body>
Expand Down
144 changes: 0 additions & 144 deletions app/(main)/league/[leagueId]/entry/all/page.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(<Entry params={{ leagueId: '123' }} />);

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(<Entry params={{ leagueId: '123' }} />);

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(<Entry params={{ leagueId: '123' }} />);

await waitFor(() => {
expect(mockGetGameWeek).toHaveBeenCalled();
expect(mockGetCurrentUserEntries).toHaveBeenCalled();
expect(mockGetCurrentLeague).toHaveBeenCalled();
expect(mockGetNFLTeams).toHaveBeenCalled();
});

expect(screen.queryByTestId('user-pick-history')).not.toBeInTheDocument();
});
});
9 changes: 0 additions & 9 deletions app/(main)/league/[leagueId]/entry/all/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<section key={entry.$id}>
<LeagueEntries
Expand All @@ -188,7 +180,6 @@ const Entry = ({
isEliminated={entry.eliminated}
isPickSet={isPickSet}
linkUrl={linkUrl}
userPickHistory={userPickHistory}
selectedTeamLogo={selectedTeamLogo}
/>
</section>
Expand Down
2 changes: 1 addition & 1 deletion components/Alert/Alert.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import * as React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';

const alertVariants = cva(
'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
'relative w-full md:max-w-[25rem] rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
{
variants: {
variant: {
Expand Down
1 change: 0 additions & 1 deletion components/LeagueEntries/LeagueEntries.interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,5 @@ export interface ILeagueEntriesProps {
linkUrl: string;
isEliminated?: boolean;
isPickSet?: boolean;
userPickHistory: string[];
selectedTeamLogo?: string;
}
43 changes: 2 additions & 41 deletions components/LeagueEntries/LeagueEntries.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import React from 'react';
describe('LeagueEntries', () => {
it(`renders 'default' state without a pick made`, () => {
render(
<LeagueEntries entryName="Entry 1" linkUrl="" userPickHistory={[]} />,
<LeagueEntries entryName="Entry 1" linkUrl="" />,
);

const leagueEntryContainerCard = screen.getByTestId(
Expand All @@ -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', () => {
Expand All @@ -31,7 +29,6 @@ describe('LeagueEntries', () => {
entryName="Entry 2"
linkUrl=""
isPickSet={true}
userPickHistory={['/team-a-logo.png']}
/>,
);

Expand All @@ -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', () => {
Expand All @@ -58,7 +54,6 @@ describe('LeagueEntries', () => {
isEliminated
isPickSet={false}
linkUrl=""
userPickHistory={['/team-a-logo.png']}
/>,
);

Expand All @@ -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';

Expand All @@ -83,7 +78,6 @@ describe('LeagueEntries', () => {
isPickSet={true}
linkUrl={linkUrl}
selectedTeamLogo={teamLogoUrl}
userPickHistory={['/team-a-logo.png']}
/>,
);

Expand All @@ -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(
<LeagueEntries
entryName="Entry 2"
isPickSet={true}
linkUrl={linkUrl}
selectedTeamLogo={teamLogoUrl}
userPickHistory={['', '/team-a-logo.png']}
/>,
);

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');
});
});
37 changes: 1 addition & 36 deletions components/LeagueEntries/LeagueEntries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
*/
Expand All @@ -25,16 +24,14 @@ const LeagueEntries = ({
linkUrl,
isEliminated = false,
isPickSet = false,
userPickHistory,
selectedTeamLogo = '',
}: ILeagueEntriesProps): JSX.Element => {
return (
<div
data-testid="league-entry-container-card"
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',
'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 grid-cols-2',
isEliminated ? 'bg-muted' : 'transparent',
userPickHistory.length === 0 ? 'grid-cols-2' : 'grid-cols-3',
)}
>
<section
Expand All @@ -52,38 +49,6 @@ const LeagueEntries = ({
</h4>
<EntryStatus isEliminated={isEliminated} />
</section>
{userPickHistory.length > 0 && (
<section
className="flex gap-2 overflow-x-scroll justify-end mr-2"
data-testid="user-pick-history"
>
{userPickHistory?.map((logoURL, index) => (
<div
key={`${logoURL ? logoURL : 'no-pick'}-${index + 1}`}
className="flex flex-col h-[66px] opacity-80 items-center justify-center border border-border px-4 py-1 rounded-lg gap-1"
>
<span className="text-xs">WEEK {index + 1}</span>
{logoURL ? (
<Image
className="league-entry-logo"
width={40}
height={40}
data-testid="league-history-logo"
src={logoURL}
alt="teamLogo"
/>
) : (
<span
className="text-xs h-10 w-full text-primary pt-2"
data-testid="no-pick"
>
No Pick
</span>
)}
</div>
))}
</section>
)}
<section
className="league-entry-footer flex items-center justify-end gap-12"
data-testid="league-entry-footer"
Expand Down

0 comments on commit b6930d0

Please sign in to comment.