57 lines
3.7 KiB
JavaScript
57 lines
3.7 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('id="panel-vhosts"'));
|
|
const widgets = [...overview.matchAll(/data-dashboard-widget="([^"]+)"/g)].map(match => match[1]);
|
|
assert.equal(widgets.length, 62, '49 existing widgets plus 6 small and 7 large opt-in charts');
|
|
assert.equal(widgets.filter(id => !id.startsWith('backend_') && !id.startsWith('extra_') && !id.startsWith('wide_') && !['traffic_chart','system_chart','connection_chart','cache_diagnostics','process_diagnostics','network_diagnostics','backend_table'].includes(id)).length, 16,
|
|
'all 16 pre-existing metric/Stream cards must be retained');
|
|
assert.match(overview, /id="metric-bytes-split"/);
|
|
assert.match(overview, /id="http-protocol-chart"/);
|
|
assert.match(overview, /id="ws-protocol-chart"/);
|
|
assert.match(overview, /id="dashboard-overview-grid"/);
|
|
assert.doesNotMatch(overview, /class="overview-grid"|class="diagnostics-grid"/, 'all Overview widgets must share one arrangement grid');
|
|
console.log('PASS: 0.32.1 Overview six-column content height, 90% compact typography, shared tile spacing and inline legends.');
|