Skip to content

Commit b4e0043

Browse files
nicholas-codecovnicholas-codecov
authored
chore: Migrate useIgnoredIds to TS Query V5 (#3547)
1 parent 729b0ce commit b4e0043

File tree

13 files changed

+244
-138
lines changed

13 files changed

+244
-138
lines changed

‎src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.test.tsx

+27-14
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
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, waitFor } from '@testing-library/react'
37
import userEvent from '@testing-library/user-event'
48
import { MemoryRouter, Route } from 'react-router-dom'
59

10+
import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
611
import { formatTimeToNow } from 'shared/utils/dates'
712
import { Upload } from 'shared/utils/extractUploads'
813

@@ -26,21 +31,25 @@ const mockUpload: Upload = {
2631
}
2732

2833
const queryClient = new QueryClient()
34+
const queryClientV5 = new QueryClientV5()
2935

3036
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
31-
<QueryClientProvider client={queryClient}>
32-
<MemoryRouter
33-
initialEntries={[
34-
'/gh/codecov/codecov-api/commit/a758cb364d190e9677ae2a3dd3b2af7690971624',
35-
]}
36-
>
37-
<Route path="/gh/:owner/:repo/commit/:commit">{children}</Route>
38-
</MemoryRouter>
39-
</QueryClientProvider>
37+
<QueryClientProviderV5 client={queryClientV5}>
38+
<QueryClientProvider client={queryClient}>
39+
<MemoryRouter
40+
initialEntries={[
41+
'/gh/codecov/codecov-api/commit/a758cb364d190e9677ae2a3dd3b2af7690971624',
42+
]}
43+
>
44+
<Route path="/gh/:owner/:repo/commit/:commit">{children}</Route>
45+
</MemoryRouter>
46+
</QueryClientProvider>
47+
</QueryClientProviderV5>
4048
)
4149

4250
afterEach(() => {
4351
queryClient.clear()
52+
queryClientV5.clear()
4453
})
4554

