fix tests

src/pages/PlanPage/PlanPage.jsx

@@ -50,7 +50,14 @@ function PlanPage() {
   return (
     <div className="flex flex-col gap-4">
       <Tabs />
-      <Elements stripe={stripePromise} options={StripeAppearance(isDarkMode)}>
+      <Elements
+        stripe={stripePromise}
+        options={{
+          ...StripeAppearance(isDarkMode),
+          mode: 'setup',
+          currency: 'usd',
+        }}
+      >
         <PlanProvider>
           <PlanBreadcrumb />
           <Suspense fallback={<Loader />}>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethods/PaymentMethod/PaymentMethodForm.tsx

@@ -4,7 +4,6 @@
 import { z } from 'zod'
 
 import { SubscriptionDetailSchema } from 'services/account'
-import { useCreateStripeSetupIntent } from 'services/account/useCreateStripeSetupIntent'
 import { useUpdatePaymentMethod } from 'services/account/useUpdatePaymentMethod'
 import Button from 'ui/Button'
 
@@ -22,14 +21,8 @@
   existingSubscriptionDetail,
 }: PaymentMethodFormProps) => {
   const [errorState, _] = useState('')
-  const { data: setupIntent } = useCreateStripeSetupIntent({ owner, provider })
   const elements = useElements()
 
-  elements?.update({
-    // @ts-expect-error clientSecret works actually
-    clientSecret: setupIntent?.clientSecret,
-  })
-
   const {
     mutate: updatePaymentMethod,
     isLoading,
@@ -38,7 +31,7 @@
   } = useUpdatePaymentMethod({
     provider,
     owner,
     email:
       existingSubscriptionDetail?.defaultPaymentMethod?.billingDetails?.email,
   })
 
@@ -49,6 +42,8 @@
       return null
     }
 
