@fragments-sdk/cli 0.2.2

package/src/viewer/__tests__/render-utils.test.ts

@@ -0,0 +1,232 @@
+import { describe, it, expect } from "vitest";
+import {
+  serializeValue,
+  serializePropsToJsx,
+  findSegmentByName,
+  getAvailableComponents,
+  generateRenderScript,
+} from "../render-utils.js";
+
+describe("serializeValue", () => {
+  it("serializes null", () => {
+    expect(serializeValue(null)).toBe("null");
+  });
+
+  it("serializes undefined", () => {
+    expect(serializeValue(undefined)).toBe("undefined");
+  });
+
+  it("serializes strings with proper escaping", () => {
+    expect(serializeValue("hello")).toBe('"hello"');
+    expect(serializeValue("hello world")).toBe('"hello world"');
+    expect(serializeValue('with "quotes"')).toBe('"with \\"quotes\\""');
+  });
+
+  it("serializes numbers", () => {
+    expect(serializeValue(42)).toBe("42");
+    expect(serializeValue(3.14)).toBe("3.14");
+    expect(serializeValue(-10)).toBe("-10");
+    expect(serializeValue(0)).toBe("0");
+  });
+
+  it("serializes booleans", () => {
+    expect(serializeValue(true)).toBe("true");
+    expect(serializeValue(false)).toBe("false");
+  });
+
+  it("serializes arrays", () => {
+    expect(serializeValue([])).toBe("[]");
+    expect(serializeValue([1, 2, 3])).toBe("[1, 2, 3]");
+    expect(serializeValue(["a", "b"])).toBe('["a", "b"]');
+    expect(serializeValue([true, null, "x"])).toBe('[true, null, "x"]');
+  });
+
+  it("serializes objects", () => {
+    expect(serializeValue({})).toBe("{}");
+    expect(serializeValue({ a: 1 })).toBe('{"a": 1}');
+    expect(serializeValue({ name: "test", value: 42 })).toBe(
+      '{"name": "test", "value": 42}'
+    );
+  });
+
+  it("serializes nested structures", () => {
+    expect(serializeValue({ items: [1, 2], nested: { deep: true } })).toBe(
+      '{"items": [1, 2], "nested": {"deep": true}}'
+    );
+  });
+
+  it("returns undefined for functions", () => {
+    expect(serializeValue(() => {})).toBe("undefined");
+  });
+});
+
+describe("serializePropsToJsx", () => {
+  it("serializes empty props", () => {
+    expect(serializePropsToJsx({})).toBe("");
+  });
+
+  it("serializes string props as JSX attributes", () => {
+    expect(serializePropsToJsx({ variant: "primary" })).toBe(
+      'variant="primary"'
+    );
+    expect(serializePropsToJsx({ label: "Click me" })).toBe('label="Click me"');
+  });
+
+  it("serializes boolean props with JSX expression syntax", () => {
+    expect(serializePropsToJsx({ disabled: true })).toBe("disabled={true}");
+    expect(serializePropsToJsx({ checked: false })).toBe("checked={false}");
+  });
+
+  it("serializes number props with JSX expression syntax", () => {
+    expect(serializePropsToJsx({ count: 5 })).toBe("count={5}");
+    expect(serializePropsToJsx({ size: 24.5 })).toBe("size={24.5}");
+  });
+
+  it("serializes multiple props", () => {
+    const result = serializePropsToJsx({
+      variant: "danger",
+      disabled: false,
+      size: 16,
+    });
+    expect(result).toBe('variant="danger" disabled={false} size={16}');
+  });
+
+  it("filters out undefined props", () => {
+    expect(
+      serializePropsToJsx({
+        variant: "primary",
+        disabled: undefined,
+        label: "test",
+      })
+    ).toBe('variant="primary" label="test"');
+  });
+
+  it("serializes object props", () => {
+    expect(serializePropsToJsx({ style: { color: "red" } })).toBe(
+      'style={{"color": "red"}}'
+    );
+  });
+
+  it("serializes array props", () => {
+    expect(serializePropsToJsx({ items: [1, 2, 3] })).toBe("items={[1, 2, 3]}");
+  });
+});
+
+describe("findSegmentByName", () => {
+  const mockSegments = [
+    { path: "Button.segment.tsx", segment: { meta: { name: "Button" } } },
+    { path: "Card.segment.tsx", segment: { meta: { name: "Card" } } },
+    { path: "Alert.segment.tsx", segment: { meta: { name: "Alert" } } },
+  ];
+
+  it("finds segment by exact name", () => {
+    const result = findSegmentByName("Button", mockSegments);
+    expect(result).toEqual({ name: "Button", path: "Button.segment.tsx" });
+  });
+
+  it("finds segment case-insensitively", () => {
+    expect(findSegmentByName("button", mockSegments)).toEqual({
+      name: "Button",
+      path: "Button.segment.tsx",
+    });
+    expect(findSegmentByName("BUTTON", mockSegments)).toEqual({
+      name: "Button",
+      path: "Button.segment.tsx",
+    });
+    expect(findSegmentByName("BuTtOn", mockSegments)).toEqual({
+      name: "Button",
+      path: "Button.segment.tsx",
+    });
+  });
+
+  it("returns null for non-existent component", () => {
+    expect(findSegmentByName("NonExistent", mockSegments)).toBeNull();
+    expect(findSegmentByName("", mockSegments)).toBeNull();
+  });
+
+  it("handles empty segments array", () => {
+    expect(findSegmentByName("Button", [])).toBeNull();
+  });
+});
+
+describe("getAvailableComponents", () => {
+  it("returns sorted list of component names", () => {
+    const segments = [
+      { segment: { meta: { name: "Zebra" } } },
+      { segment: { meta: { name: "Alert" } } },
+      { segment: { meta: { name: "Button" } } },
+    ];
+    expect(getAvailableComponents(segments)).toEqual([
+      "Alert",
+      "Button",
+      "Zebra",
+    ]);
+  });
+
+  it("returns empty array for empty segments", () => {
+    expect(getAvailableComponents([])).toEqual([]);
+  });
+});
+
+describe("generateRenderScript", () => {
+  it("generates script with correct import path", () => {
+    const script = generateRenderScript("/path/to/Button.segment.tsx", "Button", {});
+    expect(script).toContain('import("/path/to/Button.segment.tsx")');
+  });
+
+  it("generates script with empty props object when no props", () => {
+    const script = generateRenderScript("/path/to/Button.tsx", "Button", {});
+    expect(script).toContain("React.createElement(Component, {})");
+  });
+
+  it("generates script with props object", () => {
+    const script = generateRenderScript("/path/to/Button.tsx", "Button", {
+      variant: "danger",
+      disabled: true,
+    });
+    expect(script).toContain(
+      'React.createElement(Component, {"variant":"danger","disabled":true})'
+    );
+  });
+
+  it("handles children prop specially", () => {
+    const script = generateRenderScript("/path/to/Button.tsx", "Button", {
+      variant: "primary",
+      children: "Click me",
+    });
+    // Children should be passed as third argument, not in props object
+    expect(script).toContain(
+      'React.createElement(Component, {"variant":"primary"}, "Click me")'
+    );
+    // Children should NOT be in the props object
+    expect(script).not.toContain('"children":"Click me"');
+  });
+
+  it("handles children with other props", () => {
+    const script = generateRenderScript("/path/to/Alert.tsx", "Alert", {
+      severity: "warning",
+      children: "Warning message",
+      dismissible: true,
+    });
+    expect(script).toContain(
+      'React.createElement(Component, {"severity":"warning","dismissible":true}, "Warning message")'
+    );
+  });
+
+  it("includes React and ReactDOM imports", () => {
+    const script = generateRenderScript("/path/to/Button.tsx", "Button", {});
+    expect(script).toContain('import React from "react"');
+    expect(script).toContain('import { createRoot } from "react-dom/client"');
+  });
+
+  it("includes render ready signal", () => {
+    const script = generateRenderScript("/path/to/Button.tsx", "Button", {});
+    expect(script).toContain("window.__RENDER_READY__ = true");
+  });
+
+  it("includes error handling", () => {
+    const script = generateRenderScript("/path/to/Button.tsx", "Button", {});
+    expect(script).toContain("window.__RENDER_ERROR__");
+    expect(script).toContain('class="render-error"');
+  });
+});

