26 lines
1.7 KiB
TypeScript
26 lines
1.7 KiB
TypeScript
import { readFileSync } from 'node:fs';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
const components = readFileSync(new URL('../../src/styles/components.css', import.meta.url), 'utf8').replace(/\r\n/g, '\n');
|
|
const tokens = readFileSync(new URL('../../src/styles/ui-tokens.css', import.meta.url), 'utf8').replace(/\r\n/g, '\n');
|
|
|
|
// User decision 2026-10-01: several Context badges in the Finding Reader heading stand one below the other,
|
|
// align with the finding badges above (title column) and carry a small marker dot in the Context tone that
|
|
// Pathfinder already uses for context nodes - never the focus, marking or a status colour.
|
|
describe('Finding Reader context badge layout', () => {
|
|
it('starts the action row in the title column so context badges align with the badges above', () => {
|
|
expect(components).toMatch(/\.reader-heading-actions\s*\{[^}]*grid-column:\s*2 \/ -1;/);
|
|
});
|
|
|
|
it('stacks several context badges vertically', () => {
|
|
expect(components).toMatch(/\.context-cluster-badges\s*\{[^}]*flex-direction:\s*column;[^}]*align-items:\s*flex-start;/);
|
|
});
|
|
|
|
it('marks every context badge with a dot in the dedicated context marker tone', () => {
|
|
expect(components).toMatch(/\.status-badge\.context-cluster-badge::before\s*\{[^}]*width:\s*var\(--space-2\);[^}]*height:\s*var\(--space-2\);[^}]*border-radius:\s*50%;[^}]*background:\s*var\(--context-marker\);/);
|
|
const markerDefinitions = [...tokens.matchAll(/--context-marker:\s*([^;]+);/g)].map(match => match[1].trim());
|
|
expect(markerDefinitions).toEqual(['var(--graph-relation)', 'var(--graph-relation)']);
|
|
expect(components).not.toMatch(/context-cluster-badge[^{]*\{[^}]*(?:--focus-ring|--marking-color|--table-row-marking|--outcome-|--sev-)/);
|
|
});
|
|
});
|