Merge branch 'main' into gh-eng-3351-remove-usage-of-lazy

package.json

@@ -31,6 +31,7 @@
   },
   "dependencies": {
     "@amplitude/analytics-browser": "^2.11.9",
+    "@amplitude/analytics-types": "^2.8.4",
     "@hookform/resolvers": "^2.8.5",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.1",

src/pages/AccountSettings/tabs/Access/CreateTokenModal.jsx

@@ -2,29 +2,25 @@ import PropTypes from 'prop-types'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
 
-import { useGenerateUserToken } from 'services/access'
+import { useGenerateUserToken } from 'services/access/useGenerateUserToken'
 import Button from 'ui/Button'
 import { CopyClipboard } from 'ui/CopyClipboard'
 import Modal from 'ui/Modal'
 import TextInput from 'ui/TextInput/TextInput'
 
 function CreateTokenModal({ closeModal, provider }) {
+  const [token, setToken] = useState(null)
   const { register, handleSubmit, watch } = useForm({
-    defaultValues: {
-      name: '',
-    },
+    defaultValues: { name: '' },
   })
   const nameValue = watch('name', '')
-
-  const [token, setToken] = useState(null)
-
   const { mutate, isLoading } = useGenerateUserToken({ provider })
 
   const submit = ({ name }) => {
     mutate(
       { name },
       {
-        onSuccess: ({ data }) => {
+        onSuccess: (data) => {
           setToken(data?.createUserToken?.fullToken)
         },
       }

src/pages/AccountSettings/tabs/Access/CreateTokenModal.test.jsx

@@ -1,32 +1,55 @@
-import { render, screen, waitFor } from 'custom-testing-library'
-
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-
-import { useGenerateUserToken } from 'services/access'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
 
 import CreateTokenModal from './CreateTokenModal'
 
-vi.mock('services/access')
+const queryClientV5 = new QueryClientV5({
+  defaultOptions: { queries: { retry: false } },
+})
+
+const wrapper = ({ children }) => (
+  <QueryClientProviderV5 client={queryClientV5}>
+    {children}
+  </QueryClientProviderV5>
+)
+
+const server = setupServer()
+
+beforeAll(() => {
+  server.listen()
+})
+
+beforeEach(() => {
+  queryClientV5.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
 
 describe('CreateTokenModal', () => {
   function setup() {
     const user = userEvent.setup()
     const closeModal = vi.fn()
-    const success = {
-      data: {
-        createUserToken: {
-          fullToken: '111-222-333',
-        },
-      },
-    }
-    const mutate = vi.fn((_, { onSuccess }) => {
-      return onSuccess(success)
-    })
-    useGenerateUserToken.mockReturnValue({
-      mutate,
-    })
+    const mutateMock = vi.fn()
+
+    server.use(
+      graphql.mutation('CreateUserToken', (info) => {
+        mutateMock(info.variables)
+        return HttpResponse.json({
+          data: { createUserToken: { fullToken: '111-222-333', error: null } },
+        })
+      })
+    )
 
-    return { mutate, closeModal, user }
+    return { mutateMock, closeModal, user }
   }
 
   describe('renders initial CreateTokenModal', () => {
@@ -38,7 +61,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const title = screen.getByText(/Generate new API access token/)
@@ -52,7 +76,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const label = screen.getByText(/Token Name/)
@@ -68,7 +93,8 @@ describe('CreateTokenModal', () => {
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const buttons = screen.getAllByRole('button')
@@ -78,21 +104,25 @@ describe('CreateTokenModal', () => {
 
   describe('when the user types a token name and submits', () => {
     it('calls the mutation', async () => {
-      const { mutate, closeModal, user } = setup()
+      const { mutateMock, closeModal, user } = setup()
       render(
         <CreateTokenModal
           provider="gh"
           showModal={true}
           closeModal={closeModal}
-        />
+        />,
+        { wrapper }
       )
 
       const input = screen.getByRole('textbox')
       await user.type(input, '2333')
       const generateToken = screen.getByText('Generate Token')
       await user.click(generateToken)
 
-      expect(mutate).toHaveBeenCalled()
+      await waitFor(() => expect(mutateMock).toHaveBeenCalled())
+      expect(mutateMock).toHaveBeenCalledWith({
+        input: { name: '2333', tokenType: 'api' },
+      })
     })
 
     describe('when mutation is successful', () => {
@@ -103,7 +133,8 @@ describe('CreateTokenModal', () => {
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const title = await screen.findByText(/API access token/)
@@ -117,7 +148,8 @@ describe('CreateTokenModal', () => {
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
@@ -136,41 +168,48 @@ describe('CreateTokenModal', () => {
         const warning = screen.getByText(/Make sure to copy your token now/)
         expect(warning).toBeInTheDocument()
       })
+
       it('renders footer', async () => {
         const { closeModal, user } = setup()
         render(
           <CreateTokenModal
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
         await user.type(input, '2333')
+
         const generateToken = screen.getByText('Generate Token')
         await user.click(generateToken)
 
-        const button = screen.getByRole('button', {
+        const button = await screen.findByRole('button', {
           name: /done/i,
         })
         expect(button).toBeInTheDocument()
       })
+
       it('close modals', async () => {
         const { closeModal, user } = setup()
         render(
           <CreateTokenModal
             provider="gh"
             showModal={true}
             closeModal={closeModal}
-          />
+          />,
+          { wrapper }
         )
 
         const input = screen.getByRole('textbox')
         await user.type(input, '2333')
+
         const generateToken = screen.getByText('Generate Token')
         await user.click(generateToken)
-        const done = screen.getByText('Done')
+
+        const done = await screen.findByText('Done')
         await user.click(done)
 
         await waitFor(() => {

src/pages/PlanPage/subRoutes/InvoiceDetailsPage/InvoiceDetail.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import { MemoryRouter } from 'react-router-dom'
 
+import { ThemeContextProvider } from 'shared/ThemeContext/ThemeContext'
 import { Plans } from 'shared/utils/billing'
 
 import InvoiceDetail from './InvoiceDetail'
@@ -117,7 +118,9 @@ describe('InvoiceDetail', () => {
     })
     render(
       <MemoryRouter initialEntries={[url]}>
-        <InvoiceDetail />
+        <ThemeContextProvider>
+          <InvoiceDetail />
+        </ThemeContextProvider>
       </MemoryRouter>
     )
   }

src/pages/PlanPage/subRoutes/InvoiceDetailsPage/sections/InvoiceHeader.test.tsx

@@ -3,6 +3,7 @@ import { MemoryRouter, Route, Switch } from 'react-router-dom'
 import { z } from 'zod'
 
 import { InvoiceSchema } from 'services/account'
+import { ThemeContextProvider } from 'shared/ThemeContext/ThemeContext'
 import { Plans } from 'shared/utils/billing'
 
 import InvoiceHeader from './InvoiceHeader'
@@ -114,9 +115,11 @@ const accountDetails = ({ collectionMethod = '' } = {}) => {
 const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
   <MemoryRouter initialEntries={['/plan/gh/invoices/9']}>
     <Switch>
-      <Route path="/plan/:provider/invoices/:id" exact>
-        {children}
-      </Route>
+      <ThemeContextProvider>
+        <Route path="/plan/:provider/invoices/:id" exact>
+          {children}
+        </Route>
+      </ThemeContextProvider>
     </Switch>
   </MemoryRouter>
 )

src/pages/PlanPage/subRoutes/InvoiceDetailsPage/sections/InvoiceHeader.tsx

@@ -4,6 +4,7 @@ import { z } from 'zod'
 
 import { AccountDetailsSchema, InvoiceSchema } from 'services/account'
 import { CollectionMethods } from 'shared/utils/billing'
+import LightDarkImg from 'ui/LightDarkImg'
 
 import { generateAddressInfo } from './generateAddressInfo'
 import InvoiceOverview from './InvoiceOverview'
@@ -27,9 +28,10 @@ function InvoiceHeader({ invoice, accountDetails }: InvoiceHeaderProps) {
       <div className="flex justify-between">
         <InvoiceOverview isPaid={isPaid} invoice={invoice} dueDate={dueDate} />
         <div>
-          <img
+          <LightDarkImg
             alt="Codecov Logo"
-            src={`${process.env.PUBLIC_URL}/logo.svg`}
+            src="/logo.svg"
+            darkSrc="/logo_dark.svg"
             width={200}
           />
         </div>

src/services/access/useGenerateUserToken.test.tsx

@@ -1,21 +1,24 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import {
+  QueryClientProvider as QueryClientProviderV5,
+  QueryClient as QueryClientV5,
+} from '@tanstack/react-queryV5'
 import { renderHook, waitFor } from '@testing-library/react'
 import { graphql, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import { PropsWithChildren } from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
 
-import { useGenerateUserToken } from './index'
+import { useGenerateUserToken } from './useGenerateUserToken'
 
-const queryClient = new QueryClient({
+const queryClientV5 = new QueryClientV5({
   defaultOptions: { queries: { retry: false } },
 })
 const wrapper: React.FC<PropsWithChildren> = ({ children }) => (
-  <MemoryRouter initialEntries={['/gh']}>
-    <Route path="/:provider">
-      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
-    </Route>
-  </MemoryRouter>
+  <QueryClientProviderV5 client={queryClientV5}>
+    <MemoryRouter initialEntries={['/gh']}>
+      <Route path="/:provider">{children}</Route>
+    </MemoryRouter>
+  </QueryClientProviderV5>
 )
 
 const provider = 'gh'
@@ -27,7 +30,7 @@ beforeAll(() => {
 
 beforeEach(() => {
   server.resetHandlers()
-  queryClient.clear()
+  queryClientV5.clear()
 })
 
 afterAll(() => {