@assistkick/create 1.0.0

package/templates/product-system/tests/graph_settings_sheet.test.ts

@@ -0,0 +1,804 @@
+/**
+ * Tests for Graph Settings Side Sheet (feat_030, feat_037).
+ * Uses node:test built-in runner.
+ * Tests the settings sheet logic: toggle state management,
+ * open/close behavior, delegation to GraphRenderer, and
+ * localStorage persistence.
+ */
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+const DEFAULTS = { edgeLabels: false, hideDefined: false, allNodeNames: false, featureNodeNames: true };
+const STORAGE_KEY = 'graph-settings';
+
+class GraphSettingsSheet {
+  sheetEl: any;
+  renderer: any;
+  doc: any;
+  settingsBtn: any;
+  storage: any;
+  isOpen = false;
+  settings: Record<string, boolean>;
+
+  constructor(sheetEl: any, renderer: any, doc?: any, settingsBtn?: any, storage?: any) {
+    this.sheetEl = sheetEl;
+    this.renderer = renderer;
+    this.doc = doc;
+    this.settingsBtn = settingsBtn;
+    this.storage = storage;
+    this.settings = { ...DEFAULTS };
+    if (storage) {
+      try {
+        const stored = storage.getItem(STORAGE_KEY);
+        if (stored) {
+          const parsed = JSON.parse(stored);
+          for (const key of Object.keys(DEFAULTS)) {
+            if (typeof parsed[key] === 'boolean') this.settings[key] = parsed[key];
+          }
+        }
+      } catch { /* ignore */ }
+    }
+  }
+
+  init() { this.bindToggles(); this.bindClose(); this.bindDocumentClick(); }
+
+  open() {
+    this.isOpen = true;
+    this.sheetEl.classList.add('open');
+    this.syncToggles();
+  }
+
+  close() {
+    this.isOpen = false;
+    this.sheetEl.classList.remove('open');
+  }
+
+  toggle() {
+    if (this.isOpen) this.close(); else this.open();
+  }
+
+  syncToggles() {
+    const toggles = this.sheetEl.querySelectorAll('.settings-toggle');
+    for (const t of toggles) {
+      const key = t.dataset?.setting;
+      if (key && key in this.settings) t.checked = this.settings[key];
+    }
+  }
+
+  applyDefaults() {
+    const applied = new Set<string>();
+    for (const key of Object.keys(this.settings)) {
+      if (applied.has(key)) continue;
+      this.applySetting(key);
+      // allNodeNames and featureNodeNames share the same renderer call
+      if (key === 'allNodeNames' || key === 'featureNodeNames') {
+        applied.add('allNodeNames');
+        applied.add('featureNodeNames');
+      }
+      applied.add(key);
+    }
+  }
+
+  applySetting(key: string) {
+    const value = this.settings[key];
+    const r = this.renderer;
+    if (!r) return;
+    switch (key) {
+      case 'edgeLabels':
+        if (r.edgeLabelsVisible !== value) r.toggleEdgeLabels();
+        break;
+      case 'hideDefined':
+        if (r.hideDefinedActive !== value) r.toggleHideDefined();
+        break;
+      case 'allNodeNames':
+      case 'featureNodeNames':
+        r.setNodeNameVisibility(this.settings.allNodeNames, this.settings.featureNodeNames);
+        break;
+    }
+  }
+
+  getSettings() {
+    return { ...this.settings };
+  }
+
+  bindToggles() {
+    const toggles = this.sheetEl.querySelectorAll('.settings-toggle');
+    for (const t of toggles) {
+      t.addEventListener('change', (e: any) => {
+        const key = e.target.dataset.setting;
+        if (!(key in DEFAULTS)) return;
+        this.settings[key] = e.target.checked;
+        this.applySetting(key);
+        if (this.storage) {
+          try { this.storage.setItem(STORAGE_KEY, JSON.stringify(this.settings)); } catch {}
+        }
+      });
+    }
+  }
+
+  bindClose() {
+    const btn = this.sheetEl.querySelector('.settings-close');
+    if (btn) btn.addEventListener('click', () => this.close());
+  }
+
+  _handleDocumentClick: any = null;
+
+  bindDocumentClick() {
+    this._handleDocumentClick = (e: any) => this.handleDocumentClick(e);
+    if (this.doc) this.doc.addEventListener('click', this._handleDocumentClick);
+  }
+
+  handleDocumentClick(e: any) {
+    if (!this.isOpen) return;
+    if (this.sheetEl.contains(e.target)) return;
+    if (this.settingsBtn && (e.target === this.settingsBtn || this.settingsBtn.contains?.(e.target))) return;
+    this.close();
+  }
+
+  destroy() {
+    if (this.doc && this._handleDocumentClick) {
+      this.doc.removeEventListener('click', this._handleDocumentClick);
+    }
+  }
+}
+
+// Mock GraphRenderer — tracks calls to toggle/set methods
+const createMockRenderer = () => ({
+  edgeLabelsVisible: true,
+  hideDefinedActive: false,
+  allNodeNamesVisible: true,
+  featureNodeNamesVisible: true,
+  toggleEdgeLabelsCalls: 0,
+  toggleHideDefinedCalls: 0,
+  setNodeNameVisibilityCalls: [],
+
+  toggleEdgeLabels() {
+    this.edgeLabelsVisible = !this.edgeLabelsVisible;
+    this.toggleEdgeLabelsCalls++;
+    return this.edgeLabelsVisible;
+  },
+  toggleHideDefined() {
+    this.hideDefinedActive = !this.hideDefinedActive;
+    this.toggleHideDefinedCalls++;
+    return this.hideDefinedActive;
+  },
+  setNodeNameVisibility(all, feature) {
+    this.allNodeNamesVisible = all;
+    this.featureNodeNamesVisible = feature;
+    this.setNodeNameVisibilityCalls.push({ all, feature });
+  },
+});
+
+// Minimal DOM element mock
+const createMockElement = (attrs = {}) => {
+  const listeners = {};
+  const classList = new Set();
+  const children = [];
+
+  const el = {
+    dataset: attrs.dataset || {},
+    checked: attrs.checked || false,
+    type: attrs.type || 'div',
+    listeners,
+    classList: {
+      add: (c) => classList.add(c),
+      remove: (c) => classList.delete(c),
+      contains: (c) => classList.has(c),
+      toggle: (c, force) => {
+        if (force === undefined) {
+          classList.has(c) ? classList.delete(c) : classList.add(c);
+        } else if (force) {
+          classList.add(c);
+        } else {
+          classList.delete(c);
+        }
+      },
+    },
+    _classList: classList,
+    addEventListener: (event, handler) => {
+      listeners[event] = listeners[event] || [];
+      listeners[event].push(handler);
+    },
+    removeEventListener: (event, handler) => {
+      if (listeners[event]) {
+        listeners[event] = listeners[event].filter(h => h !== handler);
+      }
+    },
+    querySelectorAll: (selector) => {
+      if (selector === '.settings-toggle') return children.filter(c => c.type === 'checkbox');
+      return [];
+    },
+    querySelector: (selector) => {
+      if (selector === '.settings-close') return children.find(c => c._role === 'close') || null;
+      return null;
+    },
+    _addChild: (child) => children.push(child),
+    contains: (target) => target === el || children.includes(target),
+  };
+
+  return el;
+};
+
+// Mock localStorage
+const createMockStorage = (initialData = {}) => {
+  const store = { ...initialData };
+  return {
+    getItem: (key) => key in store ? store[key] : null,
+    setItem: (key, value) => { store[key] = String(value); },
+    removeItem: (key) => { delete store[key]; },
+    _store: store,
+  };
+};
+
+describe('GraphSettingsSheet', () => {
+
+  describe('default settings', () => {
+    it('has edge labels off by default', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      assert.equal(sheet.settings.edgeLabels, false);
+    });
+
+    it('has hide defined off by default', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      assert.equal(sheet.settings.hideDefined, false);
+    });
+
+    it('has all node names off by default', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      assert.equal(sheet.settings.allNodeNames, false);
+    });
+
+    it('has feature node names on by default', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      assert.equal(sheet.settings.featureNodeNames, true);
+    });
+  });
+
+  describe('open/close', () => {
+    it('starts closed', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      assert.equal(sheet.isOpen, false);
+    });
+
+    it('opens when open() is called', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.open();
+      assert.equal(sheet.isOpen, true);
+      assert.ok(el._classList.has('open'));
+    });
+
+    it('closes when close() is called', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.open();
+      sheet.close();
+      assert.equal(sheet.isOpen, false);
+      assert.ok(!el._classList.has('open'));
+    });
+
+    it('toggles between open and closed', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+
+      sheet.toggle();
+      assert.equal(sheet.isOpen, true);
+
+      sheet.toggle();
+      assert.equal(sheet.isOpen, false);
+    });
+
+    it('syncs checkbox states when opening', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+
+      const checkbox1 = createMockElement({
+        type: 'checkbox',
+        dataset: { setting: 'edgeLabels' },
+        checked: false,
+      });
+      const checkbox2 = createMockElement({
+        type: 'checkbox',
+        dataset: { setting: 'allNodeNames' },
+        checked: false,
+      });
+      el._addChild(checkbox1);
+      el._addChild(checkbox2);
+
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.edgeLabels = true;
+      sheet.settings.allNodeNames = true;
+      sheet.open();
+
+      assert.equal(checkbox1.checked, true);
+      assert.equal(checkbox2.checked, true);
+    });
+  });
+
+  describe('applyDefaults', () => {
+    it('turns off edge labels on init when renderer has them on', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = true;
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.applyDefaults();
+
+      // Should have toggled edge labels off
+      assert.equal(renderer.toggleEdgeLabelsCalls, 1);
+      assert.equal(renderer.edgeLabelsVisible, false);
+    });
+
+    it('does not toggle edge labels if already off', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = false;
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.applyDefaults();
+
+      assert.equal(renderer.toggleEdgeLabelsCalls, 0);
+    });
+
+    it('calls setNodeNameVisibility with defaults (false, true)', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.applyDefaults();
+
+      assert.equal(renderer.setNodeNameVisibilityCalls.length, 1);
+      assert.deepEqual(renderer.setNodeNameVisibilityCalls[0], { all: false, feature: true });
+    });
+
+    it('applies stored hideDefined=true on init', () => {
+      const renderer = createMockRenderer();
+      renderer.hideDefinedActive = false;
+      const el = createMockElement();
+      const storage = createMockStorage({
+        'graph-settings': JSON.stringify({ hideDefined: true }),
+      });
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+      sheet.applyDefaults();
+
+      assert.equal(renderer.toggleHideDefinedCalls, 1);
+      assert.equal(renderer.hideDefinedActive, true);
+    });
+  });
+
+  describe('applySetting', () => {
+    it('toggles edge labels on when setting changes to true', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = false;
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.edgeLabels = true;
+      sheet.applySetting('edgeLabels');
+
+      assert.equal(renderer.toggleEdgeLabelsCalls, 1);
+      assert.equal(renderer.edgeLabelsVisible, true);
+    });
+
+    it('does not toggle edge labels when state already matches', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = true;
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.edgeLabels = true;
+      sheet.applySetting('edgeLabels');
+
+      assert.equal(renderer.toggleEdgeLabelsCalls, 0);
+    });
+
+    it('toggles hide defined on when setting changes to true', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.hideDefined = true;
+      sheet.applySetting('hideDefined');
+
+      assert.equal(renderer.toggleHideDefinedCalls, 1);
+      assert.equal(renderer.hideDefinedActive, true);
+    });
+
+    it('calls setNodeNameVisibility for allNodeNames change', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.allNodeNames = true;
+      sheet.applySetting('allNodeNames');
+
+      const lastCall = renderer.setNodeNameVisibilityCalls.at(-1);
+      assert.deepEqual(lastCall, { all: true, feature: true });
+    });
+
+    it('calls setNodeNameVisibility for featureNodeNames change', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.featureNodeNames = false;
+      sheet.applySetting('featureNodeNames');
+
+      const lastCall = renderer.setNodeNameVisibilityCalls.at(-1);
+      assert.deepEqual(lastCall, { all: false, feature: false });
+    });
+  });
+
+  describe('getSettings', () => {
+    it('returns a copy of settings', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+
+      const settings = sheet.getSettings();
+      settings.edgeLabels = true; // mutate the copy
+
+      // Original should be unchanged
+      assert.equal(sheet.settings.edgeLabels, false);
+    });
+
+    it('reflects current state', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.settings.hideDefined = true;
+      sheet.settings.allNodeNames = true;
+
+      const settings = sheet.getSettings();
+      assert.deepEqual(settings, {
+        edgeLabels: false,
+        hideDefined: true,
+        allNodeNames: true,
+        featureNodeNames: true,
+      });
+    });
+  });
+
+  describe('bindToggles', () => {
+    it('updates setting and applies when checkbox changes', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = false;
+      const el = createMockElement();
+
+      const checkbox = createMockElement({
+        type: 'checkbox',
+        dataset: { setting: 'edgeLabels' },
+        checked: true,
+      });
+      el._addChild(checkbox);
+
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.bindToggles();
+
+      // Simulate change event
+      const changeHandlers = checkbox.listeners['change'];
+      assert.ok(changeHandlers && changeHandlers.length > 0, 'should have change handler');
+      changeHandlers[0]({ target: { dataset: { setting: 'edgeLabels' }, checked: true } });
+
+      assert.equal(sheet.settings.edgeLabels, true);
+      assert.equal(renderer.toggleEdgeLabelsCalls, 1);
+    });
+
+    it('ignores unknown setting keys', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+
+      const checkbox = createMockElement({
+        type: 'checkbox',
+        dataset: { setting: 'unknownSetting' },
+        checked: true,
+      });
+      el._addChild(checkbox);
+
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.bindToggles();
+
+      const changeHandlers = checkbox.listeners['change'];
+      changeHandlers[0]({ target: { dataset: { setting: 'unknownSetting' }, checked: true } });
+
+      // Should not throw or modify settings
+      assert.equal(sheet.settings.edgeLabels, false);
+    });
+
+    it('saves to localStorage on toggle change', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = false;
+      const el = createMockElement();
+      const storage = createMockStorage();
+
+      const checkbox = createMockElement({
+        type: 'checkbox',
+        dataset: { setting: 'edgeLabels' },
+        checked: true,
+      });
+      el._addChild(checkbox);
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+      sheet.bindToggles();
+
+      const changeHandlers = checkbox.listeners['change'];
+      changeHandlers[0]({ target: { dataset: { setting: 'edgeLabels' }, checked: true } });
+
+      const stored = JSON.parse(storage.getItem('graph-settings'));
+      assert.equal(stored.edgeLabels, true);
+    });
+  });
+
+  describe('close button binding', () => {
+    it('closes sheet when close button is clicked', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+
+      const closeBtn = createMockElement();
+      closeBtn._role = 'close';
+      el._addChild(closeBtn);
+
+      const sheet = new GraphSettingsSheet(el, renderer);
+      sheet.open();
+      sheet.bindClose();
+
+      // Simulate click
+      const clickHandlers = closeBtn.listeners['click'];
+      assert.ok(clickHandlers && clickHandlers.length > 0, 'should have click handler');
+      clickHandlers[0]();
+
+      assert.equal(sheet.isOpen, false);
+    });
+  });
+
+  describe('document click (outside click to close)', () => {
+    it('closes sheet when clicking outside the sheet and settings button', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const mockDoc = createMockElement();
+      const settingsBtn = createMockElement();
+
+      const sheet = new GraphSettingsSheet(el, renderer, mockDoc, settingsBtn);
+      sheet.bindDocumentClick();
+      sheet.open();
+
+      // Simulate click on an unrelated element
+      const outsideTarget = createMockElement();
+      sheet.handleDocumentClick({ target: outsideTarget });
+
+      assert.equal(sheet.isOpen, false);
+    });
+
+    it('does not close sheet when clicking inside the sheet', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const mockDoc = createMockElement();
+      const settingsBtn = createMockElement();
+      const childInSheet = createMockElement();
+      el._addChild(childInSheet);
+
+      const sheet = new GraphSettingsSheet(el, renderer, mockDoc, settingsBtn);
+      sheet.bindDocumentClick();
+      sheet.open();
+
+      sheet.handleDocumentClick({ target: childInSheet });
+
+      assert.equal(sheet.isOpen, true);
+    });
+
+    it('does not close sheet when clicking the settings button', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const mockDoc = createMockElement();
+      const settingsBtn = createMockElement();
+
+      const sheet = new GraphSettingsSheet(el, renderer, mockDoc, settingsBtn);
+      sheet.bindDocumentClick();
+      sheet.open();
+
+      sheet.handleDocumentClick({ target: settingsBtn });
+
+      assert.equal(sheet.isOpen, true);
+    });
+
+    it('does not close sheet when it is already closed', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const mockDoc = createMockElement();
+      const settingsBtn = createMockElement();
+
+      const sheet = new GraphSettingsSheet(el, renderer, mockDoc, settingsBtn);
+      sheet.bindDocumentClick();
+
+      const outsideTarget = createMockElement();
+      sheet.handleDocumentClick({ target: outsideTarget });
+
+      // Should still be closed, no error
+      assert.equal(sheet.isOpen, false);
+    });
+
+    it('registers click listener on document via bindDocumentClick', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const mockDoc = createMockElement();
+      const settingsBtn = createMockElement();
+
+      const sheet = new GraphSettingsSheet(el, renderer, mockDoc, settingsBtn);
+      sheet.bindDocumentClick();
+
+      assert.ok(mockDoc.listeners['click'] && mockDoc.listeners['click'].length > 0,
+        'should register click listener on document');
+    });
+
+    it('removes click listener on destroy', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const mockDoc = createMockElement();
+      const settingsBtn = createMockElement();
+
+      const sheet = new GraphSettingsSheet(el, renderer, mockDoc, settingsBtn);
+      sheet.bindDocumentClick();
+
+      assert.equal(mockDoc.listeners['click'].length, 1);
+
+      sheet.destroy();
+
+      assert.equal(mockDoc.listeners['click'].length, 0);
+    });
+  });
+
+  describe('localStorage persistence', () => {
+    it('loads settings from localStorage on construction', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const storage = createMockStorage({
+        'graph-settings': JSON.stringify({
+          edgeLabels: true,
+          hideDefined: true,
+          allNodeNames: true,
+          featureNodeNames: false,
+        }),
+      });
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+
+      assert.equal(sheet.settings.edgeLabels, true);
+      assert.equal(sheet.settings.hideDefined, true);
+      assert.equal(sheet.settings.allNodeNames, true);
+      assert.equal(sheet.settings.featureNodeNames, false);
+    });
+
+    it('uses defaults when localStorage is empty', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const storage = createMockStorage();
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+
+      assert.equal(sheet.settings.edgeLabels, false);
+      assert.equal(sheet.settings.hideDefined, false);
+      assert.equal(sheet.settings.allNodeNames, false);
+      assert.equal(sheet.settings.featureNodeNames, true);
+    });
+
+    it('uses defaults when localStorage has corrupt data', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const storage = createMockStorage({
+        'graph-settings': 'not-valid-json{{{',
+      });
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+
+      assert.equal(sheet.settings.edgeLabels, false);
+      assert.equal(sheet.settings.featureNodeNames, true);
+    });
+
+    it('ignores unknown keys in stored data', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const storage = createMockStorage({
+        'graph-settings': JSON.stringify({
+          edgeLabels: true,
+          unknownKey: 'should be ignored',
+        }),
+      });
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+
+      assert.equal(sheet.settings.edgeLabels, true);
+      assert.equal(sheet.settings.hideDefined, false); // default
+      assert.ok(!('unknownKey' in sheet.settings));
+    });
+
+    it('ignores non-boolean values in stored data', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const storage = createMockStorage({
+        'graph-settings': JSON.stringify({
+          edgeLabels: 'true', // string, not boolean
+          allNodeNames: 42,   // number, not boolean
+        }),
+      });
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+
+      assert.equal(sheet.settings.edgeLabels, false); // default
+      assert.equal(sheet.settings.allNodeNames, false); // default
+    });
+
+    it('saves settings to localStorage on toggle', () => {
+      const renderer = createMockRenderer();
+      renderer.edgeLabelsVisible = false;
+      const el = createMockElement();
+      const storage = createMockStorage();
+
+      const checkbox = createMockElement({
+        type: 'checkbox',
+        dataset: { setting: 'allNodeNames' },
+        checked: true,
+      });
+      el._addChild(checkbox);
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+      sheet.bindToggles();
+
+      const changeHandlers = checkbox.listeners['change'];
+      changeHandlers[0]({ target: { dataset: { setting: 'allNodeNames' }, checked: true } });
+
+      const stored = JSON.parse(storage.getItem('graph-settings'));
+      assert.equal(stored.allNodeNames, true);
+      assert.equal(stored.featureNodeNames, true); // other defaults preserved
+    });
+
+    it('works without localStorage (null)', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+
+      // No localStorage passed — should not throw
+      const sheet = new GraphSettingsSheet(el, renderer);
+      assert.equal(sheet.settings.edgeLabels, false);
+    });
+
+    it('partially loads from localStorage, using defaults for missing keys', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+      const storage = createMockStorage({
+        'graph-settings': JSON.stringify({ edgeLabels: true }),
+      });
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+
+      assert.equal(sheet.settings.edgeLabels, true);
+      assert.equal(sheet.settings.hideDefined, false); // default
+      assert.equal(sheet.settings.allNodeNames, false); // default
+      assert.equal(sheet.settings.featureNodeNames, true); // default
+    });
+  });
+
+  describe('syncToggles', () => {
+    it('syncs checkbox checked state to match settings', () => {
+      const renderer = createMockRenderer();
+      const el = createMockElement();
+
+      const cb1 = createMockElement({ type: 'checkbox', dataset: { setting: 'edgeLabels' }, checked: false });
+      const cb2 = createMockElement({ type: 'checkbox', dataset: { setting: 'featureNodeNames' }, checked: false });
+      el._addChild(cb1);
+      el._addChild(cb2);
+
+      const storage = createMockStorage({
+        'graph-settings': JSON.stringify({ edgeLabels: true, featureNodeNames: false }),
+      });
+
+      const sheet = new GraphSettingsSheet(el, renderer, undefined, undefined, storage);
+      sheet.syncToggles();
+
+      assert.equal(cb1.checked, true);
+      assert.equal(cb2.checked, false);
+    });
+  });
+});