53 lines
3.1 KiB
JavaScript
53 lines
3.1 KiB
JavaScript
// 0.32.1 regression: restore pre-0.32.0 content-driven tile heights and
|
|
// align inter-tile gaps with the same spacing as other Dashboard sections.
|
|
// These are source/CSS contracts, not a browser or authenticated-UI test.
|
|
import assert from 'node:assert/strict';
|
|
import fs from 'node:fs';
|
|
|
|
const css = fs.readFileSync('src/admin/web/style.css', 'utf8');
|
|
const html = fs.readFileSync('src/admin/web/index.html', 'utf8');
|
|
|
|
function rule(selector) {
|
|
// Target precise blocks rather than accepting an unrelated matching rule.
|
|
const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
|
const match = css.match(new RegExp(`${escaped}\\s*\\{([^{}]*)\\}`));
|
|
assert(match, `Missing CSS rule: ${selector}`);
|
|
return match[1];
|
|
}
|
|
|
|
for (const density of ['normal', 'compact', 'ultra']) {
|
|
const declarations = rule(`html[data-dashboard-density="${density}"] #panel-overview .stats-grid`);
|
|
assert.match(declarations, /gap:\s*var\(--ui-gap\)\s*;/,
|
|
`${density} tiles must use the same density-aware gap as Dashboard sections`);
|
|
}
|
|
const sharedGap = rule('.overview-grid,\n.diagnostics-grid,\n.settings-grid,\n.config-columns');
|
|
assert.match(sharedGap, /gap:\s*var\(--ui-gap\)/);
|
|
for (const density of ['dense', 'comfortable', 'compact']) {
|
|
assert.match(css, new RegExp(`body\\[data-density="${density}"\\]\\s*\\{[^}]*--ui-gap:`),
|
|
`UI density ${density} must provide the shared gap variable`);
|
|
}
|
|
assert.match(css, /@media \(min-width: 1201px\)\s*\{\s*#panel-overview \.stats-grid\s*\{\s*grid-template-columns:\s*repeat\(6, minmax\(0, 1fr\)\);/,
|
|
'six desktop columns are preserved');
|
|
assert.doesNotMatch(css, /#panel-overview \.stats-grid\s*>\s*\.stat\s*\{[^}]*\bmin-height\s*:/s,
|
|
'desktop cards should grow naturally to their legend/content height');
|
|
assert.doesNotMatch(css, /#panel-overview \.stats-grid \.stat:is\(:hover, :focus-visible, :focus-within\)/,
|
|
'card descriptions must remain visible, not hover-only');
|
|
|
|
const heading = rule('html[data-dashboard-density="compact"] #panel-overview .stat>span');
|
|
const metric = rule('html[data-dashboard-density="compact"] #panel-overview .stat strong');
|
|
const caption = rule('html[data-dashboard-density="compact"] #panel-overview .stat small');
|
|
const payload = rule('html[data-dashboard-density="compact"] #panel-overview .payload-split');
|
|
assert.match(heading, /font-size:\s*11px/);
|
|
assert.match(metric, /font-size:\s*25px/);
|
|
assert.match(caption, /font-size:\s*10px/);
|
|
assert.match(payload, /font-size:\s*10px\s*!important/);
|
|
assert.match(css, /#panel-overview \.stats-grid \.stat-chart>\.stat-chart-legend\s*\{[^}]*flex-wrap:\s*wrap/s);
|
|
|
|
const overview = html.slice(html.indexOf('id="panel-overview"'), html.indexOf('class="overview-grid"'));
|
|
assert.equal([...overview.matchAll(/data-dashboard-widget="/g)].length, 16,
|
|
'no metric/Stream cards may be removed');
|
|
assert.match(overview, /id="metric-bytes-split"/);
|
|
assert.match(overview, /id="http-protocol-chart"/);
|
|
assert.match(overview, /id="ws-protocol-chart"/);
|
|
console.log('PASS: 0.32.1 Overview six-column content height, 90% compact typography, shared tile spacing and inline legends.');
|