@lazlon-platform/html-editor 0.1.0

package/tests/model/node/group.test.ts

@@ -0,0 +1,294 @@
+import { beforeEach, describe, expect, it } from "vitest"
+import { GroupNode } from "../../../lib/model/node/group"
+import { Page } from "../../../lib/model/page"
+import { createTestEditor } from "../../createTestEditor"
+import { ImageNodeProps } from "../../../lib/model"
+
+describe("GroupNode", () => {
+  let editor: ReturnType<typeof createTestEditor>
+  let page: Page
+
+  beforeEach(() => {
+    editor = createTestEditor()
+    page = new Page(editor, { id: "page-1" })
+  })
+
+  describe("construction", () => {
+    it("has name 'group'", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+      })
+      expect(group.name).toBe("group")
+    })
+
+    it("initializes with empty nodes set", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+      })
+      expect(group.nodes.size).toBe(0)
+    })
+
+    it("deserializes child nodes from props", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+        nodes: [
+          {
+            name: "image",
+            props: { id: "child-1", x: 10, y: 10, width: 50, height: 50 },
+          },
+          {
+            name: "image",
+            props: { id: "child-2", x: 70, y: 10, width: 50, height: 50 },
+          },
+        ],
+      })
+
+      expect(group.nodes.size).toBe(2)
+    })
+  })
+
+  describe("proportional scaling", () => {
+    it("scales child x positions when width changes", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        nodes: [
+          { name: "image", props: { id: "child-1", x: 50, y: 0, width: 20, height: 20 } },
+        ],
+      })
+
+      const child = [...group.nodes][0]
+      expect(child.x).toBe(50) // 50% of 100
+
+      group.width = 200
+
+      expect(child.x).toBe(100) // 50% of 200
+    })
+
+    it("scales child widths when group width changes", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        nodes: [
+          { name: "image", props: { id: "child-1", x: 0, y: 0, width: 50, height: 20 } },
+        ],
+      })
+
+      const child = [...group.nodes][0]
+      expect(child.width).toBe(50) // 50% of 100
+
+      group.width = 200
+
+      expect(child.width).toBe(100) // 50% of 200
+    })
+
+    it("scales child y positions when height changes", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        nodes: [
+          { name: "image", props: { id: "child-1", x: 0, y: 25, width: 20, height: 20 } },
+        ],
+      })
+
+      const child = [...group.nodes][0]
+      expect(child.y).toBe(25) // 25% of 100
+
+      group.height = 200
+
+      expect(child.y).toBe(50) // 25% of 200
+    })
+
+    it("scales child heights when group height changes", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        nodes: [
+          { name: "image", props: { id: "child-1", x: 0, y: 0, width: 20, height: 40 } },
+        ],
+      })
+
+      const child = [...group.nodes][0]
+      expect(child.height).toBe(40) // 40% of 100
+
+      group.height = 200
+
+      expect(child.height).toBe(80) // 40% of 200
+    })
+
+    it("scales all children proportionally", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+        nodes: [
+          {
+            name: "image",
+            props: { id: "child-1", x: 0, y: 0, width: 100, height: 100 },
+          },
+          {
+            name: "image",
+            props: { id: "child-2", x: 100, y: 100, width: 100, height: 100 },
+          },
+        ],
+      })
+
+      const [child1, child2] = [...group.nodes]
+
+      group.width = 400
+      group.height = 400
+
+      // Both children should scale proportionally
+      expect(child1.x).toBe(0)
+      expect(child1.y).toBe(0)
+      expect(child1.width).toBe(200)
+      expect(child1.height).toBe(200)
+
+      expect(child2.x).toBe(200)
+      expect(child2.y).toBe(200)
+      expect(child2.width).toBe(200)
+      expect(child2.height).toBe(200)
+    })
+  })
+
+  describe("serialization", () => {
+    it("includes serialized child nodes", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+        nodes: [
+          {
+            name: "image",
+            props: { id: "child-1", x: 10, y: 10, width: 50, height: 50 },
+          },
+        ],
+      })
+
+      const serialized = group.serialize()
+
+      expect(serialized.name).toBe("group")
+      expect(serialized.props.nodes).toHaveLength(1)
+      expect(serialized.props.nodes![0].name).toBe("image")
+      expect(serialized.props.nodes![0].props.id).toBe("child-1")
+    })
+
+    it("serializes empty group", () => {
+      const group = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 0,
+        y: 0,
+        width: 200,
+        height: 200,
+      })
+
+      const serialized = group.serialize()
+
+      expect(serialized.props.nodes).toEqual([])
+    })
+  })
+
+  describe("deserialization round-trip", () => {
+    it("produces identical props after serialize -> deserialize -> serialize", () => {
+      const imageProps1: ImageNodeProps = {
+        id: "child-1",
+        x: 10,
+        y: 10,
+        width: 100,
+        height: 80,
+        url: "https://example.com/img1.jpg",
+      }
+      const imageProps2: ImageNodeProps = {
+        id: "child-2",
+        x: 120,
+        y: 10,
+        width: 100,
+        height: 80,
+        url: "https://example.com/img2.jpg",
+      }
+      const original = new GroupNode(editor, page, {
+        id: "group-1",
+        x: 50,
+        y: 100,
+        width: 300,
+        height: 250,
+        rotation: 15,
+        nodes: [
+          { name: "image", props: imageProps1 },
+          { name: "image", props: imageProps2 },
+        ],
+      })
+
+      const firstSerialized = original.serialize()
+      const restored = editor.deserializeNode(page, firstSerialized) as GroupNode
+      const secondSerialized = restored.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+    })
+
+    it("preserves nested groups through round-trip", () => {
+      const groupProps = {
+        id: "inner-group",
+        x: 50,
+        y: 50,
+        width: 200,
+        height: 200,
+        nodes: [
+          {
+            name: "image",
+            props: { id: "deep-child", x: 10, y: 10, width: 50, height: 50 },
+          },
+        ],
+      }
+
+      const original = new GroupNode(editor, page, {
+        id: "outer-group",
+        x: 0,
+        y: 0,
+        width: 400,
+        height: 400,
+        nodes: [{ name: "group", props: groupProps }],
+      })
+
+      const firstSerialized = original.serialize()
+      const restored = editor.deserializeNode(page, firstSerialized) as GroupNode
+      const secondSerialized = restored.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+
+      // Verify nested structure
+      expect(restored.nodes.size).toBe(1)
+      const innerGroup = [...restored.nodes][0] as GroupNode
+      expect(innerGroup.name).toBe("group")
+      expect(innerGroup.nodes.size).toBe(1)
+    })
+  })
+})

