Skip to content

Commit 197c3da

Browse files
nicholas-codecovnicholas-codecov
authored
ref: Migrate useBranchCoverageMeasurements to TSQ V5 (#3711)
1 parent 6e3ba0f commit 197c3da

File tree

8 files changed

+200
-204
lines changed

8 files changed

+200
-204
lines changed

‎src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.test.tsx

+17-7
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
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'
@@ -77,15 +81,20 @@ const server = setupServer()
7781
const queryClient = new QueryClient({
7882
defaultOptions: { queries: { retry: false, suspense: true } },
7983
})
84+
const queryClientV5 = new QueryClientV5({
85+
defaultOptions: { queries: { retry: false } },
86+
})
8087

8188
const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
82-
<QueryClientProvider client={queryClient}>
83-
<MemoryRouter initialEntries={['/gh/test-org/test-repo']}>
84-
<Route path="/:provider/:owner/:repo">
85-
<Suspense fallback={null}>{children}</Suspense>
86-
</Route>
87-
</MemoryRouter>
88-
</QueryClientProvider>
89+
<QueryClientProviderV5 client={queryClientV5}>
90+
<QueryClientProvider client={queryClient}>
91+
<MemoryRouter initialEntries={['/gh/test-org/test-repo']}>
92+
<Route path="/:provider/:owner/:repo">
93+
<Suspense fallback={null}>{children}</Suspense>
94+
</Route>
95+
</MemoryRouter>
96+
</QueryClientProvider>
97+
</QueryClientProviderV5>
8998
)
9099

