@assistkick/create 1.0.0

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

@@ -0,0 +1,142 @@
+/**
+ * Tests for graceful initialization when graph.json/kanban.json are missing.
+ * Verifies that ensureDataFiles creates valid empty-state defaults
+ * without overwriting existing files.
+ * Uses node:test built-in runner.
+ */
+import { describe, it, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { writeFile, readFile, access, mkdir, rm } from 'node:fs/promises';
+import { join } from 'node:path';
+import { tmpdir } from 'node:os';
+import { randomUUID } from 'node:crypto';
+
+// Replicate the same logic from serve_ui.js for testability
+const EMPTY_GRAPH = {
+  version: '1.0',
+  project: {
+    name: '',
+    description: '',
+    created_at: '2026-01-01T00:00:00.000Z',
+    updated_at: '2026-01-01T00:00:00.000Z',
+  },
+  nodes: [],
+  edges: [],
+};
+
+const EMPTY_KANBAN = {};
+
+const fileExists = async (filePath) => {
+  try {
+    await access(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const ensureDataFiles = async (dataDir) => {
+  const nodesDir = join(dataDir, 'nodes');
+  const graphPath = join(dataDir, 'graph.json');
+  const kanbanPath = join(dataDir, 'kanban.json');
+
+  if (!await fileExists(nodesDir)) {
+    await mkdir(nodesDir, { recursive: true });
+  }
+  if (!await fileExists(graphPath)) {
+    await writeFile(graphPath, JSON.stringify(EMPTY_GRAPH, null, 2) + '\n', 'utf-8');
+  }
+  if (!await fileExists(kanbanPath)) {
+    await writeFile(kanbanPath, JSON.stringify(EMPTY_KANBAN, null, 2) + '\n', 'utf-8');
+  }
+};
+
+describe('ensureDataFiles — graceful initialization', () => {
+  let tempDir;
+
+  beforeEach(async () => {
+    tempDir = join(tmpdir(), `graceful-init-test-${randomUUID().slice(0, 8)}`);
+    await mkdir(tempDir, { recursive: true });
+  });
+
+  afterEach(async () => {
+    await rm(tempDir, { recursive: true, force: true });
+  });
+
+  it('creates graph.json with valid empty structure when missing', async () => {
+    await ensureDataFiles(tempDir);
+    const content = await readFile(join(tempDir, 'graph.json'), 'utf-8');
+    const data = JSON.parse(content);
+    assert.equal(data.version, '1.0');
+    assert.ok(data.project, 'should have project object');
+    assert.ok(Array.isArray(data.nodes), 'nodes should be an array');
+    assert.ok(Array.isArray(data.edges), 'edges should be an array');
+    assert.equal(data.nodes.length, 0);
+    assert.equal(data.edges.length, 0);
+  });
+
+  it('creates kanban.json with empty object when missing', async () => {
+    await ensureDataFiles(tempDir);
+    const content = await readFile(join(tempDir, 'kanban.json'), 'utf-8');
+    const data = JSON.parse(content);
+    assert.deepEqual(data, {});
+  });
+
+  it('creates nodes/ directory when missing', async () => {
+    await ensureDataFiles(tempDir);
+    assert.ok(await fileExists(join(tempDir, 'nodes')), 'nodes/ directory should exist');
+  });
+
+  it('does not overwrite existing graph.json', async () => {
+    const existingGraph = { version: '1.0', project: { name: 'My Project' }, nodes: [{ id: 'feat_001' }], edges: [] };
+    await writeFile(join(tempDir, 'graph.json'), JSON.stringify(existingGraph), 'utf-8');
+
+    await ensureDataFiles(tempDir);
+
+    const content = await readFile(join(tempDir, 'graph.json'), 'utf-8');
+    const data = JSON.parse(content);
+    assert.equal(data.project.name, 'My Project', 'should preserve existing project name');
+    assert.equal(data.nodes.length, 1, 'should preserve existing nodes');
+    assert.equal(data.nodes[0].id, 'feat_001');
+  });
+
+  it('does not overwrite existing kanban.json', async () => {
+    const existingKanban = { feat_001: { column: 'done', rejection_count: 0, notes: [] } };
+    await writeFile(join(tempDir, 'kanban.json'), JSON.stringify(existingKanban), 'utf-8');
+
+    await ensureDataFiles(tempDir);
+
+    const content = await readFile(join(tempDir, 'kanban.json'), 'utf-8');
+    const data = JSON.parse(content);
+    assert.ok(data.feat_001, 'should preserve existing kanban entries');
+    assert.equal(data.feat_001.column, 'done');
+  });
+
+  it('handles partial state — graph.json exists but kanban.json missing', async () => {
+    const existingGraph = { version: '1.0', project: {}, nodes: [], edges: [] };
+    await writeFile(join(tempDir, 'graph.json'), JSON.stringify(existingGraph), 'utf-8');
+
+    await ensureDataFiles(tempDir);
+
+    // graph.json should be untouched
+    const graphContent = await readFile(join(tempDir, 'graph.json'), 'utf-8');
+    assert.deepEqual(JSON.parse(graphContent), existingGraph);
+
+    // kanban.json should be created
+    const kanbanContent = await readFile(join(tempDir, 'kanban.json'), 'utf-8');
+    assert.deepEqual(JSON.parse(kanbanContent), {});
+  });
+
+  it('is idempotent — running twice produces same result', async () => {
+    await ensureDataFiles(tempDir);
+    const graphAfterFirst = await readFile(join(tempDir, 'graph.json'), 'utf-8');
+    const kanbanAfterFirst = await readFile(join(tempDir, 'kanban.json'), 'utf-8');
+
+    await ensureDataFiles(tempDir);
+    const graphAfterSecond = await readFile(join(tempDir, 'graph.json'), 'utf-8');
+    const kanbanAfterSecond = await readFile(join(tempDir, 'kanban.json'), 'utf-8');
+
+    assert.equal(graphAfterFirst, graphAfterSecond);
+    assert.equal(kanbanAfterFirst, kanbanAfterSecond);
+  });
+});

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

@@ -0,0 +1,314 @@
+/**
+ * Tests for GraphLegend component logic.
+ * Uses node:test built-in runner.
+ * Tests data transformations and state management, not DOM rendering.
+ */
+import { describe, it, beforeEach } from 'node:test';
+import assert from 'node:assert/strict';
+
+// Mock DOM element that tracks innerHTML, className, classList, and child appends
+const createMockElement = (tag = 'div') => {
+  const children = [];
+  const classSet = new Set();
+  const listeners = {};
+  const element = {
+    tagName: tag,
+    innerHTML: '',
+    className: '',
+    children,
+    classList: {
+      add: (c) => { classSet.add(c); element.className = [...classSet].join(' '); },
+      remove: (c) => { classSet.delete(c); element.className = [...classSet].join(' '); },
+      toggle: (c, force) => {
+        if (force === undefined) {
+          if (classSet.has(c)) classSet.delete(c); else classSet.add(c);
+        } else if (force) {
+          classSet.add(c);
+        } else {
+          classSet.delete(c);
+        }
+        element.className = [...classSet].join(' ');
+      },
+      contains: (c) => classSet.has(c),
+    },
+    appendChild: (child) => { children.push(child); },
+    removeChild: (child) => {
+      const idx = children.indexOf(child);
+      if (idx >= 0) children.splice(idx, 1);
+    },
+    parentNode: null,
+    querySelector: (sel) => {
+      // Simple mock for querySelector — returns a mock element
+      return createMockElement('button');
+    },
+    addEventListener: (event, handler) => {
+      listeners[event] = listeners[event] || [];
+      listeners[event].push(handler);
+    },
+    _listeners: listeners,
+  };
+  return element;
+};
+
+// Mock document
+const createMockDocument = () => {
+  const elements = {};
+  return {
+    createElement: (tag) => {
+      const el = createMockElement(tag);
+      return el;
+    },
+    getElementById: (id) => {
+      if (!elements[id]) {
+        elements[id] = createMockElement('div');
+      }
+      return elements[id];
+    },
+    _elements: elements,
+  };
+};
+
+// Mock localStorage
+const createMockLocalStorage = (initial = {}) => {
+  const store = { ...initial };
+  return {
+    getItem: (key) => store[key] ?? null,
+    setItem: (key, value) => { store[key] = value; },
+    removeItem: (key) => { delete store[key]; },
+    _store: store,
+  };
+};
+
+// We can't import the browser module directly due to ESM/DOM dependency,
+// so we test the core logic patterns that GraphLegend uses.
+
+describe('GraphLegend data logic', () => {
+
+  describe('NODE_COLORS completeness', () => {
+    it('should map all known node types to colors', async () => {
+      // Import the constants from graph_renderer
+      const { NODE_COLORS, EDGE_COLORS, TYPE_LABELS } = await import('../packages/frontend/src/constants/graph.js');
+
+      const expectedNodeTypes = [
+        'feature', 'component', 'data_entity', 'decision', 'tech_choice',
+        'non_functional_requirement', 'design_token', 'design_pattern',
+        'user_role', 'flow', 'assumption', 'open_question',
+      ];
+
+      for (const type of expectedNodeTypes) {
+        assert.ok(NODE_COLORS[type], `NODE_COLORS should have color for ${type}`);
+        assert.ok(TYPE_LABELS[type], `TYPE_LABELS should have label for ${type}`);
+      }
+
+      assert.equal(Object.keys(NODE_COLORS).length, expectedNodeTypes.length,
+        'NODE_COLORS should have exactly the expected node types');
+    });
+
+    it('should have valid hex color values for all node types', async () => {
+      const { NODE_COLORS } = await import('../packages/frontend/src/constants/graph.js');
+      const hexPattern = /^#[0-9a-f]{6}$/i;
+
+      for (const [type, color] of Object.entries(NODE_COLORS)) {
+        assert.match(color, hexPattern, `${type} color should be a valid hex color`);
+      }
+    });
+  });
+
+  describe('EDGE_COLORS completeness', () => {
+    it('should map all known relation types to colors', async () => {
+      const { EDGE_COLORS } = await import('../packages/frontend/src/constants/graph.js');
+
+      const expectedRelations = [
+        'contains', 'depends_on', 'governed_by', 'constrained_by',
+        'implemented_with', 'reads_writes', 'exposes', 'consumes',
+        'performed_by', 'escalates_to', 'relates_to',
+      ];
+
+      for (const relation of expectedRelations) {
+        assert.ok(EDGE_COLORS[relation], `EDGE_COLORS should have color for ${relation}`);
+      }
+
+      assert.equal(Object.keys(EDGE_COLORS).length, expectedRelations.length,
+        'EDGE_COLORS should have exactly the expected relation types');
+    });
+
+    it('should have valid hex color values for all edge types', async () => {
+      const { EDGE_COLORS } = await import('../packages/frontend/src/constants/graph.js');
+      const hexPattern = /^#[0-9a-f]{6}$/i;
+
+      for (const [relation, color] of Object.entries(EDGE_COLORS)) {
+        assert.match(color, hexPattern, `${relation} color should be a valid hex color`);
+      }
+    });
+  });
+
+  describe('TYPE_LABELS consistency', () => {
+    it('should have a label for every NODE_COLORS entry', async () => {
+      const { NODE_COLORS, TYPE_LABELS } = await import('../packages/frontend/src/constants/graph.js');
+
+      for (const type of Object.keys(NODE_COLORS)) {
+        assert.ok(TYPE_LABELS[type], `TYPE_LABELS should have label for ${type}`);
+        assert.ok(TYPE_LABELS[type].length <= 4,
+          `TYPE_LABEL for ${type} should be max 4 chars, got "${TYPE_LABELS[type]}"`);
+      }
+    });
+
+    it('should have uppercase labels', async () => {
+      const { TYPE_LABELS } = await import('../packages/frontend/src/constants/graph.js');
+
+      for (const [type, label] of Object.entries(TYPE_LABELS)) {
+        assert.equal(label, label.toUpperCase(),
+          `TYPE_LABEL for ${type} should be uppercase`);
+      }
+    });
+  });
+
+  describe('LEGEND_LABELS human-readable names', () => {
+    it('should have a human-readable label for every NODE_COLORS entry', async () => {
+      const { NODE_COLORS, LEGEND_LABELS } = await import('../packages/frontend/src/constants/graph.js');
+
+      for (const type of Object.keys(NODE_COLORS)) {
+        assert.ok(LEGEND_LABELS[type], `LEGEND_LABELS should have label for ${type}`);
+      }
+
+      assert.equal(Object.keys(LEGEND_LABELS).length, Object.keys(NODE_COLORS).length,
+        'LEGEND_LABELS should have exactly the same number of entries as NODE_COLORS');
+    });
+
+    it('should use the correct human-readable names', async () => {
+      const { LEGEND_LABELS } = await import('../packages/frontend/src/constants/graph.js');
+
+      const expected = {
+        feature: 'Feature',
+        component: 'Component',
+        data_entity: 'Data Entity',
+        decision: 'Decision',
+        tech_choice: 'Tech Choice',
+        non_functional_requirement: 'Non-Functional Req',
+        design_token: 'Design Token',
+        design_pattern: 'Design Pattern',
+        user_role: 'User Role',
+        flow: 'Flow',
+        assumption: 'Assumption',
+        open_question: 'Open Question',
+      };
+
+      for (const [type, label] of Object.entries(expected)) {
+        assert.equal(LEGEND_LABELS[type], label,
+          `LEGEND_LABELS[${type}] should be "${label}", got "${LEGEND_LABELS[type]}"`);
+      }
+    });
+
+    it('should not use abbreviated codes', async () => {
+      const { LEGEND_LABELS } = await import('../packages/frontend/src/constants/graph.js');
+      const abbreviations = ['FEAT', 'COMP', 'DATA', 'DEC', 'TECH', 'NFR', 'DTOK', 'DPAT', 'ROLE', 'ASMP', 'OQ'];
+
+      for (const label of Object.values(LEGEND_LABELS)) {
+        assert.ok(!abbreviations.includes(label),
+          `LEGEND_LABELS should not contain abbreviated code "${label}"`);
+      }
+    });
+  });
+
+  describe('localStorage edge-relations collapse state', () => {
+    it('should default to collapsed when no stored preference', () => {
+      const storage = createMockLocalStorage();
+      const stored = storage.getItem('legend-edges-collapsed');
+      // Default: collapsed (true) when no preference is stored
+      const edgesCollapsed = stored === null ? true : stored === 'true';
+      assert.equal(edgesCollapsed, true, 'edge relations should default to collapsed');
+    });
+
+    it('should restore expanded state from localStorage', () => {
+      const storage = createMockLocalStorage({ 'legend-edges-collapsed': 'false' });
+      const stored = storage.getItem('legend-edges-collapsed');
+      const edgesCollapsed = stored === null ? true : stored === 'true';
+      assert.equal(edgesCollapsed, false, 'edge relations should be expanded');
+    });
+
+    it('should restore collapsed state from localStorage', () => {
+      const storage = createMockLocalStorage({ 'legend-edges-collapsed': 'true' });
+      const stored = storage.getItem('legend-edges-collapsed');
+      const edgesCollapsed = stored === null ? true : stored === 'true';
+      assert.equal(edgesCollapsed, true, 'edge relations should be collapsed');
+    });
+
+    it('should persist edge-relations collapse toggle to localStorage', () => {
+      const storage = createMockLocalStorage();
+
+      // Simulate toggle to expanded
+      storage.setItem('legend-edges-collapsed', 'false');
+      assert.equal(storage.getItem('legend-edges-collapsed'), 'false');
+
+      // Toggle back to collapsed
+      storage.setItem('legend-edges-collapsed', 'true');
+      assert.equal(storage.getItem('legend-edges-collapsed'), 'true');
+    });
+  });
+
+  describe('hiddenTypes toggle state management', () => {
+    it('should start with all types visible (empty hiddenTypes set)', () => {
+      const hiddenTypes = new Set();
+      assert.equal(hiddenTypes.size, 0, 'hiddenTypes should be empty by default');
+    });
+
+    it('should add a type to hiddenTypes when toggled off', () => {
+      const hiddenTypes = new Set();
+      hiddenTypes.add('feature');
+      assert.ok(hiddenTypes.has('feature'), 'feature should be hidden');
+      assert.equal(hiddenTypes.size, 1);
+    });
+
+    it('should remove a type from hiddenTypes when toggled back on', () => {
+      const hiddenTypes = new Set(['feature']);
+      hiddenTypes.delete('feature');
+      assert.ok(!hiddenTypes.has('feature'), 'feature should be visible again');
+      assert.equal(hiddenTypes.size, 0);
+    });
+
+    it('should support multiple hidden types simultaneously', () => {
+      const hiddenTypes = new Set();
+      hiddenTypes.add('feature');
+      hiddenTypes.add('component');
+      hiddenTypes.add('decision');
+      assert.equal(hiddenTypes.size, 3);
+      assert.ok(hiddenTypes.has('feature'));
+      assert.ok(hiddenTypes.has('component'));
+      assert.ok(hiddenTypes.has('decision'));
+    });
+
+    it('should return a copy from getHiddenTypes pattern', () => {
+      const hiddenTypes = new Set(['feature', 'component']);
+      const copy = new Set(hiddenTypes);
+      copy.add('decision');
+      assert.equal(hiddenTypes.size, 2, 'original should not be modified');
+      assert.equal(copy.size, 3, 'copy should have the added type');
+    });
+  });
+
+  describe('EDGE_LABELS mapping', () => {
+    it('should have human-readable labels for all edge types', async () => {
+      const { EDGE_COLORS } = await import('../packages/frontend/src/constants/graph.js');
+
+      // These are the labels defined in graph_legend.js
+      const EDGE_LABELS = {
+        contains: 'contains',
+        depends_on: 'depends on',
+        governed_by: 'governed by',
+        constrained_by: 'constrained by',
+        implemented_with: 'implemented with',
+        reads_writes: 'reads/writes',
+        exposes: 'exposes',
+        consumes: 'consumes',
+        performed_by: 'performed by',
+        escalates_to: 'escalates to',
+        relates_to: 'relates to',
+      };
+
+      for (const relation of Object.keys(EDGE_COLORS)) {
+        assert.ok(EDGE_LABELS[relation],
+          `EDGE_LABELS should have human-readable label for ${relation}`);
+      }
+    });
+  });
+});