Skip to content

Commit 040b9ce

Browse files
chris-nowickichris-nowicki
committed
update testing for leage/all page
1 parent 6c51a9a commit 040b9ce

File tree

6 files changed

+179
-54
lines changed

6 files changed

+179
-54
lines changed

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

Lines changed: 142 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,183 @@
11
import { render, screen, waitFor } from '@testing-library/react';
22
import Leagues from './page';
33
import { useDataStore } from '@/store/dataStore';
4-
import { getUserLeagues } from '@/utils/utils';
5-
import { getGameWeek } from '@/api/apiFunctions';
4+
import { getUserLeagues, cn } from '@/utils/utils';
5+
import { getGameWeek, getCurrentUserEntries } from '@/api/apiFunctions';
66

77
jest.mock('@/store/dataStore', () => ({
8-
useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })),
8+
useDataStore: jest.fn(),
99
}));
1010

1111
jest.mock('@/utils/utils', () => ({
12-
getUserLeagues: jest.fn(() => Promise.resolve([])),
12+
getUserLeagues: jest.fn(),
13+
cn: jest.fn(),
1314
}));
1415

1516
jest.mock('@/api/apiFunctions', () => ({
16-
getGameWeek: jest.fn(() =>
17-
Promise.resolve({
18-
week: 1,
19-
}),
20-
),
17+
getGameWeek: jest.fn(),
18+
getCurrentUserEntries: jest.fn(),
2119
}));
2220

