fix tests

Author: suejung-sentry

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentCard.test.jsx

@@ -35,6 +35,7 @@ vi.mock('services/account/useCreateStripeSetupIntent', async () => {
 })
 
 afterEach(() => {
+  queryClient.clear()
   vi.clearAllMocks()
 })
 
@@ -54,6 +55,20 @@ const subscriptionDetail = {
   cancelAtPeriodEnd: false,
 }
 
+const usBankSubscriptionDetail = {
+  defaultPaymentMethod: {
+    usBankAccount: {
+      bankName: 'STRIPE TEST BANK',
+      last4: '6789',
+    },
+  },
+  plan: {
+    value: Plans.USERS_PR_INAPPY,
+  },
+  currentPeriodEnd: 1606851492,
+  cancelAtPeriodEnd: false,
+}
+
 const wrapper = ({ children }) => (
   <QueryClientProvider client={queryClient}>
     <ThemeContextProvider>{children}</ThemeContextProvider>
@@ -200,6 +215,22 @@ describe('PaymentCard', () => {
     })
   })
 
+  describe('when the user has a US bank account', () => {
+    it('renders the bank account details', () => {
+      render(
+        <PaymentCard
+          subscriptionDetail={usBankSubscriptionDetail}
+          provider="gh"
+          owner="codecov"
+        />,
+        { wrapper }
+      )
+
+      expect(screen.getByText(/STRIPE TEST BANK/)).toBeInTheDocument()
+      expect(screen.getByText(/•••• 6789/)).toBeInTheDocument()
+    })
+  })
+
   describe('when the subscription is set to expire', () => {
     it(`doesn't render the next billing`, () => {
       render(

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.test.tsx

@@ -97,7 +97,7 @@ describe('PaymentMethodForm', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('update-payment-method'))
+      await user.click(screen.getByTestId('save-payment-method'))
 
       expect(screen.queryByText(/Visa/)).not.toBeInTheDocument()
     })
@@ -118,7 +118,7 @@ describe('PaymentMethodForm', () => {
         />,
         { wrapper }
       )
-      await user.click(screen.getByTestId('update-payment-method'))
+      await user.click(screen.getByTestId('save-payment-method'))
 
       expect(screen.getByRole('button', { name: /Save/i })).toBeInTheDocument()
     })
@@ -140,7 +140,7 @@ describe('PaymentMethodForm', () => {
           />,
           { wrapper }
         )
-        await user.click(screen.getByTestId('update-payment-method'))
+        await user.click(screen.getByTestId('save-payment-method'))
         expect(updatePaymentMethod).toHaveBeenCalled()
       })
     })
@@ -163,7 +163,7 @@ describe('PaymentMethodForm', () => {
           { wrapper }
         )
 
-        await user.click(screen.getByTestId('update-payment-method'))
+        await user.click(screen.getByTestId('save-payment-method'))
         await user.click(screen.getByRole('button', { name: /Cancel/ }))
 
         expect(closeForm).toHaveBeenCalled()
@@ -189,7 +189,7 @@ describe('PaymentMethodForm', () => {
         { wrapper }
       )
 
-      await user.click(screen.getByTestId('update-payment-method'))
+      await user.click(screen.getByTestId('save-payment-method'))
 
       expect(screen.getByText(randomError)).toBeInTheDocument()
     })

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/PaymentCard/PaymentMethodForm.tsx

@@ -1,7 +1,6 @@
 import { PaymentElement, useElements } from '@stripe/react-stripe-js'
 import { StripePaymentElement } from '@stripe/stripe-js'
 import cs from 'classnames'
-import { useState } from 'react'
 import { z } from 'zod'
 
 import { stripeAddress, SubscriptionDetailSchema } from 'services/account'
@@ -22,7 +21,6 @@ const PaymentMethodForm = ({
   owner,
   subscriptionDetail,
 }: PaymentMethodFormProps) => {
-  const [errorState, setErrorState] = useState('')
   const elements = useElements()
 
   const {
@@ -64,14 +62,13 @@ const PaymentMethodForm = ({
     })
   }
 
-  const showError = (error && !reset) || errorState
+  const showError = error && !reset
 
   return (
     <form onSubmit={submit} aria-label="form">
       <div className={cs('flex flex-col gap-3')}>
         <div className="mt-2 flex flex-col gap-2">
           <PaymentElement
-            onChange={(e) => setErrorState(e?.value?.type || '')}
             options={{
               layout: 'tabs',
               fields: {
@@ -83,7 +80,7 @@ const PaymentMethodForm = ({
             }}
           />
           <p className="mt-1 text-ds-primary-red">
-            {showError && (error?.message || errorState)}
+            {showError && error?.message}
           </p>
           <div className="mb-8 mt-4 flex gap-1">
             <Button