Kanishk Dudeja
be3737d9d0
### Summary This PR refactors the billing address form to use Stripe AddressElement on both the org billing page and the missing-address modal, adding Google Maps autocomplete and country-aware state/province inputs. ### Testing - Address element renders on org billing page, autocomplete works, and state/province options update per country. - Existing billing address data loads correctly into the form. - Need to verify this with invalid country/state as well. - Save enables only when the form is dirty after editing address or tax ID fields. - Cancel restores both address and tax ID to the original values. - Submitting with missing required address fields shows a validation toast. - Tax ID options are filtered by the selected billing country. - Tax-ID-only edits submit successfully without interacting with the address form. - Without billing write permission, address fields are read-only. - Update billing address modal behaves the same as the org billing page. - Address element appearance looks correct in both light and dark mode. - Payment method form remains unchanged and still uses floating labels. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Billing form now uses Stripe Address Element via Stripe Elements with an embedded custom font and theme-aware appearance; tax-ID entry remains separate. * **Bug Fixes** * Stronger address validation and submit gating, improved dirty-state tracking, explicit save confirmation and reset behavior, and clearer error toasts on update failures. * **Tests** * Expanded tests covering hook behavior, address element validation, submit gating, payloads, reset, and permission scenarios. * **Style** * Adjusted billing email form spacing/layout. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
UI Testing Notes
Rules
-
All tests should be run consistently (avoid situations whereby tests fails "sometimes")
-
Group tests in folders based on the feature they are testing. Avoid file/folder based folder names since those can change and we will forget to update the tests.
Examples: /logs /reports /projects /database-settings /auth
Custom Render and Custom Render Hook
customRender and customRenderHook are wrappers around render and renderHook that add some necessary providers like QueryClientProvider, TooltipProvider and NuqsTestingAdapter.
Generally use those instead of the default render and renderHook functions.
import { customRender, customRenderHook } from 'tests/lib/custom-render'
customRender(<MyComponent />)
customRenderHook(() => useMyHook())
Mocking API Requests
To mock API requests, we use the msw library.
Global mocks can be found in tests/lib/msw-global-api-mocks.ts.
To mock an endpoint you can use the addAPIMock function. Make sure to add the mock in the beforeEach hook. It won't work with beforeAll if you have many tests.
beforeEach(() => {
addAPIMock({
method: 'get',
path: '/api/my-endpoint',
response: {
data: { foo: 'bar' },
},
})
})
API Mocking Tips:
- Keep mocks in the same folder as the tests that use them
- Add a test to verify the mock is working
This will make debugging and updating the mocks easier.
test('mock is working', async () => {
const response = await fetch('/api/my-endpoint')
expect(response.json()).resolves.toEqual({ data: { foo: 'bar' } })
})
Mocking Nuqs URL Parameters
To render a component that uses Nuqs with some predefined query parameters, you can use customRender with the nuqs prop.
customRender(<MyComponent />, {
nuqs: {
searchParams: {
search: 'hello world',
},
},
})
<Popover> vs <Dropdown>
When simulating clicks on these components, do the following:
// for Popovers
import userEvent from '@testing-library/user-event'
await userEvent.click('Hello world')
// for Dropdowns
import clickDropdown from 'tests/helpers'
clickDropdown('Hello world')