4655
describe('UploadsCard', () => {
@@ -497,9 +506,9 @@ describe('UploadsCard', () => {
497506
await user.click(checkbox)
498507

499508
await waitFor(() =>
500-
expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([
501-
0,
502-
])
509+
expect(
510+
queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
511+
).toStrictEqual([0])
503512
)
504513
})
505514

@@ -511,11 +520,15 @@ describe('UploadsCard', () => {
511520
const checkbox = screen.getByRole('checkbox')
512521
await user.click(checkbox)
513522

514-
expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([0])
523+
expect(
524+
queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
525+
).toStrictEqual([0])
515526

516527
await user.click(checkbox)
517528

518-
expect(queryClient.getQueryData(['IgnoredUploadIds'])).toStrictEqual([])
529+
expect(
530+
queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
531+
).toStrictEqual([])
519532
})
520533

521534
it('handles null id gracefully', async () => {

‎src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadItem.tsx

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
import { useQueryClient } from '@tanstack/react-query'
1+
import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
22
import without from 'lodash/without'
33
import { useEffect, useState } from 'react'
44

5+
import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
56
import { UploadTypeEnum } from 'shared/utils/commit'
67
import { formatTimeToNow } from 'shared/utils/dates'
78
import { Upload } from 'shared/utils/extractUploads'
@@ -35,7 +36,7 @@ const UploadItem = ({
3536
onSelectChange = () => {},
3637
}: UploadProps) => {
3738
const [checked, setChecked] = useState(true)
38-
const queryClient = useQueryClient()
39+
const queryClientV5 = useQueryClientV5()
3940
const isCarriedForward = uploadType === UploadTypeEnum.CARRIED_FORWARD
4041

4142
useEffect(() => setChecked(isSelected ?? true), [isSelected])
@@ -53,13 +54,13 @@ const UploadItem = ({
5354

5455
if (checked && id != null) {
5556
// User is unchecking
56-
queryClient.setQueryData(
57-
['IgnoredUploadIds'],
57+
queryClientV5.setQueryData(
58+
IgnoredIdsQueryOptions().queryKey,
5859
(oldData?: number[]) => [...(oldData ?? []), id]
5960
)
6061
} else if (id != null) {
61-
queryClient.setQueryData(
62-
['IgnoredUploadIds'],
62+
queryClientV5.setQueryData(
63+
IgnoredIdsQueryOptions().queryKey,
6364
(oldData?: number[]) => without(oldData, id)
6465
)
6566
}

‎src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.test.tsx

+69-38
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
1+
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
2+
import {
3+
QueryClientProvider as QueryClientProviderV5,
4+
QueryClient as QueryClientV5,
5+
} from '@tanstack/react-queryV5'
16
import {
27
render,
38
screen,
49
waitFor,
510
waitForElementToBeRemoved,
6-
} from 'custom-testing-library'
7-
8-
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
11+
} from '@testing-library/react'
912
import userEvent from '@testing-library/user-event'
1013
import { graphql, HttpResponse } from 'msw'
1114
import { setupServer } from 'msw/node'
1215
import { MemoryRouter, Route } from 'react-router-dom'
1316

17+
import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
18+
1419
import UploadsCard from './UploadsCard'
1520
import { useUploads } from './useUploads'
1621

@@ -22,34 +27,39 @@ const mocks = vi.hoisted(() => ({
2227
vi.mock('./useUploads', async () => mocks)
2328
vi.mock('services/commitErrors', async () => mocks)
2429

30+
const server = setupServer()
2531
const queryClient = new QueryClient({
26-
defaultOptions: {
27-
queries: {
28-
suspense: true,
29-
retry: false,
30-
},
31-
},
32+
defaultOptions: { queries: { suspense: true, retry: false } },
33+
})
34+
const queryClientV5 = new QueryClientV5({
35+
defaultOptions: { queries: { retry: false } },
3236
})
33-
const server = setupServer()
3437

3538
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
36-
<QueryClientProvider client={queryClient}>
37-
<MemoryRouter initialEntries={['/gh/codecov/gazebo/1234']}>
38-
<Route path="/:provider/:owner/:repo/:commit">{children}</Route>
39-
</MemoryRouter>
40-
</QueryClientProvider>
39+
<QueryClientProviderV5 client={queryClientV5}>
40+
<QueryClientProvider client={queryClient}>
41+
<MemoryRouter initialEntries={['/gh/codecov/gazebo/1234']}>
42+
<Route path="/:provider/:owner/:repo/:commit">{children}</Route>
43+
</MemoryRouter>
44+
</QueryClientProvider>
45+
</QueryClientProviderV5>
4146
)
4247

4348
beforeAll(() => {
4449
console.error = () => {}
4550
server.listen()
4651
})
52+
4753
afterEach(() => {
4854
queryClient.clear()
55+
queryClientV5.clear()
4956
server.resetHandlers()
5057
vi.clearAllMocks()
5158
})
52-
afterAll(() => server.close())
59+
60+
afterAll(() => {
61+
server.close()
62+
})
5363

5464
interface MockCommitErrors {
5565
data: {
@@ -193,6 +203,7 @@ describe('UploadsCard', () => {
193203
const covReportHistory = screen.getByText(/Coverage reports history/)
194204
expect(covReportHistory).toBeInTheDocument()
195205
})
206+
196207
it('renders different cis', () => {
197208
render(<UploadsCard />, { wrapper })
198209

@@ -201,6 +212,7 @@ describe('UploadsCard', () => {
201212
const travis = screen.getByText(/travis/)
202213
expect(travis).toBeInTheDocument()
203214
})
215+
204216
it('renders build ids', () => {
205217
render(<UploadsCard />, { wrapper })
206218

@@ -215,6 +227,7 @@ describe('UploadsCard', () => {
215227
const id5 = screen.getByText(/837462/)
216228
expect(id5).toBeInTheDocument()
217229
})
230+
218231
it('renders flags', () => {
219232
render(<UploadsCard />, { wrapper })
220233

@@ -255,6 +268,7 @@ describe('UploadsCard', () => {
255268
expect(currentlyNoUploads).toBeInTheDocument()
256269
})
257270
})
271+
258272
describe('renders empty Uploads', () => {
259273
// ??
260274
beforeEach(() => {
@@ -276,6 +290,7 @@ describe('UploadsCard', () => {
276290
expect(uploads).toBeInTheDocument()
277291
})
278292
})
293+
279294
describe('The yaml viewer', () => {
280295
beforeEach(() => {
281296
setup({
@@ -815,6 +830,7 @@ describe('UploadsCard', () => {
815830
})
816831
})
817832
})
833+
818834
describe('select all interactor', () => {
819835
beforeEach(() => {
820836
setup({
@@ -908,32 +924,47 @@ describe('UploadsCard', () => {
908924
})
909925
})
910926

911-
it('unselects all when clicked', async () => {
912-
const user = userEvent.setup()
913-
render(<UploadsCard />, { wrapper })
927+
describe('unselects all when clicked', () => {
928+
it('unselects all when clicked', async () => {
929+
const user = userEvent.setup()
930+
render(<UploadsCard />, { wrapper })
914931

915-
const checkboxes = screen.getAllByRole('checkbox')
916-
const travisCheckbox = checkboxes[0]
917-
const travisUploadCheckbox1 = checkboxes[1]
918-
const travisUploadCheckbox2 = checkboxes[2]
932+
const checkboxes = screen.getAllByRole('checkbox')
933+
const travisCheckbox = checkboxes[0]
934+
const travisUploadCheckbox1 = checkboxes[1]
935+
const travisUploadCheckbox2 = checkboxes[2]
919936

920-
expect(travisCheckbox).toBeChecked()
921-
expect(travisUploadCheckbox1).toBeChecked()
922-
expect(travisUploadCheckbox2).toBeChecked()
937+
expect(travisCheckbox).toBeChecked()
938+
expect(travisUploadCheckbox1).toBeChecked()
939+
expect(travisUploadCheckbox2).toBeChecked()
923940

924-
await user.click(travisCheckbox!)
941+
await user.click(travisCheckbox!)
925942

926-
expect(travisCheckbox).not.toBeChecked()
927-
expect(travisUploadCheckbox1).not.toBeChecked()
928-
expect(travisUploadCheckbox2).not.toBeChecked()
929-
930-
// 'circleci' uploads remain checked
931-
const circleciCheckbox = checkboxes[3]
932-
const circleciUploadCheckbox1 = checkboxes[4]
933-
const circleciUploadCheckbox2 = checkboxes[5]
934-
expect(circleciCheckbox).toBeChecked()
935-
expect(circleciUploadCheckbox1).toBeChecked()
936-
expect(circleciUploadCheckbox2).toBeChecked()
943+
expect(travisCheckbox).not.toBeChecked()
944+
expect(travisUploadCheckbox1).not.toBeChecked()
945+
expect(travisUploadCheckbox2).not.toBeChecked()
946+
947+
// 'circleci' uploads remain checked
948+
const circleciCheckbox = checkboxes[3]
949+
const circleciUploadCheckbox1 = checkboxes[4]
950+
const circleciUploadCheckbox2 = checkboxes[5]
951+
expect(circleciCheckbox).toBeChecked()
952+
expect(circleciUploadCheckbox1).toBeChecked()
953+
expect(circleciUploadCheckbox2).toBeChecked()
954+
})
955+
956+
it('adds ids to ignored ids query', async () => {
957+
const user = userEvent.setup()
958+
render(<UploadsCard />, { wrapper })
959+
960+
const checkboxes = screen.getAllByRole('checkbox')
961+
const travisCheckbox = checkboxes[0]
962+
await user.click(travisCheckbox!)
963+
964+
expect(
965+
queryClientV5.getQueryData(IgnoredIdsQueryOptions().queryKey)
966+
).toEqual([0, 1])
967+
})
937968
})
938969

939970
it('shows an intermediate state', async () => {

‎src/pages/CommitDetailPage/CommitCoverage/UploadsCard/UploadsCard.tsx

+37-11
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import { useQueryClient as useQueryClientV5 } from '@tanstack/react-queryV5'
12
import flatMap from 'lodash/flatMap'
23
import { Fragment, useState } from 'react'
34

5+
import { IgnoredIdsQueryOptions } from 'pages/CommitDetailPage/queries/IgnoredIdsQueryOptions'
46
import { useCommitErrors } from 'services/commitErrors'
57
import { cn } from 'shared/utils/cn'
68
import { NONE } from 'shared/utils/extractUploads'
@@ -28,6 +30,7 @@ export const SelectState = {
2830
} as const
2931

3032
function UploadsCard() {
33+
const queryClientV5 = useQueryClientV5()
3134
const [showYAMLModal, setShowYAMLModal] = useState(false)
3235
const [uploadFilters, setUploadFilters] = useState<UploadFilters>({
3336
flagErrors: false,
@@ -52,10 +55,22 @@ function UploadsCard() {
5255
const providerUploads = groupedUploads[provider]
5356
const providerUploadsIndex = providerUploads?.map((_, i) => i)
5457
const providerList = new Set(providerUploadsIndex)
55-
setSelectedProviderSelectedUploads((prevState) => ({
56-
...prevState,
57-
[provider]: new Set(providerUploadsIndex),
58-
}))
58+
setSelectedProviderSelectedUploads((prevState) => {
59+
const updatedIds = {
60+
...prevState,
61+
[provider]: new Set(providerUploadsIndex),
62+
}
63+
64+
// Ids added are ignored, so we need to use the previous state to remove them, we also use a Set to remove duplicates
65+
queryClientV5.setQueryData(
66+
IgnoredIdsQueryOptions().queryKey,
67+
Array.from(
68+
new Set(Object.values(prevState).flatMap((ids) => Array.from(ids)))
69+
)
70+
)
71+
72+
return updatedIds
73+
})
5974
return providerList
6075
}
6176

@@ -75,13 +90,24 @@ function UploadsCard() {
7590
}
7691

7792
const handleSelectAllForProviderGroup = (provider: string) => {
78-
setSelectedProviderSelectedUploads((prevState) => ({
79-
...prevState,
80-
[provider]:
81-
determineCheckboxState(provider) === SelectState.NONE_SELECTED
82-
? fillSelectedUploads(provider)
83-
: new Set(),
84-
}))
93+
setSelectedProviderSelectedUploads((prevState) => {
94+
const updatedIds = {
95+
...prevState,
96+
[provider]:
97+
determineCheckboxState(provider) === SelectState.NONE_SELECTED
98+
? fillSelectedUploads(provider)
99+
: new Set<number>(),
100+
}
101+
102+
// Ids added are ignored, so we need to use the previous state to remove them, we also use a Set to remove duplicates
103+
queryClientV5.setQueryData(
104+
IgnoredIdsQueryOptions().queryKey,
105+
Array.from(
106+
new Set(Object.values(prevState).flatMap((ids) => Array.from(ids)))
107+
)
108+
)
109+
return updatedIds
110+
})
85111
}
86112

87113
const determineCheckboxIcon = (title: string) => {

0 commit comments

Comments
 (0)