Vito
9d398f9862
* build(workspace): vendor the approved concept stylesheet with a drift check * refactor(workspace): adopt the concept stylesheet as the workspace base * feat(workspace): concept sidebar with real navigation counts * feat(workspace): concept topbar with Theme and ComfyUI link * refactor(workspace): one concept heading and footer for every route * fix(workspace): keep the canvas link on the proxy mount A resolver failure no longer stops the shell from mounting: the ComfyUI link falls back to the root read from the page's own mount path (never another origin). Tests cover a non-standard /ComfyBackendDirect mount, including that no request escapes it. * test(workspace): concept fixture and shell comparison * test(workspace): concept fixture carries the concept inspector facts * fix(workspace): match the concept brand name and compare shell hover states * test(workspace): shell comparison mutation check and docs Add mutate() to the shared concept inventory and a shell mutation check: a nav-row min-height rule and a removed .breadcrumbs each make the comparison fail with the changed path. Harden the resolver-failure guard test with an injection count, make the overlay lint fail when workspace.css is missing, mark the library.css .row-actions leftovers for PR E, and document the concept CSS base, the overlay lint, the comparison method and the recorded shell deviations in TESTING.md. * fix(workspace): focus the page title on a route change A sidebar or history navigation now focuses #page-title, as the concept does on every hashchange (app.js 1168), so a screen reader announces the page heading instead of the main region. The first render leaves focus alone and the skip link still focuses main. The heading module's comment now describes what the shell does. * fix(workspace): give the Overview nav entry its own home glyph Overview reused the concept's Activity pulse byte for byte, so once the Activity row lands two entries would share one icon. Overview now has an outline home glyph. The shell comparison takes it from the D28 ruling instead of the concept's activity path, and the icon test checks that every approved glyph is distinct. * test(workspace): accept only #249 decision markers and state the lint scope The overlay lint accepted any D-number, so another issue's ruling such as "D5 (#245)" could mark a concept override. A marker now has to be a D-number with no other issue cited; the vocabulary rule that cited #245 reads "#245 decision 5". TESTING.md now states that the lint covers workspace.css only, lists the unmarked overrides still in images.css, and says PRs C and D run the lint over each page sheet they keep. * perf(workspace): re-read only Library and Tags counts after a Library write A confirmed Library or vocabulary write cannot change the Images count, but it re-read all three, including the Images output listing. It now re-reads only the Library and Tags counts. Each count has its own read, so a write never cancels an Images read that is still in flight.
159 lines
8.0 KiB
JavaScript
159 lines
8.0 KiB
JavaScript
import test from 'node:test';
|
|
import assert from 'node:assert/strict';
|
|
import { createScope } from '../../web/js/shared/toolkit/core.js';
|
|
import { mountWorkspaceTheme } from '../../web/js/workspace/theme.mjs';
|
|
|
|
function fixture({ dark = false, preference, fetchImpl, storageDenied = false, pathname = '/prompt_manager/workspace' } = {}) {
|
|
const media = new EventTarget(); media.matches = dark;
|
|
const win = new EventTarget(); win.location = { pathname }; win.matchMedia = () => media;
|
|
const documentElement = { style: { colorScheme: 'light dark' } };
|
|
const root = { dataset: {}, ownerDocument: { documentElement } };
|
|
const saved = new Map(preference === undefined ? [] : [['pm_workspace_theme', preference]]);
|
|
const storage = {
|
|
getItem(key) { if (storageDenied) throw new Error('denied'); return saved.get(key); },
|
|
setItem(key, value) { if (storageDenied) throw new Error('denied'); saved.set(key, value); },
|
|
};
|
|
const calls = [];
|
|
const scope = createScope();
|
|
const theme = mountWorkspaceTheme({ root, scope, win, storage, fetchImpl: fetchImpl || (async (url, init) => {
|
|
calls.push({ url, init }); return { ok: true, json: async () => 'dark' };
|
|
}) });
|
|
return { root, documentElement, saved, media, win, scope, theme, calls };
|
|
}
|
|
const response = value => ({ ok: true, json: async () => value });
|
|
const tick = () => new Promise(resolve => setTimeout(resolve, 0));
|
|
|
|
test('system uses host palette over OS and preserves reverse proxy prefix', async () => {
|
|
const f = fixture({ pathname: '/proxy/comfy/prompt_manager/workspace' });
|
|
await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'dark');
|
|
assert.equal(f.documentElement.style.colorScheme, 'dark');
|
|
assert.equal(f.calls[0].url, '/proxy/comfy/api/settings/Comfy.ColorPalette');
|
|
f.scope.dispose();
|
|
});
|
|
|
|
test('supported light palettes accept string and wrapped values', async () => {
|
|
for (const palette of ['light', 'solarized', 'github', 'arc']) {
|
|
const f = fixture({ dark: true, fetchImpl: async () => response({ value: palette }) });
|
|
await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'light', palette);
|
|
f.scope.dispose();
|
|
}
|
|
});
|
|
|
|
test('explicit overrides persist and system restores host choice', async () => {
|
|
const f = fixture({ preference: 'light' }); await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'light');
|
|
f.theme.setPreference('dark'); assert.equal(f.root.dataset.caTheme, 'dark');
|
|
assert.equal(f.saved.get('pm_workspace_theme'), 'dark');
|
|
f.theme.setPreference('system'); assert.equal(f.root.dataset.caTheme, 'dark');
|
|
assert.equal(f.saved.get('pm_workspace_theme'), 'system');
|
|
assert.throws(() => f.theme.setPreference('follow'), /preference/i);
|
|
assert.throws(() => f.theme.setPreference('orange'), /preference/i);
|
|
f.scope.dispose();
|
|
});
|
|
|
|
test('unknown host palettes and invalid stored preferences follow changing OS', async () => {
|
|
const f = fixture({ preference: 'orange', fetchImpl: async () => response('custom') });
|
|
await f.theme.ready; assert.equal(f.root.dataset.caTheme, 'light');
|
|
f.media.matches = true; f.media.dispatchEvent(new Event('change'));
|
|
assert.equal(f.root.dataset.caTheme, 'dark'); f.scope.dispose();
|
|
});
|
|
|
|
test('network, HTTP, JSON and storage failures recover using system theme', async () => {
|
|
for (const fetchImpl of [async () => { throw new Error('offline'); }, async () => ({ ok: false }), async () => ({ ok: true, json: async () => { throw new Error('invalid'); } })]) {
|
|
const f = fixture({ dark: true, storageDenied: true, fetchImpl });
|
|
await f.theme.ready; assert.equal(f.root.dataset.caTheme, 'dark');
|
|
assert.doesNotThrow(() => f.theme.setPreference('light'));
|
|
assert.equal(f.root.dataset.caTheme, 'light'); f.scope.dispose();
|
|
}
|
|
});
|
|
|
|
test('focus refreshes host palette and stale responses cannot replace newest palette', async () => {
|
|
const pending = [];
|
|
const f = fixture({ fetchImpl: (url, init) => new Promise(resolve => pending.push({ resolve, signal: init.signal })) });
|
|
f.win.dispatchEvent(new Event('focus'));
|
|
assert.equal(pending.length, 2); assert.equal(pending[0].signal.aborted, true);
|
|
pending[1].resolve(response('light')); await tick();
|
|
pending[0].resolve(response('dark')); await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'light'); f.scope.dispose();
|
|
});
|
|
|
|
test('cleanup aborts requests, restores attributes and native scheme and removes listeners', async () => {
|
|
let resolve, fSignal;
|
|
const f = fixture({ fetchImpl: (url, init) => new Promise(done => { resolve = done; fSignal = init.signal; }) });
|
|
f.scope.dispose(); assert.equal(fSignal.aborted, true);
|
|
assert.equal(f.root.dataset.caTheme, undefined);
|
|
assert.equal(f.documentElement.style.colorScheme, 'light dark');
|
|
f.win.dispatchEvent(new Event('focus')); f.media.dispatchEvent(new Event('change'));
|
|
resolve(response('dark')); await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, undefined);
|
|
f.theme.setPreference('dark'); assert.equal(f.root.dataset.caTheme, undefined);
|
|
});
|
|
|
|
test('cleanup restores an existing toolkit theme', async () => {
|
|
const f = fixture(); await f.theme.ready; f.scope.dispose();
|
|
f.root.dataset.caTheme = 'light';
|
|
const scope = createScope();
|
|
const theme = mountWorkspaceTheme({ root: f.root, scope, win: f.win, storage: f.saved, fetchImpl: async () => response('dark') });
|
|
await theme.ready; scope.dispose(); assert.equal(f.root.dataset.caTheme, 'light');
|
|
});
|
|
|
|
|
|
test('malformed palette payloads fall back without losing native theme alignment', async () => {
|
|
for (const payload of [null, {}, {value: 42}, 42]) {
|
|
const f = fixture({ dark: true, fetchImpl: async () => response(payload) });
|
|
await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'dark');
|
|
assert.equal(f.documentElement.style.colorScheme, 'dark');
|
|
f.scope.dispose();
|
|
}
|
|
});
|
|
|
|
test('focus failure clears obsolete host palette and resumes system following', async () => {
|
|
let calls = 0;
|
|
const f = fixture({ fetchImpl: async () => {
|
|
if (++calls === 1) return response('dark');
|
|
throw new Error('host offline');
|
|
} });
|
|
await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'dark');
|
|
f.win.dispatchEvent(new Event('focus')); await tick();
|
|
assert.equal(f.root.dataset.caTheme, 'light');
|
|
f.scope.dispose();
|
|
f.win.dispatchEvent(new Event('focus')); await tick();
|
|
assert.equal(calls, 2);
|
|
});
|
|
|
|
test('blocked localStorage getter and missing proxy marker stay usable', async () => {
|
|
const f = fixture(); await f.theme.ready; f.scope.dispose();
|
|
Object.defineProperty(f.win, 'localStorage', { get() { throw new Error('denied'); } });
|
|
f.win.location.pathname = '/standalone';
|
|
const scope = createScope();
|
|
let url;
|
|
const theme = mountWorkspaceTheme({ root: f.root, win: f.win, scope,
|
|
fetchImpl: async value => { url = value; return response(' Obsidian '); } });
|
|
assert.equal(theme.preference, 'system');
|
|
await theme.ready;
|
|
assert.equal(url, '/api/settings/Comfy.ColorPalette');
|
|
assert.equal(f.root.dataset.caTheme, 'dark');
|
|
theme.setPreference('light');
|
|
assert.equal(theme.preference, 'light');
|
|
scope.dispose();
|
|
});
|
|
|
|
test('stored follow migrates to system and system follows the host palette', async () => {
|
|
const f = fixture({ preference: 'follow', fetchImpl: async () => response('light') });
|
|
assert.equal(f.theme.preference, 'system');
|
|
await f.theme.ready;
|
|
assert.equal(f.root.dataset.caTheme, 'light');
|
|
f.media.matches = true; f.media.dispatchEvent(new Event('change'));
|
|
assert.equal(f.root.dataset.caTheme, 'light', 'a known host palette wins over the OS');
|
|
f.scope.dispose();
|
|
const unknown = fixture({ preference: 'follow', dark: true, fetchImpl: async () => response('custom') });
|
|
await unknown.theme.ready;
|
|
assert.equal(unknown.theme.preference, 'system');
|
|
assert.equal(unknown.root.dataset.caTheme, 'dark', 'an unknown host palette falls back to the OS');
|
|
unknown.scope.dispose();
|
|
});
|