meno-core 1.0.0

package/lib/client/templateEngine.test.ts

@@ -0,0 +1,660 @@
+import { test, expect, describe, beforeEach, mock } from "bun:test";
+import { 
+  evaluateTemplate, 
+  resolveStyleMapping, 
+  processStructure,
+  normalizeStyle
+} from "./templateEngine";
+import type { ComponentNode, ComponentDefinition, StructuredComponentDefinition, StyleMapping, TemplateContext } from "../shared/types";
+
+describe("Template Engine - evaluateTemplate", () => {
+  describe("Complex template expressions", () => {
+    test("should evaluate nested property access", () => {
+      const template = "{{variants[variant].background}}";
+      const context = {
+        variants: {
+          primary: { background: "#0070f3" },
+          secondary: { background: "#f3f4f6" }
+        },
+        variant: "primary"
+      };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("#0070f3");
+    });
+
+    test("should evaluate ternary operators", () => {
+      const template = "{{disabled ? '0.5' : '1'}}";
+      const context = { disabled: true };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("0.5");
+    });
+
+    test("should evaluate ternary operators with false condition", () => {
+      const template = "{{disabled ? '0.5' : '1'}}";
+      const context = { disabled: false };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("1");
+    });
+
+    test("should evaluate mathematical operations - addition", () => {
+      const template = "{{count + 1}}";
+      const context = { count: 5 };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(6);
+    });
+
+    test("should evaluate mathematical operations - multiplication", () => {
+      const template = "{{price * 1.1}}";
+      const context = { price: 100 };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBeCloseTo(110, 5);
+    });
+
+    test("should evaluate string concatenation", () => {
+      const template = "{{'Hello ' + name}}";
+      const context = { name: "World" };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("Hello World");
+    });
+
+    test("should evaluate logical AND operator", () => {
+      const template = "{{isActive && 'active'}}";
+      const context = { isActive: true };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("active");
+    });
+
+    test("should evaluate logical AND operator with false", () => {
+      const template = "{{isActive && 'active'}}";
+      const context = { isActive: false };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(false);
+    });
+
+    test("should evaluate complex nested expressions", () => {
+      const template = "{{user.profile.name || 'Anonymous'}}";
+      const context = { user: { profile: { name: "John" } } };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("John");
+    });
+
+    test("should evaluate expressions with fallback", () => {
+      const template = "{{user.profile.name || 'Anonymous'}}";
+      const context = { user: { profile: {} } };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("Anonymous");
+    });
+  });
+
+  describe("Edge cases", () => {
+    test("should return original string if not a template", () => {
+      const template = "plain text";
+      const context = { name: "John" };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("plain text");
+    });
+
+    test("should return template string on invalid expression", () => {
+      const template = "{{invalid.expression}}";
+      const context = {};
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(template); // Should return original template on error
+    });
+
+    test("should return template string on syntax error", () => {
+      const template = "{{count +}}"; // Missing operand
+      const context = { count: 5 };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(template); // Should return original template on error
+    });
+
+    test("should handle missing context variables", () => {
+      const template = "{{undefinedVar}}";
+      const context = {};
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(template); // Should return original template when var is undefined
+    });
+
+    test("should handle non-string templates", () => {
+      const template = 123 as unknown as string;
+      const context = {};
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(123); // Should pass through non-strings
+    });
+
+    test("should handle empty template expression", () => {
+      const template = "{{}}";
+      const context = {};
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe(template); // Invalid expression
+    });
+
+    test("should handle template with whitespace", () => {
+      const template = "{{ name }}";
+      const context = { name: "John" };
+      
+      const result = evaluateTemplate(template, context);
+      expect(result).toBe("John"); // Should trim whitespace
+    });
+  });
+});
+
+describe("Template Engine - resolveStyleMapping", () => {
+  describe("Valid style mappings", () => {
+    test("should resolve prop-based style mapping", () => {
+      const mapping: StyleMapping = {
+        _mapping: true,
+        prop: "variant",
+        values: {
+          primary: "#0070f3",
+          secondary: "#f3f4f6"
+        }
+      };
+      const props = { variant: "primary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBe("#0070f3");
+    });
+
+    test("should resolve style mapping for secondary variant", () => {
+      const mapping: StyleMapping = {
+        _mapping: true,
+        prop: "variant",
+        values: {
+          primary: "#0070f3",
+          secondary: "#f3f4f6"
+        }
+      };
+      const props = { variant: "secondary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBe("#f3f4f6");
+    });
+
+    test("should resolve numeric style mapping values", () => {
+      const mapping: StyleMapping = {
+        _mapping: true,
+        prop: "size",
+        values: {
+          small: 12,
+          large: 24
+        }
+      };
+      const props = { size: "small" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBe(12);
+    });
+  });
+
+  describe("Missing or invalid mappings", () => {
+    test("should return undefined for missing prop value", () => {
+      const mapping: StyleMapping = {
+        _mapping: true,
+        prop: "variant",
+        values: {
+          primary: "#0070f3",
+          secondary: "#f3f4f6"
+        }
+      };
+      const props = {}; // variant not provided
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for null prop value", () => {
+      const mapping: StyleMapping = {
+        _mapping: true,
+        prop: "variant",
+        values: {
+          primary: "#0070f3"
+        }
+      };
+      const props = { variant: null };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for prop value not in mapping", () => {
+      const mapping: StyleMapping = {
+        _mapping: true,
+        prop: "variant",
+        values: {
+          primary: "#0070f3"
+        }
+      };
+      const props = { variant: "invalid" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for invalid mapping object (no _mapping)", () => {
+      const mapping = {
+        prop: "variant",
+        values: { primary: "#0070f3" }
+      };
+      const props = { variant: "primary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for non-object mapping", () => {
+      const mapping = "not an object";
+      const props = { variant: "primary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for null mapping", () => {
+      const mapping = null;
+      const props = { variant: "primary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for mapping with missing prop field", () => {
+      const mapping = {
+        _mapping: true,
+        values: { primary: "#0070f3" }
+      };
+      const props = { variant: "primary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+
+    test("should return undefined for mapping with missing values field", () => {
+      const mapping = {
+        _mapping: true,
+        prop: "variant"
+      };
+      const props = { variant: "primary" };
+      
+      const result = resolveStyleMapping(mapping, props);
+      expect(result).toBeUndefined();
+    });
+  });
+});
+
+describe("Template Engine - processStructure", () => {
+  const mockComponentDef: StructuredComponentDefinition = {
+    interface: {},
+    structure: {}
+  };
+
+  // Helper to create TemplateContext
+  const createContext = (props: Record<string, unknown>, componentDef = mockComponentDef): TemplateContext => ({
+    props,
+    componentDef
+  });
+
+  describe("String processing", () => {
+    test("should process template strings in structure", () => {
+      const structure = "{{name}}";
+      const props = { name: "John" };
+
+      const result = processStructure(structure, createContext(props));
+      expect(result).toBe("John");
+    });
+
+    test("should process non-template strings", () => {
+      const structure = "plain text";
+      const props = {};
+
+      const result = processStructure(structure, createContext(props));
+      expect(result).toBe("plain text");
+    });
+  });
+
+  describe("Array processing", () => {
+    test("should process array of strings", () => {
+      const structure = ["Hello", "{{name}}", "World"] as any;
+      const props = { name: "John" };
+
+      const result = processStructure(structure, createContext(props));
+      expect(Array.isArray(result)).toBe(true);
+      const resultArray = result as (string | ComponentNode)[];
+      expect(resultArray).toEqual(["Hello", "John", "World"]);
+    });
+
+    test("should process array of component nodes", () => {
+      const structure: ComponentNode[] = [
+        { type: "node", tag: "div", children: ["{{text}}"] },
+        { type: "node", tag: "span", children: ["Static"] }
+      ];
+      const props = { text: "Dynamic" };
+
+      const result = processStructure(structure, createContext(props));
+      expect(Array.isArray(result)).toBe(true);
+      const resultArray = result as ComponentNode[];
+      expect(resultArray[0].children).toEqual(["Dynamic"]);
+      expect(resultArray[1].children).toEqual(["Static"]);
+    });
+
+    test("should filter null values from arrays", () => {
+      const structure = ["Hello", null, "World"] as any;
+      const props = {};
+
+      const result = processStructure(structure, createContext(props));
+      expect(Array.isArray(result)).toBe(true);
+      const resultArray = result as (string | ComponentNode)[];
+      expect(resultArray.length).toBe(2);
+    });
+  });
+
+  describe("Component node processing", () => {
+    test("should process simple component node", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: ["Hello World"]
+      };
+      const props = {};
+
+      const result = processStructure(structure, createContext(props));
+      expect(typeof result === 'object' && !Array.isArray(result)).toBe(true);
+      const node = result as ComponentNode;
+      expect(node.tag).toBe("div");
+      expect(node.children).toEqual(["Hello World"]);
+    });
+
+    test("should process component node with template in children", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: ["{{greeting}}"]
+      };
+      const props = { greeting: "Hello" };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      expect(node.children).toEqual(["Hello"]);
+    });
+
+    test("should process template in tag property", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "h{{size}}",
+        children: ["Heading"]
+      };
+      const props = { size: 1 };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      expect(node.tag).toBe("h1");
+      expect(node.children).toEqual(["Heading"]);
+    });
+
+    test("should process template in tag with string prop", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "h{{level}}",
+        children: ["Title"]
+      };
+      const props = { level: "2" };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      expect(node.tag).toBe("h2");
+    });
+
+    test("should process nested component structures", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: [
+          {
+            type: "node",
+            tag: "span",
+            children: ["{{text}}"]
+          }
+        ]
+      };
+      const props = { text: "Nested" };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      expect(node.children?.[0]).toBeDefined();
+      const child = node.children![0] as ComponentNode;
+      expect(child.children).toEqual(["Nested"]);
+    });
+  });
+
+  describe("Style mapping resolution in structure", () => {
+    test("should resolve style mappings in flat style objects", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "button",
+        style: {
+          base: {
+            background: {
+              _mapping: true,
+              prop: "variant",
+              values: {
+                primary: "#0070f3",
+                secondary: "#f3f4f6"
+              }
+            } as StyleMapping,
+            color: "#000"
+          }
+        }
+      };
+      const props = { variant: "primary" };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      const baseStyle = (node.style as any)?.base;
+      expect(baseStyle?.background).toBe("#0070f3");
+      expect(baseStyle?.color).toBe("#000");
+    });
+
+    test("should resolve multiple style mappings", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "button",
+        style: {
+          base: {
+            background: {
+              _mapping: true,
+              prop: "variant",
+              values: { primary: "blue", secondary: "gray" }
+            } as StyleMapping,
+            color: {
+              _mapping: true,
+              prop: "variant",
+              values: { primary: "white", secondary: "black" }
+            } as StyleMapping
+          }
+        }
+      };
+      const props = { variant: "primary" };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      const baseStyle = (node.style as any)?.base;
+      expect(baseStyle?.background).toBe("blue");
+      expect(baseStyle?.color).toBe("white");
+    });
+  });
+
+  describe("Template evaluation in style objects", () => {
+    test("should evaluate templates in style values", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "div",
+        style: {
+          base: {
+            opacity: "{{disabled ? '0.5' : '1'}}",
+            fontSize: "{{size}}px"
+          }
+        }
+      };
+      const props = { disabled: true, size: 16 };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+      const baseStyle = (node.style as any)?.base;
+      expect(baseStyle).toBeDefined();
+      expect(baseStyle?.opacity).toBe("0.5");
+      expect(baseStyle?.fontSize).toBe("16px");
+    });
+  });
+
+  describe("Edge cases and error handling", () => {
+    test("should return null for null structure", () => {
+      const result = processStructure(null, createContext({}));
+      expect(result).toBeNull();
+    });
+
+    test("should return null for undefined structure", () => {
+      const result = processStructure(undefined, createContext({}));
+      expect(result).toBeNull();
+    });
+
+    test("should handle numbers in structure", () => {
+      const result = processStructure(42, createContext({}));
+      expect(result).toBe(42);
+    });
+
+    test("should handle empty objects", () => {
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "div",
+        children: []
+      };
+
+      const result = processStructure(structure, createContext({}));
+      const node = result as ComponentNode;
+      expect(node.tag).toBe("div");
+      expect(node.type).toBe("node");
+    });
+
+    test("should handle component definition context in templates", () => {
+      const componentDef = {
+        interface: {},
+        structure: {},
+        variants: {
+          primary: { background: "blue" }
+        }
+      } as StructuredComponentDefinition & { variants?: Record<string, any> };
+      const structure = "{{variants.primary.background}}";
+      const props = {};
+
+      const result = processStructure(structure, createContext(props, componentDef));
+      expect(result).toBe("blue");
+    });
+  });
+
+  describe("Integration with Button.json example", () => {
+    test("should process Button component structure with style mappings", () => {
+      // Based on components/Button.json
+      const structure: ComponentNode = {
+        type: "node",
+        tag: "button",
+        style: {
+          base: {
+            padding: {
+              _mapping: true,
+              prop: "variant",
+              values: {
+                primary: "16px 34px",
+                secondary: "16px 34px"
+              }
+            } as StyleMapping,
+            background: {
+              _mapping: true,
+              prop: "variant",
+              values: {
+                primary: "blue",
+                secondary: "#f3f4f6"
+              }
+            } as StyleMapping,
+            color: {
+              _mapping: true,
+              prop: "variant",
+              values: {
+                primary: "white",
+                secondary: "#374151"
+              }
+            } as StyleMapping,
+            borderRadius: "0px",
+            fontSize: "15px"
+          }
+        },
+        children: "{{children}}"
+      } as unknown as ComponentNode;
+      const props = { variant: "primary", children: "Click me" };
+
+      const result = processStructure(structure, createContext(props));
+      const node = result as ComponentNode;
+
+      const baseStyle = (node.style as any)?.base;
+      expect(baseStyle?.background).toBe("blue");
+      expect(baseStyle?.color).toBe("white");
+      expect(baseStyle?.padding).toBe("16px 34px");
+      // processStructure converts string children template to evaluated result (array)
+      if (Array.isArray(node.children)) {
+        expect(node.children).toEqual(["Click me"]);
+      } else {
+        // If not array, it might still be the template string or evaluated string
+        expect(node.children).toBeDefined();
+      }
+    });
+  });
+});
+
+describe("Template Engine - normalizeStyle", () => {
+  test("should normalize flat style objects", () => {
+    const style = {
+      color: "red",
+      fontSize: "16px"
+    };
+    
+    const result = normalizeStyle(style);
+    expect(result).toEqual(style);
+  });
+
+  test("should normalize responsive style objects using 'all' strategy", () => {
+    const style = {
+      base: { color: "red" },
+      tablet: { color: "blue" },
+      mobile: { color: "green" }
+    };
+    
+    const result = normalizeStyle(style);
+    expect(result).toBeDefined();
+    expect(result?.color).toBe("green"); // 'all' strategy merges all, mobile wins
+  });
+
+  test("should return null for null style", () => {
+    const result = normalizeStyle(null);
+    expect(result).toBeNull();
+  });
+
+  test("should return null for undefined style", () => {
+    const result = normalizeStyle(undefined);
+    expect(result).toBeNull();
+  });
+});