Jordi Enric
881c124301
## Problem The API Gateway report initializes its request range with the Logs Explorer helper, which leaves `iso_timestamp_end` empty. When an OTEL chart returns sparse microsecond timestamps, the time series filler can interpret them as milliseconds while deriving the end of the range and attempt an unbounded fill, freezing or crashing the browser tab. ## Fix Initialize the report with its date range helper so both request bounds are present. Normalize microsecond timestamps before deriving fill bounds, including the single point case. Add regression tests for sparse OTEL data with both empty and explicit end dates. ## How to test - Open Observability → API Gateway on a project with requests spanning two hourly buckets. The page should render without a tab crash, and the analytics requests should include a nonempty `iso_timestamp_end`. - Run `pnpm --filter studio exec vitest run tests/features/logs/Logs.utils.test.ts` and confirm the microsecond timestamp cases pass. - Run the Studio typecheck and lint checks. The Vitest, typecheck, and lint commands could not run in this worktree because Studio dependencies are not installed. The source diff passed `git diff --check` and received a focused code review.
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')