21+
const mockLeagues = [
22+
{
23+
leagueId: '123',
24+
leagueName: 'Test League',
25+
logo: 'https://findmylogo.com/logo.png',
26+
participants: ['123456', '78'],
27+
survivors: ['123456', '78', '9'],
28+
},
29+
];
30+
31+
const mockEntries = [
32+
{
33+
$id: '123',
34+
name: 'Test Entry',
35+
user: '123',
36+
league: '123',
37+
selectedTeams: [],
38+
eliminated: false,
39+
},
40+
];
41+
42+
const mockGameWeek = {
43+
id: '123',
44+
week: 1,
45+
};
46+
47+
const mockUseDataStore = useDataStore as jest.MockedFunction<
48+
typeof useDataStore
49+
>;
50+
const mockGetUserLeagues = getUserLeagues as jest.MockedFunction<
51+
typeof getUserLeagues
52+
>;
53+
const mockGetGameWeek = getGameWeek as jest.MockedFunction<typeof getGameWeek>;
54+
const mockGetCurrentUserEntries = getCurrentUserEntries as jest.MockedFunction<
55+
typeof getCurrentUserEntries
56+
>;
57+
2358
describe('Leagues Component', () => {
24-
const mockUseDataStore = useDataStore as unknown as jest.Mock;
25-
const mockGetUserLeagues = getUserLeagues as jest.Mock;
26-
const mockGetGameWeek = getGameWeek as jest.Mock;
59+
const mockUpdateLeagues = jest.fn();
60+
const mockUpdateGameWeek = jest.fn();
61+
const mockUpdateEntries = jest.fn();
62+
const mockCn = cn as jest.MockedFunction<typeof cn>;
2763

2864
beforeEach(() => {
2965
jest.clearAllMocks();
66+
mockUseDataStore.mockReturnValue({
67+
user: { id: '123', leagues: [] },
68+
leagues: [],
69+
updateLeagues: mockUpdateLeagues,
70+
updateGameWeek: mockUpdateGameWeek,
71+
updateEntries: mockUpdateEntries,
72+
});
73+
});
74+
75+
test('should display GlobalSpinner while loading data', async () => {
76+
render(<Leagues />);
77+
78+
expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
79+
80+
await waitFor(() => {
81+
expect(mockGetUserLeagues).toHaveBeenCalled();
82+
});
3083
});
3184

3285
test('should render "You are not enrolled in any leagues" message when no leagues are found', async () => {
33-
mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
34-
mockGetUserLeagues.mockResolvedValueOnce([]);
35-
mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
86+
mockGetUserLeagues.mockResolvedValue([]);
87+
3688
render(<Leagues />);
3789

3890
await waitFor(() => {
39-
expect(
40-
screen.getByText('You are not enrolled in any leagues'),
41-
).toBeInTheDocument();
91+
expect(mockGetUserLeagues).toHaveBeenCalled();
4292
});
93+
94+
expect(
95+
screen.getByText('You are not enrolled in any leagues'),
96+
).toBeInTheDocument();
4397
});
4498

45-
test('should display GlobalSpinner while loading data', async () => {
46-
mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
47-
mockGetUserLeagues.mockResolvedValueOnce([]);
48-
mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
99+
test('should not call getGameWeek or getCurrentUserEntries if no leagues are found', async () => {
100+
mockGetUserLeagues.mockResolvedValue([]);
101+
49102
render(<Leagues />);
50103

51104
await waitFor(() => {
52-
expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
105+
expect(mockGetUserLeagues).toHaveBeenCalled();
106+
expect(mockGetGameWeek).not.toHaveBeenCalled();
107+
expect(mockGetCurrentUserEntries).not.toHaveBeenCalled();
53108
});
54109
});
110+
55111
test('should not display GlobalSpinner after loading data', async () => {
56-
mockUseDataStore.mockReturnValueOnce({ user: { id: '123', leagues: [] } });
57-
mockGetUserLeagues.mockResolvedValueOnce([]);
58-
mockGetGameWeek.mockResolvedValueOnce({ week: 1 });
112+
mockUseDataStore.mockReturnValue({
113+
user: { id: '123', leagues: ['123'] },
114+
leagues: mockLeagues,
115+
updateLeagues: mockUpdateLeagues,
116+
updateGameWeek: mockUpdateGameWeek,
117+
updateEntries: mockUpdateEntries,
118+
});
119+
mockGetUserLeagues.mockResolvedValue(mockLeagues);
120+
mockGetGameWeek.mockResolvedValue(mockGameWeek);
121+
mockGetCurrentUserEntries.mockResolvedValue(mockEntries);
59122

60123
render(<Leagues />);
61124

62125
expect(screen.getByTestId('global-spinner')).toBeInTheDocument();
63126

64127
await waitFor(() => {
65-
expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
128+
expect(mockGetUserLeagues).toHaveBeenCalled();
129+
expect(mockGetGameWeek).toHaveBeenCalled();
130+
expect(mockGetCurrentUserEntries).toHaveBeenCalled();
131+
});
132+
133+
expect(screen.queryByTestId('global-spinner')).not.toBeInTheDocument();
134+
});
135+
test('should display "Test League" when leagues are found', async () => {
136+
mockUseDataStore.mockReturnValue({
137+
user: { id: '123', leagues: ['123'] },
138+
leagues: mockLeagues,
139+
updateLeagues: mockUpdateLeagues,
140+
updateGameWeek: mockUpdateGameWeek,
141+
updateEntries: mockUpdateEntries,
142+
});
143+
mockGetUserLeagues.mockResolvedValue(mockLeagues);
144+
mockGetGameWeek.mockResolvedValue(mockGameWeek);
145+
mockGetCurrentUserEntries.mockResolvedValue(mockEntries);
146+
147+
render(<Leagues />);
148+
149+
await waitFor(() => {
150+
expect(mockGetUserLeagues).toHaveBeenCalled();
151+
expect(mockGetGameWeek).toHaveBeenCalled();
152+
expect(mockGetCurrentUserEntries).toHaveBeenCalled();
66153
});
154+
155+
expect(mockUpdateGameWeek).toHaveBeenCalledWith(mockGameWeek);
156+
expect(mockUpdateEntries).toHaveBeenCalledWith(mockEntries);
157+
158+
expect(screen.getByText('Test League')).toBeInTheDocument();
159+
});
160+
test('should call getGameWeek and getCurrentUserEntries if leagues are found', async () => {
161+
mockUseDataStore.mockReturnValue({
162+
user: { id: '123', leagues: ['123'] },
163+
leagues: mockLeagues,
164+
updateLeagues: mockUpdateLeagues,
165+
updateGameWeek: mockUpdateGameWeek,
166+
updateEntries: mockUpdateEntries,
167+
});
168+
mockGetUserLeagues.mockResolvedValue(mockLeagues);
169+
mockGetGameWeek.mockResolvedValue(mockGameWeek);
170+
mockGetCurrentUserEntries.mockResolvedValue(mockEntries);
171+
172+
render(<Leagues />);
173+
174+
await waitFor(() => {
175+
expect(mockGetUserLeagues).toHaveBeenCalled();
176+
expect(mockGetGameWeek).toHaveBeenCalled();
177+
expect(mockGetCurrentUserEntries).toHaveBeenCalled();
178+
});
179+
180+
expect(mockUpdateGameWeek).toHaveBeenCalledWith(mockGameWeek);
181+
expect(mockUpdateEntries).toHaveBeenCalledWith(mockEntries);
67182
});
68183
});

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import { getCurrentUserEntries, getGameWeek } from '@/api/apiFunctions';
1717
*/
1818
const Leagues = (): JSX.Element => {
1919
const [loadingData, setLoadingData] = useState<boolean>(true);
20-
const { user, leagues, updateLeagues, updateGameWeek, updateEntries } = useDataStore((state) => state);
20+
const { user, leagues, updateLeagues, updateGameWeek, updateEntries } =
21+
useDataStore((state) => state);
2122

2223
/**
2324
* Fetches the user's leagues.
@@ -40,7 +41,9 @@ const Leagues = (): JSX.Element => {
4041
*/
4142
const fetchAdditionalUserData = async (): Promise<void> => {
4243
try {
43-
const promises = leagues.map((league) => getCurrentUserEntries(user.id, league.leagueId));
44+
const promises = leagues.map((league) =>
45+
getCurrentUserEntries(user.id, league.leagueId),
46+
);
4447
const entries = await Promise.all(promises);
4548
const currentWeek = await getGameWeek();
4649
updateEntries(entries.flat());
@@ -63,7 +66,7 @@ const Leagues = (): JSX.Element => {
6366
if (leagues.length > 0) {
6467
fetchAdditionalUserData();
6568
}
66-
}, [leagues])
69+
}, [leagues]);
6770

6871
return (
6972
<div className="Leagues mx-auto max-w-3xl pt-10">

‎components/TableData/TableData.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,9 @@ const TableData = <TData, TValue>({
5757
{header.isPlaceholder
5858
? null
5959
: flexRender(
60-
header.column.columnDef.header,
61-
header.getContext(),
62-
)}
60+
header.column.columnDef.header,
61+
header.getContext(),
62+
)}
6363
</TableHead>
6464
);
6565
})}

