mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 10:24:02 +00:00
feat(ui): render the data layer rows through Vue from presented row state
This commit is contained in:
Sameh Khamis committed
1 parent
ce343c1c6d
commit
d63f4d697b
16 files changed
+1434
-1552
No files matched your search
@@ -28,9 +28,6 @@ export class DataLayerManager extends LayerLifecycle {
|
||||
_buildMetaText(layer) {
|
||||
return this._presentation.panel._buildMetaText(layer);
|
||||
}
|
||||
_syncToggleButton(button, layer) {
|
||||
return this._presentation.panel._syncToggleButton(button, layer);
|
||||
}
|
||||
get _layerPanel() {
|
||||
return this._presentation._panel;
|
||||
}
|
||||
|
||||
+8
-824
@@ -12,6 +12,7 @@
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { DataLayerManager, layerFeedState } from './manager.js';
|
||||
import { presentLayerToggle } from '../ui/layerPanel.js';
|
||||
import {
|
||||
contextSnapshotLayerIds,
|
||||
shouldCaptureContextSession,
|
||||
@@ -90,68 +91,6 @@ test('adopts settled visibility without re-running lifecycle work', async () =>
|
||||
assert.equal(manager.adoptLayerVisibility('flights', false, { origin: 'user' }), false);
|
||||
});
|
||||
|
||||
test('renders ordinary layer rows without recreating a panel-hidden coordinator', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
const makeElement = () => {
|
||||
const element = {
|
||||
children: [],
|
||||
className: '',
|
||||
dataset: {},
|
||||
textContent: '',
|
||||
disabled: false,
|
||||
attributes: {},
|
||||
classList: {
|
||||
toggle() {},
|
||||
},
|
||||
appendChild(child) { this.children.push(child); return child; },
|
||||
addEventListener() {},
|
||||
removeEventListener() {},
|
||||
setAttribute(name, value) { this.attributes[name] = String(value); },
|
||||
querySelector(selector) {
|
||||
if (selector.startsWith('[data-layer-id="')) {
|
||||
const id = selector.slice(16, -2);
|
||||
return this.children.find((child) => child.dataset.layerId === id) || null;
|
||||
}
|
||||
const className = selector.startsWith('.') ? selector.slice(1) : '';
|
||||
const visit = (node) => {
|
||||
if (String(node.className).split(/\s+/).includes(className)) return node;
|
||||
for (const child of node.children || []) {
|
||||
const found = visit(child);
|
||||
if (found) return found;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return visit(this);
|
||||
},
|
||||
set innerHTML(value) { if (value === '') this.children = []; },
|
||||
get innerHTML() { return ''; },
|
||||
};
|
||||
return element;
|
||||
};
|
||||
globalThis.document = { createElement: makeElement };
|
||||
const mgr = new DataLayerManager({});
|
||||
const ordinary = makeSlowLayer('flights', { updateInterval: -1 });
|
||||
const coordinator = makeSlowLayer('military-awareness', { updateInterval: -1 });
|
||||
coordinator.module.showInTogglePanel = false;
|
||||
mgr.register(ordinary.module);
|
||||
mgr.register(coordinator.module);
|
||||
const container = makeElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.ok(container.querySelector('[data-layer-id="flights"]'));
|
||||
assert.equal(container.querySelector('[data-layer-id="military-awareness"]'), null);
|
||||
assert.equal(await mgr.setEnabled('military-awareness', true), true);
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(container.querySelector('[data-layer-id="military-awareness"]'), null);
|
||||
assert.equal(mgr.getAll().find(({ id }) => id === 'military-awareness').enabled, true);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('clearSelectedLayers includes hidden coordinators and preserves newer dependency restoration', async () => {
|
||||
const mgr = new DataLayerManager({});
|
||||
const order = [];
|
||||
@@ -1861,17 +1800,6 @@ test('layer metadata names degraded state instead of presenting an ordinary age'
|
||||
|
||||
test('uncertain lifecycle state overrides ordinary feed status without disabling reconciliation', () => {
|
||||
const mgr = new DataLayerManager({});
|
||||
const classes = new Map();
|
||||
const attributes = new Map();
|
||||
const button = {
|
||||
classList: {
|
||||
toggle(name, active) { classes.set(name, Boolean(active)); },
|
||||
},
|
||||
dataset: {},
|
||||
disabled: false,
|
||||
textContent: '',
|
||||
setAttribute(name, value) { attributes.set(name, String(value)); },
|
||||
};
|
||||
const layer = {
|
||||
name: 'Radio',
|
||||
source: 'Radio Browser',
|
||||
@@ -1881,14 +1809,14 @@ test('uncertain lifecycle state overrides ordinary feed status without disabling
|
||||
stats: { count: 750, lastUpdate: Date.now() },
|
||||
};
|
||||
|
||||
mgr._syncToggleButton(button, layer);
|
||||
const toggle = presentLayerToggle(layer);
|
||||
|
||||
assert.equal(button.textContent, 'UNCERTAIN');
|
||||
assert.equal(button.dataset.feedState, 'uncertain');
|
||||
assert.equal(button.disabled, false, 'the lifecycle toggle remains available to reconcile authority');
|
||||
assert.equal(attributes.get('aria-label'), 'Radio: UNCERTAIN');
|
||||
assert.equal(classes.get('lifecycle-uncertain'), true);
|
||||
assert.equal(classes.get('feed-nominal'), false);
|
||||
assert.equal(toggle.text, 'UNCERTAIN');
|
||||
assert.equal(toggle.feedState, 'uncertain');
|
||||
assert.equal(toggle.ariaDisabled, false, 'the lifecycle toggle remains available to reconcile authority');
|
||||
assert.equal(toggle.ariaLabel, 'Radio: UNCERTAIN');
|
||||
assert.equal(toggle.classes['lifecycle-uncertain'], true);
|
||||
assert.equal(toggle.classes['feed-nominal'], false);
|
||||
assert.equal(
|
||||
mgr._buildMetaText(layer),
|
||||
'UNCERTAIN · Radio Browser · lifecycle state requires reconciliation',
|
||||
@@ -2729,549 +2657,6 @@ test('destroy settles an explicit refresh waiting behind invalidated periodic wo
|
||||
assert.equal(await destroy, true);
|
||||
});
|
||||
|
||||
// ── Per-layer row controls (chips + color legend) ───────────────────────────
|
||||
// The satellites layer is the first consumer: a DENSE catalog chip and a class
|
||||
// legend rendered under its row. The manager owns the DOM and the param write;
|
||||
// the layer only declares what it wants, so the chip can never disagree with
|
||||
// the layer's real state.
|
||||
|
||||
/** DOM double rich enough for the row-controls render path. */
|
||||
function makeControlElement() {
|
||||
const element = {
|
||||
children: [],
|
||||
className: '',
|
||||
dataset: {},
|
||||
style: {},
|
||||
attributes: {},
|
||||
listeners: {},
|
||||
textContent: '',
|
||||
hidden: false,
|
||||
disabled: false,
|
||||
title: '',
|
||||
type: '',
|
||||
classList: { toggle() {} },
|
||||
appendChild(child) { child.parent = this; this.children.push(child); return child; },
|
||||
append(...nodes) { for (const n of nodes) n.parent = this; this.children.push(...nodes); },
|
||||
insertBefore(child, anchor) {
|
||||
child.parent = this;
|
||||
const index = anchor ? this.children.indexOf(anchor) : this.children.length;
|
||||
this.children.splice(index, 0, child);
|
||||
return child;
|
||||
},
|
||||
replaceChildren(...nodes) { this.children = [...nodes]; },
|
||||
remove() {
|
||||
const siblings = this.parent?.children;
|
||||
if (siblings) this.parent.children = siblings.filter((n) => n !== this);
|
||||
// Browsers blur a node the moment it leaves the document. Modelling that
|
||||
// is the whole point: it is exactly what in-place chip reconciliation
|
||||
// exists to avoid, so a regression to rebuild-everything must fail here.
|
||||
if (globalThis.document?.activeElement === this) globalThis.document.activeElement = null;
|
||||
},
|
||||
focus() { if (globalThis.document) globalThis.document.activeElement = this; },
|
||||
addEventListener(name, handler) { this.listeners[name] = handler; },
|
||||
removeEventListener(name, handler) { if (this.listeners[name] === handler) delete this.listeners[name]; },
|
||||
setAttribute(name, value) { this.attributes[name] = String(value); },
|
||||
getAttribute(name) { return this.attributes[name] ?? null; },
|
||||
closest(selector) {
|
||||
const className = selector.slice(1);
|
||||
return String(this.className).split(/\s+/).includes(className) ? this : null;
|
||||
},
|
||||
querySelector(selector) {
|
||||
if (selector.startsWith('[data-layer-id="')) {
|
||||
const id = selector.slice(16, -2);
|
||||
return this.children.find((child) => child.dataset.layerId === id) || null;
|
||||
}
|
||||
const className = selector.startsWith('.') ? selector.slice(1) : '';
|
||||
const visit = (node) => {
|
||||
if (String(node.className).split(/\s+/).includes(className)) return node;
|
||||
for (const child of node.children || []) {
|
||||
const found = visit(child);
|
||||
if (found) return found;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
return visit(this);
|
||||
},
|
||||
set innerHTML(value) { if (value === '') this.children = []; },
|
||||
get innerHTML() { return ''; },
|
||||
};
|
||||
return element;
|
||||
}
|
||||
|
||||
test('keyboard focus survives Data Layer enabling and disabling transitions', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement, activeElement: null };
|
||||
const mgr = new DataLayerManager({});
|
||||
let releaseEnable;
|
||||
let releaseDisable;
|
||||
const calls = { enable: 0, disable: 0 };
|
||||
mgr.register({
|
||||
id: 'focus-layer',
|
||||
name: 'Focus layer',
|
||||
icon: '',
|
||||
source: 'Local focus fixture',
|
||||
updateInterval: -1,
|
||||
init() {},
|
||||
enable() {
|
||||
calls.enable += 1;
|
||||
return new Promise((resolve) => { releaseEnable = resolve; });
|
||||
},
|
||||
disable() {
|
||||
calls.disable += 1;
|
||||
return new Promise((resolve) => { releaseDisable = resolve; });
|
||||
},
|
||||
update() {},
|
||||
destroy() {},
|
||||
getStats() { return { count: 1, lastUpdate: Date.now() }; },
|
||||
});
|
||||
const container = makeControlElement();
|
||||
|
||||
const waitFor = async (predicate, label) => {
|
||||
for (let attempt = 0; attempt < 20; attempt += 1) {
|
||||
if (predicate()) return;
|
||||
await Promise.resolve();
|
||||
}
|
||||
assert.fail(`timed out waiting for ${label}`);
|
||||
};
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
const row = container.querySelector('[data-layer-id="focus-layer"]');
|
||||
const button = row.querySelector('.data-toggle-btn');
|
||||
button.focus();
|
||||
|
||||
const enablingClick = button.listeners.click();
|
||||
await waitFor(() => typeof releaseEnable === 'function', 'enable transition');
|
||||
assert.equal(globalThis.document.activeElement, button);
|
||||
assert.equal(button.disabled, false, 'ENABLING never uses native disabled');
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'true');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'true');
|
||||
assert.equal(button.textContent, 'ENABLING');
|
||||
await button.listeners.click();
|
||||
assert.equal(calls.enable, 1, 'repeat activation is inert while enabling');
|
||||
assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 1);
|
||||
|
||||
releaseEnable();
|
||||
await enablingClick;
|
||||
assert.equal(globalThis.document.activeElement, button);
|
||||
assert.equal(button.disabled, false);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'false');
|
||||
assert.equal(mgr.isEnabled('focus-layer'), true);
|
||||
|
||||
const disablingClick = button.listeners.click();
|
||||
await waitFor(() => typeof releaseDisable === 'function', 'disable transition');
|
||||
assert.equal(globalThis.document.activeElement, button);
|
||||
assert.equal(button.disabled, false, 'DISABLING never uses native disabled');
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'true');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'true');
|
||||
assert.equal(button.textContent, 'DISABLING');
|
||||
await button.listeners.click();
|
||||
assert.equal(calls.disable, 1, 'repeat activation is inert while disabling');
|
||||
assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 2);
|
||||
|
||||
releaseDisable();
|
||||
await disablingClick;
|
||||
assert.equal(globalThis.document.activeElement, button);
|
||||
assert.equal(button.disabled, false);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'false');
|
||||
assert.equal(mgr.isEnabled('focus-layer'), false);
|
||||
} finally {
|
||||
releaseEnable?.();
|
||||
releaseDisable?.();
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('a failed Data Layer transition clears busy state without losing keyboard focus', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
const originalWarn = console.warn;
|
||||
globalThis.document = { createElement: makeControlElement, activeElement: null };
|
||||
console.warn = () => {};
|
||||
const mgr = new DataLayerManager({});
|
||||
let rejectEnable;
|
||||
let enableCalls = 0;
|
||||
mgr.register({
|
||||
id: 'focus-failure-layer',
|
||||
name: 'Focus failure layer',
|
||||
icon: '',
|
||||
source: 'Local focus fixture',
|
||||
updateInterval: -1,
|
||||
init() {},
|
||||
enable() {
|
||||
enableCalls += 1;
|
||||
if (enableCalls > 1) return true;
|
||||
return new Promise((resolve, reject) => { rejectEnable = reject; });
|
||||
},
|
||||
disable() { return true; },
|
||||
update() {},
|
||||
destroy() {},
|
||||
getStats() { return { count: 0, lastUpdate: null }; },
|
||||
});
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
const button = container
|
||||
.querySelector('[data-layer-id="focus-failure-layer"]')
|
||||
.querySelector('.data-toggle-btn');
|
||||
button.focus();
|
||||
|
||||
const failedClick = button.listeners.click();
|
||||
for (let attempt = 0; attempt < 20 && typeof rejectEnable !== 'function'; attempt += 1) {
|
||||
await Promise.resolve();
|
||||
}
|
||||
assert.equal(typeof rejectEnable, 'function');
|
||||
assert.equal(globalThis.document.activeElement, button);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'true');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'true');
|
||||
|
||||
rejectEnable(new Error('QA enable rejected'));
|
||||
await failedClick;
|
||||
assert.equal(globalThis.document.activeElement, button, 'failure settlement preserves focus');
|
||||
assert.equal(button.disabled, false);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'false');
|
||||
assert.equal(button.textContent, 'OFF');
|
||||
assert.deepEqual(mgr.getLayerLifecycleState('focus-failure-layer'), {
|
||||
enabled: false,
|
||||
lifecycleState: 'disabled',
|
||||
uncertain: false,
|
||||
});
|
||||
|
||||
await button.listeners.click();
|
||||
assert.equal(enableCalls, 2, 'the settled control accepts a later retry');
|
||||
assert.equal(globalThis.document.activeElement, button);
|
||||
assert.equal(mgr.isEnabled('focus-failure-layer'), true);
|
||||
} finally {
|
||||
rejectEnable?.(new Error('test cleanup'));
|
||||
console.warn = originalWarn;
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
/** Collect every node in a rendered subtree carrying `className`. */
|
||||
function collectByClass(node, className) {
|
||||
const found = [];
|
||||
const visit = (current) => {
|
||||
if (String(current.className).split(/\s+/).includes(className)) found.push(current);
|
||||
for (const child of current.children || []) visit(child);
|
||||
};
|
||||
visit(node);
|
||||
return found;
|
||||
}
|
||||
|
||||
/** A layer that declares a two-state chip plus a legend, like satellites. */
|
||||
function makeRowControlLayer() {
|
||||
let mode = 'core';
|
||||
return {
|
||||
get mode() { return mode; },
|
||||
module: {
|
||||
id: 'satellites',
|
||||
name: 'Satellites',
|
||||
icon: '',
|
||||
source: 'CelesTrak',
|
||||
updateInterval: -1,
|
||||
async init() {},
|
||||
enable() {},
|
||||
disable() {},
|
||||
async update() {},
|
||||
getStats() { return { count: 3, lastUpdate: Date.now() }; },
|
||||
setParams(params) { if (params.catalog) mode = params.catalog; },
|
||||
getParams() { return { catalog: mode }; },
|
||||
getRowControls() {
|
||||
const dense = mode === 'dense';
|
||||
return {
|
||||
chips: [{
|
||||
id: 'catalog',
|
||||
label: 'DENSE',
|
||||
active: dense,
|
||||
title: 'toggle the dense catalog',
|
||||
params: { catalog: dense ? 'core' : 'dense' },
|
||||
}],
|
||||
legend: [
|
||||
{ klass: 'nav', label: 'NAV', color: '#4fd8ff', blurb: 'GNSS', count: 2 },
|
||||
{ klass: 'geo', label: 'GEO', color: '#c89bff', blurb: 'belt', count: 5 },
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
test('a layer that declares row controls renders its chips and color legend', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
const row = container.querySelector('[data-layer-id="satellites"]');
|
||||
const controls = row.querySelector('.data-toggle-controls');
|
||||
assert.ok(controls, 'the row gained a controls block');
|
||||
// Disabled layers stay quiet — no chip, no legend.
|
||||
assert.equal(controls.hidden, true);
|
||||
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(controls.hidden, false);
|
||||
|
||||
const chips = collectByClass(controls, 'data-toggle-chip');
|
||||
assert.equal(chips.length, 1);
|
||||
assert.equal(chips[0].textContent, 'DENSE');
|
||||
assert.equal(chips[0].dataset.chipId, 'catalog');
|
||||
assert.equal(chips[0].attributes['aria-pressed'], 'false');
|
||||
assert.equal(chips[0].title, 'toggle the dense catalog');
|
||||
|
||||
const swatches = collectByClass(controls, 'data-toggle-legend-swatch');
|
||||
assert.deepEqual(swatches.map((s) => s.style.background), ['#4fd8ff', '#c89bff'],
|
||||
'each legend swatch is painted the exact class color');
|
||||
const items = collectByClass(controls, 'data-toggle-legend-item');
|
||||
assert.deepEqual(items.map((i) => i.title), ['GNSS', 'belt']);
|
||||
assert.equal(items.length, 2);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('clicking a row chip applies the params it declared and re-renders', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const row = container.querySelector('[data-layer-id="satellites"]');
|
||||
const controls = row.querySelector('.data-toggle-controls');
|
||||
const chip = collectByClass(controls, 'data-toggle-chip')[0];
|
||||
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(layer.mode, 'dense', 'the chip wrote the params it declared');
|
||||
// setLayerParams refreshes the panel, so the chip already reflects the flip.
|
||||
const afterOn = collectByClass(controls, 'data-toggle-chip')[0];
|
||||
assert.equal(afterOn.attributes['aria-pressed'], 'true');
|
||||
assert.equal(afterOn.className.includes('active'), true);
|
||||
|
||||
controls.listeners.click({ target: afterOn });
|
||||
assert.equal(layer.mode, 'core', 'the chip toggles back rather than latching');
|
||||
assert.equal(collectByClass(controls, 'data-toggle-chip')[0].attributes['aria-pressed'], 'false');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('a click outside a chip is inert, and a throwing layer cannot blank the panel', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const warn = console.warn;
|
||||
console.warn = () => {};
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const row = container.querySelector('[data-layer-id="satellites"]');
|
||||
const controls = row.querySelector('.data-toggle-controls');
|
||||
|
||||
const legendItem = collectByClass(controls, 'data-toggle-legend-item')[0];
|
||||
controls.listeners.click({ target: legendItem });
|
||||
assert.equal(layer.mode, 'core', 'the legend is not a control');
|
||||
controls.listeners.click({ target: { closest: () => null } });
|
||||
assert.equal(layer.mode, 'core');
|
||||
|
||||
layer.module.getRowControls = () => { throw new Error('boom'); };
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(controls.hidden, true, 'a throwing layer collapses to an empty block');
|
||||
assert.ok(container.querySelector('[data-layer-id="satellites"]'), 'the row itself survives');
|
||||
} finally {
|
||||
console.warn = warn;
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard focus on a chip survives the refresh its own click triggers', async () => {
|
||||
// _syncRowControls runs on EVERY panel refresh, including the one the chip's
|
||||
// own click triggers. Rebuilding the button would blur it every time, so a
|
||||
// keyboard user loses their place on activation.
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement, activeElement: null };
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const controls = container
|
||||
.querySelector('[data-layer-id="satellites"]')
|
||||
.querySelector('.data-toggle-controls');
|
||||
const chip = collectByClass(controls, 'data-toggle-chip')[0];
|
||||
|
||||
chip.focus();
|
||||
assert.equal(globalThis.document.activeElement, chip, 'the chip starts focused');
|
||||
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(globalThis.document.activeElement, chip,
|
||||
'activating the chip does not blur it');
|
||||
assert.equal(collectByClass(controls, 'data-toggle-chip')[0], chip,
|
||||
'the SAME button node is reused across the click-driven refresh');
|
||||
|
||||
mgr._refreshTogglePanel();
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(globalThis.document.activeElement, chip,
|
||||
'repeated refreshes never steal focus');
|
||||
// Legend entries hold no focus, so they may be replaced — never duplicated.
|
||||
assert.equal(collectByClass(controls, 'data-toggle-legend-item').length, 2);
|
||||
|
||||
// ...and a chip that genuinely goes away still releases focus.
|
||||
layer.module.getRowControls = () => ({ chips: [], legend: [] });
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(globalThis.document.activeElement, null);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('an async layer pushes its own row refresh, and a busy chip refuses clicks', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const mgr = new DataLayerManager({});
|
||||
|
||||
let settled = false;
|
||||
let writes = 0;
|
||||
const module = {
|
||||
id: 'satellites',
|
||||
name: 'Satellites',
|
||||
icon: '',
|
||||
source: 'CelesTrak',
|
||||
updateInterval: -1,
|
||||
async init() {},
|
||||
enable() {},
|
||||
disable() {},
|
||||
async update() {},
|
||||
getStats() { return { count: 1, lastUpdate: Date.now() }; },
|
||||
setParams() { writes += 1; },
|
||||
getRowControls() {
|
||||
return {
|
||||
chips: [{
|
||||
id: 'catalog',
|
||||
label: settled ? 'DENSE' : 'DENSE ···',
|
||||
active: settled,
|
||||
busy: !settled,
|
||||
disabled: !settled,
|
||||
state: settled ? 'active' : 'loading',
|
||||
title: 'x',
|
||||
params: { catalog: 'core' },
|
||||
}],
|
||||
legend: [],
|
||||
};
|
||||
},
|
||||
setRowControlsListener(fn) { module._listener = fn; },
|
||||
};
|
||||
mgr.register(module);
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
assert.equal(typeof module._listener, 'function', 'the manager installed its listener');
|
||||
|
||||
const controls = container
|
||||
.querySelector('[data-layer-id="satellites"]')
|
||||
.querySelector('.data-toggle-controls');
|
||||
const chip = collectByClass(controls, 'data-toggle-chip')[0];
|
||||
assert.equal(chip.textContent, 'DENSE ···');
|
||||
assert.equal(chip.disabled, true);
|
||||
assert.equal(chip.attributes['aria-busy'], 'true');
|
||||
assert.equal(chip.attributes['aria-pressed'], 'false', 'busy is never reported as active');
|
||||
assert.equal(chip.className.includes('chip-loading'), true);
|
||||
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(writes, 0, 'a disabled chip is inert');
|
||||
|
||||
// The layer settles and pushes its own refresh — no panel poll involved.
|
||||
settled = true;
|
||||
module._listener();
|
||||
mgr._layerPanel._flushRowControlsRefresh();
|
||||
assert.equal(chip.textContent, 'DENSE');
|
||||
assert.equal(chip.disabled, false);
|
||||
assert.equal(chip.attributes['aria-pressed'], 'true');
|
||||
assert.equal(chip.attributes['aria-busy'], 'false');
|
||||
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(writes, 1, 'the settled chip writes again');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('a layer that surrenders its row controls hides the block entirely', async () => {
|
||||
// Space Missions borrows the satellite layer with showPoints:false; the row
|
||||
// must not advertise a legend for an empty sky or offer a chip whose write
|
||||
// the dependency owner will silently revert.
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const mgr = new DataLayerManager({});
|
||||
let surrendered = false;
|
||||
const layer = makeRowControlLayer();
|
||||
const inner = layer.module.getRowControls;
|
||||
layer.module.getRowControls = () => (surrendered ? { chips: [], legend: [] } : inner());
|
||||
mgr.register(layer.module);
|
||||
const container = makeControlElement();
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const controls = container
|
||||
.querySelector('[data-layer-id="satellites"]')
|
||||
.querySelector('.data-toggle-controls');
|
||||
assert.equal(controls.hidden, false);
|
||||
assert.equal(collectByClass(controls, 'data-toggle-chip').length, 1);
|
||||
|
||||
surrendered = true;
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(controls.hidden, true);
|
||||
assert.equal(collectByClass(controls, 'data-toggle-chip').length, 0,
|
||||
'the chip is removed, not merely hidden behind a style');
|
||||
assert.equal(collectByClass(controls, 'data-toggle-legend-item').length, 0);
|
||||
|
||||
surrendered = false;
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(controls.hidden, false, 'the row returns when the owner releases it');
|
||||
assert.equal(collectByClass(controls, 'data-toggle-chip').length, 1);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('layer metadata shows a guidance prompt without reporting it as a fault', () => {
|
||||
const mgr = new DataLayerManager({});
|
||||
const text = mgr._buildMetaText({
|
||||
@@ -3283,207 +2668,6 @@ test('layer metadata shows a guidance prompt without reporting it as a fault', (
|
||||
assert.doesNotMatch(text, /UNAVAILABLE|DEGRADED/);
|
||||
});
|
||||
|
||||
|
||||
test('panel remount releases old listeners and destruction revokes retained controls', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement, activeElement: null };
|
||||
const manager = new DataLayerManager({});
|
||||
const layer = makeSlowLayer('lifecycle-panel', { updateInterval: -1 });
|
||||
let rowListener;
|
||||
layer.module.getRowControls = () => ({ chips: [] });
|
||||
layer.module.setRowControlsListener = (listener) => { rowListener = listener; };
|
||||
manager.register(layer.module);
|
||||
try {
|
||||
const first = makeControlElement();
|
||||
manager.buildTogglePanel(first);
|
||||
const oldButton = first.querySelector('.data-toggle-btn');
|
||||
const retainedClick = oldButton.listeners.click;
|
||||
const second = makeControlElement();
|
||||
manager.buildTogglePanel(second);
|
||||
assert.equal(oldButton.listeners.click, undefined);
|
||||
await retainedClick();
|
||||
assert.equal(layer.calls.enable, 0, 'a revoked generation cannot issue actions');
|
||||
const currentButton = second.querySelector('.data-toggle-btn');
|
||||
assert.equal(typeof currentButton.listeners.click, 'function');
|
||||
assert.equal(typeof rowListener, 'function');
|
||||
await manager.destroyAll();
|
||||
assert.equal(currentButton.listeners.click, undefined);
|
||||
assert.equal(rowListener, null);
|
||||
} finally {
|
||||
await manager.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('row action chips use live disabled state and descriptive counts without writing parameters', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
let calls = 0, blocked = false;
|
||||
layer.module.getStats = () => ({ count: 3, countLabel: '3 nearby' });
|
||||
layer.module.getRowControls = () => ({ chips: [{ id: 'find', label: 'SHOW NEAREST', disabled: blocked, onClick: () => calls++ }] });
|
||||
layer.module.setParams = () => { throw new Error('navigation must not write persistent params'); };
|
||||
mgr.register(layer.module);
|
||||
const container = makeControlElement();
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
await mgr.setEnabled('satellites', true);
|
||||
const row = container.querySelector('[data-layer-id="satellites"]');
|
||||
assert.equal(row.querySelector('.data-count').textContent, '3 nearby');
|
||||
const controls = row.querySelector('.data-toggle-controls');
|
||||
const chip = collectByClass(controls, 'data-toggle-chip')[0];
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(calls, 1);
|
||||
blocked = true;
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(calls, 1, 'live disabled descriptor wins before row repaint');
|
||||
blocked = false;
|
||||
await mgr.setEnabled('satellites', false);
|
||||
controls.listeners.click({ target: chip });
|
||||
assert.equal(calls, 1, 'disabled layer cannot navigate');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
for (const scheduler of ['animation frame', 'timeout']) {
|
||||
test(`row notifications coalesce with ${scheduler} and stop after destroy`, async (t) => {
|
||||
t.mock.timers.enable({ apis: ['setTimeout'] });
|
||||
const frames = new Map();
|
||||
let nextFrame = 0;
|
||||
const originalRaf = globalThis.requestAnimationFrame;
|
||||
const originalCancel = globalThis.cancelAnimationFrame;
|
||||
globalThis.requestAnimationFrame = scheduler === 'animation frame'
|
||||
? (callback) => { frames.set(++nextFrame, callback); return nextFrame; }
|
||||
: undefined;
|
||||
globalThis.cancelAnimationFrame = (id) => frames.delete(id);
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement };
|
||||
const manager = new DataLayerManager({});
|
||||
const layer = makeSlowLayer('wind', { updateInterval: -1 });
|
||||
let notify;
|
||||
layer.module.getRowControls = () => ({ chips: [] });
|
||||
layer.module.setRowControlsListener = (listener) => { if (listener) notify = listener; };
|
||||
manager.register(layer.module);
|
||||
try {
|
||||
manager.buildTogglePanel(makeControlElement());
|
||||
const panel = manager._layerPanel;
|
||||
let refreshes = 0;
|
||||
const refresh = panel._refreshTogglePanel.bind(panel);
|
||||
panel._refreshTogglePanel = () => { refreshes++; refresh(); };
|
||||
for (let i = 0; i < 10; i++) notify();
|
||||
assert.equal(refreshes, 0, 'notifications defer refresh');
|
||||
if (scheduler === 'animation frame') assert.equal(frames.size, 1);
|
||||
panel._flushRowControlsRefresh();
|
||||
assert.equal(refreshes, 1);
|
||||
panel._flushRowControlsRefresh();
|
||||
t.mock.timers.tick(0);
|
||||
assert.equal(frames.size, 0, 'flush cancels the pending frame');
|
||||
assert.equal(refreshes, 1, 'flush does not leave duplicate work');
|
||||
notify();
|
||||
notify();
|
||||
if (scheduler === 'animation frame') {
|
||||
const [id, callback] = frames.entries().next().value;
|
||||
frames.delete(id);
|
||||
callback();
|
||||
} else t.mock.timers.tick(0);
|
||||
assert.equal(refreshes, 2, 'scheduled callback refreshes once');
|
||||
notify();
|
||||
panel.destroy();
|
||||
assert.equal(frames.size, 0, 'destroy cancels pending work');
|
||||
notify();
|
||||
panel._flushRowControlsRefresh();
|
||||
t.mock.timers.tick(0);
|
||||
assert.equal(refreshes, 2, 'retained notifications after destroy are inert');
|
||||
} finally {
|
||||
await manager.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
if (originalRaf === undefined) delete globalThis.requestAnimationFrame;
|
||||
else globalThis.requestAnimationFrame = originalRaf;
|
||||
if (originalCancel === undefined) delete globalThis.cancelAnimationFrame;
|
||||
else globalThis.cancelAnimationFrame = originalCancel;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
test('row info and legends reconcile in place while chips retain focus and order', async () => {
|
||||
const originalDocument = globalThis.document;
|
||||
globalThis.document = { createElement: makeControlElement, activeElement: null };
|
||||
const manager = new DataLayerManager({});
|
||||
const layer = makeSlowLayer('wind', { updateInterval: -1 });
|
||||
let controls = {
|
||||
chips: [{ id: 'one', label: 'One' }],
|
||||
legend: [{ label: 'Low', color: '#0000ff', count: 1, blurb: 'Low values' }],
|
||||
info: 'Forecast',
|
||||
infoTitle: 'Source time',
|
||||
};
|
||||
layer.module.getRowControls = () => controls;
|
||||
manager.register(layer.module);
|
||||
try {
|
||||
const container = makeControlElement();
|
||||
manager.buildTogglePanel(container);
|
||||
await manager.setEnabled('wind', true);
|
||||
const row = container.querySelector('.data-toggle-controls');
|
||||
const chip = row.children[0];
|
||||
let legend = row.children[1];
|
||||
const info = row.children[2];
|
||||
chip.focus();
|
||||
let writes = 0;
|
||||
for (const key of ['textContent', 'title']) {
|
||||
let value = info[key];
|
||||
Object.defineProperty(info, key, {
|
||||
get: () => value,
|
||||
set: (next) => { writes++; value = next; },
|
||||
});
|
||||
}
|
||||
controls = structuredClone(controls);
|
||||
manager._refreshTogglePanel();
|
||||
assert.equal(row.children[1], legend);
|
||||
assert.equal(row.children[2], info);
|
||||
assert.equal(writes, 0);
|
||||
for (const change of [{ label: 'High' }, { color: '#ff0000' }, { count: 2 }, { blurb: 'High values' }]) {
|
||||
Object.assign(controls.legend[0], change);
|
||||
manager._refreshTogglePanel();
|
||||
assert.notEqual(row.children[1], legend);
|
||||
legend = row.children[1];
|
||||
assert.equal(row.children[2], info);
|
||||
assert.equal(globalThis.document.activeElement, chip);
|
||||
}
|
||||
controls.info = '<img onerror=alert(1)>';
|
||||
controls.infoTitle = '';
|
||||
controls.chips.push({ id: 'two', label: 'Two' });
|
||||
manager._refreshTogglePanel();
|
||||
assert.deepEqual(row.children.map(node => node.className), [
|
||||
'data-toggle-chip chip-idle', 'data-toggle-chip chip-idle',
|
||||
'data-toggle-legend-item', 'data-toggle-controls-info',
|
||||
]);
|
||||
assert.equal(row.children[2], legend);
|
||||
assert.equal(row.children[3], info);
|
||||
assert.equal(info.textContent, controls.info);
|
||||
assert.equal(info.title, '');
|
||||
assert.equal(info.children.length, 0, 'info remains plain text');
|
||||
controls = { chips: [], legend: [] };
|
||||
manager._refreshTogglePanel();
|
||||
assert.equal(row.hidden, true);
|
||||
assert.equal(info.hidden, true);
|
||||
assert.deepEqual(row.children, [info]);
|
||||
controls = { info: 'Restored', legend: [{ label: 'New', color: '#ffffff' }] };
|
||||
manager._refreshTogglePanel();
|
||||
assert.equal(row.children.at(-1), info);
|
||||
assert.equal(info.hidden, false);
|
||||
assert.equal(info.textContent, 'Restored');
|
||||
} finally {
|
||||
await manager.destroyAll();
|
||||
if (originalDocument === undefined) delete globalThis.document;
|
||||
else globalThis.document = originalDocument;
|
||||
}
|
||||
});
|
||||
|
||||
test('refreshLayerStats reaches presentation through the bare lifecycle', async () => {
|
||||
const { LayerLifecycle } = await import('./lifecycle.js');
|
||||
const lifecycle = new LayerLifecycle({});
|
||||
|
||||
@@ -0,0 +1,931 @@
|
||||
// src/data/managerPanel.test.mjs — the manager's layer rows, rendered into a
|
||||
// real DOM: toggles keep keyboard focus through transitions, row chips write
|
||||
// the params they declare, and legends, info lines and lists follow the layer.
|
||||
import '../testSupport/registerDom.mjs';
|
||||
import { test } from 'node:test';
|
||||
import assert from 'node:assert/strict';
|
||||
import { DataLayerManager } from './manager.js';
|
||||
import { assertSameNode } from '../testSupport/domAssert.mjs';
|
||||
|
||||
/** Build a mock layer whose init/update resolve on the next microtask. */
|
||||
function makeSlowLayer(id, { updateInterval = 1000 } = {}) {
|
||||
const calls = { enable: 0, disable: 0, update: 0, init: 0 };
|
||||
return {
|
||||
calls,
|
||||
module: {
|
||||
id,
|
||||
name: id,
|
||||
icon: '',
|
||||
source: 'test',
|
||||
updateInterval,
|
||||
async init() {
|
||||
calls.init++;
|
||||
await Promise.resolve();
|
||||
},
|
||||
enable() {
|
||||
calls.enable++;
|
||||
},
|
||||
disable() {
|
||||
calls.disable++;
|
||||
},
|
||||
async update() {
|
||||
calls.update++;
|
||||
await Promise.resolve();
|
||||
},
|
||||
getStats() {
|
||||
return { count: 0, lastUpdate: null };
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/** A layer that declares a two-state chip plus a legend, like satellites. */
|
||||
function makeRowControlLayer() {
|
||||
let mode = 'core';
|
||||
return {
|
||||
get mode() {
|
||||
return mode;
|
||||
},
|
||||
module: {
|
||||
id: 'satellites',
|
||||
name: 'Satellites',
|
||||
icon: '',
|
||||
source: 'CelesTrak',
|
||||
updateInterval: -1,
|
||||
async init() {},
|
||||
enable() {},
|
||||
disable() {},
|
||||
async update() {},
|
||||
getStats() {
|
||||
return { count: 3, lastUpdate: Date.now() };
|
||||
},
|
||||
setParams(params) {
|
||||
if (params.catalog) mode = params.catalog;
|
||||
},
|
||||
getParams() {
|
||||
return { catalog: mode };
|
||||
},
|
||||
getRowControls() {
|
||||
const dense = mode === 'dense';
|
||||
return {
|
||||
chips: [
|
||||
{
|
||||
id: 'catalog',
|
||||
label: 'DENSE',
|
||||
active: dense,
|
||||
title: 'toggle the dense catalog',
|
||||
params: { catalog: dense ? 'core' : 'dense' },
|
||||
},
|
||||
],
|
||||
legend: [
|
||||
{
|
||||
klass: 'nav',
|
||||
label: 'NAV',
|
||||
color: '#4fd8ff',
|
||||
blurb: 'GNSS',
|
||||
count: 2,
|
||||
},
|
||||
{
|
||||
klass: 'geo',
|
||||
label: 'GEO',
|
||||
color: '#c89bff',
|
||||
blurb: 'belt',
|
||||
count: 5,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function panelHost(t) {
|
||||
document.body.replaceChildren();
|
||||
const container = document.body.appendChild(document.createElement('div'));
|
||||
container.id = 'data-toggles';
|
||||
t.after(() => document.body.replaceChildren());
|
||||
return container;
|
||||
}
|
||||
|
||||
const row = (container, id) =>
|
||||
container.querySelector(`[data-layer-id="${id}"]`);
|
||||
const chipsIn = (node) => [...node.querySelectorAll('.data-toggle-chip')];
|
||||
const macrotask = () => new Promise((resolve) => setTimeout(resolve, 0));
|
||||
|
||||
async function waitFor(predicate, label) {
|
||||
for (let attempt = 0; attempt < 50; attempt += 1) {
|
||||
if (predicate()) return;
|
||||
await macrotask();
|
||||
}
|
||||
assert.fail(`timed out waiting for ${label}`);
|
||||
}
|
||||
|
||||
test('renders ordinary layer rows without recreating a panel-hidden coordinator', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
const ordinary = makeSlowLayer('flights', { updateInterval: -1 });
|
||||
const coordinator = makeSlowLayer('military-awareness', {
|
||||
updateInterval: -1,
|
||||
});
|
||||
coordinator.module.showInTogglePanel = false;
|
||||
mgr.register(ordinary.module);
|
||||
mgr.register(coordinator.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.ok(row(container, 'flights'));
|
||||
assert.ok(!row(container, 'military-awareness'));
|
||||
assert.equal(await mgr.setEnabled('military-awareness', true), true);
|
||||
mgr._refreshTogglePanel();
|
||||
assert.ok(!row(container, 'military-awareness'));
|
||||
assert.equal(
|
||||
mgr.getAll().find(({ id }) => id === 'military-awareness').enabled,
|
||||
true,
|
||||
);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard focus survives Data Layer enabling and disabling transitions', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
let releaseEnable;
|
||||
let releaseDisable;
|
||||
const calls = { enable: 0, disable: 0 };
|
||||
mgr.register({
|
||||
id: 'focus-layer',
|
||||
name: 'Focus layer',
|
||||
icon: '',
|
||||
source: 'Local focus fixture',
|
||||
updateInterval: -1,
|
||||
init() {},
|
||||
enable() {
|
||||
calls.enable += 1;
|
||||
return new Promise((resolve) => {
|
||||
releaseEnable = resolve;
|
||||
});
|
||||
},
|
||||
disable() {
|
||||
calls.disable += 1;
|
||||
return new Promise((resolve) => {
|
||||
releaseDisable = resolve;
|
||||
});
|
||||
},
|
||||
update() {},
|
||||
destroy() {},
|
||||
getStats() {
|
||||
return { count: 1, lastUpdate: Date.now() };
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
const button = row(container, 'focus-layer').querySelector(
|
||||
'.data-toggle-btn',
|
||||
);
|
||||
button.focus();
|
||||
|
||||
button.click();
|
||||
await waitFor(
|
||||
() => typeof releaseEnable === 'function',
|
||||
'enable transition',
|
||||
);
|
||||
assertSameNode(document.activeElement, button);
|
||||
assert.equal(button.disabled, false, 'ENABLING never uses native disabled');
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'true');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'true');
|
||||
assert.equal(button.textContent, 'ENABLING');
|
||||
button.click();
|
||||
await macrotask();
|
||||
assert.equal(calls.enable, 1, 'repeat activation is inert while enabling');
|
||||
assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 1);
|
||||
|
||||
releaseEnable();
|
||||
await waitFor(
|
||||
() =>
|
||||
mgr.isEnabled('focus-layer') &&
|
||||
button.getAttribute('aria-busy') === 'false',
|
||||
'enabled',
|
||||
);
|
||||
assertSameNode(document.activeElement, button);
|
||||
assertSameNode(
|
||||
row(container, 'focus-layer').querySelector('.data-toggle-btn'),
|
||||
button,
|
||||
'the SAME button node is reused across the transition',
|
||||
);
|
||||
assert.equal(button.disabled, false);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
|
||||
button.click();
|
||||
await waitFor(
|
||||
() => typeof releaseDisable === 'function',
|
||||
'disable transition',
|
||||
);
|
||||
assertSameNode(document.activeElement, button);
|
||||
assert.equal(
|
||||
button.disabled,
|
||||
false,
|
||||
'DISABLING never uses native disabled',
|
||||
);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'true');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'true');
|
||||
assert.equal(button.textContent, 'DISABLING');
|
||||
button.click();
|
||||
await macrotask();
|
||||
assert.equal(
|
||||
calls.disable,
|
||||
1,
|
||||
'repeat activation is inert while disabling',
|
||||
);
|
||||
assert.equal(mgr.layers.get('focus-layer').visibilityIntentEpoch, 2);
|
||||
|
||||
releaseDisable();
|
||||
await waitFor(
|
||||
() =>
|
||||
!mgr.isEnabled('focus-layer') &&
|
||||
button.getAttribute('aria-busy') === 'false',
|
||||
'disabled',
|
||||
);
|
||||
assertSameNode(document.activeElement, button);
|
||||
assert.equal(button.disabled, false);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
} finally {
|
||||
releaseEnable?.();
|
||||
releaseDisable?.();
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('a failed Data Layer transition clears busy state without losing keyboard focus', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const originalWarn = console.warn;
|
||||
console.warn = () => {};
|
||||
const mgr = new DataLayerManager({});
|
||||
let rejectEnable;
|
||||
let enableCalls = 0;
|
||||
mgr.register({
|
||||
id: 'focus-failure-layer',
|
||||
name: 'Focus failure layer',
|
||||
icon: '',
|
||||
source: 'Local focus fixture',
|
||||
updateInterval: -1,
|
||||
init() {},
|
||||
enable() {
|
||||
enableCalls += 1;
|
||||
if (enableCalls > 1) return true;
|
||||
return new Promise((resolve, reject) => {
|
||||
rejectEnable = reject;
|
||||
});
|
||||
},
|
||||
disable() {
|
||||
return true;
|
||||
},
|
||||
update() {},
|
||||
destroy() {},
|
||||
getStats() {
|
||||
return { count: 0, lastUpdate: null };
|
||||
},
|
||||
});
|
||||
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
const button = row(container, 'focus-failure-layer').querySelector(
|
||||
'.data-toggle-btn',
|
||||
);
|
||||
button.focus();
|
||||
|
||||
button.click();
|
||||
await waitFor(
|
||||
() => typeof rejectEnable === 'function',
|
||||
'enable transition',
|
||||
);
|
||||
assertSameNode(document.activeElement, button);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'true');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'true');
|
||||
|
||||
rejectEnable(new Error('QA enable rejected'));
|
||||
await waitFor(
|
||||
() => button.getAttribute('aria-busy') === 'false',
|
||||
'failure settlement',
|
||||
);
|
||||
assertSameNode(
|
||||
document.activeElement,
|
||||
button,
|
||||
'failure settlement preserves focus',
|
||||
);
|
||||
assert.equal(button.disabled, false);
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
assert.equal(button.textContent, 'OFF');
|
||||
assert.deepEqual(mgr.getLayerLifecycleState('focus-failure-layer'), {
|
||||
enabled: false,
|
||||
lifecycleState: 'disabled',
|
||||
uncertain: false,
|
||||
});
|
||||
|
||||
button.click();
|
||||
await waitFor(() => mgr.isEnabled('focus-failure-layer'), 'retry');
|
||||
assert.equal(enableCalls, 2, 'the settled control accepts a later retry');
|
||||
assertSameNode(document.activeElement, button);
|
||||
} finally {
|
||||
rejectEnable?.(new Error('test cleanup'));
|
||||
console.warn = originalWarn;
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('a layer that declares row controls renders its chips and color legend', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
const controls = row(container, 'satellites').querySelector(
|
||||
'.data-toggle-controls',
|
||||
);
|
||||
assert.ok(controls, 'the row gained a controls block');
|
||||
// Disabled layers stay quiet — no chip, no legend.
|
||||
assert.equal(controls.hidden, true);
|
||||
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(controls.hidden, false);
|
||||
|
||||
const chips = chipsIn(controls);
|
||||
assert.equal(chips.length, 1);
|
||||
assert.equal(chips[0].textContent, 'DENSE');
|
||||
assert.equal(chips[0].dataset.chipId, 'catalog');
|
||||
assert.equal(chips[0].getAttribute('aria-pressed'), 'false');
|
||||
assert.equal(chips[0].title, 'toggle the dense catalog');
|
||||
|
||||
const swatches = [
|
||||
...controls.querySelectorAll('.data-toggle-legend-swatch'),
|
||||
];
|
||||
assert.deepEqual(
|
||||
swatches.map((s) => s.style.background),
|
||||
['#4fd8ff', '#c89bff'],
|
||||
'each legend swatch is painted the exact class color',
|
||||
);
|
||||
const items = [...controls.querySelectorAll('.data-toggle-legend-item')];
|
||||
assert.deepEqual(
|
||||
items.map((i) => i.title),
|
||||
['GNSS', 'belt'],
|
||||
);
|
||||
assert.deepEqual(
|
||||
items.map((i) => i.textContent),
|
||||
['NAV 2', 'GEO 5'],
|
||||
);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('clicking a row chip applies the params it declared and re-renders', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const controls = row(container, 'satellites').querySelector(
|
||||
'.data-toggle-controls',
|
||||
);
|
||||
const chip = chipsIn(controls)[0];
|
||||
|
||||
chip.click();
|
||||
assert.equal(layer.mode, 'dense', 'the chip wrote the params it declared');
|
||||
// setLayerParams refreshes the panel, so the chip already reflects the flip.
|
||||
assert.equal(chip.getAttribute('aria-pressed'), 'true');
|
||||
assert.equal(chip.classList.contains('active'), true);
|
||||
|
||||
chip.click();
|
||||
assert.equal(
|
||||
layer.mode,
|
||||
'core',
|
||||
'the chip toggles back rather than latching',
|
||||
);
|
||||
assert.equal(chip.getAttribute('aria-pressed'), 'false');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('a click outside a chip is inert, and a throwing layer cannot blank the panel', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const warn = console.warn;
|
||||
console.warn = () => {};
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const controls = row(container, 'satellites').querySelector(
|
||||
'.data-toggle-controls',
|
||||
);
|
||||
|
||||
controls.querySelector('.data-toggle-legend-item').click();
|
||||
assert.equal(layer.mode, 'core', 'the legend is not a control');
|
||||
controls.click();
|
||||
assert.equal(layer.mode, 'core');
|
||||
|
||||
layer.module.getRowControls = () => {
|
||||
throw new Error('boom');
|
||||
};
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(
|
||||
controls.hidden,
|
||||
true,
|
||||
'a throwing layer collapses to an empty block',
|
||||
);
|
||||
assert.ok(row(container, 'satellites'), 'the row itself survives');
|
||||
} finally {
|
||||
console.warn = warn;
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('keyboard focus on a chip survives the refresh its own click triggers', async (t) => {
|
||||
// The panel repaints on EVERY refresh, including the one the chip's own
|
||||
// click triggers. Rebuilding the button would blur it every time, so a
|
||||
// keyboard user loses their place on activation.
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const controls = row(container, 'satellites').querySelector(
|
||||
'.data-toggle-controls',
|
||||
);
|
||||
const chip = chipsIn(controls)[0];
|
||||
|
||||
chip.focus();
|
||||
assertSameNode(document.activeElement, chip, 'the chip starts focused');
|
||||
|
||||
chip.click();
|
||||
assertSameNode(
|
||||
document.activeElement,
|
||||
chip,
|
||||
'activating the chip does not blur it',
|
||||
);
|
||||
assertSameNode(
|
||||
chipsIn(controls)[0],
|
||||
chip,
|
||||
'the SAME button node is reused across the click-driven refresh',
|
||||
);
|
||||
|
||||
mgr._refreshTogglePanel();
|
||||
mgr._refreshTogglePanel();
|
||||
assertSameNode(
|
||||
document.activeElement,
|
||||
chip,
|
||||
'repeated refreshes never steal focus',
|
||||
);
|
||||
assert.equal(
|
||||
controls.querySelectorAll('.data-toggle-legend-item').length,
|
||||
2,
|
||||
);
|
||||
|
||||
// ...and a chip that genuinely goes away is removed from the row.
|
||||
layer.module.getRowControls = () => ({ chips: [], legend: [] });
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(chip.isConnected, false);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('an async layer pushes its own row refresh, and a busy chip refuses clicks', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
let settled = false;
|
||||
let writes = 0;
|
||||
const module = {
|
||||
id: 'satellites',
|
||||
name: 'Satellites',
|
||||
icon: '',
|
||||
source: 'CelesTrak',
|
||||
updateInterval: -1,
|
||||
async init() {},
|
||||
enable() {},
|
||||
disable() {},
|
||||
async update() {},
|
||||
getStats() {
|
||||
return { count: 1, lastUpdate: Date.now() };
|
||||
},
|
||||
setParams() {
|
||||
writes += 1;
|
||||
},
|
||||
getRowControls() {
|
||||
return {
|
||||
chips: [
|
||||
{
|
||||
id: 'catalog',
|
||||
label: settled ? 'DENSE' : 'DENSE ···',
|
||||
active: settled,
|
||||
busy: !settled,
|
||||
disabled: !settled,
|
||||
state: settled ? 'active' : 'loading',
|
||||
title: 'x',
|
||||
params: { catalog: 'core' },
|
||||
},
|
||||
],
|
||||
legend: [],
|
||||
};
|
||||
},
|
||||
setRowControlsListener(fn) {
|
||||
module._listener = fn;
|
||||
},
|
||||
};
|
||||
mgr.register(module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
assert.equal(
|
||||
typeof module._listener,
|
||||
'function',
|
||||
'the manager installed its listener',
|
||||
);
|
||||
|
||||
const controls = row(container, 'satellites').querySelector(
|
||||
'.data-toggle-controls',
|
||||
);
|
||||
const chip = chipsIn(controls)[0];
|
||||
assert.equal(chip.textContent, 'DENSE ···');
|
||||
assert.equal(chip.disabled, true);
|
||||
assert.equal(chip.getAttribute('aria-busy'), 'true');
|
||||
assert.equal(
|
||||
chip.getAttribute('aria-pressed'),
|
||||
'false',
|
||||
'busy is never reported as active',
|
||||
);
|
||||
assert.equal(chip.classList.contains('chip-loading'), true);
|
||||
|
||||
chip.click();
|
||||
assert.equal(writes, 0, 'a disabled chip is inert');
|
||||
|
||||
// The layer settles and pushes its own refresh — no panel poll involved.
|
||||
settled = true;
|
||||
module._listener();
|
||||
mgr._layerPanel._flushRowControlsRefresh();
|
||||
assert.equal(chip.textContent, 'DENSE');
|
||||
assert.equal(chip.disabled, false);
|
||||
assert.equal(chip.getAttribute('aria-pressed'), 'true');
|
||||
assert.equal(chip.getAttribute('aria-busy'), 'false');
|
||||
|
||||
chip.click();
|
||||
assert.equal(writes, 1, 'the settled chip writes again');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('a layer that surrenders its row controls hides the block entirely', async (t) => {
|
||||
// Space Missions borrows the satellite layer with showPoints:false; the row
|
||||
// must not advertise a legend for an empty sky or offer a chip whose write
|
||||
// the dependency owner will silently revert.
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
let surrendered = false;
|
||||
const layer = makeRowControlLayer();
|
||||
const inner = layer.module.getRowControls;
|
||||
layer.module.getRowControls = () =>
|
||||
surrendered ? { chips: [], legend: [] } : inner();
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const controls = row(container, 'satellites').querySelector(
|
||||
'.data-toggle-controls',
|
||||
);
|
||||
assert.equal(controls.hidden, false);
|
||||
assert.equal(chipsIn(controls).length, 1);
|
||||
|
||||
surrendered = true;
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(controls.hidden, true);
|
||||
assert.equal(
|
||||
chipsIn(controls).length,
|
||||
0,
|
||||
'the chip is removed, not merely hidden behind a style',
|
||||
);
|
||||
assert.equal(
|
||||
controls.querySelectorAll('.data-toggle-legend-item').length,
|
||||
0,
|
||||
);
|
||||
|
||||
surrendered = false;
|
||||
mgr._refreshTogglePanel();
|
||||
assert.equal(
|
||||
controls.hidden,
|
||||
false,
|
||||
'the row returns when the owner releases it',
|
||||
);
|
||||
assert.equal(chipsIn(controls).length, 1);
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('panel remount releases old listeners and destruction revokes retained controls', async (t) => {
|
||||
panelHost(t);
|
||||
const manager = new DataLayerManager({});
|
||||
const layer = makeSlowLayer('lifecycle-panel', { updateInterval: -1 });
|
||||
let rowListener;
|
||||
layer.module.getRowControls = () => ({ chips: [] });
|
||||
layer.module.setRowControlsListener = (listener) => {
|
||||
rowListener = listener;
|
||||
};
|
||||
manager.register(layer.module);
|
||||
try {
|
||||
const first = document.body.appendChild(document.createElement('div'));
|
||||
manager.buildTogglePanel(first);
|
||||
const oldButton = first.querySelector('.data-toggle-btn');
|
||||
const second = document.body.appendChild(document.createElement('div'));
|
||||
manager.buildTogglePanel(second);
|
||||
assert.equal(first.children.length, 0, 'the old container is emptied');
|
||||
oldButton.click();
|
||||
await macrotask();
|
||||
assert.equal(
|
||||
layer.calls.enable,
|
||||
0,
|
||||
'a revoked generation cannot issue actions',
|
||||
);
|
||||
const currentButton = second.querySelector('.data-toggle-btn');
|
||||
assert.ok(currentButton);
|
||||
assert.equal(typeof rowListener, 'function');
|
||||
await manager.destroyAll();
|
||||
assert.equal(second.children.length, 0, 'destruction removes the rows');
|
||||
currentButton.click();
|
||||
await macrotask();
|
||||
assert.equal(
|
||||
layer.calls.enable,
|
||||
0,
|
||||
'a retained control cannot act after destruction',
|
||||
);
|
||||
assert.equal(rowListener, null);
|
||||
} finally {
|
||||
await manager.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('a retained chip from a remounted or destroyed panel writes nothing', async (t) => {
|
||||
panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
const first = document.body.appendChild(document.createElement('div'));
|
||||
mgr.buildTogglePanel(first);
|
||||
assert.equal(await mgr.setEnabled('satellites', true), true);
|
||||
const oldChip = chipsIn(first)[0];
|
||||
const second = document.body.appendChild(document.createElement('div'));
|
||||
mgr.buildTogglePanel(second);
|
||||
oldChip.click();
|
||||
assert.equal(
|
||||
layer.mode,
|
||||
'core',
|
||||
'a released generation cannot write params',
|
||||
);
|
||||
const chip = chipsIn(second)[0];
|
||||
mgr._layerPanel.destroy();
|
||||
chip.click();
|
||||
assert.equal(layer.mode, 'core', 'a destroyed panel cannot write params');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('a toggle that settles after a remount repaints the new row idle', async (t) => {
|
||||
panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
let releaseEnable;
|
||||
mgr.register({
|
||||
id: 'remount-layer',
|
||||
name: 'Remount layer',
|
||||
icon: '',
|
||||
source: 'Local fixture',
|
||||
updateInterval: -1,
|
||||
init() {},
|
||||
enable() {
|
||||
return new Promise((resolve) => {
|
||||
releaseEnable = resolve;
|
||||
});
|
||||
},
|
||||
disable() {},
|
||||
update() {},
|
||||
destroy() {},
|
||||
getStats() {
|
||||
return { count: 1, lastUpdate: Date.now() };
|
||||
},
|
||||
});
|
||||
try {
|
||||
const first = document.body.appendChild(document.createElement('div'));
|
||||
mgr.buildTogglePanel(first);
|
||||
first.querySelector('.data-toggle-btn').click();
|
||||
await waitFor(
|
||||
() => typeof releaseEnable === 'function',
|
||||
'enable transition',
|
||||
);
|
||||
const second = document.body.appendChild(document.createElement('div'));
|
||||
mgr.buildTogglePanel(second);
|
||||
releaseEnable();
|
||||
await waitFor(() => mgr.isEnabled('remount-layer'), 'enabled');
|
||||
await macrotask();
|
||||
const button = second.querySelector('.data-toggle-btn');
|
||||
assert.equal(button.getAttribute('aria-busy'), 'false');
|
||||
assert.equal(button.getAttribute('aria-disabled'), 'false');
|
||||
assert.equal(button.textContent, 'ON');
|
||||
} finally {
|
||||
releaseEnable?.();
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
test('row action chips use live disabled state and descriptive counts without writing parameters', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const mgr = new DataLayerManager({});
|
||||
const layer = makeRowControlLayer();
|
||||
let calls = 0,
|
||||
blocked = false;
|
||||
layer.module.getStats = () => ({ count: 3, countLabel: '3 nearby' });
|
||||
layer.module.getRowControls = () => ({
|
||||
chips: [
|
||||
{
|
||||
id: 'find',
|
||||
label: 'SHOW NEAREST',
|
||||
disabled: blocked,
|
||||
onClick: () => calls++,
|
||||
},
|
||||
],
|
||||
});
|
||||
layer.module.setParams = () => {
|
||||
throw new Error('navigation must not write persistent params');
|
||||
};
|
||||
mgr.register(layer.module);
|
||||
try {
|
||||
mgr.buildTogglePanel(container);
|
||||
await mgr.setEnabled('satellites', true);
|
||||
const layerRow = row(container, 'satellites');
|
||||
assert.equal(layerRow.querySelector('.data-count').textContent, '3 nearby');
|
||||
const chip = chipsIn(layerRow)[0];
|
||||
chip.click();
|
||||
assert.equal(calls, 1);
|
||||
blocked = true;
|
||||
chip.click();
|
||||
assert.equal(calls, 1, 'live disabled descriptor wins before row repaint');
|
||||
blocked = false;
|
||||
await mgr.setEnabled('satellites', false);
|
||||
assert.equal(chip.isConnected, false, 'the off row drops its chips');
|
||||
mgr._layerPanel._selectChip('satellites', 'find');
|
||||
assert.equal(calls, 1, 'disabled layer cannot navigate');
|
||||
} finally {
|
||||
await mgr.destroyAll();
|
||||
}
|
||||
});
|
||||
|
||||
for (const scheduler of ['animation frame', 'timeout']) {
|
||||
test(`row notifications coalesce with ${scheduler} and stop after destroy`, async (t) => {
|
||||
const container = panelHost(t);
|
||||
const frames = new Map();
|
||||
let nextFrame = 0;
|
||||
const originalRaf = globalThis.requestAnimationFrame;
|
||||
const originalCancel = globalThis.cancelAnimationFrame;
|
||||
globalThis.requestAnimationFrame =
|
||||
scheduler === 'animation frame'
|
||||
? (callback) => {
|
||||
frames.set(++nextFrame, callback);
|
||||
return nextFrame;
|
||||
}
|
||||
: undefined;
|
||||
globalThis.cancelAnimationFrame = (id) => frames.delete(id);
|
||||
const manager = new DataLayerManager({});
|
||||
const layer = makeSlowLayer('wind', { updateInterval: -1 });
|
||||
let notify;
|
||||
layer.module.getRowControls = () => ({ chips: [] });
|
||||
layer.module.setRowControlsListener = (listener) => {
|
||||
if (listener) notify = listener;
|
||||
};
|
||||
manager.register(layer.module);
|
||||
try {
|
||||
manager.buildTogglePanel(container);
|
||||
const panel = manager._layerPanel;
|
||||
let refreshes = 0;
|
||||
const refresh = panel._refreshTogglePanel.bind(panel);
|
||||
panel._refreshTogglePanel = () => {
|
||||
refreshes++;
|
||||
refresh();
|
||||
};
|
||||
for (let i = 0; i < 10; i++) notify();
|
||||
assert.equal(refreshes, 0, 'notifications defer refresh');
|
||||
if (scheduler === 'animation frame') assert.equal(frames.size, 1);
|
||||
panel._flushRowControlsRefresh();
|
||||
assert.equal(refreshes, 1);
|
||||
panel._flushRowControlsRefresh();
|
||||
await macrotask();
|
||||
assert.equal(frames.size, 0, 'flush cancels the pending frame');
|
||||
assert.equal(refreshes, 1, 'flush does not leave duplicate work');
|
||||
notify();
|
||||
notify();
|
||||
if (scheduler === 'animation frame') {
|
||||
const [id, callback] = frames.entries().next().value;
|
||||
frames.delete(id);
|
||||
callback();
|
||||
} else await macrotask();
|
||||
assert.equal(refreshes, 2, 'scheduled callback refreshes once');
|
||||
notify();
|
||||
panel.destroy();
|
||||
assert.equal(frames.size, 0, 'destroy cancels pending work');
|
||||
notify();
|
||||
panel._flushRowControlsRefresh();
|
||||
await macrotask();
|
||||
assert.equal(
|
||||
refreshes,
|
||||
2,
|
||||
'retained notifications after destroy are inert',
|
||||
);
|
||||
} finally {
|
||||
await manager.destroyAll();
|
||||
globalThis.requestAnimationFrame = originalRaf;
|
||||
globalThis.cancelAnimationFrame = originalCancel;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
test('row info and legends reconcile in place while chips retain focus and order', async (t) => {
|
||||
const container = panelHost(t);
|
||||
const manager = new DataLayerManager({});
|
||||
const layer = makeSlowLayer('wind', { updateInterval: -1 });
|
||||
let controls = {
|
||||
chips: [{ id: 'one', label: 'One' }],
|
||||
legend: [{ label: 'Low', color: '#0000ff', count: 1, blurb: 'Low values' }],
|
||||
info: 'Forecast',
|
||||
infoTitle: 'Source time',
|
||||
};
|
||||
layer.module.getRowControls = () => controls;
|
||||
manager.register(layer.module);
|
||||
try {
|
||||
manager.buildTogglePanel(container);
|
||||
await manager.setEnabled('wind', true);
|
||||
const block = container.querySelector('.data-toggle-controls');
|
||||
const chip = block.children[0];
|
||||
const info = block.children[2];
|
||||
assert.equal(info.className, 'data-toggle-controls-info');
|
||||
assert.equal(info.textContent, 'Forecast');
|
||||
assert.equal(info.title, 'Source time');
|
||||
chip.focus();
|
||||
for (const change of [
|
||||
{ label: 'High' },
|
||||
{ color: '#ff0000' },
|
||||
{ count: 2 },
|
||||
{ blurb: 'High values' },
|
||||
]) {
|
||||
controls = structuredClone(controls);
|
||||
Object.assign(controls.legend[0], change);
|
||||
manager._refreshTogglePanel();
|
||||
assertSameNode(block.children[2], info);
|
||||
assertSameNode(document.activeElement, chip);
|
||||
}
|
||||
const legend = block.children[1];
|
||||
assert.equal(legend.title, 'High values');
|
||||
assert.equal(legend.textContent, 'High 2');
|
||||
assert.equal(legend.firstElementChild.style.background, '#ff0000');
|
||||
controls.info = '<img onerror=alert(1)>';
|
||||
controls.infoTitle = '';
|
||||
controls.chips.push({ id: 'two', label: 'Two' });
|
||||
manager._refreshTogglePanel();
|
||||
assert.deepEqual(
|
||||
[...block.children].map((node) => node.className),
|
||||
[
|
||||
'data-toggle-chip chip-idle',
|
||||
'data-toggle-chip chip-idle',
|
||||
'data-toggle-legend-item',
|
||||
'data-toggle-controls-info',
|
||||
],
|
||||
);
|
||||
assertSameNode(block.children[0], chip);
|
||||
assertSameNode(block.children[3], info);
|
||||
assert.equal(info.textContent, controls.info);
|
||||
assert.equal(info.title, '');
|
||||
assert.equal(info.children.length, 0, 'info remains plain text');
|
||||
controls = { chips: [], legend: [] };
|
||||
manager._refreshTogglePanel();
|
||||
assert.equal(block.hidden, true);
|
||||
assert.equal(info.hidden, true);
|
||||
assert.equal(block.children.length, 1);
|
||||
assertSameNode(block.children[0], info);
|
||||
controls = {
|
||||
info: 'Restored',
|
||||
legend: [{ label: 'New', color: '#ffffff' }],
|
||||
};
|
||||
manager._refreshTogglePanel();
|
||||
assertSameNode(block.lastElementChild, info);
|
||||
assert.equal(info.hidden, false);
|
||||
assert.equal(info.textContent, 'Restored');
|
||||
} finally {
|
||||
await manager.destroyAll();
|
||||
}
|
||||
});
|
||||
Reference in new issue
Block a user