@fragments-sdk/cli 0.10.1 → 0.12.1

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

@@ -1,502 +0,0 @@
-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");
-  });
-});