fix tests

src/pages/PlanPage/PlanPage.test.jsx

@@ -11,6 +11,8 @@ import { MemoryRouter, Route } from 'react-router-dom'
 
 import config from 'config'
 
+import { ThemeContextProvider } from 'shared/ThemeContext'
+
 import PlanPage from './PlanPage'
 
 vi.mock('config')
@@ -44,18 +46,20 @@ const wrapper =
   ({ children }) => (
     <QueryClientProviderV5 client={queryClientV5}>
       <QueryClientProvider client={queryClient}>
-        <Suspense fallback={null}>
-          <MemoryRouter initialEntries={[initialEntries]}>
-            <Route path="/plan/:provider/:owner">{children}</Route>
-            <Route
-              path="*"
-              render={({ location }) => {
-                testLocation = location
-                return null
-              }}
-            />
-          </MemoryRouter>
-        </Suspense>
+        <ThemeContextProvider>
+          <Suspense fallback={null}>
+            <MemoryRouter initialEntries={[initialEntries]}>
+              <Route path="/plan/:provider/:owner">{children}</Route>
+              <Route
+                path="*"
+                render={({ location }) => {
+                  testLocation = location
+                  return null
+                }}
+              />
+            </MemoryRouter>
+          </Suspense>
+        </ThemeContextProvider>
       </QueryClientProvider>
     </QueryClientProviderV5>
   )

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

@@ -8,11 +8,15 @@ import { Plans } from 'shared/utils/billing'
 
 import BillingDetails from './BillingDetails'
 
-vi.mock('./PaymentCard/PaymentCard', () => ({ default: () => 'Payment Card' }))
+vi.mock('./ViewPaymentMethod/PaymentMethod/PaymentMethod', () => ({
+  default: () => 'Payment Method',
+}))
 vi.mock('./EmailAddress/EmailAddress', () => ({
   default: () => 'Email Address',
 }))
