Skip to content

Commit c9c56e6

Browse files
nicholas-codecovnicholas-codecov
authored
ref: useRepoForTokensTeam to TS Query V5 (#3657)
1 parent 56c06e7 commit c9c56e6

File tree

6 files changed

+139
-85
lines changed

6 files changed

+139
-85
lines changed

‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/GeneralTab.test.jsx ‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/GeneralTab.test.tsx

+46-19
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
26
import { render, screen } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
9+
import { Suspense } from 'react'
510
import { MemoryRouter, Route } from 'react-router-dom'
611

712
import GeneralTab from './GeneralTab'
@@ -22,29 +27,51 @@ vi.mock('./DefaultBranch', () => ({
2227
const queryClient = new QueryClient({
2328
defaultOptions: { queries: { retry: false } },
2429
})
25-
const server = setupServer()
30+
const queryClientV5 = new QueryClientV5({
31+
defaultOptions: { queries: { retry: false } },
32+
})
2633

27-
const wrapper = ({ children }) => (
28-
<QueryClientProvider client={queryClient}>
29-
<MemoryRouter initialEntries={['/gh/codecov/codecov-client/config']}>
30-
<Route path="/:provider/:owner/:repo/config">{children}</Route>
31-
</MemoryRouter>
32-
</QueryClientProvider>
34+
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
35+
<QueryClientProviderV5 client={queryClientV5}>
36+
<QueryClientProvider client={queryClient}>
37+
<MemoryRouter initialEntries={['/gh/codecov/codecov-client/config']}>
38+
<Route path="/:provider/:owner/:repo/config">
39+
<Suspense fallback={<p>Loading</p>}>{children}</Suspense>
40+
</Route>
41+
</MemoryRouter>
42+
</QueryClientProvider>
43+
</QueryClientProviderV5>
3344
)
3445

46+
const server = setupServer()
3547
beforeAll(() => {
3648
server.listen()
3749
console.error = () => {}
3850
})
51+
3952
afterEach(() => {
4053
queryClient.clear()
54+
queryClientV5.clear()
4155
server.resetHandlers()
4256
})
43-
afterAll(() => server.close())
57+
58+
afterAll(() => {
59+
server.close()
60+
})
61+
62+
interface SetupArgs {
63+
hasDefaultBranch?: boolean
64+
isTeamPlan?: boolean
65+
isPrivate?: boolean
66+
}
4467

4568
describe('GeneralTab', () => {
4669
function setup(
47-
{ hasDefaultBranch = false, isTeamPlan = false, isPrivate = false } = {
70+
{
71+
hasDefaultBranch = false,
72+
isTeamPlan = false,
73+
isPrivate = false,
74+
}: SetupArgs = {
4875
hasDefaultBranch: false,
4976
isTeamPlan: false,
5077
isPrivate: false,
@@ -112,19 +139,19 @@ describe('GeneralTab', () => {
112139
})
113140
})
114141

115-
it('render tokens component', () => {
142+
it('render tokens component', async () => {
116143
setup({ isTeamPlan: true })
117144
render(<GeneralTab />, { wrapper })
118145

119-
const tokensComponent = screen.getByText(/Tokens Component/)
146+
const tokensComponent = await screen.findByText(/Tokens Component/)
120147
expect(tokensComponent).toBeInTheDocument()
121148
})
122149

123-
it('render danger zone component', () => {
150+
it('render danger zone component', async () => {
124151
setup({ isTeamPlan: true })
125152
render(<GeneralTab />, { wrapper })
126153

127-
const tokensComponent = screen.getByText(/DangerZone Component/)
154+
const tokensComponent = await screen.findByText(/DangerZone Component/)
128155
expect(tokensComponent).toBeInTheDocument()
129156
})
130157
})
@@ -142,10 +169,10 @@ describe('GeneralTab', () => {
142169
expect(tokensComponent).toBeInTheDocument()
143170
})
144171

145-
it('render danger zone component', () => {
172+
it('render danger zone component', async () => {
146173
render(<GeneralTab />, { wrapper })
147174

148-
const tokensComponent = screen.getByText(/DangerZone Component/)
175+
const tokensComponent = await screen.findByText(/DangerZone Component/)
149176
expect(tokensComponent).toBeInTheDocument()
150177
})
151178
})
@@ -155,17 +182,17 @@ describe('GeneralTab', () => {
155182
setup({ isTeamPlan: true, isPrivate: false })
156183
})
157184

158-
it('render tokens component', () => {
185+
it('render tokens component', async () => {
159186
render(<GeneralTab />, { wrapper })
160187

161-
const tokensComponent = screen.getByText(/Tokens Component/)
188+
const tokensComponent = await screen.findByText(/Tokens Component/)
162189
expect(tokensComponent).toBeInTheDocument()
163190
})
164191

165-
it('render danger zone component', () => {
192+
it('render danger zone component', async () => {
166193
render(<GeneralTab />, { wrapper })
167194

168-
const tokensComponent = screen.getByText(/DangerZone Component/)
195+
const tokensComponent = await screen.findByText(/DangerZone Component/)
169196
expect(tokensComponent).toBeInTheDocument()
170197
})
171198
})

‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/GeneralTab.jsx ‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/GeneralTab.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,30 @@
1+
import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
12
import { useParams } from 'react-router-dom'
23

34
import { useIsTeamPlan } from 'services/useIsTeamPlan'
45

56
import DangerZone from './DangerZone'
67
import DefaultBranch from './DefaultBranch'
7-
import { useRepoForTokensTeam } from './hooks'
8+
import { RepoForTokensTeamQueryOpts } from './queries/RepoForTokensTeamQueryOpts'
89
import { Tokens, TokensTeam } from './Tokens'
910

11+
interface URLParams {
12+
provider: string
13+
owner: string
14+
repo: string
15+
}
16+
1017
function GeneralTab() {
11-
const { provider, owner, repo } = useParams()
12-
const { data: repoData } = useRepoForTokensTeam({
13-
provider,
14-
owner,
15-
repo,
16-
})
18+
const { provider, owner, repo } = useParams<URLParams>()
1719
const { data: isTeamPlan } = useIsTeamPlan({ provider, owner })
20+
const { data: repoData } = useSuspenseQueryV5(
21+
RepoForTokensTeamQueryOpts({
22+
provider,
23+
owner,
24+
repo,
25+
})
26+
)
27+
1828
const defaultBranch = repoData?.defaultBranch
1929
const isPrivate = repoData?.private
2030
const showTokensTeam = isPrivate && isTeamPlan

‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/hooks/index.ts

-1
This file was deleted.

‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/index.js ‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/index.ts

File renamed without changes.

‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/hooks/useRepoForTokensTeam.test.tsx ‎src/pages/RepoPage/ConfigTab/tabs/GeneralTab/queries/RepoForTokensTeamQueryOpts.test.tsx

+49-35
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
1+
import {
2+
QueryClientProvider as QueryClientProviderV5,
3+
QueryClient as QueryClientV5,
4+
useQuery as useQueryV5,
5+
} from '@tanstack/react-queryV5'
26
import { renderHook, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
59

6-
import { useRepoForTokensTeam } from './useRepoForTokensTeam'
10+
import { RepoForTokensTeamQueryOpts } from './RepoForTokensTeamQueryOpts'
711

812
const mockRepoData = {
913
owner: {
@@ -39,21 +43,23 @@ const mockNullOwner = {
3943

4044
const mockUnsuccessfulParseError = {}
4145

42-
const queryClient = new QueryClient({
46+
const queryClientV5 = new QueryClientV5({
4347
defaultOptions: { queries: { retry: false } },
4448
})
4549
const server = setupServer()
4650

4751
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
48-
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
52+
<QueryClientProviderV5 client={queryClientV5}>
53+
{children}
54+
</QueryClientProviderV5>
4955
)
5056

5157
beforeAll(() => {
5258
server.listen()
5359
})
5460

5561
afterEach(() => {
56-
queryClient.clear()
62+
queryClientV5.clear()
5763
server.resetHandlers()
5864
})
5965

@@ -68,7 +74,7 @@ interface SetupArgs {
6874
isNullOwner?: boolean
6975
}
7076

71-
describe('useRepoForTokensTeam', () => {
77+
describe('RepoForTokensTeamQueryOpts', () => {
7278
function setup({
7379
isNotFoundError = false,
7480
isOwnerNotActivatedError = false,
@@ -100,16 +106,17 @@ describe('useRepoForTokensTeam', () => {
100106

101107
const { result } = renderHook(
102108
() =>
103-
useRepoForTokensTeam({
104-
provider: 'gh',
105-
owner: 'codecov',
106-
repo: 'cool-repo',
107-
}),
109+
useQueryV5(
110+
RepoForTokensTeamQueryOpts({
111+
provider: 'gh',
112+
owner: 'codecov',
113+
repo: 'cool-repo',
114+
})
115+
),
108116
{ wrapper }
109117
)
110118

111-
await waitFor(() => result.current.isLoading)
112-
await waitFor(() => !result.current.isLoading)
119+
await waitFor(() => result.current.isSuccess)
113120

114121
const expectedResult = {
115122
__typename: 'Repository',
@@ -128,16 +135,17 @@ describe('useRepoForTokensTeam', () => {
128135

129136
const { result } = renderHook(
130137
() =>
131-
useRepoForTokensTeam({
132-
provider: 'gh',
133-
owner: 'codecov',
134-
repo: 'cool-repo',
135-
}),
138+
useQueryV5(
139+
RepoForTokensTeamQueryOpts({
140+
provider: 'gh',
141+
owner: 'codecov',
142+
repo: 'cool-repo',
143+
})
144+
),
136145
{ wrapper }
137146
)
138147

139-
await waitFor(() => result.current.isLoading)
140-
await waitFor(() => !result.current.isLoading)
148+
await waitFor(() => result.current.isSuccess)
141149

142150
await waitFor(() => expect(result.current.data).toStrictEqual(null))
143151
})
@@ -160,11 +168,13 @@ describe('useRepoForTokensTeam', () => {
160168

161169
const { result } = renderHook(
162170
() =>
163-
useRepoForTokensTeam({
164-
provider: 'gh',
165-
owner: 'codecov',
166-
repo: 'cool-repo',
167-
}),
171+
useQueryV5(
172+
RepoForTokensTeamQueryOpts({
173+
provider: 'gh',
174+
owner: 'codecov',
175+
repo: 'cool-repo',
176+
})
177+
),
168178
{ wrapper }
169179
)
170180

@@ -195,11 +205,13 @@ describe('useRepoForTokensTeam', () => {
195205

196206
const { result } = renderHook(
197207
() =>
198-
useRepoForTokensTeam({
199-
provider: 'gh',
200-
owner: 'codecov',
201-
repo: 'cool-repo',
202-
}),
208+
useQueryV5(
209+
RepoForTokensTeamQueryOpts({
210+
provider: 'gh',
211+
owner: 'codecov',
212+
repo: 'cool-repo',
213+
})
214+
),
203215
{ wrapper }
204216
)
205217

@@ -230,11 +242,13 @@ describe('useRepoForTokensTeam', () => {
230242

231243
const { result } = renderHook(
232244
() =>
233-
useRepoForTokensTeam({
234-
provider: 'gh',
235-
owner: 'codecov',
236-
repo: 'cool-repo',
237-
}),
245+
useQueryV5(
246+
RepoForTokensTeamQueryOpts({
247+
provider: 'gh',
248+
owner: 'codecov',
249+
repo: 'cool-repo',
250+
})
251+
),
238252
{ wrapper }
239253
)
240254

0 commit comments

Comments
 (0)