Kanishk DudejaandJoshen Lim
c55908bbf0
### Summary This PR removes the visible close button from the billing address required modal to make it non dismissable, since the majority of users on paid orgs are still not filling their billing address. The modal already prevents dismissal via Esc and outside/backdrop interaction, and this change preserves that behavior. The existing submit flow is unchanged, so the modal still closes after a successful billing address update. ### Manual testing: 1. Open Studio in a state where the billing address required modal appears. 2. Confirm the top-right close button is no longer shown. 3. Press Esc and verify the modal remains open. 4. Click outside the modal / on the backdrop and verify the modal remains open. 5. Submit a valid billing address and verify the modal closes after a successful save. For testing whether an update successfully closes the modal, you can: - You can create a free org without a billing address - You will need to tweak this logic (on the frontend) ``` const shouldShow = Boolean( IS_PLATFORM && // showMissingAddressModal && org && // org.plan.id !== 'free' && org.organization_missing_address && !org.billing_partner && permissionsLoaded && canBillingWrite ) ``` - Tweak the backend logic which computes `organization_missing_address` to exclude free orgs --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
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')