11import React from 'react'
2- import { render , screen , waitFor } from '@testing-library/react'
2+ import { render , screen , waitFor , act } from '@testing-library/react'
33import userEvent from '@testing-library/user-event'
44import { GameList } from 'src/components/Profile/GameList'
55import { AuthContext } from 'src/contexts'
@@ -19,7 +19,11 @@ jest.mock('src/lib/customAnalysis', () => ({
1919// Mock framer-motion to avoid animation issues in tests
2020jest . 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
3741const 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 }) => (
5560describe ( '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