package/tests/model/node/image.test.ts

@@ -0,0 +1,150 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { Page } from "../../../lib/model/page"
+import { ImageNode } from "../../../lib/model/node/image"
+import { createTestEditor } from "../../createTestEditor"
+
+describe("ImageNode", () => {
+  let editor: ReturnType<typeof createTestEditor>
+  let page: Page
+
+  beforeEach(() => {
+    editor = createTestEditor()
+    page = new Page(editor, { id: "page-1" })
+  })
+
+  describe("construction", () => {
+    it("has name 'image'", () => {
+      const node = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      expect(node.name).toBe("image")
+    })
+
+    it("applies default values", () => {
+      const node = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      expect(node.url).toBeNull()
+      expect(node.fit).toBe("cover")
+      expect(node.roundness).toBe(0)
+      expect(node.borderWidth).toBe(0)
+      expect(node.borderColor).toBe("#000000")
+    })
+
+    it("accepts custom properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+        url: "https://example.com/image.png",
+        fit: "contain",
+        roundness: 20,
+        borderWidth: 3,
+        borderColor: "#ff0000",
+      })
+
+      expect(node.url).toBe("https://example.com/image.png")
+      // Note: fit is hardcoded to "cover" in constructor (bug?)
+      expect(node.roundness).toBe(20)
+      expect(node.borderWidth).toBe(3)
+      expect(node.borderColor).toBe("#ff0000")
+    })
+  })
+
+  describe("serialization", () => {
+    it("includes all ImageNode-specific properties", () => {
+      const node = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 150,
+        url: "https://example.com/photo.jpg",
+        fit: "fill",
+        roundness: 15,
+        borderWidth: 2,
+        borderColor: "#333333",
+      })
+
+      const serialized = node.serialize()
+
+      expect(serialized.name).toBe("image")
+      expect(serialized.props).toMatchObject({
+        id: "img-1",
+        x: 10,
+        y: 20,
+        width: 200,
+        height: 150,
+        url: "https://example.com/photo.jpg",
+        roundness: 15,
+        borderWidth: 2,
+        borderColor: "#333333",
+      })
+    })
+
+    it("serializes null url", () => {
+      const node = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      const props = node.props()
+      expect(props.url).toBeNull()
+    })
+  })
+
+  describe("deserialization round-trip", () => {
+    it("produces identical props after serialize -> deserialize -> serialize", () => {
+      const original = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 50,
+        y: 100,
+        width: 300,
+        height: 200,
+        url: "https://cdn.example.com/images/photo.jpg",
+        fit: "cover",
+        roundness: 25,
+        borderWidth: 4,
+        borderColor: "#00ff00",
+        rotation: 45,
+        locked: true,
+      })
+
+      const firstSerialized = original.serialize()
+      const restored = editor.deserializeNode(page, firstSerialized) as ImageNode
+      const secondSerialized = restored.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+    })
+
+    it("preserves default values through round-trip", () => {
+      const original = new ImageNode(editor, page, {
+        id: "img-1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+
+      const firstSerialized = original.serialize()
+      const restored = editor.deserializeNode(page, firstSerialized) as ImageNode
+      const secondSerialized = restored.serialize()
+
+      expect(secondSerialized).toEqual(firstSerialized)
+    })
+  })
+})