91100
beforeAll(() => {
@@ -94,6 +103,7 @@ beforeAll(() => {
94103

95104
afterEach(() => {
96105
queryClient.clear()
106+
queryClientV5.clear()
97107
server.resetHandlers()
98108
})
99109

‎src/pages/RepoPage/CoverageTab/OverviewTab/Summary/CoverageTrend/CoverageTrend.tsx

+5-8
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { keepPreviousData } from '@tanstack/react-queryV5'
12
import { useParams } from 'react-router-dom'
23

34
import { useBranches } from 'services/branches'
@@ -30,23 +31,19 @@ function CoverageTrend() {
3031
defaultBranch: overview?.defaultBranch ?? '',
3132
})
3233

33-
const { data, isLoading } = useRepoCoverageTimeseries({
34+
const { data, isPending, isSuccess } = useRepoCoverageTimeseries({
3435
branch: selection?.name,
35-
options: {
36-
enabled: !!selection?.name,
37-
suspense: false,
38-
keepPreviousData: true,
39-
},
36+
options: { enabled: !!selection?.name, placeholderData: keepPreviousData },
4037
})
4138

4239
return (
4340
<SummaryField>
4441
<TrendDropdown />
4542
<div className="flex items-center gap-2 pb-[1.3rem]">
4643
{/* ^ CSS doesn't want to render like the others without a p tag in the dom. */}
47-
{isLoading ? (
44+
{isPending ? (
4845
<Spinner />
49-
) : data?.measurements?.length > 0 ? (
46+
) : isSuccess && data.measurements.length > 0 ? (
5047
<TotalsNumber value={data?.coverageChange ?? 0} light showChange />
5148
) : (
5249
<p className="text-sm font-medium">

‎src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useRepoCoverageTimeseries.test.tsx

+25-19
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
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 { renderHook, waitFor } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -58,14 +62,20 @@ const server = setupServer()
5862
const queryClient = new QueryClient({
5963
defaultOptions: { queries: { retry: false } },
6064
})
65+
const queryClientV5 = new QueryClientV5({
66+
defaultOptions: { queries: { retry: false } },
67+
})
68+
6169
const wrapper =
6270
(searchParams = ''): React.FC<React.PropsWithChildren> =>
6371
({ children }) => (
64-
<QueryClientProvider client={queryClient}>
65-
<MemoryRouter initialEntries={[`/gh/caleb/mighty-nein${searchParams}`]}>
66-
<Route path="/:provider/:owner/:repo">{children}</Route>
67-
</MemoryRouter>
68-
</QueryClientProvider>
72+
<QueryClientProviderV5 client={queryClientV5}>
73+
<QueryClientProvider client={queryClient}>
74+
<MemoryRouter initialEntries={[`/gh/caleb/mighty-nein${searchParams}`]}>
75+
<Route path="/:provider/:owner/:repo">{children}</Route>
76+
</MemoryRouter>
77+
</QueryClientProvider>
78+
</QueryClientProviderV5>
6979
)
7080

7181
beforeAll(() => {
@@ -74,6 +84,7 @@ beforeAll(() => {
7484

7585
afterEach(() => {
7686
queryClient.clear()
87+
queryClientV5.clear()
7788
server.resetHandlers()
7889
})
7990

@@ -89,7 +100,9 @@ describe('useRepoCoverageTimeseries', () => {
89100
const config = vi.fn()
90101

91102
function setup(
92-
{ noCoverageData = false }: SetupArgs = { noCoverageData: false }
103+
{ noCoverageData = false }: SetupArgs = {
104+
noCoverageData: false,
105+
}
93106
) {
94107
server.use(
95108
graphql.query('GetRepoOverview', () => {
@@ -147,26 +160,19 @@ describe('useRepoCoverageTimeseries', () => {
147160
})
148161
})
149162

150-
describe('with no coverage data', () => {
151-
it('returns an empty array', async () => {
152-
setup({ noCoverageData: true })
153-
const { result } = renderHook(
154-
() => useRepoCoverageTimeseries({ branch: 'c3' }),
155-
{ wrapper: wrapper('') }
156-
)
157-
158-
await waitFor(() => expect(result.current.data?.measurements).toEqual([]))
159-
})
160-
161-
it('returns 0 for coverage change', async () => {
163+
describe('with null coverage data', () => {
164+
it('returns measurements with 0 for coverage', async () => {
162165
setup({ noCoverageData: true })
163166
const { result } = renderHook(
164167
() => useRepoCoverageTimeseries({ branch: 'c3' }),
165168
{ wrapper: wrapper('') }
166169
)
167170

168171
await waitFor(() =>
169-
expect(result.current.data?.coverageChange).toEqual(0)
172+
expect(result.current.data?.measurements).toEqual([
173+
{ coverage: 0, date: new Date('2023-01-01T00:00:00.000Z') },
174+
{ coverage: 0, date: new Date('2023-01-02T00:00:00.000Z') },
175+
])
170176
)
171177
})
172178
})

‎src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useRepoCoverageTimeseries.ts

+38-52
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1+
import {
2+
keepPreviousData,
3+
useQuery as useQueryV5,
4+
} from '@tanstack/react-queryV5'
15
import { useMemo } from 'react'
26
import { useParams } from 'react-router-dom'
37

4-
import { useBranchCoverageMeasurements } from 'services/charts/useBranchCoverageMeasurements'
8+
import { BranchCoverageMeasurementsQueryOpts } from 'services/charts/BranchCoverageMeasurementsQueryOpts'
59
import { useLocationParams } from 'services/navigation'
610
import { useRepoOverview } from 'services/repo'
711
import {
@@ -21,8 +25,7 @@ interface UseRepoCoverageTimeseriesArgs {
2125
branch: string
2226
options?: {
2327
enabled?: boolean
24-
suspense?: boolean
25-
keepPreviousData?: boolean
28+
placeholderData?: typeof keepPreviousData
2629
}
2730
}
2831

@@ -49,59 +52,42 @@ export function useRepoCoverageTimeseries({
4952
return createTimeSeriesQueryVars({ trend, oldestCommit, today })
5053
}, [overview?.oldestCommitAt, params?.trend, today])
5154

52-
const { data, ...rest } = useBranchCoverageMeasurements({
53-
provider,
54-
owner,
55-
repo,
56-
branch,
57-
after: queryVars?.after,
58-
before: today,
59-
interval: queryVars.interval,
60-
opts: {
61-
enabled: !!overview?.oldestCommitAt,
62-
staleTime: 30000,
63-
keepPreviousData: false,
64-
suspense: false,
65-
...options,
66-
},
67-
})
68-
69-
return useMemo(() => {
70-
let coverage = []
71-
72-
if (!data?.measurements) {
73-
return {
74-
...rest,
75-
data: { measurements: [] },
55+
return useQueryV5({
56+
...BranchCoverageMeasurementsQueryOpts({
57+
provider,
58+
owner,
59+
repo,
60+
branch,
61+
after: queryVars?.after,
62+
before: today,
63+
interval: queryVars.interval,
64+
}),
65+
select: (data) => {
66+
let coverage = []
67+
if (data.measurements?.[0]?.max === null) {
68+
data.measurements[0].max = 0
7669
}
77-
}
7870

79-
if (data?.measurements?.[0]?.max === null) {
80-
data.measurements[0].max = 0
81-
}
71+
// set initial coverage percentage
72+
let prevPercent = data?.measurements?.[0]?.max ?? 0
73+
coverage = data?.measurements?.map((measurement) => {
74+
const coverage = measurement?.max ?? prevPercent
8275

83-
// set set initial t
84-
let prevPercent = data?.measurements?.[0]?.max ?? 0
85-
coverage = data?.measurements?.map((measurement) => {
86-
const coverage = measurement?.max ?? prevPercent
76+
// can save on a few reassignments
77+
if (prevPercent !== coverage) {
78+
prevPercent = coverage
79+
}
8780

88-
// can save on a few reassignments
89-
if (prevPercent !== coverage) {
90-
prevPercent = coverage
91-
}
92-
93-
return {
94-
date: new Date(measurement?.timestamp),
95-
coverage,
96-
}
97-
})
81+
return { date: new Date(measurement?.timestamp), coverage }
82+
})
9883

99-
const coverageChange =
100-
(coverage.at(-1)?.coverage ?? 0) - (coverage.at(0)?.coverage ?? 0)
84+
const coverageChange =
85+
(coverage.at(-1)?.coverage ?? 0) - (coverage.at(0)?.coverage ?? 0)
10186

102-
return {
103-
...rest,
104-
data: { measurements: coverage, coverageChange },
105-
}
106-
}, [data, rest])
87+
return { measurements: coverage, coverageChange }
88+
},
89+
enabled: !!overview?.oldestCommitAt,
90+
staleTime: 30000,
91+
...options,
92+
})
10793
}

‎src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/CoverageChart.test.tsx

+19-8
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
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, within } from '@testing-library/react'
37
import { graphql, HttpResponse } from 'msw'
48
import { setupServer } from 'msw/node'
@@ -26,21 +30,27 @@ vi.mock('recharts', async () => {
2630
}
2731
})
2832

33+
const queryClient = new QueryClient({
34+
defaultOptions: { queries: { retry: false } },
35+
})
36+
const queryClientV5 = new QueryClientV5({
37+
defaultOptions: { queries: { retry: false } },
38+
})
39+
2940
const wrapper =
3041
(
3142
initialEntries = ['/gh/codecov/bells-hells/tree/main']
3243
): React.FC<React.PropsWithChildren> =>
3344
({ children }) => (
34-
<QueryClientProvider client={queryClient}>
35-
<MemoryRouter initialEntries={initialEntries}>
36-
<Route path="/:provider/:owner/:repo">{children}</Route>
37-
</MemoryRouter>
38-
</QueryClientProvider>
45+
<QueryClientProviderV5 client={queryClientV5}>
46+
<QueryClientProvider client={queryClient}>
47+
<MemoryRouter initialEntries={initialEntries}>
48+
<Route path="/:provider/:owner/:repo">{children}</Route>
49+
</MemoryRouter>
50+
</QueryClientProvider>
51+
</QueryClientProviderV5>
3952
)
4053

41-
const queryClient = new QueryClient({
42-
defaultOptions: { queries: { retry: false } },
43-
})
4454
const server = setupServer()
4555

4656
beforeAll(() => {
@@ -73,6 +83,7 @@ beforeEach(() => {
7383

7484
afterEach(() => {
7585
queryClient.clear()
86+
queryClientV5.clear()
7687
server.resetHandlers()
7788
})
7889

‎src/pages/RepoPage/CoverageTab/OverviewTab/subroute/CoverageChart/CoverageChart.tsx

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { keepPreviousData } from '@tanstack/react-queryV5'
12
import { format } from 'date-fns'
23
import { useParams } from 'react-router-dom'
34
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'
@@ -43,17 +44,16 @@ function CoverageChart() {
4344
defaultBranch: overview?.defaultBranch ?? '',
4445
})
4546

46-
const { data, isPreviousData, isLoading, isError } =
47+
const { data, isPlaceholderData, isPending, isError } =
4748
useRepoCoverageTimeseries({
4849
branch: selection?.name,
4950
options: {
5051
enabled: !!selection?.name,
51-
suspense: false,
52-
keepPreviousData: true,
52+
placeholderData: keepPreviousData,
5353
},
5454
})
5555

56-
if (!isPreviousData && isLoading) {
56+
if (!isPlaceholderData && isPending) {
5757
return <Placeholder />
5858
}
5959

@@ -65,7 +65,8 @@ function CoverageChart() {
6565
)
6666
}
6767

68-
if (data?.measurements.length < 1) {
68+
const dataCount = data?.measurements?.length ?? 0
69+
if (dataCount < 1) {
6970
return (
7071
<div className="flex min-h-[250px] items-center justify-center xl:min-h-[380px]">
7172
<p className="text-center">

0 commit comments

Comments
 (0)