ref: useCoverageTabData to TS Query V5 (#3658)

Author: nsdeschenes

src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.test.tsx

@@ -1,7 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { render, screen } from '@testing-library/react'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
+import { render, screen, waitFor } from '@testing-library/react'
 import { graphql, http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import CoverageOverviewTab from './OverviewTab'
@@ -267,25 +272,30 @@ const server = setupServer()
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
 const wrapper: (
   initialEnties?: string[]
 ) => React.FC<React.PropsWithChildren> =
   (initialEntries = ['/gh/codecov/cool-repo/tree/main']) =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
-      <MemoryRouter initialEntries={initialEntries}>
-        <Route
-          path={[
-            '/:provider/:owner/:repo/blob/:ref/:path+',
-            '/:provider/:owner/:repo',
-          ]}
-          exact={true}
-        >
-          {children}
-        </Route>
-      </MemoryRouter>
-    </QueryClientProvider>
+    <QueryClientProviderV5 client={queryClientV5}>
+      <QueryClientProvider client={queryClient}>
+        <MemoryRouter initialEntries={initialEntries}>
+          <Route
+            path={[
+              '/:provider/:owner/:repo/blob/:ref/:path+',
+              '/:provider/:owner/:repo',
+            ]}
+            exact={true}
+          >
+            <Suspense fallback={<div>Loading</div>}>{children}</Suspense>
+          </Route>
+        </MemoryRouter>
+      </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
@@ -317,6 +327,7 @@ beforeEach(() => {
 
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 
@@ -411,7 +422,7 @@ describe('Coverage overview tab', () => {
       wrapper: wrapper(['/gh/test-org/repoName']),
     })
 
-    const summary = screen.getByText(/Summary/)
+    const summary = await screen.findByText(/Summary/)
     expect(summary).toBeInTheDocument()
   })
 
@@ -432,7 +443,7 @@ describe('Coverage overview tab', () => {
 
   describe('file count is above 200_000', () => {
     it('does not render the sunburst chart', async () => {
-      setup({ fileCount: 200_000 })
+      setup({ fileCount: 500_000 })
       render(<CoverageOverviewTab />, {
         wrapper: wrapper(['/gh/test-org/repoName']),
       })
@@ -441,7 +452,7 @@ describe('Coverage overview tab', () => {
       expect(hideChart).toBeInTheDocument()
 
       const sunburst = screen.queryByText('Sunburst')
-      expect(sunburst).not.toBeInTheDocument()
+      await waitFor(() => expect(sunburst).not.toBeInTheDocument())
     })
   })
 

src/pages/RepoPage/CoverageTab/OverviewTab/OverviewTab.tsx

@@ -1,17 +1,18 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { lazy, Suspense } from 'react'
 import { Switch, useParams } from 'react-router-dom'
 
 import { SentryRoute } from 'sentry'
 
 import SilentNetworkErrorWrapper from 'layouts/shared/SilentNetworkErrorWrapper'
-import { useRepo } from 'services/repo'
+import { useRepo, useRepoOverview } from 'services/repo'
 import { useIsTeamPlan } from 'services/useIsTeamPlan'
 import { cn } from 'shared/utils/cn'
 import Spinner from 'ui/Spinner'
 import { ToggleElement } from 'ui/ToggleElement'
 
 import FirstPullRequestBanner from './FirstPullRequestBanner'
-import { useCoverageTabData } from './hooks/useCoverageTabData'
+import { CoverageTabDataQueryOpts } from './queries/CoverageTabDataQueryOpts'
 import Summary from './Summary'
 import SummaryTeamPlan from './SummaryTeamPlan'
 
@@ -45,13 +46,26 @@ function CoverageOverviewTab() {
 
   const { data: isTeamPlan } = useIsTeamPlan({ provider, owner })
 
-  const { data } = useCoverageTabData({
+  const { data: repoOverview } = useRepoOverview({
     provider,
-    owner,
     repo,
-    branch: branch,
+    owner,
+    opts: {
+      enabled: !branch,
+    },
   })
 
+  const branchName = branch ?? repoOverview?.defaultBranch
+
+  const { data } = useSuspenseQueryV5(
+    CoverageTabDataQueryOpts({
+      provider,
+      owner,
+      repo,
+      branch: branchName,
+    })
+  )
+
   const fileCount = data?.branch?.head?.coverageAnalytics?.totals?.fileCount
   const withinFileCount =
     typeof fileCount === 'number' && fileCount <= MAX_FILE_COUNT

src/pages/RepoPage/CoverageTab/OverviewTab/hooks/useCoverageTabData.test.tsx renamed to src/pages/RepoPage/CoverageTab/OverviewTab/queries/CoverageTabDataQueryOpts.test.tsx

@@ -1,26 +1,14 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+  useQuery as useQueryV5,
+} from '@tanstack/react-queryV5'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { useCoverageTabData } from './useCoverageTabData'
-
-const mockOverview = {
-  owner: {
-    isCurrentUserActivated: true,
-    repository: {
-      __typename: 'Repository',
-      private: false,
-      defaultBranch: 'main',
-      oldestCommitAt: '2022-10-10T11:59:59',
-      coverageEnabled: true,
-      bundleAnalysisEnabled: true,
-      languages: ['JavaScript'],
-      testAnalyticsEnabled: true,
-    },
-  },
-}
+import { CoverageTabDataQueryOpts } from './CoverageTabDataQueryOpts'
 
 const mockCoverageTabData = {
   owner: {
@@ -66,7 +54,7 @@ const mockNullOwner = {
 const mockUnsuccessfulParseError = {}
 
 const server = setupServer()
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 
@@ -75,7 +63,7 @@ const wrapper =
     initialEntries = '/gh/codecov/cool-repo'
   ): React.FC<React.PropsWithChildren> =>
   ({ children }) => (
-    <QueryClientProvider client={queryClient}>
+    <QueryClientProviderV5 client={queryClientV5}>
       <MemoryRouter initialEntries={[initialEntries]}>
         <Route
           path={[
@@ -86,15 +74,15 @@ const wrapper =
           {children}
         </Route>
       </MemoryRouter>
-    </QueryClientProvider>
+    </QueryClientProviderV5>
   )
 
 beforeAll(() => {
   server.listen()
 })
 
 afterEach(() => {
-  queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
 
@@ -109,7 +97,7 @@ interface SetupArgs {
   isNullOwner?: boolean
 }
 
-describe('useCoverageTabData', () => {
+describe('CoverageTabDataQueryOpts', () => {
   function setup({
     isNotFoundError = false,
     isOwnerNotActivatedError = false,
@@ -129,73 +117,40 @@ describe('useCoverageTabData', () => {
         } else {
           return HttpResponse.json({ data: mockCoverageTabData })
         }
-      }),
-      graphql.query('GetRepoOverview', () => {
-        return HttpResponse.json({ data: mockOverview })
       })
     )
   }
 
   describe('valid data response', () => {
-    describe('branch is passed', () => {
-      it('returns the data for the passed branch', async () => {
-        setup({})
-        const { result } = renderHook(
-          () =>
-            useCoverageTabData({
+    it('returns the data for the passed branch', async () => {
+      setup({})
+      const { result } = renderHook(
+        () =>
+          useQueryV5(
+            CoverageTabDataQueryOpts({
               provider: 'gh',
               owner: 'codecov',
               repo: 'cool-repo',
               branch: 'main',
-            }),
-          { wrapper: wrapper() }
-        )
-
-        await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
-        await waitFor(() =>
-          expect(result.current.data).toEqual({
-            branch: {
-              head: {
-                coverageAnalytics: {
-                  totals: {
-                    fileCount: 10,
-                  },
-                },
-              },
-            },
-          })
-        )
-      })
-    })
-
-    describe('branch is not passed', () => {
-      it('returns the data for the default branch', async () => {
-        setup({})
-        const { result } = renderHook(
-          () =>
-            useCoverageTabData({
-              provider: 'gh',
-              owner: 'codecov',
-              repo: 'cool-repo',
-            }),
-          { wrapper: wrapper() }
-        )
+            })
+          ),
+        { wrapper: wrapper() }
+      )
 
-        await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
-        await waitFor(() =>
-          expect(result.current.data).toEqual({
-            branch: {
-              head: {
-                coverageAnalytics: {
-                  totals: {
-                    fileCount: 10,
-                  },
+      await waitFor(() => expect(result.current.isSuccess).toBeTruthy())
+      await waitFor(() =>
+        expect(result.current.data).toEqual({
+          branch: {
+            head: {
+              coverageAnalytics: {
+                totals: {
+                  fileCount: 10,
                 },
               },
             },
-          })
-        )
-      })
+          },
+        })
+      )
     })
   })
 
@@ -214,12 +169,14 @@ describe('useCoverageTabData', () => {
       setup({ isNotFoundError: true })
       const { result } = renderHook(
         () =>
-          useCoverageTabData({
-            provider: 'gh',
-            owner: 'codecov',
-            repo: 'cool-repo',
-            branch: 'main',
-          }),
+          useQueryV5(
+            CoverageTabDataQueryOpts({
+              provider: 'gh',
+              owner: 'codecov',
+              repo: 'cool-repo',
+              branch: 'main',
+            })
+          ),
         { wrapper: wrapper() }
       )
 
@@ -250,12 +207,14 @@ describe('useCoverageTabData', () => {
       setup({ isOwnerNotActivatedError: true })
       const { result } = renderHook(
         () =>
-          useCoverageTabData({
-            provider: 'gh',
-            owner: 'codecov',
-            repo: 'cool-repo',
-            branch: 'main',
-          }),
+          useQueryV5(
+            CoverageTabDataQueryOpts({
+              provider: 'gh',
+              owner: 'codecov',
+              repo: 'cool-repo',
+              branch: 'main',
+            })
+          ),
         { wrapper: wrapper() }
       )
 
@@ -286,12 +245,14 @@ describe('useCoverageTabData', () => {
       setup({ isUnsuccessfulParseError: true })
       const { result } = renderHook(
         () =>
-          useCoverageTabData({
-            provider: 'gh',
-            owner: 'codecov',
-            repo: 'cool-repo',
-            branch: 'main',
-          }),
+          useQueryV5(
+            CoverageTabDataQueryOpts({
+              provider: 'gh',
+              owner: 'codecov',
+              repo: 'cool-repo',
+              branch: 'main',
+            })
+          ),
         { wrapper: wrapper() }
       )