-vi.mock('./Address/AddressCard', () => ({ default: () => 'Address Card' }))
+vi.mock('./ViewPaymentMethod/Address/AddressCard', () => ({
+  default: () => 'Address Card',
+}))
 
 const queryClient = new QueryClient({
   defaultOptions: { queries: { retry: false } },
@@ -84,12 +88,12 @@ describe('BillingDetails', () => {
   }
 
   describe('when there is a subscription', () => {
-    it('renders the payment card', async () => {
+    it('renders the payment method card', async () => {
       setup({ hasSubscription: true })
       render(<BillingDetails />, { wrapper })
 
-      const paymentCard = await screen.findByText(/Payment Card/)
-      expect(paymentCard).toBeInTheDocument()
+      const paymentCards = await screen.findAllByText(/Payment Method/)
+      expect(paymentCards.length).toBeGreaterThan(0)
     })
 
     it('renders the email address component', async () => {
@@ -132,7 +136,7 @@ describe('BillingDetails', () => {
     it('renders the payment card', async () => {
       render(<BillingDetails />, { wrapper })
 
-      const paymentCard = screen.queryByText(/Payment Card/)
+      const paymentCard = screen.queryByText(/Payment Method/)
       expect(paymentCard).not.toBeInTheDocument()
     })
   })

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

@@ -71,7 +71,7 @@ function BillingDetails() {
           setEditMode={setEditMode}
           provider={provider}
           owner={owner}
-          existingSubscriptionDetail={subscriptionDetail}
+          subscriptionDetail={subscriptionDetail}
         />
       ) : (
         <>

src/pages/PlanPage/subRoutes/CurrentOrgPlan/BillingDetails/EditPaymentMethods/Address/AddressForm.test.tsx

@@ -0,0 +1,240 @@
+import { Elements } from '@stripe/react-stripe-js'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter, Route } from 'react-router-dom'
+import { vi } from 'vitest'
+import { z } from 'zod'
+
+import { SubscriptionDetailSchema } from 'services/account/useAccountDetails'
+
+import AddressForm from './AddressForm'
+
+
+const queryClient = new QueryClient()
+
+const mockGetElement = vi.fn()
+const mockGetValue = vi.fn()
+
+vi.mock('@stripe/react-stripe-js', async () => {
+  const actual = await vi.importActual('@stripe/react-stripe-js')
+  return {
+    ...actual,
+    useElements: () => ({
+      getElement: mockGetElement.mockReturnValue({
+        getValue: mockGetValue.mockResolvedValue({
+          complete: true,
+          value: {
+            name: 'John Doe',
+            address: {
+              line1: '123 Main St',
+              line2: null,
+              city: 'San Francisco',
+              state: 'CA',
+              postal_code: '94105',
+              country: 'US',
+            },
+          },
+        }),
+      }),
+    }),
+  }
+})
+
+const wrapper: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <QueryClientProvider client={queryClient}>
+    <Elements stripe={null}>
+      <MemoryRouter initialEntries={['/plan/gh/codecov']}>
+        <Route path="/plan/:provider/:owner">{children}</Route>
+      </MemoryRouter>
+    </Elements>
+  </QueryClientProvider>
+)
+
+const mockSubscriptionDetail: z.infer<typeof SubscriptionDetailSchema> = {
+  defaultPaymentMethod: {
+    billingDetails: {
+      address: {
+        line1: '123 Main St',
+        city: 'San Francisco',
+        state: 'CA',
+        postalCode: '94105',
+        country: 'US',
+        line2: null,
+      },
+      phone: '1234567890',
+      name: 'John Doe',
+      email: '[email protected]',
+    },
+    card: {
+      brand: 'visa',
+      expMonth: 12,
+      expYear: 2025,
+      last4: '4242',
+    },
+  },
+  currentPeriodEnd: 1706851492,
+  cancelAtPeriodEnd: false,
+  customer: {
+    id: 'cust_123',
+    email: '[email protected]',
+  },
+  latestInvoice: null,
+  taxIds: [],
+  trialEnd: null,
+}
+
+const mocks = {
+  useUpdateBillingAddress: vi.fn(),
+}
+
+vi.mock('src/services/account/useUpdateBillingAddress', () => ({
+  useUpdateBillingAddress: () => mocks.useUpdateBillingAddress(),
+}))
+
+afterEach(() => {
+  vi.clearAllMocks()
+})
+
+describe('AddressForm', () => {
+  const setup = () => {
+    const mutation = vi.fn()
+    mocks.useUpdateBillingAddress.mockReturnValue({
+      mutate: mutation,
+      isLoading: false,
+    })
+    return { user: userEvent.setup() }
+  }
+
+  it('renders the form', () => {
+    render(
+      <AddressForm
+        address={
+          mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.address
+        }
+        name={mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.name}
+        provider="gh"
+        owner="codecov"
+        closeForm={() => {}}
+      />,
+      { wrapper }
+    )
+
+    expect(screen.getByRole('button', { name: /save/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument()
+  })
+
+  describe('when submitting', () => {
+    it.only('calls the service to update the address', async () => {
+      const { user } = setup()
+      const updateAddress = vi.fn()
+      mocks.useUpdateBillingAddress.mockReturnValue({
+        mutate: updateAddress,
+        isLoading: false,
+      })
+
+      render(
+        <AddressForm
+          address={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.address
+          }
+          name={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.name
+          }
+          provider="gh"
+          owner="codecov"
+          closeForm={() => {}}
+        />,
+        { wrapper }
+      )
+
+      await user.click(screen.getByRole('button', { name: /save/i }))
+
+      expect(updateAddress).toHaveBeenCalled()
+    })
+  })
+
+  describe('when the user clicks on cancel', () => {
+    it('calls the closeForm prop', async () => {
+      const { user } = setup()
+      const closeForm = vi.fn()
+      mocks.useUpdateBillingAddress.mockReturnValue({
+        mutate: vi.fn(),
+        isLoading: false,
+      })
+
+      render(
+        <AddressForm
+          address={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.address
+          }
+          name={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.name
+          }
+          provider="gh"
+          owner="codecov"
+          closeForm={closeForm}
+        />,
+        { wrapper }
+      )
+
+      await user.click(screen.getByRole('button', { name: /cancel/i }))
+
+      expect(closeForm).toHaveBeenCalled()
+    })
+  })
+
+  describe('when there is an error in the form', () => {
+    it('renders the error', async () => {
+      const randomError = 'not a valid address'
+      mocks.useUpdateBillingAddress.mockReturnValue({
+        mutate: vi.fn(),
+        error: randomError,
+      })
+
+      render(
+        <AddressForm
+          address={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.address
+          }
+          name={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.name
+          }
+          provider="gh"
+          owner="codecov"
+          closeForm={() => {}}
+        />,
+        { wrapper }
+      )
+
+      expect(screen.getByText(randomError)).toBeInTheDocument()
+    })
+  })
+
+  describe('when the form is loading', () => {
+    it('has the save and cancel buttons disabled', () => {
+      mocks.useUpdateBillingAddress.mockReturnValue({
+        mutate: vi.fn(),
+        isLoading: true,
+      })
+
+      render(
+        <AddressForm
+          address={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.address
+          }
+          name={
+            mockSubscriptionDetail.defaultPaymentMethod?.billingDetails?.name
+          }
+          provider="gh"
+          owner="codecov"
+          closeForm={() => {}}
+        />,
+        { wrapper }
+      )
+
+      expect(screen.getByRole('button', { name: /save/i })).toBeDisabled()
+      expect(screen.getByRole('button', { name: /cancel/i })).toBeDisabled()
+    })
+  })
+})