package/src/viewer/__tests__/style-utils.test.ts

@@ -0,0 +1,404 @@
+import { describe, it, expect } from "vitest";
+import {
+  compareStyles,
+  compareStyleValue,
+  normalizeStyleValue,
+  compareColors,
+  parseColor,
+  compareNumericValues,
+} from "../style-utils.js";
+
+describe("parseColor", () => {
+  describe("hex colors", () => {
+    it("parses 6-digit hex color", () => {
+      expect(parseColor("#ff0000")).toEqual({ r: 255, g: 0, b: 0 });
+    });
+
+    it("parses lowercase hex color", () => {
+      expect(parseColor("#00ff00")).toEqual({ r: 0, g: 255, b: 0 });
+    });
+
+    it("parses mixed case hex color", () => {
+      expect(parseColor("#0000FF")).toEqual({ r: 0, g: 0, b: 255 });
+    });
+
+    it("parses hex color with values 0-255", () => {
+      expect(parseColor("#336699")).toEqual({ r: 51, g: 102, b: 153 });
+    });
+
+    it("returns null for 3-digit hex color", () => {
+      expect(parseColor("#f00")).toBeNull();
+    });
+  });
+
+  describe("rgb/rgba colors", () => {
+    it("parses rgb color", () => {
+      expect(parseColor("rgb(255, 0, 0)")).toEqual({ r: 255, g: 0, b: 0, a: 1 });
+    });
+
+    it("parses rgba color with alpha", () => {
+      expect(parseColor("rgba(255, 0, 0, 0.5)")).toEqual({
+        r: 255,
+        g: 0,
+        b: 0,
+        a: 0.5,
+      });
+    });
+
+    it("parses rgba color with alpha 0", () => {
+      expect(parseColor("rgba(0, 0, 0, 0)")).toEqual({
+        r: 0,
+        g: 0,
+        b: 0,
+        a: 0,
+      });
+    });
+
+    it("parses rgba color with alpha 1", () => {
+      expect(parseColor("rgba(100, 150, 200, 1)")).toEqual({
+        r: 100,
+        g: 150,
+        b: 200,
+        a: 1,
+      });
+    });
+
+    it("handles extra whitespace", () => {
+      expect(parseColor("rgb(  255 ,  128 ,  64  )")).toEqual({
+        r: 255,
+        g: 128,
+        b: 64,
+        a: 1,
+      });
+    });
+  });
+
+  describe("invalid colors", () => {
+    it("returns null for color keywords", () => {
+      expect(parseColor("red")).toBeNull();
+      expect(parseColor("transparent")).toBeNull();
+    });
+
+    it("returns null for hsl colors", () => {
+      expect(parseColor("hsl(0, 100%, 50%)")).toBeNull();
+    });
+
+    it("returns null for empty string", () => {
+      expect(parseColor("")).toBeNull();
+    });
+  });
+});
+
+describe("compareColors", () => {
+  it("matches identical hex colors", () => {
+    expect(compareColors("#ff0000", "#ff0000", 0)).toBe(true);
+  });
+
+  it("matches colors within tolerance", () => {
+    expect(compareColors("#ff0000", "#fe0000", 5)).toBe(true);
+    expect(compareColors("rgb(255, 0, 0)", "rgb(252, 0, 0)", 5)).toBe(true);
+  });
+
+  it("fails colors outside tolerance", () => {
+    expect(compareColors("#ff0000", "#f00000", 5)).toBe(false);
+    expect(compareColors("rgb(255, 0, 0)", "rgb(240, 0, 0)", 5)).toBe(false);
+  });
+
+  it("matches hex and rgba representations of same color", () => {
+    expect(compareColors("#ff0000", "rgba(255, 0, 0, 1)", 0)).toBe(true);
+  });
+
+  it("matches colors with similar alpha", () => {
+    expect(compareColors("rgba(255, 0, 0, 0.5)", "rgba(255, 0, 0, 0.52)", 5)).toBe(
+      true
+    );
+  });
+
+  it("fails colors with different alpha", () => {
+    expect(compareColors("rgba(255, 0, 0, 0.5)", "rgba(255, 0, 0, 0.7)", 5)).toBe(
+      false
+    );
+  });
+
+  it("falls back to string comparison for unparseable colors", () => {
+    expect(compareColors("red", "red", 0)).toBe(true);
+    expect(compareColors("red", "blue", 0)).toBe(false);
+  });
+});
+
+describe("compareNumericValues", () => {
+  it("matches identical values", () => {
+    expect(compareNumericValues("10px", "10px", 0)).toBe(true);
+  });
+
+  it("matches values within tolerance", () => {
+    expect(compareNumericValues("10px", "11px", 1)).toBe(true);
+    expect(compareNumericValues("10px", "9px", 1)).toBe(true);
+  });
+
+  it("fails values outside tolerance", () => {
+    expect(compareNumericValues("10px", "12px", 1)).toBe(false);
+  });
+
+  it("handles values without units", () => {
+    expect(compareNumericValues("10", "11", 1)).toBe(true);
+  });
+
+  it("handles decimal values", () => {
+    expect(compareNumericValues("10.5px", "11px", 1)).toBe(true);
+    expect(compareNumericValues("10.5px", "12px", 1)).toBe(false);
+  });
+
+  it("falls back to string comparison for non-numeric values", () => {
+    expect(compareNumericValues("auto", "auto", 0)).toBe(true);
+    expect(compareNumericValues("auto", "none", 0)).toBe(false);
+  });
+});
+
+describe("normalizeStyleValue", () => {
+  it("trims whitespace", () => {
+    expect(normalizeStyleValue("any", "  10px  ")).toBe("10px");
+  });
+
+  it("collapses multiple spaces", () => {
+    expect(normalizeStyleValue("any", "10px  20px")).toBe("10px 20px");
+  });
+
+  it('normalizes "none" boxShadow to empty string', () => {
+    expect(normalizeStyleValue("boxShadow", "none")).toBe("");
+  });
+
+  it('does not normalize "none" for other properties', () => {
+    expect(normalizeStyleValue("display", "none")).toBe("none");
+  });
+
+  it("normalizes transparent color to 'transparent'", () => {
+    expect(normalizeStyleValue("backgroundColor", "rgba(0, 0, 0, 0)")).toBe(
+      "transparent"
+    );
+    expect(normalizeStyleValue("borderColor", "rgba( 0 , 0 , 0 , 0 )")).toBe(
+      "transparent"
+    );
+  });
+});
+
+describe("compareStyleValue", () => {
+  describe("exact match", () => {
+    it("matches identical values", () => {
+      expect(compareStyleValue("fontFamily", "Inter", "Inter")).toBe(true);
+    });
+
+    it("matches after normalization", () => {
+      expect(compareStyleValue("fontFamily", " Inter ", "Inter")).toBe(true);
+    });
+  });
+
+  describe("color properties", () => {
+    it("uses color comparison for backgroundColor", () => {
+      expect(
+        compareStyleValue("backgroundColor", "#ff0000", "rgb(255, 0, 0)")
+      ).toBe(true);
+    });
+
+    it("uses color comparison for borderColor", () => {
+      expect(
+        compareStyleValue("borderColor", "#00ff00", "rgb(0, 255, 0)")
+      ).toBe(true);
+    });
+
+    it("allows tolerance in color comparison", () => {
+      expect(
+        compareStyleValue("backgroundColor", "#ff0000", "rgb(252, 0, 0)")
+      ).toBe(true);
+    });
+  });
+
+  describe("numeric properties", () => {
+    it("uses numeric comparison for borderWidth", () => {
+      expect(compareStyleValue("borderWidth", "1px", "2px")).toBe(true);
+      expect(compareStyleValue("borderWidth", "1px", "3px")).toBe(false);
+    });
+
+    it("uses numeric comparison for borderRadius", () => {
+      expect(compareStyleValue("borderRadius", "8px", "9px")).toBe(true);
+    });
+
+    it("uses numeric comparison for fontSize", () => {
+      expect(compareStyleValue("fontSize", "16px", "17px")).toBe(true);
+    });
+
+    it("uses numeric comparison for padding", () => {
+      expect(compareStyleValue("padding", "10px", "11px")).toBe(true);
+    });
+
+    it("uses numeric comparison for gap", () => {
+      expect(compareStyleValue("gap", "16px", "17px")).toBe(true);
+    });
+  });
+
+  describe("other properties", () => {
+    it("uses strict comparison for fontFamily", () => {
+      expect(compareStyleValue("fontFamily", "Inter", "Arial")).toBe(false);
+    });
+
+    it("uses strict comparison for fontWeight", () => {
+      expect(compareStyleValue("fontWeight", "400", "500")).toBe(false);
+    });
+
+    it("uses strict comparison for textAlign", () => {
+      expect(compareStyleValue("textAlign", "left", "center")).toBe(false);
+    });
+  });
+});
+
+describe("compareStyles", () => {
+  it("returns match true when all styles match", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+      fontSize: "16px",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+      fontSize: "16px",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.match).toBe(true);
+    expect(result.properties).toHaveLength(2);
+    expect(result.properties.every((p) => p.match)).toBe(true);
+  });
+
+  it("returns match false when some styles differ", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+      fontSize: "16px",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(0, 255, 0)",
+      fontSize: "16px",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.match).toBe(false);
+    expect(result.properties.find((p) => p.property === "backgroundColor")?.match).toBe(
+      false
+    );
+    expect(result.properties.find((p) => p.property === "fontSize")?.match).toBe(
+      true
+    );
+  });
+
+  it("only compares properties present in figmaStyles", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+      fontSize: "16px",
+      fontFamily: "Inter",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.properties).toHaveLength(1);
+    expect(result.properties[0].property).toBe("backgroundColor");
+  });
+
+  it("marks missing rendered styles as not matching", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+      borderRadius: "8px",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    const borderRadius = result.properties.find(
+      (p) => p.property === "borderRadius"
+    );
+    expect(borderRadius?.rendered).toBe("(not set)");
+    expect(borderRadius?.match).toBe(false);
+  });
+
+  it("returns cleaned figmaStyles object", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+      fontSize: undefined,
+      fontFamily: "Inter",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+      fontFamily: "Inter",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.figmaStyles).toEqual({
+      backgroundColor: "#ff0000",
+      fontFamily: "Inter",
+    });
+    expect(result.figmaStyles.fontSize).toBeUndefined();
+  });
+
+  it("preserves renderedStyles in output", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+      fontSize: "16px",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.renderedStyles).toBe(renderedStyles);
+  });
+
+  it("handles empty figmaStyles", () => {
+    const figmaStyles = {};
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.match).toBe(true);
+    expect(result.properties).toHaveLength(0);
+  });
+
+  it("compares all standard properties when present", () => {
+    const figmaStyles = {
+      backgroundColor: "#ff0000",
+      borderColor: "#000000",
+      borderWidth: "1px",
+      borderRadius: "4px",
+      fontFamily: "Inter",
+      fontSize: "16px",
+      fontWeight: "400",
+      lineHeight: "24px",
+      letterSpacing: "-0.5px",
+      textAlign: "left",
+      boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.25)",
+      padding: "16px",
+      gap: "8px",
+      opacity: "0.9",
+    };
+    const renderedStyles = {
+      backgroundColor: "rgb(255, 0, 0)",
+      borderColor: "rgb(0, 0, 0)",
+      borderWidth: "1px",
+      borderRadius: "4px",
+      fontFamily: "Inter",
+      fontSize: "16px",
+      fontWeight: "400",
+      lineHeight: "24px",
+      letterSpacing: "-0.5px",
+      textAlign: "left",
+      boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.25)",
+      padding: "16px",
+      gap: "8px",
+      opacity: "0.9",
+    };
+
+    const result = compareStyles(figmaStyles, renderedStyles);
+    expect(result.match).toBe(true);
+    expect(result.properties).toHaveLength(14);
+  });
+});