abb7f3ede2
## Problem The Workers view can remain stale after a worker is deployed through the CLI, because the dashboard has no deployment mutation to invalidate its list query. ## Fix Add a manual Refresh action to the Workers header and force the Workers list query to refetch whenever the browser regains focus. ## How to test - Open a project’s Workers view and select Refresh. - Expected result: the list requests current worker data and renders it. - Deploy a worker through the CLI, then return focus to the Workers view. - Expected result: the Workers list refreshes even when its cached data is fresh. Closes FE-4323. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **New Features** - Added Refresh buttons to the Workers page and worker list. - Refreshing displays the latest worker information and shows a loading state while data is retrieved. - Worker data now automatically refreshes when the browser window regains focus. - Added a Refresh action to unexpected-error messages, allowing failed requests to be retried without leaving the page. - **Bug Fixes** - Improved recovery from failed worker data requests through in-page retry support. <!-- 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')