+    elements.submit()
+
     const paymentElement = elements.getElement(PaymentElement)
 
     updatePaymentMethod(paymentElement, {

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/ViewPaymentMethod/ViewPaymentMethod.test.tsx

@@ -0,0 +1,79 @@
+import { render, screen } from '@testing-library/react'
+import { z } from 'zod'
+
+import { SubscriptionDetailSchema } from 'services/account'
+import { accountDetailsParsedObj } from 'services/account/mocks'
+
+import ViewPaymentMethod from './ViewPaymentMethod'
+
+describe('ViewPaymentMethod', () => {
+  const mockSetEditMode = vi.fn()
+  const defaultProps = {
+    heading: 'Payment Method',
+    setEditMode: mockSetEditMode,
+    subscriptionDetail: accountDetailsParsedObj.subscriptionDetail as z.infer<
+      typeof SubscriptionDetailSchema
+    >,
+    provider: 'gh',
+    owner: 'codecov',
+  }
+
+  beforeEach(() => {
+    mockSetEditMode.mockClear()
+  })
+
+  describe('when rendered as primary payment method', () => {
+    it('renders heading', () => {
+      render(<ViewPaymentMethod {...defaultProps} isPrimaryPaymentMethod />)
+
+      expect(screen.getByText('Payment Method')).toBeInTheDocument()
+    })
+
+    it('does not show secondary payment method message', () => {
+      render(<ViewPaymentMethod {...defaultProps} isPrimaryPaymentMethod />)
+
+      expect(
+        screen.queryByText(
+          'By default, if the primary payment fails, the secondary will be charged automatically.'
+        )
+      ).not.toBeInTheDocument()
+    })
+
+    it('does not show set as primary button', () => {
+      render(<ViewPaymentMethod {...defaultProps} isPrimaryPaymentMethod />)
+
+      expect(screen.queryByText('Set as primary')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('when payment method is credit card', () => {
+    it('shows Cardholder name label', () => {
+      render(<ViewPaymentMethod {...defaultProps} isPrimaryPaymentMethod />)
+
+      expect(screen.getByText('Cardholder name')).toBeInTheDocument()
+    })
+  })
+
+  describe('when payment method is bank account', () => {
+    beforeEach(() => {
+      defaultProps.subscriptionDetail = {
+        ...accountDetailsParsedObj.subscriptionDetail,
+        defaultPaymentMethod: {
+          billingDetails:
+            accountDetailsParsedObj.subscriptionDetail?.defaultPaymentMethod
+              ?.billingDetails,
+          usBankAccount: {
+            bankName: 'Test Bank',
+            last4: '1234',
+          },
+        },
+      }
+    })
+
+    it('shows Full name label', () => {
+      render(<ViewPaymentMethod {...defaultProps} isPrimaryPaymentMethod />)
+
+      expect(screen.getByText('Full name')).toBeInTheDocument()
+    })
+  })
+})

src/services/account/useAccountDetails.test.tsx

@@ -4,9 +4,10 @@ import { http, HttpResponse } from 'msw'
 import { setupServer } from 'msw/node'
 import React from 'react'
 import { MemoryRouter, Route } from 'react-router-dom'
+import { z } from 'zod'
 
-import { accountDetailsObject, accountDetailsParsedObj } from './mocks'
-import { useAccountDetails } from './useAccountDetails'
+import { accountDetailsParsedObj } from './mocks'
+import { AccountDetailsSchema, useAccountDetails } from './useAccountDetails'
 
 vi.mock('js-cookie')
 
@@ -45,17 +46,17 @@ afterAll(() => {
 })
 
 describe('useAccountDetails', () => {
-  function setup() {
+  function setup(accountDetails: z.infer<typeof AccountDetailsSchema>) {
     server.use(
       http.get(`/internal/${provider}/${owner}/account-details/`, () => {
-        return HttpResponse.json(accountDetailsObject)
+        return HttpResponse.json(accountDetails)
       })
     )
   }
 
   describe('when called', () => {
     it('returns the data', async () => {
-      setup()
+      setup(accountDetailsParsedObj)
       const { result } = renderHook(
         () => useAccountDetails({ provider, owner }),
         { wrapper: wrapper() }
@@ -65,5 +66,43 @@ describe('useAccountDetails', () => {
         expect(result.current.data).toEqual(accountDetailsParsedObj)
       )
     })
+
+    it('returns data with usBankAccount when enabled', async () => {
+      const withUSBankAccount = {
+        ...accountDetailsParsedObj,
+        subscriptionDetail: {
+          ...accountDetailsParsedObj.subscriptionDetail,
+          defaultPaymentMethod: {
+            billingDetails: null,
+            usBankAccount: {
+              bankName: 'Bank of America',
+              last4: '1234',
+            },
+          },
+        },
+      }
+      setup(withUSBankAccount)
+
+      const { result } = renderHook(
+        () => useAccountDetails({ provider, owner }),
+        { wrapper: wrapper() }
+      )
+
+      await waitFor(() =>
+        expect(result.current.data).toEqual({
+          ...accountDetailsParsedObj,
+          subscriptionDetail: {
+            ...accountDetailsParsedObj.subscriptionDetail,
+            defaultPaymentMethod: {
+              billingDetails: null,
+              usBankAccount: {
+                bankName: 'Bank of America',
+                last4: '1234',
+              },
+            },
+          },
+        })
+      )
+    })
   })
 })

src/services/account/useCreateStripeSetupIntent.test.tsx

@@ -0,0 +1,90 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react'
+import { graphql, HttpResponse } from 'msw'
+import { setupServer } from 'msw/node'
+import React from 'react'
+import { MemoryRouter, Route } from 'react-router-dom'
+
+import { useCreateStripeSetupIntent } from './useCreateStripeSetupIntent'
+
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false } },
+})
+const wrapper =
+  (initialEntries = '/gh'): React.FC<React.PropsWithChildren> =>
+  ({ children }) => (
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter initialEntries={[initialEntries]}>
+        <Route path="/:provider">{children}</Route>
+      </MemoryRouter>
+    </QueryClientProvider>
+  )
+
+const provider = 'gh'
+const owner = 'codecov'
+
+const server = setupServer()
+beforeAll(() => {
+  server.listen()
+})
+
+afterEach(() => {
+  queryClient.clear()
+  server.resetHandlers()
+})
+
+afterAll(() => {
+  server.close()
+})
+
+describe('useCreateStripeSetupIntent', () => {
+  function setup(hasError = false) {
+    server.use(
+      graphql.mutation('CreateStripeSetupIntent', () => {
+        if (hasError) {
+          return HttpResponse.json({ data: {} })
+        }
+
+        return HttpResponse.json({
+          data: { createStripeSetupIntent: { clientSecret: 'test_secret' } },
+        })
+      })
+    )
+  }
+
+  describe('when called', () => {
+    describe('on success', () => {
+      it('returns the data', async () => {
+        setup()
+        const { result } = renderHook(
+          () => useCreateStripeSetupIntent({ provider, owner }),
+          { wrapper: wrapper() }
+        )
+
+        await waitFor(() =>
+          expect(result.current.data).toEqual({ clientSecret: 'test_secret' })
+        )
+      })
+    })
+
+    describe('on fail', () => {
+      beforeAll(() => {
+        vi.spyOn(console, 'error').mockImplementation(() => {})
+      })
+
+      afterAll(() => {
+        vi.restoreAllMocks()
+      })
+
+      it('fails to parse if bad data', async () => {
+        setup(true)
+        const { result } = renderHook(
+          () => useCreateStripeSetupIntent({ provider, owner }),
+          { wrapper: wrapper() }
+        )
+
+        await waitFor(() => expect(result.current.error).toBeTruthy())
+      })
+    })
+  })
+})

src/services/account/useUpdatePaymentMethod.test.tsx

@@ -1,3 +1,5 @@
+import { Elements } from '@stripe/react-stripe-js'
+import { loadStripe } from '@stripe/stripe-js'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { renderHook, waitFor } from '@testing-library/react'
 import { http, HttpResponse } from 'msw'
@@ -12,6 +14,7 @@ import { useUpdatePaymentMethod } from './useUpdatePaymentMethod'
 
 const mocks = vi.hoisted(() => ({
   useStripe: vi.fn(),
+  useCreateStripeSetupIntent: vi.fn(),
 }))
 
 vi.mock('@stripe/react-stripe-js', async () => {
@@ -22,6 +25,12 @@ vi.mock('@stripe/react-stripe-js', async () => {
   }
 })
 
+vi.mock('./useCreateStripeSetupIntent', () => ({
+  useCreateStripeSetupIntent: mocks.useCreateStripeSetupIntent,
+}))
+
+const stripePromise = loadStripe('fake-publishable-key')
+
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
 })
@@ -30,7 +39,9 @@ const wrapper =
   ({ children }) => (
     <QueryClientProvider client={queryClient}>
       <MemoryRouter initialEntries={[initialEntries]}>
-        <Route path="/:provider">{children}</Route>
+        <Route path="/:provider">
+          <Elements stripe={stripePromise}>{children}</Elements>
+        </Route>
       </MemoryRouter>
     </QueryClientProvider>
   )
@@ -74,6 +85,9 @@ describe('useUpdatePaymentMethod', () => {
     mocks.useStripe.mockReturnValue({
       confirmSetup,
     })
+    mocks.useCreateStripeSetupIntent.mockReturnValue({
+      data: { clientSecret: 'test_secret' },
+    })
   }
 
   describe('when called', () => {
@@ -83,7 +97,9 @@ describe('useUpdatePaymentMethod', () => {
           confirmSetup: vi.fn(
             () =>
               new Promise((resolve) => {
-                resolve({ paymentMethod: { id: 1 } })
+                resolve({
+                  setupIntent: { payment_method: 'test_payment_method' },
+                })
               })
           ),
         })
@@ -100,7 +116,8 @@ describe('useUpdatePaymentMethod', () => {
 
       it('returns the data from the server', async () => {
         const { result } = renderHook(
-          () => useUpdatePaymentMethod({ provider, owner }),
+          () =>
+            useUpdatePaymentMethod({ provider, owner, email: 'test@test.com' }),
           { wrapper: wrapper() }
         )
 
@@ -140,7 +157,8 @@ describe('useUpdatePaymentMethod', () => {
 
       it('does something', async () => {
         const { result } = renderHook(
-          () => useUpdatePaymentMethod({ provider, owner }),
+          () =>
+            useUpdatePaymentMethod({ provider, owner, email: 'test@test.com' }),
           { wrapper: wrapper() }
         )