meno-core 1.0.0

package/lib/client/core/ComponentBuilder.test.ts

@@ -0,0 +1,677 @@
+import { test, expect, describe, beforeEach, mock } from "bun:test";
+import { ComponentBuilder } from "./ComponentBuilder";
+import { ComponentRegistry } from "../componentRegistry";
+import { ElementRegistry } from "../elementRegistry";
+import type { ComponentNode } from "../../shared/types";
+import type { HighlightManager } from "../highlightManager";
+import { NODE_TYPE } from "../../shared/constants";
+import { createMockHighlightManager, createMockElementRegistry } from "../../test-utils/mocks";
+
+// Note: Using typed mocks from test-utils/mocks instead of inline 'as any' casts
+
+describe("ComponentBuilder", () => {
+  let componentRegistry: ComponentRegistry;
+  let hoverHighlightManager: HighlightManager;
+  let elementRegistry: ElementRegistry;
+  let builder: ComponentBuilder;
+  let registeredPaths: Array<{ path: string; tag?: string }>;
+
+  beforeEach(() => {
+    componentRegistry = new ComponentRegistry();
+    hoverHighlightManager = createMockHighlightManager();
+    registeredPaths = [];
+
+    // Create mock element registry with path tracking
+    elementRegistry = createMockElementRegistry();
+    elementRegistry.register = mock((path: any) => {
+      // Capture the path being registered (convert array to string)
+      const pathStr = Array.isArray(path) ? path.join(',') : String(path);
+      registeredPaths.push({ path: pathStr });
+    });
+
+    builder = new ComponentBuilder({
+      componentRegistry,
+      hoverHighlightManager,
+      elementRegistry,
+    });
+  });
+
+  describe("buildComponent - Basic Cases", () => {
+    test("should return null for null node", () => {
+      const result = builder.buildComponent({ node: null });
+      expect(result).toBeNull();
+    });
+
+    test("should return null for undefined node", () => {
+      const result = builder.buildComponent({ node: undefined });
+      expect(result).toBeNull();
+    });
+
+    test("should return string for string node", () => {
+      const result = builder.buildComponent({ node: "Hello" });
+      expect(result).toBe("Hello");
+    });
+
+    test("should return number for number node", () => {
+      const result = builder.buildComponent({ node: 42 });
+      expect(result).toBe(42);
+    });
+
+    test("should return array for array of nodes", () => {
+      const nodes: ComponentNode[] = [
+        { type: "node", tag: "div", children: ["Hello"] },
+        { type: "node", tag: "span", children: ["World"] },
+      ];
+      const result = builder.buildComponent({ node: nodes });
+      expect(Array.isArray(result)).toBe(true);
+      expect((result as any[]).length).toBe(2);
+    });
+
+    test("should return ReactElement for HTML node", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: ["Test"],
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should handle HTML node with empty tag gracefully", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "",
+        children: [],
+      };
+
+      const result = builder.buildComponent({ node });
+
+      // Implementation returns a div element for empty tag (graceful fallback)
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+  });
+
+  describe("buildComponent - Component Instances", () => {
+    test("should handle non-existent component gracefully", () => {
+      const node: ComponentNode = {
+        type: "component",
+        component: "NonExistent",
+      };
+      const result = builder.buildComponent({ node });
+      // Returns error boundary or placeholder element for missing component
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should build component instance with structure", () => {
+      const componentDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: ["Component Content"],
+          },
+        },
+      };
+      componentRegistry.register("TestComponent", componentDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "TestComponent",
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should handle component missing structure gracefully", () => {
+      // Test with component that has no component property at all
+      const componentDef = {
+        // Missing component property entirely
+      };
+      componentRegistry.register("BrokenComponent", componentDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "BrokenComponent",
+      };
+
+      const result = builder.buildComponent({ node });
+
+      // When componentDef.component is missing, it should return ErrorBoundary
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should resolve props with defaults from interface", () => {
+      const componentDef = {
+        component: {
+          interface: {
+            title: {
+              type: "string",
+              default: "Default Title",
+            },
+          },
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [],
+          },
+        },
+      };
+      componentRegistry.register("ComponentWithDefaults", componentDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "ComponentWithDefaults",
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+    });
+
+    test("should handle component building errors gracefully", () => {
+      // This test verifies error handling is in place
+      // We can't easily mock processStructure in Bun, so we test with a valid component
+      // Error handling is verified by the try-catch in buildComponent
+      const componentDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [],
+          },
+        },
+      };
+      componentRegistry.register("ValidComponent", componentDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "ValidComponent",
+      };
+      
+      const result = builder.buildComponent({ node });
+      
+      // Component should build successfully
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+  });
+
+  describe("buildComponent - Link Component", () => {
+    test("should render Link component as anchor tag", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "Link",
+        props: {
+          to: "/about",
+        },
+        children: ["Click me"],
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should handle Link navigation when selecting mode is disabled", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "Link",
+        props: {
+          to: "/test",
+        },
+        children: [],
+      };
+      
+      // Link component should render regardless of selecting mode
+      // The actual behavior is tested through integration tests
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+  });
+
+  describe("buildComponent - HTML Elements", () => {
+    test("should register element via ref callback", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: [],
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+      // Element registration happens via ref callback, which is called during React rendering
+      // We can't easily test this without rendering, but we verify the ref is set
+    });
+
+    test("should extract and merge styles", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        style: {
+          base: {
+            color: "red",
+            fontSize: "16px",
+          },
+        },
+        children: [],
+      };
+      const result = builder.buildComponent({ node, viewportWidth: 1920 });
+      expect(result).not.toBeNull();
+    });
+
+    test("should extract and merge attributes", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        attributes: {
+          id: "test-id",
+          className: "test-class",
+        },
+        children: [],
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+    });
+
+    test("should filter out internal props", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        props: {
+          type: "should-be-removed",
+          tag: "should-be-removed",
+          component: "should-be-removed",
+          children: "should-be-removed",
+          validProp: "should-remain",
+        },
+        children: [],
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+    });
+
+    test("should detect component root via __componentProps", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: [],
+      };
+      const result = builder.buildComponent({
+        node,
+        customProps: {
+          __componentProps: { title: "Test" },
+        },
+      });
+      expect(result).not.toBeNull();
+    });
+  });
+
+  describe("buildChildren", () => {
+    test("should return array for array of children", () => {
+      const children: ComponentNode[] = [
+        { type: "node", tag: "div", children: ["Child 1"] },
+        { type: "node", tag: "span", children: ["Child 2"] },
+      ];
+      const result = builder.buildChildren(children, [0], null, 1920, null);
+      expect(Array.isArray(result)).toBe(true);
+      expect((result as any[]).length).toBe(2);
+    });
+
+    test("should return single element for single child", () => {
+      const child: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: ["Single child"],
+      };
+      const result = builder.buildChildren(child, [0], null, 1920, null);
+      expect(result).not.toBeNull();
+      expect(Array.isArray(result)).toBe(false);
+    });
+
+    test("should return null for undefined children", () => {
+      const result = builder.buildChildren(undefined, [0], null, 1920, null);
+      expect(result).toBeNull();
+    });
+
+    test("should return empty array for empty array", () => {
+      const result = builder.buildChildren([], [0], null, 1920, null);
+      expect(Array.isArray(result)).toBe(true);
+      expect((result as any[]).length).toBe(0);
+    });
+
+    test("should generate correct paths for children", () => {
+      const children: ComponentNode[] = [
+        { type: "node", tag: "div", children: [] },
+        { type: "node", tag: "span", children: [] },
+      ];
+      const result = builder.buildChildren(children, [0, 1], null, 1920, null);
+      expect(Array.isArray(result)).toBe(true);
+      expect((result as any[]).length).toBe(2);
+    });
+  });
+
+  describe("Helper Functions", () => {
+    test("getParentComponentNameForNestedComponent should prioritize componentContext", () => {
+      // This is tested indirectly through component building
+      // We can't directly test private methods, but we can verify behavior
+      const componentDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [],
+          },
+        },
+      };
+      componentRegistry.register("ParentComponent", componentDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "ParentComponent",
+      };
+      const result = builder.buildComponent({
+        node,
+        componentContext: "ContextComponent",
+        parentComponentName: "ParentName",
+      });
+      expect(result).not.toBeNull();
+    });
+
+    test("getEffectiveParentComponentName should use componentContext when available", () => {
+      // Tested indirectly through component building
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: [],
+      };
+      const result = builder.buildComponent({
+        node,
+        componentContext: "ContextComponent",
+        parentComponentName: "ParentName",
+      });
+      expect(result).not.toBeNull();
+    });
+  });
+
+  describe("Path Assignment for Slot Markers", () => {
+    /**
+     * KNOWN ISSUE: Slot markers consume path indices incorrectly
+     *
+     * When buildChildren iterates over children, slot markers get assigned path indices
+     * like regular children. This causes sibling components after a slot to have incorrect
+     * paths relative to the instance children that replace the slot.
+     *
+     * Example: Structure div > div > [slot, Card]
+     * - Slot marker gets path [0,0,0]
+     * - Card gets path [0,0,1]
+     * - Instance child replacing slot also gets [0,0,0]
+     * - Result: Instance child and Card appear as siblings at different indices,
+     *   but semantically they should be handled differently.
+     *
+     * TODO: Fix path assignment to skip slot markers when assigning indices,
+     * or adjust indices after slot expansion.
+     */
+    test.skip("slot markers should not consume path indices", () => {
+      const sectionDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [
+              {
+                type: "node",
+                tag: "div",
+                children: [
+                  { type: "slot" },
+                  { type: "component", component: "Card" },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const cardDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: ["Card Content"],
+          },
+        },
+      };
+
+      componentRegistry.register("Section", sectionDef as any);
+      componentRegistry.register("Card", cardDef as any);
+
+      const pageNode: ComponentNode = {
+        type: "component",
+        component: "Section",
+        children: [{ type: "node", tag: "p", children: ["Instance Child"] }],
+      };
+
+      const result = builder.buildComponent({ node: pageNode });
+      expect(result).not.toBeNull();
+
+      // When fixed, this test should verify that:
+      // 1. Instance child (replacing slot) gets path [0,0,0]
+      // 2. Card gets path [0,0,0] (same as slot was, since slot doesn't consume an index)
+      // OR Card gets a path that properly reflects its position relative to expanded slot content
+    });
+
+    test("should build component with slot marker correctly", () => {
+      // Button.json: button > children
+      const buttonDef = {
+        component: {
+          interface: {
+            children: { type: "string", default: "Click me" },
+          },
+          structure: {
+            type: "node",
+            tag: "button",
+            children: [{ type: "slot" }],
+          },
+        },
+      };
+
+      componentRegistry.register("Button", buttonDef as any);
+
+      const pageNode: ComponentNode = {
+        type: "component",
+        component: "Button",
+        children: [{ type: "node", tag: "span", children: ["Submit"] }],
+      };
+
+      const result = builder.buildComponent({ node: pageNode });
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+
+    test("should build nested children with multiple siblings after slot", () => {
+      // Structure: div > div > [slot, Card, Button]
+
+      const sectionDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [
+              {
+                type: "node",
+                tag: "div",
+                children: [
+                  { type: "slot" },
+                  { type: "component", component: "Card" },
+                  { type: "component", component: "Button" },
+                ],
+              },
+            ],
+          },
+        },
+      };
+
+      const cardDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: ["Card"],
+          },
+        },
+      };
+
+      const buttonDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "button",
+            children: ["Button"],
+          },
+        },
+      };
+
+      componentRegistry.register("Section", sectionDef as any);
+      componentRegistry.register("Card", cardDef as any);
+      componentRegistry.register("Button", buttonDef as any);
+
+      const pageNode: ComponentNode = {
+        type: "component",
+        component: "Section",
+        children: [{ type: "node", tag: "p", children: ["Content"] }],
+      };
+
+      const result = builder.buildComponent({ node: pageNode });
+      expect(result).not.toBeNull();
+      expect(typeof result).toBe("object");
+    });
+  });
+
+  describe("Integration Tests", () => {
+    test("should build complex component tree", () => {
+      const cardDef = {
+        component: {
+          interface: {
+            title: { type: "string", default: "Card Title" },
+          },
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [
+              { type: "node", tag: "h2", children: ["{{title}}"] },
+              { type: "slot" },
+            ],
+          },
+        },
+      };
+      componentRegistry.register("Card", cardDef as any);
+
+      const pageNode: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: [
+          {
+            type: "component",
+            component: "Card",
+            props: { title: "My Card" },
+            children: [{ type: "node", tag: "p", children: ["Card content"] }],
+          },
+        ],
+      };
+      const result = builder.buildComponent({ node: pageNode });
+      expect(result).not.toBeNull();
+    });
+
+    test("should handle nested component instances", () => {
+      const innerDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "span",
+            children: ["Inner"],
+          },
+        },
+      };
+      componentRegistry.register("Inner", innerDef as any);
+
+      const outerDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [
+              { type: "component", component: "Inner" },
+            ],
+          },
+        },
+      };
+      componentRegistry.register("Outer", outerDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "Outer",
+      };
+      const result = builder.buildComponent({ node });
+      expect(result).not.toBeNull();
+    });
+
+    test("should propagate component context correctly", () => {
+      const componentDef = {
+        component: {
+          interface: {},
+          structure: {
+            type: "node",
+            tag: "div",
+            children: [
+              { type: "node", tag: "span", children: ["Child"] },
+            ],
+          },
+        },
+      };
+      componentRegistry.register("TestComponent", componentDef as any);
+
+      const node: ComponentNode = {
+        type: "component",
+        component: "TestComponent",
+      };
+      const result = builder.buildComponent({
+        node,
+        componentContext: "TestComponent",
+      });
+      expect(result).not.toBeNull();
+    });
+
+    test("should respect viewportWidth for responsive styles", () => {
+      const node: ComponentNode = {
+        type: "node",
+        tag: "div",
+        style: {
+          base: { fontSize: "24px" },
+          tablet: { fontSize: "18px" },
+          mobile: { fontSize: "16px" },
+        },
+        children: [],
+      };
+      
+      const resultDesktop = builder.buildComponent({ node, viewportWidth: 1920 });
+      const resultTablet = builder.buildComponent({ node, viewportWidth: 768 });
+      const resultMobile = builder.buildComponent({ node, viewportWidth: 375 });
+      
+      expect(resultDesktop).not.toBeNull();
+      expect(resultTablet).not.toBeNull();
+      expect(resultMobile).not.toBeNull();
+    });
+  });
+});
+