‎store/dataStore.test.ts‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,26 @@ const NFLTeam = [
2121
},
2222
];
2323

24-
const league = [{
25-
leagueId: '123',
26-
leagueName: 'Test League',
27-
logo: 'https://findmylogo.com/logo.png',
28-
participants: ['123456', '78'],
29-
survivors: ['123456', '78', '9'],
30-
}];
31-
32-
const entries = [{
33-
$id: '123',
34-
name: 'Test Entry',
35-
user: '123',
36-
league: '123',
37-
selectedTeams: [],
38-
eliminated: false,
39-
}];
24+
const league = [
25+
{
26+
leagueId: '123',
27+
leagueName: 'Test League',
28+
logo: 'https://findmylogo.com/logo.png',
29+
participants: ['123456', '78'],
30+
survivors: ['123456', '78', '9'],
31+
},
32+
];
33+
34+
const entries = [
35+
{
36+
$id: '123',
37+
name: 'Test Entry',
38+
user: '123',
39+
league: '123',
40+
selectedTeams: [],
41+
eliminated: false,
42+
},
43+
];
4044

4145
const gameCurrentWeek = {
4246
id: '1234567890',
@@ -151,7 +155,9 @@ describe('Data Store', () => {
151155
expect(result.current.leagues[0].leagueId).toBe(league[0].leagueId);
152156
expect(result.current.leagues[0].leagueName).toBe(league[0].leagueName);
153157
expect(result.current.leagues[0].logo).toBe(league[0].logo);
154-
expect(result.current.leagues[0].participants).toBe(league[0].participants);
158+
expect(result.current.leagues[0].participants).toBe(
159+
league[0].participants,
160+
);
155161
expect(result.current.leagues[0].survivors).toBe(league[0].survivors);
156162
});
157163
});

‎store/dataStore.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -131,8 +131,8 @@ export const useDataStore = create<DataStore>((set) => ({
131131
set(
132132
produce((state: IDataStoreState) => {
133133
state.leagues = [...leagues];
134-
})
135-
),
134+
}),
135+
),
136136
/**
137137
* Update the current week
138138
* @param props - props
@@ -157,6 +157,6 @@ export const useDataStore = create<DataStore>((set) => ({
157157
set(
158158
produce((state: IDataStoreState) => {
159159
state.entries = [...entries];
160-
})
161-
),
160+
}),
161+
),
162162
}));

‎utils/utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export const parseUserPick = (
125125
export const getUserLeagues = async (
126126
leagues: IUser['leagues'],
127127
): Promise<ILeague[]> => {
128+
// TODO fix leagues.length === 0. If no leagues are found it returns an array with a length of 1 containing an empty string.
128129
if (!leagues || leagues.length === 0) {
129130
return [];
130131
}

0 commit comments

Comments
 (0)