From 7ba69494e1fe582829e9bedf5427b15217d1ae66 Mon Sep 17 00:00:00 2001 From: Binh Date: Mon, 24 Aug 2026 15:36:41 +0200 Subject: [PATCH] fix(ui): resolve design checks and cross-platform test failures --- .../ResizableResultTable.tsx | 2 +- src/styles/datahub-redesign.css | 4 ++-- src/styles/datahub.css | 2 +- src/styles/obsidian-graph.css | 18 +++++++++--------- .../components/resizable-result-table.test.tsx | 6 +++--- tests/features/datahub-centered-layout.test.ts | 5 +++-- tests/features/obsidian-graph.test.ts | 4 ++-- .../results-browser-timeslot-scope.test.ts | 2 +- 8 files changed, 22 insertions(+), 21 deletions(-) diff --git a/src/components/ResizableResultTable/ResizableResultTable.tsx b/src/components/ResizableResultTable/ResizableResultTable.tsx index f22d3cf..9cb4b7e 100644 --- a/src/components/ResizableResultTable/ResizableResultTable.tsx +++ b/src/components/ResizableResultTable/ResizableResultTable.tsx @@ -101,7 +101,7 @@ export function ResizableResultTable({ headers, children, enabled = false, class return ( {enabled && } - {appliedWidths.length > 0 && {appliedWidths.map((width, index) => )}} + {appliedWidths.length > 0 && {appliedWidths.map((width, index) => )}} {headers.map((header, index) =>
Column widths can be changed by dragging a header separator or fitted by double-clicking it.
{header}{enabled && index < columnCount - 1 && { Object.defineProperty(firstColumnCells[1], 'scrollWidth', { configurable: true, value: 238 }); act(() => container.querySelector('.result-column-resizer')?.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true }))); - expect((container.querySelector('col') as HTMLElement).style.width).toBe('240px'); + expect(container.querySelector('col')?.getAttribute('width')).toBe('240'); expect(container.querySelector('table')?.classList.contains('has-custom-column-widths')).toBe(true); let handle = container.querySelector('.result-column-resizer') as HTMLElement; @@ -49,7 +49,7 @@ describe('ResizableResultTable', () => { act(() => handle.dispatchEvent(pointerEvent('pointerdown', 7, 100))); handle = container.querySelector('.result-column-resizer') as HTMLElement; act(() => handle.dispatchEvent(pointerEvent('pointermove', 7, 148))); - expect((container.querySelector('col') as HTMLElement).style.width).toBe('168px'); + expect(container.querySelector('col')?.getAttribute('width')).toBe('168'); act(() => root.unmount()); }); @@ -66,7 +66,7 @@ describe('ResizableResultTable', () => { headers.forEach(cell => { cell.getBoundingClientRect = () => ({ width: 100 } as DOMRect); }); act(() => container.querySelector('.result-column-resizer')?.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))); - expect((container.querySelector('col') as HTMLElement).style.width).toBe('116px'); + expect(container.querySelector('col')?.getAttribute('width')).toBe('116'); act(() => root.unmount()); }); diff --git a/tests/features/datahub-centered-layout.test.ts b/tests/features/datahub-centered-layout.test.ts index fb18e31..e877abe 100644 --- a/tests/features/datahub-centered-layout.test.ts +++ b/tests/features/datahub-centered-layout.test.ts @@ -26,8 +26,9 @@ describe('Datahub centered reference rack layout', () => { expect(datahubStyles).toContain('border-color: var(--warning); color: var(--warning);'); expect(datahubStyles).toContain('outline: var(--bw-emphasis) solid var(--button-marked-bg);'); expect(datahubStyles).toContain('.datahub-tenant-card::before { content: none; }'); - expect(datahubStyles).toContain('transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;'); - expect(datahubStyles).toMatch(/\.datahub-tenant-card:hover,\s*\.datahub-tenant-card:focus-within\s*\{[^}]*border-color:\s*var\(--line-strong\);[^}]*background:\s*var\(--panel-hover\);[^}]*box-shadow:\s*var\(--shadow-raised-hover\);[^}]*transform:\s*translateY\(-2px\);/s); + expect(datahubStyles).toContain('transition: background .12s ease, border-color .12s ease, transform .12s ease;'); + expect(datahubStyles).toMatch(/\.datahub-tenant-card:hover,\s*\.datahub-tenant-card:focus-within\s*\{[^}]*border-color:\s*var\(--line-strong\);[^}]*background:\s*var\(--panel-hover\);[^}]*transform:\s*translateY\(-2px\);/s); + expect(datahubStyles).not.toContain('box-shadow: var(--shadow-raised-hover)'); expect(datahubStyles).toContain('.datahub-tenant-select { position: absolute; inset: 0;'); expect(datahubStyles).toContain('grid-template-rows: minmax(0, 1fr) auto auto;'); expect(datahubStyles).toContain('font: var(--fw-semibold) calc(var(--donut-title-size) * 1.35)'); diff --git a/tests/features/obsidian-graph.test.ts b/tests/features/obsidian-graph.test.ts index 5f792f3..486975a 100644 --- a/tests/features/obsidian-graph.test.ts +++ b/tests/features/obsidian-graph.test.ts @@ -224,8 +224,8 @@ describe('Obsidian-style interactive graph', () => { expect(graphStyles).toMatch(/\.obsidian-graph-card\.is-selected \.obsidian-node-card,[\s\S]*?\.obsidian-graph-card\.is-selected \.obsidian-node-matrix-card \.data-tile\s*\{/s); expect(graphStyles).toMatch(/\.obsidian-node-matrix-card\s*\{[^}]*width:\s*100%;[^}]*height:\s*100%;/s); expect(graphStyles).not.toContain('--graph-card-content-scale'); - expect(graphStyles).toMatch(/\.obsidian-node-card\.data-tile:hover,[\s\S]*?\{[^}]*box-shadow:\s*none;[^}]*transform:\s*none;/); - expect(graphStyles).toMatch(/\.obsidian-node-matrix-card \.data-tile:hover,[\s\S]*?\{[^}]*box-shadow:\s*none;[^}]*transform:\s*none;/); + expect(graphStyles).toMatch(/\.obsidian-node-card\.data-tile:hover,[\s\S]*?\{[^}]*box-shadow:\s*inset 0 0 0 0 transparent;[^}]*transform:\s*none;/); + expect(graphStyles).toMatch(/\.obsidian-node-matrix-card \.data-tile:hover,[\s\S]*?\{[^}]*box-shadow:\s*inset 0 0 0 0 transparent;[^}]*transform:\s*none;/); expect(graphStyles).toMatch(/\.obsidian-node-card \.data-tile-content h3\s*\{[^}]*font-size:\s*var\(--pathfinder-micro-title-size\);/s); expect(graphStyles).toMatch(/\.obsidian-node-inline-label\s*\{[^}]*font-size:\s*var\(--fs-lg\);/s); expect(graphStyles).toMatch(/\.obsidian-node-card \.reader-severity\s*\{[^}]*font-size:\s*var\(--pathfinder-micro-relation-badge-size\);/s); diff --git a/tests/features/results-browser-timeslot-scope.test.ts b/tests/features/results-browser-timeslot-scope.test.ts index 93f4da7..fcf7189 100644 --- a/tests/features/results-browser-timeslot-scope.test.ts +++ b/tests/features/results-browser-timeslot-scope.test.ts @@ -12,7 +12,7 @@ describe('Result DB timeslot scope', () => { expect(appSource).toContain('scanRunIds={app.activeScanRunIds}'); expect(browserSource).toContain("backendStatus !== 'connected' || !projectId || !scanRunIds?.length"); expect(browserSource).toContain('

No timeslot selected

'); - expect(browserSource).toContain('scanRunIds\n };'); + expect(browserSource).toMatch(/scanRunIds\r?\n };/); expect(browserSource).toContain('queryUnifiedResultFacets(scopedQuery)'); expect(browserSource).toContain('queryUnifiedResults({ ...scopedQuery, offset: 0, limit })'); expect(browserSource).toContain("item.sourceKind === 'environment-observation'");