40 lines
2.2 KiB
TypeScript
40 lines
2.2 KiB
TypeScript
import { readFileSync } from 'node:fs';
|
|
import { describe, expect, it } from 'vitest';
|
|
|
|
const component = readFileSync(new URL('../../src/features/dashboard/DashboardPanel.tsx', import.meta.url), 'utf8');
|
|
const styles = readFileSync(new URL('../../src/styles/datahub.css', import.meta.url), 'utf8');
|
|
|
|
/**
|
|
* Die Kurven zwischen Overall Score und Security Domains trafen ihre Knoten
|
|
* nur bei genau einer Fenstergroesse: feste Zielkoordinaten lagen in einem
|
|
* ungleichmaessig gestreckten Koordinatensystem. Bei jeder anderen Breite
|
|
* endeten sie sichtbar neben dem Knoten.
|
|
*/
|
|
describe('client info posture connectors', () => {
|
|
it('derives the curve geometry from the rendered layout instead of fixed coordinates', () => {
|
|
expect(component).toContain('function DashboardPostureConnectors(');
|
|
expect(component).toContain('getBoundingClientRect()');
|
|
expect(component).toContain("querySelectorAll('.client-domains .client-domain-score')");
|
|
// Das Koordinatensystem entspricht der gemessenen Flaeche, deshalb darf es
|
|
// nicht mehr verzerrt werden.
|
|
expect(component).not.toMatch(/<svg[^>]*preserveAspectRatio/);
|
|
expect(component).not.toMatch(/\[82, 150, 218, 286, 354, 422, 490, 558\]/);
|
|
expect(component).toMatch(/viewBox=\{`0 0 \$\{Math\.max\(1, geometry\.width\)\} \$\{Math\.max\(1, geometry\.height\)\}`\}/);
|
|
});
|
|
|
|
it('remeasures on both layout and window size changes', () => {
|
|
expect(component).toContain("window.addEventListener('resize', measure)");
|
|
expect(component).toContain("window.removeEventListener('resize', measure)");
|
|
expect(component).toContain('new ResizeObserver(() => measure())');
|
|
expect(component).toContain('observer?.disconnect()');
|
|
});
|
|
|
|
it('keeps the connector overlay positioned inside the posture surface', () => {
|
|
expect(styles).toMatch(/\.client-posture\s*\{[^}]*position:\s*relative;/s);
|
|
expect(styles).toMatch(/\.client-posture-connectors\s*\{[^}]*position:\s*absolute;[^}]*inset:\s*0;/s);
|
|
// Unterhalb des Umbruchs stehen Ring und Domains untereinander; dort gibt
|
|
// es keine waagerechte Verbindung mehr.
|
|
expect(styles).toMatch(/\.client-posture-connectors\s*\{\s*display:\s*none;\s*\}/);
|
|
});
|
|
});
|