95 lines
5.1 KiB
JavaScript
95 lines
5.1 KiB
JavaScript
import assert from 'node:assert/strict';
|
|
import fs from 'node:fs';
|
|
import path from 'node:path';
|
|
import test from 'node:test';
|
|
|
|
const root = path.resolve(import.meta.dirname, '../..');
|
|
const styles = fs.readFileSync(path.join(root, 'src/web/styles.css'), 'utf8');
|
|
|
|
function rule(selector, source = styles) {
|
|
const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
return new RegExp(`^${escaped}\\s*\\{([\\s\\S]*?)\\n\\}`, 'm').exec(source)?.[1] || '';
|
|
}
|
|
|
|
test('desktop layout keeps the power control on a symmetric center axis', () => {
|
|
const panel = rule('.client-panel');
|
|
const power = rule('.client-power-section');
|
|
const form = rule('.client-form');
|
|
|
|
assert.match(panel, /grid-template-columns:\s*minmax\(0, 1fr\) minmax\(240px, 280px\) minmax\(0, 1fr\)/);
|
|
assert.match(power, /grid-column:\s*2/);
|
|
assert.match(form, /grid-column:\s*3/);
|
|
assert.match(form, /position:\s*static/);
|
|
assert.match(form, /overflow:\s*visible/);
|
|
assert.doesNotMatch(form, /\bleft\s*:|translateX|transition:[^;]*(?:left|width|transform)/);
|
|
assert.match(styles, /\.client-panel\.has-subscription \.client-form \{[\s\S]*height:\s*var\(--client-work-height\)/);
|
|
assert.match(rule('.client-form-content'), /align-content:\s*start/);
|
|
assert.match(styles, /--client-power-top:\s*calc\(\(var\(--client-work-height\) - 96px\) \/ 2\)/);
|
|
assert.match(styles, /\.client-panel\.has-subscription \{[\s\S]*transform:\s*translateY\(-9vh\)/);
|
|
assert.match(styles, /\.client-panel\.has-subscription \.client-power-section \{[\s\S]*height:\s*var\(--client-work-height\);[\s\S]*padding-top:\s*var\(--client-power-top\)/);
|
|
assert.match(styles, /\.client-panel\.has-subscription \.client-form-content \{[\s\S]*padding-top:\s*var\(--client-power-top\)/);
|
|
});
|
|
|
|
test('server rows scroll without moving the subscription column or showing a scrollbar', () => {
|
|
const scroll = rule('.client-server-scroll');
|
|
const simpleScroll = rule('.client-server-mode-panel.is-simple .client-server-scroll');
|
|
|
|
assert.match(scroll, /overflow-y:\s*auto/);
|
|
assert.match(scroll, /scrollbar-width:\s*none/);
|
|
assert.match(styles, /\.client-server-scroll::-webkit-scrollbar\s*\{[\s\S]*display:\s*none/);
|
|
assert.match(simpleScroll, /max-height:\s*none/);
|
|
assert.match(simpleScroll, /overflow:\s*visible/);
|
|
});
|
|
|
|
test('tablet and mobile regions use normal flow with viewport-safe widths', () => {
|
|
const responsive = /@media \(max-width: 920px\) \{([\s\S]*?)\n\}\n\n@media \(max-width: 560px\)/.exec(styles)?.[1] || '';
|
|
|
|
assert.match(responsive, /grid-template-columns:\s*minmax\(0, 1fr\)/);
|
|
assert.match(responsive, /\.client-power-section,[\s\S]*\.client-form,[\s\S]*grid-column:\s*1/);
|
|
assert.match(responsive, /width:\s*min\(100%, 380px\)/);
|
|
assert.match(responsive, /max-height:\s*none/);
|
|
assert.match(responsive, /overflow-y:\s*visible/);
|
|
assert.match(responsive, /\.harbor-brand,[\s\S]*position:\s*absolute/);
|
|
assert.match(responsive, /\.client-inline-error\.is-connection,[\s\S]*position:\s*static/);
|
|
|
|
assert.match(rule('.client-duration-toggle'), /width:\s*min\(290px, 100%\)/);
|
|
assert.match(styles, /\.client-instructions\s*\{[\s\S]*width:\s*min\(470px, 100vw\)/);
|
|
assert.match(styles, /\.client-local-rules\s*\{[\s\S]*width:\s*min\(480px, 100vw\)/);
|
|
assert.match(styles, /\.client-confirmation-dialog\s*\{[\s\S]*width:\s*min\(430px, calc\(100vw - 48px\)\)/);
|
|
|
|
for (const viewport of [320, 390, 768]) {
|
|
const pagePadding = viewport <= 560 ? 28 : 48;
|
|
const panelPadding = 12;
|
|
const available = viewport - pagePadding - panelPadding;
|
|
assert.ok(Math.min(380, available) <= viewport, `form fits ${viewport}px viewport`);
|
|
assert.ok(Math.min(290, available) <= viewport, `duration control fits ${viewport}px viewport`);
|
|
}
|
|
|
|
const desktopOuterColumn = (1100 - 280) / 2;
|
|
assert.ok(Math.min(360, desktopOuterColumn) <= desktopOuterColumn, 'details fit the 1440px desktop grid');
|
|
});
|
|
|
|
test('responsive motion has a reduced-motion fallback', () => {
|
|
const reducedMotion = /@media \(prefers-reduced-motion: reduce\) \{([\s\S]*)\n\}/.exec(styles)?.[1] || '';
|
|
|
|
assert.match(reducedMotion, /\.client-power-section/);
|
|
assert.match(reducedMotion, /\.client-form/);
|
|
assert.match(reducedMotion, /\.harbor-brand/);
|
|
assert.match(reducedMotion, /transition:\s*none/);
|
|
assert.match(reducedMotion, /animation:\s*none/);
|
|
});
|
|
|
|
test('tooltips stay opaque, above adjacent content, and do not stick after pointer clicks', () => {
|
|
const tooltip = rule('.client-tooltip');
|
|
|
|
assert.match(tooltip, /z-index:\s*1000/);
|
|
assert.match(tooltip, /background:\s*oklch\(0\.14 0\.012 145\)/);
|
|
assert.doesNotMatch(tooltip, /transparent|backdrop-filter/);
|
|
assert.match(styles, /\.client-power-section:has\(\.client-tooltip-anchor:hover\)[\s\S]*z-index:\s*90/);
|
|
assert.match(styles, /\.client-tooltip-anchor:focus-visible > \.client-tooltip/);
|
|
assert.match(styles, /\.client-tooltip-anchor:has\(> :focus-visible\) > \.client-tooltip/);
|
|
assert.doesNotMatch(styles, /\.client-tooltip-anchor:focus-within > \.client-tooltip/);
|
|
assert.match(rule('.harbor-version-tooltip'), /background:\s*oklch\(0\.14 0\.012 145\)/);
|
|
assert.match(rule('.harbor-mode-tooltip'), /background:\s*oklch\(0\.14 0\.012 145\)/);
|
|
});
|