@adia-ai/web-modules 0.8.19 → 0.8.21

package/theme/theme-panel/theme-panel.test.js

@@ -1,431 +0,0 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import '../../../web-components/core/element.js';
-// Stub primitives that theme-panel composes — they don't need to render
-// anything visible for these behavior tests; we just need them to register
-// so customElements.define() inside theme-panel sees its DOM children as
-// known elements (otherwise happy-dom treats them as HTMLUnknownElement,
-// which is fine for our assertions).
-import './theme-panel.js';
-
-const tick = () => new Promise((r) => queueMicrotask(r));
-
-function mount(html) {
-  const wrap = document.createElement('div');
-  wrap.innerHTML = html;
-  document.body.appendChild(wrap);
-  return wrap.firstElementChild;
-}
-
-// happy-dom doesn't implement matchMedia; stub a non-dark default.
-let mqlListeners = [];
-function installMatchMedia({ dark = false } = {}) {
-  globalThis.matchMedia = (query) => ({
-    matches: query.includes('dark') ? dark : false,
-    media: query,
-    addEventListener: (_evt, fn) => { mqlListeners.push(fn); },
-    removeEventListener: (_evt, fn) => {
-      mqlListeners = mqlListeners.filter((f) => f !== fn);
-    },
-    addListener: (fn) => { mqlListeners.push(fn); },
-    removeListener: (fn) => {
-      mqlListeners = mqlListeners.filter((f) => f !== fn);
-    },
-  });
-}
-
-// happy-dom's requestAnimationFrame is sync via setTimeout; force it
-// synchronous so #onThemeClick's slider sync runs in the test's tick().
-beforeEach(() => {
-  document.body.innerHTML = '';
-  try { localStorage.clear(); } catch {}
-  mqlListeners = [];
-  installMatchMedia({ dark: false });
-  // Synchronous rAF for deterministic tests
-  globalThis.requestAnimationFrame = (cb) => { cb(); return 0; };
-});
-
-afterEach(() => {
-  // Always clean any html-level inline state so tests don't leak
-  document.documentElement.removeAttribute('theme');
-  document.documentElement.style.removeProperty('--a-density');
-  document.documentElement.style.removeProperty('--a-radius-k');
-  document.documentElement.style.removeProperty('color-scheme');
-});
-
-describe('theme-panel', () => {
-  it('registers theme-panel as a custom element', () => {
-    expect(customElements.get('theme-panel')).toBeDefined();
-  });
-
-  it('wraps its stamped content in <theme-provider scale="ui-md">, no [theme]', async () => {
-    const tp = mount('<theme-panel></theme-panel>');
-    await tick();
-    const provider = tp.querySelector(':scope > theme-provider');
-    expect(provider).toBeTruthy();
-    expect(provider.getAttribute('scale')).toBe('ui-md');
-    expect(provider.hasAttribute('theme')).toBe(false);
-    // Real content lives inside the provider, not as a direct theme-panel child.
-    expect(provider.querySelector('select-ui[part="themes"]')).toBeTruthy();
-  });
-
-  it('renders a Theme select with the 12 default identities by default', async () => {
-    const tp = mount('<theme-panel></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    expect(select).toBeTruthy();
-    const values = [...select.querySelectorAll('option')].map((o) => o.value);
-    expect(values).toEqual(['', 'atlas', 'signal', 'terrarium', 'ledger', 'arcade', 'meridian', 'solstice', 'glacier', 'ember', 'botanica', 'vector', 'velour']);
-  });
-
-  it('[themes=""] suppresses the Theme row entirely', async () => {
-    const tp = mount('<theme-panel themes=""></theme-panel>');
-    await tick();
-    expect(tp.querySelector('[part="themes"]')).toBeNull();
-  });
-
-  it('[themes="…"] renders a Theme select with exactly the given slugs plus Default', async () => {
-    const tp = mount('<theme-panel themes="terrarium vector"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    expect(select).toBeTruthy();
-    const values = [...select.querySelectorAll('option')].map((o) => o.value);
-    expect(values).toEqual(['', 'terrarium', 'vector']);
-  });
-
-  it('renders only minimum surface by default (no sliders, presets, scheme)', async () => {
-    const tp = mount('<theme-panel></theme-panel>');
-    await tick();
-    expect(tp.querySelector('[part="presets"]')).toBeNull();
-    expect(tp.querySelector('[part="scheme"]')).toBeNull();
-    expect(tp.querySelector('slider-ui')).toBeNull();
-  });
-
-  it('[parametric] adds density + radius sliders', async () => {
-    const tp = mount('<theme-panel parametric></theme-panel>');
-    await tick();
-    expect(tp.querySelector('slider-ui[part="density"]')).toBeTruthy();
-    expect(tp.querySelector('slider-ui[part="radius"]')).toBeTruthy();
-  });
-
-  it('[presets] adds the preset row (compact/default/spacious)', async () => {
-    const tp = mount('<theme-panel presets></theme-panel>');
-    await tick();
-    const presets = tp.querySelector('[part="presets"]');
-    expect(presets).toBeTruthy();
-    const buttons = [...presets.querySelectorAll('button-ui')];
-    expect(buttons.map((b) => b.getAttribute('data-preset'))).toEqual(['compact', 'default', 'spacious']);
-  });
-
-  it('[scheme-toggle] adds the segmented scheme picker', async () => {
-    const tp = mount('<theme-panel scheme-toggle></theme-panel>');
-    await tick();
-    expect(tp.querySelector('[part="scheme"] segmented-ui')).toBeTruthy();
-  });
-
-  it('selecting a theme sets [theme] on the target (defaults to <html>)', async () => {
-    const tp = mount('<theme-panel themes="atlas ledger terrarium"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = 'ledger';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'ledger' } }));
-    await tick();
-    expect(document.documentElement.getAttribute('theme')).toBe('ledger');
-    expect(tp.getAttribute('active-theme')).toBe('ledger');
-  });
-
-  it('selecting the Default option clears [theme]', async () => {
-    document.documentElement.setAttribute('theme', 'ledger');
-    const tp = mount('<theme-panel themes="atlas ledger"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = '';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '' } }));
-    await tick();
-    expect(document.documentElement.hasAttribute('theme')).toBe(false);
-    expect(tp.getAttribute('active-theme')).toBe('');
-  });
-
-  it('fires theme-change event with source: "theme" on selection', async () => {
-    const tp = mount('<theme-panel themes="terrarium"></theme-panel>');
-    await tick();
-    const onChange = vi.fn();
-    tp.addEventListener('theme-change', onChange);
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = 'terrarium';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'terrarium' } }));
-    await tick();
-    expect(onChange).toHaveBeenCalled();
-    const detail = onChange.mock.calls[0][0].detail;
-    expect(detail.theme).toBe('terrarium');
-    expect(detail.source).toBe('theme');
-  });
-
-  it('sliders write --a-density / --a-radius-k on target', async () => {
-    const tp = mount('<theme-panel parametric></theme-panel>');
-    await tick();
-    const density = tp.querySelector('slider-ui[part="density"]');
-    density.value = '1.2';
-    density.dispatchEvent(new Event('input', { bubbles: true }));
-    await tick();
-    expect(document.documentElement.style.getPropertyValue('--a-density')).toBe('1.2');
-
-    const radius = tp.querySelector('slider-ui[part="radius"]');
-    radius.value = '0.6';
-    radius.dispatchEvent(new Event('input', { bubbles: true }));
-    await tick();
-    expect(document.documentElement.style.getPropertyValue('--a-radius-k')).toBe('0.6');
-  });
-
-  it('preset "compact" applies (0.85, 0.75)', async () => {
-    const tp = mount('<theme-panel parametric presets></theme-panel>');
-    await tick();
-    const compact = tp.querySelector('button-ui[data-preset="compact"]');
-    compact.dispatchEvent(new Event('click', { bubbles: true }));
-    await tick();
-    expect(document.documentElement.style.getPropertyValue('--a-density')).toBe('0.85');
-    expect(document.documentElement.style.getPropertyValue('--a-radius-k')).toBe('0.75');
-  });
-
-  it('preset "spacious" applies (1.15, 1.25)', async () => {
-    const tp = mount('<theme-panel parametric presets></theme-panel>');
-    await tick();
-    const spacious = tp.querySelector('button-ui[data-preset="spacious"]');
-    spacious.dispatchEvent(new Event('click', { bubbles: true }));
-    await tick();
-    expect(document.documentElement.style.getPropertyValue('--a-density')).toBe('1.15');
-    expect(document.documentElement.style.getPropertyValue('--a-radius-k')).toBe('1.25');
-  });
-
-  it('preset "default" only sets density/radius — it does NOT clear [theme]', async () => {
-    document.documentElement.setAttribute('theme', 'ledger');
-    const tp = mount('<theme-panel parametric presets></theme-panel>');
-    await tick();
-    const defaultBtn = tp.querySelector('button-ui[data-preset="default"]');
-    expect(defaultBtn.getAttribute('text')).toBe('Default');
-    defaultBtn.dispatchEvent(new Event('click', { bubbles: true }));
-    await tick();
-    expect(document.documentElement.getAttribute('theme')).toBe('ledger');
-    expect(document.documentElement.style.getPropertyValue('--a-density')).toBe('1');
-    expect(document.documentElement.style.getPropertyValue('--a-radius-k')).toBe('1');
-  });
-
-  it('the Reset row is a dedicated bottom control, separate from the Preset row', async () => {
-    document.documentElement.setAttribute('theme', 'ledger');
-    document.documentElement.style.setProperty('--a-density', '1.2');
-    const tp = mount('<theme-panel presets></theme-panel>');
-    await tick();
-    const resetBtn = tp.querySelector('[part="reset-row"] button-ui[part="reset"]');
-    expect(resetBtn).toBeTruthy();
-    expect(resetBtn.getAttribute('text')).toBe('Reset');
-    resetBtn.dispatchEvent(new Event('click', { bubbles: true }));
-    await tick();
-    expect(document.documentElement.hasAttribute('theme')).toBe(false);
-    expect(document.documentElement.style.getPropertyValue('--a-density')).toBe('');
-  });
-
-  it('[persist] writes localStorage keys on theme selection', async () => {
-    const tp = mount('<theme-panel persist themes="atlas"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = 'atlas';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'atlas' } }));
-    await tick();
-    expect(localStorage.getItem('adia-theme-theme')).toBe('atlas');
-  });
-
-  it('absence of [persist] does NOT write localStorage', async () => {
-    const tp = mount('<theme-panel themes="atlas"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = 'atlas';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'atlas' } }));
-    await tick();
-    expect(localStorage.getItem('adia-theme-theme')).toBeNull();
-  });
-
-  it('reset() clears all state, resets the Theme select to Default, and emits source: "reset"', async () => {
-    document.documentElement.setAttribute('theme', 'ledger');
-    document.documentElement.style.setProperty('--a-density', '1.2');
-    const tp = mount('<theme-panel parametric persist></theme-panel>');
-    await tick();
-    const onChange = vi.fn();
-    tp.addEventListener('theme-change', onChange);
-    tp.reset();
-    await tick();
-    expect(document.documentElement.hasAttribute('theme')).toBe(false);
-    expect(document.documentElement.style.getPropertyValue('--a-density')).toBe('');
-    expect(tp.querySelector('select-ui[part="themes"]').value).toBe('');
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange.mock.calls[0][0].detail.source).toBe('reset');
-  });
-
-  it('[storage-prefix] override changes LS key namespace', async () => {
-    const tp = mount('<theme-panel persist storage-prefix="my-app-" themes="atlas"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = 'atlas';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'atlas' } }));
-    await tick();
-    expect(localStorage.getItem('my-app-theme')).toBe('atlas');
-    expect(localStorage.getItem('adia-theme-theme')).toBeNull();
-  });
-
-  it('apply({theme}) is equivalent to a theme selection, syncs the select, and emits source: "programmatic"', async () => {
-    const tp = mount('<theme-panel></theme-panel>');
-    await tick();
-    const onChange = vi.fn();
-    tp.addEventListener('theme-change', onChange);
-    tp.apply({ theme: 'velour' });
-    await tick();
-    expect(document.documentElement.getAttribute('theme')).toBe('velour');
-    expect(tp.querySelector('select-ui[part="themes"]').value).toBe('velour');
-    expect(onChange.mock.calls[0][0].detail.source).toBe('programmatic');
-  });
-
-  it('PCM listener attaches when scheme="auto" and no persisted scheme', async () => {
-    const tp = mount('<theme-panel scheme-toggle></theme-panel>');
-    await tick();
-    // mqlListeners is populated by our matchMedia stub on addEventListener('change', ...)
-    expect(mqlListeners.length).toBeGreaterThan(0);
-    expect(tp.getAttribute('active-scheme')).toBe('light'); // our stub returns dark=false
-  });
-
-  it('PCM listener does NOT attach when [persist] has a saved scheme', async () => {
-    try { localStorage.setItem('adia-theme-scheme', 'dark'); } catch {}
-    const tp = mount('<theme-panel persist scheme-toggle></theme-panel>');
-    await tick();
-    expect(mqlListeners.length).toBe(0);
-    expect(tp.getAttribute('active-scheme')).toBe('dark');
-  });
-
-  it('[target] scoped selector writes to that element, not <html>', async () => {
-    const preview = document.createElement('div');
-    preview.id = 'preview';
-    document.body.appendChild(preview);
-    const tp = mount('<theme-panel target="#preview" themes="atlas"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    select.value = 'atlas';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'atlas' } }));
-    await tick();
-    expect(preview.getAttribute('theme')).toBe('atlas');
-    expect(document.documentElement.getAttribute('theme')).toBeNull();
-  });
-
-  it('cleans up listeners on disconnect (no zombie listeners)', async () => {
-    const tp = mount('<theme-panel scheme-toggle></theme-panel>');
-    await tick();
-    expect(mqlListeners.length).toBeGreaterThan(0);
-    tp.remove();
-    await tick();
-    expect(mqlListeners.length).toBe(0);
-  });
-
-  it('tolerates unknown slugs — renders an option and applies [theme] regardless', async () => {
-    const tp = mount('<theme-panel themes="brand-a"></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="themes"]');
-    expect([...select.querySelectorAll('option')].map((o) => o.value)).toEqual(['', 'brand-a']);
-    select.value = 'brand-a';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'brand-a' } }));
-    await tick();
-    expect(document.documentElement.getAttribute('theme')).toBe('brand-a');
-  });
-
-  it('[presets] labels its row "Preset", not "Density" — disambiguates from the Density slider row', async () => {
-    const tp = mount('<theme-panel parametric presets></theme-panel>');
-    await tick();
-    // The Density slider's label lives on slider-ui's own [label] attribute
-    // (its native header-row readout); the section labels (Parametric/
-    // Preset/Scale) are standalone text-ui rows.
-    expect(tp.querySelector('slider-ui[part="density"][label="Density"]')).toBeTruthy();
-    const sectionLabels = [...tp.querySelectorAll('text-ui[variant="label"]')].map((l) => l.textContent);
-    expect(sectionLabels).toContain('Preset');
-    expect(sectionLabels).not.toContain('Density');
-  });
-});
-
-describe('theme-panel — [register] Scale row (six [scale] tiers, supersedes verse/prose)', () => {
-  it('renders a select with the six canonical tiers plus a Default option', async () => {
-    const tp = mount('<theme-panel register></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="scale"]');
-    expect(select).toBeTruthy();
-    const values = [...select.querySelectorAll('option')].map((o) => o.value);
-    expect(values).toEqual(['', 'ui-sm', 'ui-md', 'ui-lg', 'content-sm', 'content-md', 'content-lg']);
-  });
-
-  it('does not render the Scale row without [register]', async () => {
-    const tp = mount('<theme-panel presets></theme-panel>');
-    await tick();
-    expect(tp.querySelector('select-ui[part="scale"]')).toBeNull();
-  });
-
-  it('selecting a tier sets [scale="…"] on the target, never [verse]/[prose]', async () => {
-    const tp = mount('<theme-panel register></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="scale"]');
-    select.value = 'content-md';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'content-md' } }));
-    await tick();
-    expect(document.documentElement.getAttribute('scale')).toBe('content-md');
-    expect(document.documentElement.hasAttribute('verse')).toBe(false);
-    expect(document.documentElement.hasAttribute('prose')).toBe(false);
-    expect(tp.getAttribute('active-scale')).toBe('content-md');
-  });
-
-  it('selecting the Default option clears [scale] on the target', async () => {
-    const tp = mount('<theme-panel register></theme-panel>');
-    await tick();
-    const select = tp.querySelector('select-ui[part="scale"]');
-    select.value = 'ui-lg';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'ui-lg' } }));
-    await tick();
-    expect(document.documentElement.getAttribute('scale')).toBe('ui-lg');
-
-    select.value = '';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: '' } }));
-    await tick();
-    expect(document.documentElement.hasAttribute('scale')).toBe(false);
-    expect(tp.getAttribute('active-scale')).toBe('');
-  });
-
-  it('apply({scale}) writes [scale] and emits source: "scale"', async () => {
-    const tp = mount('<theme-panel register></theme-panel>');
-    await tick();
-    const onChange = vi.fn();
-    tp.addEventListener('theme-change', onChange);
-    tp.apply({ scale: 'ui-sm' });
-    await tick();
-    expect(document.documentElement.getAttribute('scale')).toBe('ui-sm');
-    expect(onChange.mock.calls[0][0].detail.scale).toBe('ui-sm');
-    expect(onChange.mock.calls[0][0].detail.source).toBe('programmatic');
-  });
-
-  it('[persist] round-trips the scale tier through localStorage on reconnect', async () => {
-    const first = mount('<theme-panel register persist></theme-panel>');
-    await tick();
-    const select = first.querySelector('select-ui[part="scale"]');
-    select.value = 'content-lg';
-    select.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: 'content-lg' } }));
-    await tick();
-    expect(localStorage.getItem('adia-theme-scale')).toBe('content-lg');
-
-    first.remove();
-    document.documentElement.removeAttribute('scale');
-    const second = mount('<theme-panel register persist></theme-panel>');
-    await tick();
-    expect(document.documentElement.getAttribute('scale')).toBe('content-lg');
-    expect(second.getAttribute('active-scale')).toBe('content-lg');
-  });
-
-  it('reset() clears [scale] and resets the select to Default', async () => {
-    document.documentElement.setAttribute('scale', 'ui-md');
-    const tp = mount('<theme-panel register></theme-panel>');
-    await tick();
-    tp.reset();
-    await tick();
-    expect(document.documentElement.hasAttribute('scale')).toBe(false);
-    expect(tp.querySelector('select-ui[part="scale"]').value).toBe('');
-  });
-});