@fragments-sdk/cli 0.2.2

package/src/viewer/__tests__/jsx-parser.test.ts

@@ -0,0 +1,502 @@
+import { describe, it, expect } from "vitest";
+import {
+  parseJSX,
+  extractComponents,
+  validateComponents,
+  type ComponentNode,
+} from "../jsx-parser.js";
+
+describe("parseJSX", () => {
+  describe("basic parsing", () => {
+    it("parses a simple component", () => {
+      const result = parseJSX('<Button variant="primary">Click me</Button>');
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["Button"]);
+      expect(result.tree).toEqual({
+        name: "Button",
+        isHtmlElement: false,
+        props: { variant: "primary" },
+        children: ["Click me"],
+      });
+    });
+
+    it("parses a self-closing component", () => {
+      const result = parseJSX('<Input placeholder="Enter text" />');
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["Input"]);
+      expect(result.tree).toEqual({
+        name: "Input",
+        isHtmlElement: false,
+        props: { placeholder: "Enter text" },
+        children: [],
+      });
+    });
+
+    it("parses nested components", () => {
+      const result = parseJSX('<Card><Button>Click</Button></Card>');
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["Button", "Card"]);
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.name).toBe("Card");
+      expect(tree.children).toHaveLength(1);
+
+      const button = tree.children[0] as ComponentNode;
+      expect(button.name).toBe("Button");
+      expect(button.children).toEqual(["Click"]);
+    });
+
+    it("parses deeply nested components", () => {
+      const result = parseJSX(`
+        <Card>
+          <Alert severity="warning">
+            <Button variant="danger">Delete</Button>
+          </Alert>
+        </Card>
+      `);
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["Alert", "Button", "Card"]);
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.name).toBe("Card");
+
+      const alert = tree.children[0] as ComponentNode;
+      expect(alert.name).toBe("Alert");
+      expect(alert.props).toEqual({ severity: "warning" });
+
+      const button = alert.children[0] as ComponentNode;
+      expect(button.name).toBe("Button");
+      expect(button.props).toEqual({ variant: "danger" });
+    });
+  });
+
+  describe("HTML elements", () => {
+    it("recognizes HTML elements (lowercase)", () => {
+      const result = parseJSX('<div className="container"><span>Text</span></div>');
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual([]); // HTML elements not tracked as components
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.name).toBe("div");
+      expect(tree.isHtmlElement).toBe(true);
+      expect(tree.props).toEqual({ className: "container" });
+
+      const span = tree.children[0] as ComponentNode;
+      expect(span.name).toBe("span");
+      expect(span.isHtmlElement).toBe(true);
+    });
+
+    it("distinguishes HTML elements from custom components", () => {
+      const result = parseJSX('<div><Button>Click</Button></div>');
+
+      expect(result.components).toEqual(["Button"]);
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.isHtmlElement).toBe(true);
+
+      const button = tree.children[0] as ComponentNode;
+      expect(button.isHtmlElement).toBe(false);
+    });
+  });
+
+  describe("props parsing", () => {
+    it("parses string props", () => {
+      const result = parseJSX('<Button variant="primary" size="large" />');
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({
+        variant: "primary",
+        size: "large",
+      });
+    });
+
+    it("parses boolean props (no value = true)", () => {
+      const result = parseJSX("<Button disabled />");
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({ disabled: true });
+    });
+
+    it("parses boolean expression props", () => {
+      const result = parseJSX("<Button disabled={true} checked={false} />");
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({ disabled: true, checked: false });
+    });
+
+    it("parses numeric props", () => {
+      const result = parseJSX("<Button count={42} price={19.99} negative={-5} />");
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({ count: 42, price: 19.99, negative: -5 });
+    });
+
+    it("parses object props", () => {
+      const result = parseJSX('<Button style={{ color: "red", fontSize: 14 }} />');
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({
+        style: { color: "red", fontSize: 14 },
+      });
+    });
+
+    it("parses array props", () => {
+      const result = parseJSX('<Select options={["a", "b", "c"]} values={[1, 2, 3]} />');
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({
+        options: ["a", "b", "c"],
+        values: [1, 2, 3],
+      });
+    });
+
+    it("parses null and undefined props", () => {
+      const result = parseJSX("<Button value={null} other={undefined} />");
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props).toEqual({ value: null, other: undefined });
+    });
+
+    it("handles function props as placeholder", () => {
+      const result = parseJSX("<Button onClick={() => console.log('clicked')} />");
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props.onClick).toBe("[Function]");
+    });
+
+    it("handles identifier props as placeholder", () => {
+      const result = parseJSX("<Button onClick={handleClick} />");
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.props.onClick).toBe("{handleClick}");
+    });
+  });
+
+  describe("multiple root elements", () => {
+    it("handles multiple root elements", () => {
+      const result = parseJSX("<Button>A</Button><Button>B</Button>");
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["Button"]);
+      expect(Array.isArray(result.tree)).toBe(true);
+
+      const trees = result.tree as ComponentNode[];
+      expect(trees).toHaveLength(2);
+      expect(trees[0].children).toEqual(["A"]);
+      expect(trees[1].children).toEqual(["B"]);
+    });
+
+    it("handles fragments", () => {
+      const result = parseJSX("<><Button>A</Button><Card>B</Card></>");
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["Button", "Card"]);
+
+      const trees = result.tree as ComponentNode[];
+      expect(trees).toHaveLength(2);
+    });
+  });
+
+  describe("mixed content", () => {
+    it("handles text children with components", () => {
+      const result = parseJSX('<Card>Hello <Button>world</Button>!</Card>');
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.name).toBe("Card");
+      expect(tree.children).toHaveLength(3);
+      expect(tree.children[0]).toBe("Hello");
+      expect((tree.children[1] as ComponentNode).name).toBe("Button");
+      expect(tree.children[2]).toBe("!");
+    });
+
+    it("handles multiple sibling components", () => {
+      const result = parseJSX(`
+        <Card>
+          <Alert severity="info">Info</Alert>
+          <Alert severity="warning">Warning</Alert>
+          <Button>Action</Button>
+        </Card>
+      `);
+
+      const tree = result.tree as ComponentNode;
+      const componentChildren = tree.children.filter(
+        (c): c is ComponentNode => typeof c !== "string"
+      );
+      expect(componentChildren).toHaveLength(3);
+      expect(componentChildren[0].name).toBe("Alert");
+      expect(componentChildren[1].name).toBe("Alert");
+      expect(componentChildren[2].name).toBe("Button");
+    });
+  });
+
+  describe("error handling", () => {
+    it("returns error for invalid JSX", () => {
+      const result = parseJSX("<Button");
+      expect(result.errors.length).toBeGreaterThan(0);
+      expect(result.tree).toEqual([]);
+    });
+
+    it("returns error for mismatched tags", () => {
+      const result = parseJSX("<Button></Card>");
+      expect(result.errors.length).toBeGreaterThan(0);
+    });
+
+    it("returns empty tree for empty input", () => {
+      const result = parseJSX("");
+      // Empty string wraps to <></> which is an empty fragment
+      expect(Array.isArray(result.tree) || result.tree).toBeTruthy();
+    });
+  });
+
+  describe("member expressions", () => {
+    it("parses JSX member expressions", () => {
+      const result = parseJSX('<MyLib.Button variant="primary" />');
+
+      expect(result.errors).toEqual([]);
+      expect(result.components).toEqual(["MyLib.Button"]);
+
+      const tree = result.tree as ComponentNode;
+      expect(tree.name).toBe("MyLib.Button");
+    });
+  });
+});
+
+describe("extractComponents", () => {
+  it("extracts components from single node", () => {
+    const tree: ComponentNode = {
+      name: "Button",
+      isHtmlElement: false,
+      props: {},
+      children: [],
+    };
+
+    expect(extractComponents(tree)).toEqual(["Button"]);
+  });
+
+  it("extracts components from nested tree", () => {
+    const tree: ComponentNode = {
+      name: "Card",
+      isHtmlElement: false,
+      props: {},
+      children: [
+        {
+          name: "Alert",
+          isHtmlElement: false,
+          props: {},
+          children: [
+            {
+              name: "Button",
+              isHtmlElement: false,
+              props: {},
+              children: [],
+            },
+          ],
+        },
+      ],
+    };
+
+    expect(extractComponents(tree)).toEqual(["Alert", "Button", "Card"]);
+  });
+
+  it("ignores HTML elements", () => {
+    const tree: ComponentNode = {
+      name: "div",
+      isHtmlElement: true,
+      props: {},
+      children: [
+        {
+          name: "Button",
+          isHtmlElement: false,
+          props: {},
+          children: [],
+        },
+      ],
+    };
+
+    expect(extractComponents(tree)).toEqual(["Button"]);
+  });
+
+  it("handles array of nodes", () => {
+    const trees: ComponentNode[] = [
+      { name: "Button", isHtmlElement: false, props: {}, children: [] },
+      { name: "Card", isHtmlElement: false, props: {}, children: [] },
+    ];
+
+    expect(extractComponents(trees)).toEqual(["Button", "Card"]);
+  });
+
+  it("deduplicates component names", () => {
+    const tree: ComponentNode = {
+      name: "Card",
+      isHtmlElement: false,
+      props: {},
+      children: [
+        { name: "Button", isHtmlElement: false, props: {}, children: [] },
+        { name: "Button", isHtmlElement: false, props: {}, children: [] },
+        { name: "Button", isHtmlElement: false, props: {}, children: [] },
+      ],
+    };
+
+    expect(extractComponents(tree)).toEqual(["Button", "Card"]);
+  });
+});
+
+describe("validateComponents", () => {
+  const availableComponents = ["Button", "Card", "Alert", "Input", "Badge"];
+
+  it("validates when all components exist", () => {
+    const tree: ComponentNode = {
+      name: "Card",
+      isHtmlElement: false,
+      props: {},
+      children: [
+        { name: "Button", isHtmlElement: false, props: {}, children: [] },
+      ],
+    };
+
+    const result = validateComponents(tree, availableComponents);
+    expect(result.valid).toBe(true);
+    expect(result.missing).toEqual([]);
+  });
+
+  it("returns missing components", () => {
+    const tree: ComponentNode = {
+      name: "Modal",
+      isHtmlElement: false,
+      props: {},
+      children: [
+        { name: "Button", isHtmlElement: false, props: {}, children: [] },
+      ],
+    };
+
+    const result = validateComponents(tree, availableComponents);
+    expect(result.valid).toBe(false);
+    expect(result.missing).toEqual(["Modal"]);
+  });
+
+  it("provides suggestions for similar components", () => {
+    const tree: ComponentNode = {
+      name: "Buton", // typo
+      isHtmlElement: false,
+      props: {},
+      children: [],
+    };
+
+    const result = validateComponents(tree, availableComponents);
+    expect(result.valid).toBe(false);
+    expect(result.missing).toEqual(["Buton"]);
+    expect(result.suggestions.has("Buton")).toBe(true);
+    expect(result.suggestions.get("Buton")).toContain("Button");
+  });
+
+  it("handles case-insensitive matching", () => {
+    const tree: ComponentNode = {
+      name: "button", // lowercase
+      isHtmlElement: false,
+      props: {},
+      children: [],
+    };
+
+    const result = validateComponents(tree, availableComponents);
+    expect(result.valid).toBe(true);
+  });
+
+  it("ignores HTML elements in validation", () => {
+    const tree: ComponentNode = {
+      name: "div",
+      isHtmlElement: true,
+      props: {},
+      children: [
+        { name: "Button", isHtmlElement: false, props: {}, children: [] },
+      ],
+    };
+
+    const result = validateComponents(tree, availableComponents);
+    expect(result.valid).toBe(true);
+  });
+
+  it("validates array of nodes", () => {
+    const trees: ComponentNode[] = [
+      { name: "Button", isHtmlElement: false, props: {}, children: [] },
+      { name: "Unknown", isHtmlElement: false, props: {}, children: [] },
+    ];
+
+    const result = validateComponents(trees, availableComponents);
+    expect(result.valid).toBe(false);
+    expect(result.missing).toEqual(["Unknown"]);
+  });
+});
+
+describe("complex composition scenarios", () => {
+  it("parses a realistic composition", () => {
+    const jsx = `
+      <Card padding="lg">
+        <Alert severity="warning">
+          Are you sure you want to delete this item?
+        </Alert>
+        <div style={{ marginTop: 16, display: "flex", gap: 8 }}>
+          <Button variant="secondary">Cancel</Button>
+          <Button variant="danger">Delete</Button>
+        </div>
+      </Card>
+    `;
+
+    const result = parseJSX(jsx);
+    expect(result.errors).toEqual([]);
+    expect(result.components).toEqual(["Alert", "Button", "Card"]);
+
+    const card = result.tree as ComponentNode;
+    expect(card.name).toBe("Card");
+    expect(card.props).toEqual({ padding: "lg" });
+
+    // Find the Alert
+    const alert = card.children.find(
+      (c): c is ComponentNode => typeof c !== "string" && c.name === "Alert"
+    );
+    expect(alert).toBeDefined();
+    expect(alert?.props).toEqual({ severity: "warning" });
+
+    // Find the div with buttons
+    const div = card.children.find(
+      (c): c is ComponentNode => typeof c !== "string" && c.name === "div"
+    );
+    expect(div).toBeDefined();
+    expect(div?.isHtmlElement).toBe(true);
+
+    // Find buttons inside div
+    const buttons = div?.children.filter(
+      (c): c is ComponentNode => typeof c !== "string" && c.name === "Button"
+    );
+    expect(buttons).toHaveLength(2);
+    expect(buttons?.[0].props).toEqual({ variant: "secondary" });
+    expect(buttons?.[1].props).toEqual({ variant: "danger" });
+  });
+
+  it("handles form-like composition", () => {
+    const jsx = `
+      <Card>
+        <Input label="Email" type="email" placeholder="you@example.com" />
+        <Input label="Password" type="password" />
+        <Button type="submit" variant="primary">Sign In</Button>
+      </Card>
+    `;
+
+    const result = parseJSX(jsx);
+    expect(result.errors).toEqual([]);
+    expect(result.components).toEqual(["Button", "Card", "Input"]);
+
+    const card = result.tree as ComponentNode;
+    const componentChildren = card.children.filter(
+      (c): c is ComponentNode => typeof c !== "string"
+    );
+    expect(componentChildren).toHaveLength(3);
+    expect(componentChildren[0].name).toBe("Input");
+    expect(componentChildren[1].name).toBe("Input");
+    expect(componentChildren[2].name).toBe("Button");
+  });
+});