Vito Sansevero
a997fc0bcd
- #/system/<section> renders the concept's System shell: section nav, settings layout and Save row with truthful status (D92); each section not delivered yet hands off to its legacy tools (D94). Overview's System card opens #/system/overview (Q12). - A module-level draft store saves browser, then host (expected_revision), then runtime; failed domains stay dirty, a stale revision is a conflict. - System row builders (setting, operation, section nav) on the scope. - openReviewDialog and backupNotice extracted from the scan review, which is now a thin caller with identical markup. - Overview images gain a "rated" count (images whose linked prompt is rated); the missing-files health check reports per source, so partial availability is visible.
215 lines
11 KiB
JavaScript
215 lines
11 KiB
JavaScript
// System controls (#249 System S2 Task 5): the concept's `setting()` (app.js 624–634, its toggles hydrated into Toolkit
|
||
// switches by `hydrateSwitches` 708–717), `operation()` (645–654) and `sectionNav()` (306–308) as DOM builders whose
|
||
// listeners live on the caller's scope.
|
||
const test = require('node:test');
|
||
const assert = require('node:assert/strict');
|
||
|
||
const controlsModule = import('../../web/js/workspace/system-controls.mjs');
|
||
const coreModule = import('../../web/js/shared/toolkit/core.js');
|
||
|
||
/** A minimal DOM whose elements count their live listeners (a listener's signal aborts it, as in a browser). */
|
||
function fakeDOM() {
|
||
const previous = global.document;
|
||
const elements = [];
|
||
class Element {
|
||
constructor(tag) {
|
||
this.tagName = tag.toUpperCase();
|
||
this.children = [];
|
||
this.attributes = {};
|
||
this.listeners = [];
|
||
this.dataset = {};
|
||
this.className = '';
|
||
this.id = '';
|
||
this.value = '';
|
||
this._text = '';
|
||
elements.push(this);
|
||
}
|
||
get textContent() { return this._text + this.children.map(child => child.textContent).join(''); }
|
||
set textContent(text) { this.children = []; this._text = String(text); }
|
||
append(...nodes) {
|
||
for (const node of nodes) {
|
||
const child = typeof node === 'string' ? Object.assign(new Element('#text'), { _text: node }) : node;
|
||
child.parentNode = this;
|
||
this.children.push(child);
|
||
}
|
||
}
|
||
replaceChildren(...nodes) { this.children = []; this._text = ''; this.append(...nodes); }
|
||
setAttribute(name, value) { this.attributes[name] = String(value); }
|
||
getAttribute(name) { return Object.hasOwn(this.attributes, name) ? this.attributes[name] : null; }
|
||
removeAttribute(name) { delete this.attributes[name]; }
|
||
addEventListener(type, callback, options = {}) {
|
||
if (options.signal?.aborted) return;
|
||
const entry = { type, callback };
|
||
this.listeners.push(entry);
|
||
options.signal?.addEventListener('abort', () => { this.listeners = this.listeners.filter(item => item !== entry); });
|
||
}
|
||
removeEventListener(type, callback) { this.listeners = this.listeners.filter(item => item.type !== type || item.callback !== callback); }
|
||
dispatch(type) { for (const { callback } of this.listeners.filter(item => item.type === type)) callback({ type, target: this }); }
|
||
click() { this.dispatch('click'); }
|
||
}
|
||
global.document = {
|
||
createElement: tag => new Element(tag),
|
||
createTextNode: text => Object.assign(new Element('#text'), { _text: String(text) }),
|
||
};
|
||
const walk = (node, found = []) => { found.push(node); node.children.forEach(child => walk(child, found)); return found; };
|
||
return {
|
||
listenerCount: () => elements.reduce((sum, element) => sum + element.listeners.length, 0),
|
||
find: (root, predicate) => walk(root).find(predicate),
|
||
tags: node => node.children.map(child => child.tagName.toLowerCase()),
|
||
restore() { global.document = previous; },
|
||
};
|
||
}
|
||
|
||
test('settingRow is the concept row: div > label[for] + p, then the control', async () => {
|
||
const { settingRow } = await controlsModule;
|
||
const { createScope } = await coreModule;
|
||
const dom = fakeDOM();
|
||
const scope = createScope();
|
||
try {
|
||
const changes = [];
|
||
const row = settingRow({ id: 'timeout', label: 'Node search auto-hide (seconds)',
|
||
description: 'Node search behavior only. Use 0 to keep results visible.',
|
||
control: { type: 'number', value: 30, min: 0, max: 300 }, scope, onChange: value => changes.push(value) });
|
||
assert.equal(row.className, 'setting-row');
|
||
assert.deepEqual(dom.tags(row), ['div', 'input']);
|
||
const [text, input] = row.children;
|
||
assert.deepEqual(dom.tags(text), ['label', 'p']);
|
||
assert.equal(text.children[0].textContent, 'Node search auto-hide (seconds)');
|
||
assert.equal(text.children[0].htmlFor, 'timeout');
|
||
assert.equal(text.children[1].textContent, 'Node search behavior only. Use 0 to keep results visible.');
|
||
assert.deepEqual([input.id, input.type, input.value, input.min, input.max], ['timeout', 'number', '30', '0', '300']);
|
||
assert.equal(input.dataset.setting, 'timeout');
|
||
input.value = '45';
|
||
input.dispatch('change');
|
||
assert.deepEqual(changes, [45]);
|
||
|
||
const select = settingRow({ id: 'open-mode', label: 'Open from ComfyUI', description: 'Keep the node pack’s popup / new-tab preference.',
|
||
control: { type: 'select', options: [['newtab', 'New tab'], ['popup', 'Popup window']], value: 'popup' }, scope,
|
||
onChange: value => changes.push(value) }).children[1];
|
||
assert.equal(select.tagName, 'SELECT');
|
||
assert.deepEqual(select.children.map(option => [option.value, option.textContent]), [['newtab', 'New tab'], ['popup', 'Popup window']]);
|
||
assert.equal(select.value, 'popup');
|
||
select.value = 'newtab';
|
||
select.dispatch('change');
|
||
assert.deepEqual(changes, [45, 'newtab']);
|
||
|
||
// The concept's range is 1–16 unless the row says otherwise (D113: the CPU count).
|
||
const range = settingRow({ id: 'workers', label: 'Worker threads', description: 'Balance background scans.',
|
||
control: { type: 'range', value: 4 } }).children[1];
|
||
assert.deepEqual([range.type, range.min, range.max, range.value], ['range', '1', '16', '4']);
|
||
const password = settingRow({ id: 'civitai-key', label: 'CivitAI API key', description: 'Credentials stay on the server.',
|
||
control: { type: 'password', value: '' } }).children[1];
|
||
assert.equal(password.type, 'password');
|
||
|
||
// A ready-made control is placed as given and takes the row id.
|
||
const custom = document.createElement('textarea');
|
||
const customRow = settingRow({ id: 'custom', label: 'Custom', description: 'Any control.', control: custom });
|
||
assert.equal(customRow.children[1], custom);
|
||
assert.equal(custom.id, 'custom');
|
||
assert.throws(() => settingRow({ id: '', label: 'x', description: 'y', control: { type: 'number' } }), TypeError);
|
||
assert.throws(() => settingRow({ id: 'x', label: 'x', description: 'y', control: { type: 'colour' } }), TypeError);
|
||
} finally {
|
||
scope.dispose();
|
||
dom.restore();
|
||
}
|
||
});
|
||
|
||
test('a toggle row holds the Toolkit switch, labelled by the row label', async () => {
|
||
const { settingRow } = await controlsModule;
|
||
const { createScope } = await coreModule;
|
||
const dom = fakeDOM();
|
||
const scope = createScope();
|
||
try {
|
||
const changes = [];
|
||
const row = settingRow({ id: 'video-auto', label: 'Autoplay videos', description: 'Videos stay within the same gallery.',
|
||
control: { type: 'toggle', checked: false }, scope, onChange: value => changes.push(value) });
|
||
const field = row.children[1];
|
||
// createSwitch('', '', id): `label.ca-switch` > input[type=checkbox][role=switch] + an empty label text.
|
||
assert.equal(field.tagName, 'LABEL');
|
||
assert.equal(field.className, 'ca-switch');
|
||
const input = field.children[0];
|
||
assert.deepEqual([input.type, input.role, input.id, input.checked], ['checkbox', 'switch', 'video-auto', false]);
|
||
assert.equal(row.children[0].children[0].htmlFor, input.id);
|
||
assert.equal(input.dataset.setting, 'video-auto');
|
||
input.checked = true;
|
||
input.dispatch('change');
|
||
assert.deepEqual(changes, [true]);
|
||
// The concept's toggles are on unless configured off (`val !== false`).
|
||
const on = settingRow({ id: 'video-loop', label: 'Loop videos', description: 'Repeat a clip.', control: { type: 'toggle' } });
|
||
assert.equal(on.children[1].children[0].checked, true);
|
||
} finally {
|
||
scope.dispose();
|
||
dom.restore();
|
||
}
|
||
});
|
||
|
||
test('operationRow is the concept operation with a danger class only when flagged', async () => {
|
||
const { operationRow } = await controlsModule;
|
||
const { createScope } = await coreModule;
|
||
const dom = fakeDOM();
|
||
const scope = createScope();
|
||
try {
|
||
const clicks = [];
|
||
const row = operationRow({ title: 'Missing-file links',
|
||
description: 'Remove stale database links only. Files on disk are never deleted by this operation.',
|
||
label: 'Review plan', danger: true, scope, onClick: button => clicks.push(button) });
|
||
assert.equal(row.className, 'operation');
|
||
assert.deepEqual(dom.tags(row), ['div', 'div']);
|
||
assert.deepEqual(dom.tags(row.children[0]), ['h3', 'p']);
|
||
assert.equal(row.children[0].children[0].textContent, 'Missing-file links');
|
||
assert.equal(row.children[1].className, 'row-actions');
|
||
const button = row.children[1].children[0];
|
||
assert.deepEqual([button.tagName, button.type, button.textContent, button.className], ['BUTTON', 'button', 'Review plan', 'danger']);
|
||
button.click();
|
||
assert.deepEqual(clicks, [button]);
|
||
const plain = operationRow({ title: 'Statistics', description: 'Usage by prompt, category, tag and date.', label: 'Explore',
|
||
scope, onClick() {} });
|
||
assert.equal(plain.children[1].children[0].className, '');
|
||
assert.throws(() => operationRow({ title: 'x', description: 'y', label: 'z', onClick() {} }), TypeError);
|
||
} finally {
|
||
scope.dispose();
|
||
dom.restore();
|
||
}
|
||
});
|
||
|
||
test('sectionNav marks the active section and reports the chosen one', async () => {
|
||
const { sectionNav } = await controlsModule;
|
||
const { createScope } = await coreModule;
|
||
const dom = fakeDOM();
|
||
const scope = createScope();
|
||
try {
|
||
const chosen = [];
|
||
const nav = sectionNav({ label: 'System sections', sections: [['overview', 'Overview'], ['appearance', 'Appearance']],
|
||
active: 'appearance', scope, onSelect: id => chosen.push(id) });
|
||
assert.equal(nav.className, 'section-nav');
|
||
assert.equal(nav.getAttribute('role'), 'group');
|
||
assert.equal(nav.getAttribute('aria-label'), 'System sections');
|
||
assert.deepEqual(nav.children.map(button => [button.textContent, button.getAttribute('aria-pressed'), button.dataset.value]),
|
||
[['Overview', 'false', 'overview'], ['Appearance', 'true', 'appearance']]);
|
||
nav.children[0].click();
|
||
assert.deepEqual(chosen, ['overview']);
|
||
} finally {
|
||
scope.dispose();
|
||
dom.restore();
|
||
}
|
||
});
|
||
|
||
test('disposing the scope leaves no listener behind', async () => {
|
||
const { settingRow, operationRow, sectionNav } = await controlsModule;
|
||
const { createScope } = await coreModule;
|
||
const dom = fakeDOM();
|
||
const scope = createScope();
|
||
try {
|
||
settingRow({ id: 'a', label: 'A', description: 'a', control: { type: 'toggle' }, scope, onChange() {} });
|
||
settingRow({ id: 'b', label: 'B', description: 'b', control: { type: 'select', options: ['Grid', 'List'] }, scope, onChange() {} });
|
||
operationRow({ title: 'C', description: 'c', label: 'Go', scope, onClick() {} });
|
||
sectionNav({ label: 'System sections', sections: [['overview', 'Overview']], active: 'overview', scope, onSelect() {} });
|
||
assert.equal(dom.listenerCount() > 0, true);
|
||
scope.dispose();
|
||
assert.equal(dom.listenerCount(), 0);
|
||
} finally {
|
||
scope.dispose();
|
||
dom.restore();
|
||
}
|
||
});
|