Skip to content

Commit 39922d3

Browse files
Fix test failures and linting issues in GameList component
Co-authored-by: kevinjosethomas <46242684+kevinjosethomas@users.noreply.github.com>
1 parent 9446c75 commit 39922d3

3 files changed

Lines changed: 178 additions & 97 deletions

File tree

Lines changed: 136 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react'
2-
import { render, screen, waitFor } from '@testing-library/react'
2+
import { render, screen, waitFor, act } from '@testing-library/react'
33
import userEvent from '@testing-library/user-event'
44
import { GameList } from 'src/components/Profile/GameList'
55
import { AuthContext } from 'src/contexts'
@@ -19,7 +19,11 @@ jest.mock('src/lib/customAnalysis', () => ({
1919
// Mock framer-motion to avoid animation issues in tests
2020
jest.mock('framer-motion', () => ({
2121
motion: {
22-
div: ({ children, ...props }: React.PropsWithChildren<object>) => (
22+
div: ({
23+
children,
24+
layoutId,
25+
...props
26+
}: React.PropsWithChildren<{ layoutId?: string }>) => (
2327
<div {...props}>{children}</div>
2428
),
2529
},
@@ -35,6 +39,8 @@ const mockGetLichessGames = api.getLichessGames as jest.MockedFunction<
3539

3640
// Mock user context
3741
const mockUser = {
42+
clientId: 'client123',
43+
displayName: 'Test User',
3844
lichessId: 'testuser123',
3945
id: 'user123',
4046
}
@@ -43,9 +49,8 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => (
4349
<AuthContext.Provider
4450
value={{
4551
user: mockUser,
46-
signIn: jest.fn(),
47-
signOut: jest.fn(),
48-
loading: false,
52+
connectLichess: jest.fn(),
53+
logout: jest.fn(),
4954
}}
5055
>
5156
{children}
@@ -55,26 +60,52 @@ const AuthWrapper = ({ children }: { children: React.ReactNode }) => (
5560
describe('GameList', () => {
5661
beforeEach(() => {
5762
jest.clearAllMocks()
58-
mockGetAnalysisGameList.mockResolvedValue({
59-
games: [
60-
{
61-
game_id: 'game1',
62-
maia_name: 'maia_kdd_1500',
63-
result: '1-0',
64-
player_color: 'white',
65-
},
66-
],
67-
total_games: 1,
68-
total_pages: 1,
63+
// Mock different responses based on game type
64+
mockGetAnalysisGameList.mockImplementation((gameType) => {
65+
if (gameType === 'hand') {
66+
return Promise.resolve({
67+
games: [
68+
{
69+
game_id: 'game1',
70+
maia_name: 'maia_kdd_1500',
71+
result: '1-0',
72+
player_color: 'white',
73+
},
74+
],
75+
total_games: 1,
76+
total_pages: 1,
77+
})
78+
} else if (gameType === 'brain') {
79+
return Promise.resolve({
80+
games: [],
81+
total_games: 0,
82+
total_pages: 0,
83+
})
84+
}
85+
// Default for 'play' and other types
86+
return Promise.resolve({
87+
games: [
88+
{
89+
game_id: 'game1',
90+
maia_name: 'maia_kdd_1500',
91+
result: '1-0',
92+
player_color: 'white',
93+
},
94+
],
95+
total_games: 1,
96+
total_pages: 1,
97+
})
6998
})
7099
})
71100

72-
it('renders with default props (all tabs shown for current user)', () => {
73-
render(
74-
<AuthWrapper>
75-
<GameList />
76-
</AuthWrapper>
77-
)
101+
it('renders with default props (all tabs shown for current user)', async () => {
102+
await act(async () => {
103+
render(
104+
<AuthWrapper>
105+
<GameList />
106+
</AuthWrapper>,
107+
)
108+
})
78109

79110
expect(screen.getByText('Your Games')).toBeInTheDocument()
80111
expect(screen.getByText('Play')).toBeInTheDocument()
@@ -83,17 +114,19 @@ describe('GameList', () => {
83114
expect(screen.getByText('Lichess')).toBeInTheDocument()
84115
})
85116

86-
it('renders with limited tabs for other users', () => {
87-
render(
88-
<AuthWrapper>
89-
<GameList
90-
lichessId="otheruser"
91-
userName="OtherUser"
92-
showCustom={false}
93-
showLichess={false}
94-
/>
95-
</AuthWrapper>
96-
)
117+
it('renders with limited tabs for other users', async () => {
118+
await act(async () => {
119+
render(
120+
<AuthWrapper>
121+
<GameList
122+
lichessId="otheruser"
123+
userName="OtherUser"
124+
showCustom={false}
125+
showLichess={false}
126+
/>
127+
</AuthWrapper>,
128+
)
129+
})
97130

98131
expect(screen.getByText("OtherUser's Games")).toBeInTheDocument()
99132
expect(screen.getByText('Play')).toBeInTheDocument()
@@ -103,45 +136,55 @@ describe('GameList', () => {
103136
})
104137

105138
it('fetches games with lichessId when provided', async () => {
106-
render(
107-
<AuthWrapper>
108-
<GameList
109-
lichessId="otheruser"
110-
userName="OtherUser"
111-
showCustom={false}
112-
showLichess={false}
113-
/>
114-
</AuthWrapper>
115-
)
139+
await act(async () => {
140+
render(
141+
<AuthWrapper>
142+
<GameList
143+
lichessId="otheruser"
144+
userName="OtherUser"
145+
showCustom={false}
146+
showLichess={false}
147+
/>
148+
</AuthWrapper>,
149+
)
150+
})
116151

117152
await waitFor(() => {
118-
expect(mockGetAnalysisGameList).toHaveBeenCalledWith('play', 1, 'otheruser')
153+
expect(mockGetAnalysisGameList).toHaveBeenCalledWith(
154+
'play',
155+
1,
156+
'otheruser',
157+
)
119158
})
120159
})
121160

122161
it('displays correct game labels for other users', async () => {
123-
render(
124-
<AuthWrapper>
125-
<GameList
126-
lichessId="otheruser"
127-
userName="OtherUser"
128-
showCustom={false}
129-
showLichess={false}
130-
/>
131-
</AuthWrapper>
132-
)
162+
await act(async () => {
163+
render(
164+
<AuthWrapper>
165+
<GameList
166+
lichessId="otheruser"
167+
userName="OtherUser"
168+
showCustom={false}
169+
showLichess={false}
170+
/>
171+
</AuthWrapper>,
172+
)
173+
})
133174

134175
await waitFor(() => {
135176
expect(screen.getByText('OtherUser vs. Maia 1500')).toBeInTheDocument()
136177
})
137178
})
138179

139180
it('displays correct game labels for current user', async () => {
140-
render(
141-
<AuthWrapper>
142-
<GameList />
143-
</AuthWrapper>
144-
)
181+
await act(async () => {
182+
render(
183+
<AuthWrapper>
184+
<GameList />
185+
</AuthWrapper>,
186+
)
187+
})
145188

146189
await waitFor(() => {
147190
expect(screen.getByText('You vs. Maia 1500')).toBeInTheDocument()
@@ -150,45 +193,60 @@ describe('GameList', () => {
150193

151194
it('switches between H&B subsections', async () => {
152195
const user = userEvent.setup()
153-
render(
154-
<AuthWrapper>
155-
<GameList />
156-
</AuthWrapper>
157-
)
196+
197+
await act(async () => {
198+
render(
199+
<AuthWrapper>
200+
<GameList />
201+
</AuthWrapper>,
202+
)
203+
})
158204

159205
// Click on H&B tab
160-
await user.click(screen.getByText('H&B'))
206+
await act(async () => {
207+
await user.click(screen.getByText('H&B'))
208+
})
161209

162-
// Check that Hand subsection is visible
163-
expect(screen.getByText('Hand (0)')).toBeInTheDocument()
164-
expect(screen.getByText('Brain (0)')).toBeInTheDocument()
210+
// Wait for the hand games to load and check subsection labels
211+
await waitFor(() => {
212+
expect(screen.getByText('Hand (1)')).toBeInTheDocument()
213+
expect(screen.getByText('Brain (0)')).toBeInTheDocument()
214+
})
165215

166216
// Click on Brain subsection
167-
await user.click(screen.getByText('Brain (0)'))
217+
await act(async () => {
218+
await user.click(screen.getByText('Brain (0)'))
219+
})
168220

169221
// Verify API call for brain games
170222
await waitFor(() => {
171-
expect(mockGetAnalysisGameList).toHaveBeenCalledWith('brain', 1, undefined)
223+
expect(mockGetAnalysisGameList).toHaveBeenCalledWith(
224+
'brain',
225+
1,
226+
undefined,
227+
)
172228
})
173229
})
174230

175-
it('adjusts grid columns based on available tabs', () => {
231+
it('adjusts grid columns based on available tabs', async () => {
176232
const { rerender } = render(
177233
<AuthWrapper>
178234
<GameList />
179-
</AuthWrapper>
235+
</AuthWrapper>,
180236
)
181237

182238
// With all 4 tabs
183239
expect(document.querySelector('.grid-cols-4')).toBeInTheDocument()
184240

185241
// With only 2 tabs
186-
rerender(
187-
<AuthWrapper>
188-
<GameList showCustom={false} showLichess={false} />
189-
</AuthWrapper>
190-
)
242+
await act(async () => {
243+
rerender(
244+
<AuthWrapper>
245+
<GameList showCustom={false} showLichess={false} />
246+
</AuthWrapper>,
247+
)
248+
})
191249

192250
expect(document.querySelector('.grid-cols-2')).toBeInTheDocument()
193251
})
194-
})
252+
})

0 commit comments

Comments
 (0)