@fraczak/k 6.5.0 → 6.6.0

package/tests/test-repl-html.mjs

@@ -287,6 +287,147 @@ if (chromiumBin) {
     })()`);
     assert.strictEqual(selectionCheck, true, "Selection in terminal output should hold after click");
 
+    // === Test Tree View Functionality ===
+    console.log("   Verifying Tree View: initial depth <= 3, folding/unfolding, mode toggle, and pattern cycles...");
+
+    // 1. Evaluate a 5-level deep nested product: { { { { {} e } d } c } b }
+    await evaluateAsync(`window.kRepl.executeCommand("{ { { { {} e } d } c } b }")`);
+
+    const treeCheck = await evaluateAsync(`(() => {
+      const entries = document.querySelectorAll(".terminal-entry");
+      const lastEntry = entries[entries.length - 1];
+      const container = lastEntry.querySelector(".k-entry-container");
+      if (!container) return { error: "No .k-entry-container found" };
+
+      const treeView = container.querySelector(".k-tree-view");
+      const rawView = container.querySelector(".k-raw-view");
+      const treeBtn = container.querySelector(".k-btn-mode.active");
+      const rawBtn = container.querySelectorAll(".k-btn-mode")[1];
+
+      // Check Value section
+      const valSection = container.querySelector(".k-tree-value-section");
+      if (!valSection) return { error: "No value section" };
+
+      // Check product details nodes hierarchy
+      // Level 1: root product (depth 1)
+      const level1 = valSection.querySelector(".k-tree-section-body > .k-tree-node.k-tree-product");
+      if (!level1 || !level1.open) return { error: "Level 1 product should be open" };
+
+      // Level 2: .b product (depth 2)
+      const level2 = level1.querySelector(".k-tree-children .k-tree-node.k-tree-product");
+      if (!level2 || !level2.open) return { error: "Level 2 product should be open" };
+
+      // Level 3: .c product (depth 3)
+      const level3 = level2.querySelector(".k-tree-children .k-tree-node.k-tree-product");
+      if (!level3 || !level3.open) return { error: "Level 3 product should be open" };
+
+      // Level 4: .d product (depth 4) -> MUST BE COLLAPSED (open === false)
+      const level4 = level3.querySelector(".k-tree-children .k-tree-node.k-tree-product");
+      if (!level4) return { error: "Level 4 product node missing" };
+      if (level4.open) return { error: "Level 4 product should be collapsed (open === false)" };
+
+      // Check pattern section exists and has cycle or vardef
+      const patSection = container.querySelector(".k-tree-pat-section");
+      if (!patSection) return { error: "No pattern section" };
+
+      // Test Mode Toggle: click Raw
+      rawBtn.click();
+      const rawVisible = rawView.style.display !== "none" && treeView.style.display === "none";
+
+      // Click Tree back
+      container.querySelector(".k-btn-mode").click();
+      const treeVisible = treeView.style.display !== "none" && rawView.style.display === "none";
+
+      // Test Unfolding Level 4
+      level4.open = true;
+      level4.dispatchEvent(new Event("toggle"));
+
+      // After toggle, level 4's children should be populated with .e
+      const level4Text = level4.textContent;
+      const unfoldedHasE = level4Text.includes(".e") || level4Text.includes("42");
+
+      return {
+        success: true,
+        rawVisible,
+        treeVisible,
+        unfoldedHasE
+      };
+    })()`);
+
+    assert.strictEqual(treeCheck.success, true, `Tree view validation failed: ${treeCheck.error}`);
+    assert.strictEqual(treeCheck.rawVisible, true, "Clicking Raw should show raw view and hide tree view");
+    assert.strictEqual(treeCheck.treeVisible, true, "Clicking Tree should restore tree view");
+    assert.strictEqual(treeCheck.unfoldedHasE, true, "Unfolding level 4 should lazily populate its children");
+
+    // 2. Test recursive pattern tree with cycle detection
+    await evaluateAsync(`window.kRepl.executeCommand("10")`);
+    const patCycleCheck = await evaluateAsync(`(() => {
+      const entries = document.querySelectorAll(".terminal-entry");
+      const lastEntry = entries[entries.length - 1];
+      const patSection = lastEntry.querySelector(".k-tree-pat-section");
+      if (!patSection) return { error: "No pattern section for 10" };
+
+      const cycleBadges = patSection.querySelectorAll(".k-badge-cycle");
+      const varDefs = patSection.querySelectorAll(".k-pat-vardef");
+
+      return {
+        hasCycleBadge: cycleBadges.length > 0,
+        hasVarDef: varDefs.length > 0
+      };
+    })()`);
+
+    assert.strictEqual(patCycleCheck.hasCycleBadge, true, "Pattern tree for recursive type should have cycle badge");
+    assert.strictEqual(patCycleCheck.hasVarDef, true, "Pattern tree for recursive type should have variable definition (=X0)");
+
+    // 3. Test variant chain depth limits and Expand All / Collapse All on 10
+    const variantDepthAndActionsCheck = await evaluateAsync(`(() => {
+      const entries = document.querySelectorAll(".terminal-entry");
+      const lastEntry = entries[entries.length - 1];
+      const valSection = lastEntry.querySelector(".k-tree-value-section");
+
+      // Hierarchy for 10 (variant chain: + -> 1 -> 0 -> 1 -> ...)
+      const v1 = valSection?.querySelector(".k-tree-section-body > .k-tree-node.k-tree-variant");
+      const v2 = v1?.querySelector(".k-tree-children .k-tree-node.k-tree-variant");
+      const v3 = v2?.querySelector(".k-tree-children .k-tree-node.k-tree-variant");
+      const v4 = v3?.querySelector(".k-tree-children .k-tree-node.k-tree-variant");
+
+      const v1Open = !!v1?.open;
+      const v2Open = !!v2?.open;
+      const v3Open = !!v3?.open;
+      const v4Collapsed = v4 ? !v4.open : false;
+
+      // Click Expand All
+      const actionBtns = lastEntry.querySelectorAll(".k-btn-action");
+      const expandBtn = actionBtns[0];
+      const collapseBtn = actionBtns[1];
+
+      expandBtn.click();
+      const allOpenAfterExpand = v4.open;
+
+      // Click Collapse All
+      collapseBtn.click();
+      const newV4 = valSection?.querySelector(
+        ".k-tree-section-body > .k-tree-node.k-tree-variant .k-tree-children .k-tree-node.k-tree-variant .k-tree-children .k-tree-node.k-tree-variant .k-tree-children .k-tree-node.k-tree-variant"
+      );
+      const v4CollapsedAgain = newV4 ? !newV4.open : false;
+
+      return {
+        v1Open,
+        v2Open,
+        v3Open,
+        v4Collapsed,
+        allOpenAfterExpand,
+        v4CollapsedAgain
+      };
+    })()`);
+
+    assert.strictEqual(variantDepthAndActionsCheck.v1Open, true, "Variant level 1 must be open");
+    assert.strictEqual(variantDepthAndActionsCheck.v2Open, true, "Variant level 2 must be open");
+    assert.strictEqual(variantDepthAndActionsCheck.v3Open, true, "Variant level 3 must be open");
+    assert.strictEqual(variantDepthAndActionsCheck.v4Collapsed, true, "Variant level 4 must be collapsed by default");
+    assert.strictEqual(variantDepthAndActionsCheck.allOpenAfterExpand, true, "Expand button should expand collapsed nodes");
+    assert.strictEqual(variantDepthAndActionsCheck.v4CollapsedAgain, true, "Collapse button should reset deeper nodes to collapsed");
+
     ws.close();
     console.log("   Browser execution verified successfully!");
   } finally {

package/tests/test-tree-view.mjs

@@ -0,0 +1,185 @@
+import assert from "node:assert";
+import { Value } from "../Value.mjs";
+import {
+  renderValueNode,
+  renderPatternTree,
+  createOutputEntryElement
+} from "../browser/tree-view.mjs";
+
+console.log("=== Testing Tree View (browser/tree-view.mjs) ===");
+
+// Lightweight DOM mock for testing tree construction in Node.js
+class MockElement {
+  constructor(tagName) {
+    this.tagName = tagName.toUpperCase();
+    this.className = "";
+    this._textContent = "";
+    this._innerHTML = "";
+    this.open = false;
+    this.children = [];
+    this.listeners = {};
+    this.style = {};
+  }
+
+  get textContent() {
+    if (this._textContent) return this._textContent;
+    return this.children.map((c) => (typeof c === "string" ? c : c.textContent)).join("");
+  }
+
+  set textContent(val) {
+    this._textContent = String(val);
+    this.children = [];
+  }
+
+  get innerHTML() {
+    return this._innerHTML || this.textContent;
+  }
+
+  set innerHTML(val) {
+    this._innerHTML = String(val);
+    this._textContent = String(val).replace(/<[^>]*>/g, "");
+  }
+
+  appendChild(child) {
+    this.children.push(child);
+    return child;
+  }
+
+  addEventListener(type, fn) {
+    if (!this.listeners[type]) this.listeners[type] = [];
+    this.listeners[type].push(fn);
+  }
+
+  dispatchEvent(event) {
+    const list = this.listeners[event.type] || [];
+    for (const fn of list) fn(event);
+  }
+
+  querySelectorAll(selector) {
+    const results = [];
+    const check = (el) => {
+      for (const child of el.children) {
+        if (child instanceof MockElement) {
+          let matches = false;
+          if (selector === "details" && child.tagName === "DETAILS") matches = true;
+          if (selector.startsWith(".") && child.className.split(" ").includes(selector.slice(1))) matches = true;
+          if (matches) results.push(child);
+          check(child);
+        }
+      }
+    };
+    check(this);
+    return results;
+  }
+
+  querySelector(selector) {
+    return this.querySelectorAll(selector)[0] || null;
+  }
+}
+
+globalThis.document = {
+  createElement(tag) {
+    return new MockElement(tag);
+  }
+};
+globalThis.Event = class Event {
+  constructor(type) {
+    this.type = type;
+  }
+};
+
+// 1. Test renderValueNode for empty product
+const emptyVal = Value.product({});
+const emptyEl = renderValueNode(emptyVal);
+assert.strictEqual(emptyEl.textContent, "{}", "Empty product must render as '{}'");
+
+// 2. Test renderValueNode for nested products (depth tracking)
+// { a: { b: { c: { d: {} } } } }
+const deepProduct = Value.product({
+  a: Value.product({
+    b: Value.product({
+      c: Value.product({
+        d: Value.product({})
+      })
+    })
+  })
+});
+
+const treeRoot = renderValueNode(deepProduct, 1, 3);
+assert.strictEqual(treeRoot.tagName, "DETAILS", "Root product should be a <details> element");
+assert.strictEqual(treeRoot.open, true, "Root product (depth 1) must be open");
+
+// Find child .a
+const nodeA = treeRoot.querySelectorAll(".k-tree-node")[0];
+assert(nodeA, "Node .a must exist");
+assert.strictEqual(nodeA.open, true, "Node .a (depth 2) must be open");
+
+// Find child .b
+const nodeB = nodeA.querySelectorAll(".k-tree-node")[0];
+assert(nodeB, "Node .b must exist");
+assert.strictEqual(nodeB.open, true, "Node .b (depth 3) must be open");
+
+// Find child .c
+const nodeC = nodeB.querySelectorAll(".k-tree-node")[0];
+assert(nodeC, "Node .c must exist");
+assert.strictEqual(nodeC.open, false, "Node .c (depth 4) must be collapsed (open === false)");
+
+// Test lazy unfolding of node .c
+assert.strictEqual(nodeC.querySelector(".k-tree-children").children.length, 0, "Children of collapsed node must not be populated initially");
+nodeC.open = true;
+nodeC.dispatchEvent(new Event("toggle"));
+assert(nodeC.querySelector(".k-tree-children").children.length > 0, "Unfolding node .c must lazily populate its children");
+assert(nodeC.textContent.includes(".d:"), "Unfolded children must include .d:");
+
+// 3. Test renderValueNode for variant chain (integers: + -> 1 -> 0 -> 1 -> _ -> {})
+const variantVal = Value.variant(
+  "+",
+  Value.variant(
+    "1",
+    Value.variant(
+      "0",
+      Value.variant(
+        "1",
+        Value.variant("_", Value.product({}))
+      )
+    )
+  )
+);
+
+const varTree = renderValueNode(variantVal, 1, 3);
+assert.strictEqual(varTree.tagName, "DETAILS");
+assert.strictEqual(varTree.open, true, "Variant depth 1 (+) must be open");
+
+const var2 = varTree.querySelectorAll(".k-tree-variant")[0];
+assert.strictEqual(var2.open, true, "Variant depth 2 (1) must be open");
+
+const var3 = var2.querySelectorAll(".k-tree-variant")[0];
+assert.strictEqual(var3.open, true, "Variant depth 3 (0) must be open");
+
+const var4 = var3.querySelectorAll(".k-tree-variant")[0];
+assert.strictEqual(var4.open, false, "Variant depth 4 (1) must be collapsed");
+
+// 4. Test renderPatternTree with cycles (recursive integer type: ?<<X0 0, X0 1, {} _>=X0 +, X0 ->)
+const recursivePattern = [
+  ["closed-union", [["+", 1], ["-", 1]]],
+  ["closed-union", [["0", 1], ["1", 1], ["_", 2]]],
+  ["closed-product", []]
+];
+
+const patTree = renderPatternTree(recursivePattern, 3);
+assert.strictEqual(patTree.tagName, "DETAILS");
+assert.strictEqual(patTree.open, true, "Root pattern node must be open");
+assert(patTree.textContent.includes("recursive"), "Recursive cycle must be detected and marked 'recursive'");
+
+// 5. Test createOutputEntryElement
+const entryEl = createOutputEntryElement({
+  value: variantVal,
+  rawText: "{}|_|1|0|1|+ ?<<X0 0, X0 1, {} _>=X0 +, X0 ->\nint: 11",
+  codecOutputs: ["int: 11"]
+});
+
+assert(entryEl.querySelector(".k-tree-view"), "Tree view container must exist");
+assert(entryEl.querySelector(".k-raw-view"), "Raw view container must exist");
+assert(entryEl.textContent.includes("int: 11"), "Codec output must be visible in container");
+
+console.log("OK - All tree view unit tests passed.");