update GeneralTab tests and use query options API and also refactor to TS

Author: nicholas-codecov

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

@@ -1,7 +1,12 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { render, screen } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
+import { Suspense } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
 import GeneralTab from './GeneralTab'
@@ -22,29 +27,51 @@ vi.mock('./DefaultBranch', () => ({
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
-const server = setupServer()
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
 
-const wrapper = ({ children }) => (
-  <QueryClientProvider client={queryClient}>
-    <MemoryRouter initialEntries={['/gh/codecov/codecov-client/config']}>
-      <Route path="/:provider/:owner/:repo/config">{children}</Route>
-    </MemoryRouter>
-  </QueryClientProvider>
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={['/gh/codecov/codecov-client/config']}>
+        <Route path="/:provider/:owner/:repo/config">
+          <Suspense fallback={<p>Loading</p>}>{children}</Suspense>
+        </Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  </QueryClientProviderV5>
 )
 
+const server = setupServer()
 beforeAll(() => {
   server.listen()
   console.error = () => {}
 })
+
 afterEach(() => {
   queryClient.clear()
+  queryClientV5.clear()
   server.resetHandlers()
 })
-afterAll(() => server.close())
+
+afterAll(() => {
+  server.close()
+})
+
+interface SetupArgs {
+  hasDefaultBranch?: boolean
+  isTeamPlan?: boolean
+  isPrivate?: boolean
+}
 
 describe('GeneralTab', () => {
   function setup(
-    { hasDefaultBranch = false, isTeamPlan = false, isPrivate = false } = {
+    {
+      hasDefaultBranch = false,
+      isTeamPlan = false,
+      isPrivate = false,
+    }: SetupArgs = {
       hasDefaultBranch: false,
       isTeamPlan: false,
       isPrivate: false,
@@ -112,19 +139,19 @@ describe('GeneralTab', () => {
       })
     })
 
-    it('render tokens component', () => {
+    it('render tokens component', async () => {
       setup({ isTeamPlan: true })
       render(<GeneralTab />, { wrapper })
 
-      const tokensComponent = screen.getByText(/Tokens Component/)
+      const tokensComponent = await screen.findByText(/Tokens Component/)
       expect(tokensComponent).toBeInTheDocument()
     })
 
-    it('render danger zone component', () => {
+    it('render danger zone component', async () => {
       setup({ isTeamPlan: true })
       render(<GeneralTab />, { wrapper })
 
-      const tokensComponent = screen.getByText(/DangerZone Component/)
+      const tokensComponent = await screen.findByText(/DangerZone Component/)
       expect(tokensComponent).toBeInTheDocument()
     })
   })
@@ -142,10 +169,10 @@ describe('GeneralTab', () => {
         expect(tokensComponent).toBeInTheDocument()
       })
 
-      it('render danger zone component', () => {
+      it('render danger zone component', async () => {
         render(<GeneralTab />, { wrapper })
 
-        const tokensComponent = screen.getByText(/DangerZone Component/)
+        const tokensComponent = await screen.findByText(/DangerZone Component/)
         expect(tokensComponent).toBeInTheDocument()
       })
     })
@@ -155,17 +182,17 @@ describe('GeneralTab', () => {
         setup({ isTeamPlan: true, isPrivate: false })
       })
 
-      it('render tokens component', () => {
+      it('render tokens component', async () => {
         render(<GeneralTab />, { wrapper })
 
-        const tokensComponent = screen.getByText(/Tokens Component/)
+        const tokensComponent = await screen.findByText(/Tokens Component/)
         expect(tokensComponent).toBeInTheDocument()
       })
 
-      it('render danger zone component', () => {
+      it('render danger zone component', async () => {
         render(<GeneralTab />, { wrapper })
 
-        const tokensComponent = screen.getByText(/DangerZone Component/)
+        const tokensComponent = await screen.findByText(/DangerZone Component/)
         expect(tokensComponent).toBeInTheDocument()
       })
     })

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

@@ -1,20 +1,30 @@
+import { useSuspenseQuery as useSuspenseQueryV5 } from '@tanstack/react-queryV5'
 import { useParams } from 'react-router-dom'
 
 import { useIsTeamPlan } from 'services/useIsTeamPlan'
 
 import DangerZone from './DangerZone'
 import DefaultBranch from './DefaultBranch'
-import { useRepoForTokensTeam } from './hooks'
+import { RepoForTokensTeamQueryOpts } from './queries/RepoForTokensTeamQueryOpts'
 import { Tokens, TokensTeam } from './Tokens'
 
+interface URLParams {
+  provider: string
+  owner: string
+  repo: string
+}
+
 function GeneralTab() {
-  const { provider, owner, repo } = useParams()
-  const { data: repoData } = useRepoForTokensTeam({
-    provider,
-    owner,
-    repo,
-  })
+  const { provider, owner, repo } = useParams<URLParams>()
   const { data: isTeamPlan } = useIsTeamPlan({ provider, owner })
+  const { data: repoData } = useSuspenseQueryV5(
+    RepoForTokensTeamQueryOpts({
+      provider,
+      owner,
+      repo,
+    })
+  )
+
   const defaultBranch = repoData?.defaultBranch
   const isPrivate = repoData?.private
   const showTokensTeam = isPrivate && isTeamPlan