From 5b61b48acb66e0f170922d466fbc406b446df8f7 Mon Sep 17 00:00:00 2001 From: benjaminleonard Date: Thu, 23 Apr 2026 16:42:14 +0100 Subject: [PATCH 1/3] Upgrade design system to `6.2.1` --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e9d088bc..4dae24037 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@base-ui/react": "^1.1.0", "@floating-ui/react": "^0.26.23", "@headlessui/react": "^2.2.9", - "@oxide/design-system": "^6.0.4", + "@oxide/design-system": "^6.2.1", "@react-aria/live-announcer": "^3.3.4", "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/vite": "^4.1.17", @@ -1699,9 +1699,9 @@ } }, "node_modules/@oxide/design-system": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-6.0.4.tgz", - "integrity": "sha512-lZA1Biuoq81vICrMH0PzvZ68F55HRj+XldUIowXiBzBs8Bm3aCNMI4zZcmPAvJ4hqoITow/zrHtyibwrqYjWXg==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/@oxide/design-system/-/design-system-6.2.1.tgz", + "integrity": "sha512-1QBu1CVLx20AI9QHOo/m7yFslghpYfHhHxa7r/74NV6Ff/RawkUQjl7X+NgFxLyf3jJehWgWBhcycxM+Bw1q3A==", "license": "MPL 2.0", "dependencies": { "@floating-ui/react": "^0.27.16", diff --git a/package.json b/package.json index 6f138d505..b8530a92a 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "@base-ui/react": "^1.1.0", "@floating-ui/react": "^0.26.23", "@headlessui/react": "^2.2.9", - "@oxide/design-system": "^6.0.4", + "@oxide/design-system": "^6.2.1", "@react-aria/live-announcer": "^3.3.4", "@tailwindcss/container-queries": "^0.1.1", "@tailwindcss/vite": "^4.1.17", From b475c831c353f547d5fd333b3bbadb80703c6e95 Mon Sep 17 00:00:00 2001 From: benjaminleonard Date: Thu, 23 Apr 2026 16:42:31 +0100 Subject: [PATCH 2/3] Wait for chart and override random to make them deterministic --- test/visual/regression.e2e.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/test/visual/regression.e2e.ts b/test/visual/regression.e2e.ts index d8a84fe2e..ca680856a 100644 --- a/test/visual/regression.e2e.ts +++ b/test/visual/regression.e2e.ts @@ -19,6 +19,17 @@ import { expect, test } from '../e2e/utils' // set a fixed time to avoid diffs due to irrelevant time differences test.beforeEach(async ({ page }) => { await page.clock.setFixedTime(new Date('2025-10-23T12:34:56.000Z')) + // seed Math.random so mock data (e.g. metrics charts) is deterministic + await page.addInitScript(() => { + let seed = 0x12345678 + Math.random = () => { + seed |= 0 + seed = (seed + 0x6d2b79f5) | 0 + let t = Math.imul(seed ^ (seed >>> 15), 1 | seed) + t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t + return ((t ^ (t >>> 14)) >>> 0) / 4294967296 + } + }) }) test.describe('Visual Regression', { tag: '@visual' }, () => { @@ -89,6 +100,7 @@ test.describe('Visual Regression', { tag: '@visual' }, () => { test('system utilization', async ({ page }) => { await page.goto('/utilization') await expect(page.getByRole('heading', { name: 'Utilization' })).toBeVisible() + await expect(page.locator('.recharts-curve').first()).toBeVisible() await expect(page).toHaveScreenshot('system-utilization.png', { fullPage: true }) }) From d9d3f8cd27c7b3c22123896259b61cd7f67f0eef Mon Sep 17 00:00:00 2001 From: benjaminleonard Date: Thu, 23 Apr 2026 17:45:21 +0100 Subject: [PATCH 3/3] More consistent tests --- app/components/RefetchIntervalPicker.tsx | 4 +++ app/pages/SiloUtilizationPage.tsx | 3 ++- app/pages/system/UtilizationPage.tsx | 3 ++- test/visual/regression.e2e.ts | 31 +++++++++++++++++++----- 4 files changed, 33 insertions(+), 8 deletions(-) diff --git a/app/components/RefetchIntervalPicker.tsx b/app/components/RefetchIntervalPicker.tsx index 451901c98..ba4512b7e 100644 --- a/app/components/RefetchIntervalPicker.tsx +++ b/app/components/RefetchIntervalPicker.tsx @@ -51,6 +51,8 @@ export function useIntervalPicker({ enabled, isLoading, fn, className }: Props)
diff --git a/app/pages/SiloUtilizationPage.tsx b/app/pages/SiloUtilizationPage.tsx index 0dc7e8ca1..a2a78b957 100644 --- a/app/pages/SiloUtilizationPage.tsx +++ b/app/pages/SiloUtilizationPage.tsx @@ -102,7 +102,8 @@ export default function SiloUtilizationPage() { { { await page.waitForLoadState('networkidle') await expect(page).toHaveScreenshot('command-menu.png', fullPage) }) + + // Utilization pages render charts and include the refetch interval picker — + // wait for the chart, then mask the refresh button so the spinner state + // doesn't cause flaky diffs. + test('silo utilization', async ({ page }) => { + await page.goto('/utilization', { waitUntil: 'networkidle' }) + await expect(page.getByRole('heading', { name: 'Utilization' })).toBeVisible() + await expect(page.locator('.recharts-curve').first()).toBeVisible() + await expect(page).toHaveScreenshot('silo-utilization.png', { + fullPage: true, + mask: [page.getByTestId('refetch-interval-refresh')], + maskColor: '#0b0e14', + }) + }) + + test('system utilization metrics tab', async ({ page }) => { + await page.goto('/system/utilization?tab=metrics', { waitUntil: 'networkidle' }) + await expect(page.getByRole('heading', { name: 'Utilization' })).toBeVisible() + await expect(page.locator('.recharts-curve').first()).toBeVisible() + await expect(page).toHaveScreenshot('system-utilization-metrics-tab.png', { + fullPage: true, + mask: [page.getByTestId('refetch-interval-refresh')], + maskColor: '#0b0e14', + }) + }) })