@lazlon-platform/html-editor 0.1.0 → 0.2.1

package/tests/hooks/actions.test.tsx

@@ -1,736 +0,0 @@
-import { act, renderHook } from "@testing-library/react"
-import { beforeEach, describe, expect, it } from "vitest"
-import {
-  clone,
-  useAddNodeAction,
-  useAlignAction,
-  useDuplicateAction,
-  useStackOrderAction,
-  useToggleLockAction,
-  useTrashAction,
-} from "../../lib/hooks/actions"
-import { EditorContext, PageContext } from "../../lib/hooks/editor"
-import { ImageNode } from "../../lib/model/node/image"
-import { Page } from "../../lib/model/page"
-import { createTestEditor } from "../createTestEditor"
-
-describe("action hooks", () => {
-  let editor: ReturnType<typeof createTestEditor>
-  let page: Page
-
-  beforeEach(() => {
-    editor = createTestEditor()
-    page = new Page(editor, { id: "page-1", width: 800, height: 600 })
-    editor.pages = new Map([["page-1", page]])
-  })
-
-  function wrapper({ children }: { children: React.ReactNode }) {
-    return (
-      <EditorContext value={editor}>
-        <PageContext value={page}>{children}</PageContext>
-      </EditorContext>
-    )
-  }
-
-  describe("clone", () => {
-    it("creates a deep copy of a node with new id", () => {
-      const original = new ImageNode(editor, page, {
-        id: "orig",
-        x: 10,
-        y: 20,
-        width: 100,
-        height: 50,
-      })
-
-      const cloned = clone(editor, original)
-
-      expect(cloned.id).not.toBe("orig")
-      expect(cloned.x).toBe(10)
-      expect(cloned.y).toBe(20)
-      expect(cloned.width).toBe(100)
-      expect(cloned.height).toBe(50)
-    })
-
-    it("applies prop transformations with object", () => {
-      const original = new ImageNode(editor, page, {
-        id: "orig",
-        x: 10,
-        y: 20,
-        width: 100,
-        height: 50,
-      })
-
-      const cloned = clone(editor, original, { x: 50, y: 60 })
-
-      expect(cloned.x).toBe(50)
-      expect(cloned.y).toBe(60)
-    })
-
-    it("applies prop transformations with function", () => {
-      const original = new ImageNode(editor, page, {
-        id: "orig",
-        x: 10,
-        y: 20,
-        width: 100,
-        height: 50,
-      })
-
-      const cloned = clone(editor, original, (props) => ({
-        x: props.x + 100,
-        y: props.y + 100,
-      }))
-
-      expect(cloned.x).toBe(110)
-      expect(cloned.y).toBe(120)
-    })
-  })
-
-  describe("useAddNodeAction", () => {
-    it("adds a new node to the page", () => {
-      const { result } = renderHook(() => useAddNodeAction(page), { wrapper })
-
-      act(() => {
-        result.current(ImageNode, { x: 50, y: 50, width: 200, height: 100 })
-      })
-
-      expect(page.nodes.size).toBe(1)
-      const [node] = page.nodes.values()
-      expect(node.x).toBe(50)
-      expect(node.y).toBe(50)
-      expect(node.width).toBe(200)
-      expect(node.height).toBe(100)
-    })
-
-    it("uses default positioning when no props provided", () => {
-      const { result } = renderHook(() => useAddNodeAction(page), { wrapper })
-
-      act(() => {
-        result.current(ImageNode)
-      })
-
-      const [node] = page.nodes.values()
-      // Default: center of page - 50
-      expect(node.x).toBe(Math.round(800 / 2) - 50)
-      expect(node.y).toBe(Math.round(600 / 2) - 50)
-    })
-
-    it("pushes history entry", () => {
-      const { result } = renderHook(() => useAddNodeAction(page), { wrapper })
-
-      act(() => {
-        result.current(ImageNode)
-      })
-
-      expect(editor.history.undoHistory).toHaveLength(1)
-      const [entry] = editor.history.undoHistory
-      expect(entry.redo[0]).toBe("add-node")
-      expect(entry.undo[0]).toBe("delete-node")
-    })
-
-    it("undo removes the added node", () => {
-      const { result } = renderHook(() => useAddNodeAction(page), { wrapper })
-
-      act(() => {
-        result.current(ImageNode)
-      })
-
-      expect(page.nodes.size).toBe(1)
-
-      act(() => {
-        editor.history.undo()
-      })
-
-      expect(page.nodes.size).toBe(0)
-    })
-  })
-
-  describe("useTrashAction", () => {
-    it("removes selected nodes from page", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useTrashAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(page.nodes.size).toBe(0)
-      expect(editor.selection.size).toBe(0)
-    })
-
-    it("removes only selected nodes", () => {
-      const node1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const node2 = new ImageNode(editor, page, {
-        id: "n2",
-        x: 100,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["n1", node1],
-        ["n2", node2],
-      ])
-      editor.selection = new Set([node1])
-
-      const { result } = renderHook(() => useTrashAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(page.nodes.size).toBe(1)
-      expect(page.nodes.has("n2")).toBe(true)
-    })
-
-    it("does nothing when selection is empty", () => {
-      const { result } = renderHook(() => useTrashAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(editor.history.undoHistory).toHaveLength(0)
-    })
-
-    it("undo restores deleted nodes", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 50,
-        y: 100,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useTrashAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(page.nodes.size).toBe(0)
-
-      act(() => {
-        editor.history.undo()
-      })
-
-      expect(page.nodes.size).toBe(1)
-      expect(page.nodes.has("n1")).toBe(true)
-    })
-  })
-
-  describe("useDuplicateAction", () => {
-    it("duplicates selected nodes with default offset", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 100,
-        y: 100,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useDuplicateAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(page.nodes.size).toBe(2)
-
-      const newNode = [...page.nodes.values()].find((n) => n.id !== "n1")
-      expect(newNode?.x).toBe(110) // default offset is 10
-      expect(newNode?.y).toBe(110)
-    })
-
-    it("supports custom offset", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 50,
-        y: 50,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useDuplicateAction(), { wrapper })
-
-      act(() => {
-        result.current({ offset: 25 })
-      })
-
-      const newNode = [...page.nodes.values()].find((n) => n.id !== "n1")
-      expect(newNode?.x).toBe(75)
-      expect(newNode?.y).toBe(75)
-    })
-
-    it("selects duplicated nodes", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useDuplicateAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      // Selection should be the new node(s), not the original
-      expect(editor.selection.size).toBe(1)
-      expect(editor.selection.has(node)).toBe(false)
-    })
-
-    it("does nothing when selection is empty", () => {
-      const { result } = renderHook(() => useDuplicateAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(editor.history.undoHistory).toHaveLength(0)
-    })
-  })
-
-  describe("useToggleLockAction", () => {
-    it("locks unlocked nodes", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-        locked: false,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useToggleLockAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(node.locked).toBe(true)
-    })
-
-    it("unlocks locked nodes", () => {
-      const node = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-        locked: true,
-      })
-      page.nodes = new Map([["n1", node]])
-      editor.selection = new Set([node])
-
-      const { result } = renderHook(() => useToggleLockAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      expect(node.locked).toBe(false)
-    })
-
-    it("unlocks all if any are locked", () => {
-      const node1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-        locked: true,
-      })
-      const node2 = new ImageNode(editor, page, {
-        id: "n2",
-        x: 100,
-        y: 0,
-        width: 100,
-        height: 50,
-        locked: false,
-      })
-      page.nodes = new Map([
-        ["n1", node1],
-        ["n2", node2],
-      ])
-      editor.selection = new Set([node1, node2])
-
-      const { result } = renderHook(() => useToggleLockAction(), { wrapper })
-
-      act(() => {
-        result.current()
-      })
-
-      // When any are locked, toggle unlocks all
-      expect(node1.locked).toBe(false)
-      expect(node2.locked).toBe(false)
-    })
-  })
-
-  describe("useAlignAction", () => {
-    it("aligns nodes to left edge", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 50,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n2 = new ImageNode(editor, page, {
-        id: "n2",
-        x: 150,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["n1", n1],
-        ["n2", n2],
-      ])
-      editor.selection = new Set([n1, n2])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.left()
-      })
-
-      expect(n1.x).toBe(0)
-      expect(n2.x).toBe(0)
-    })
-
-    it("centers nodes horizontally", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", n1]])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.center()
-      })
-
-      // page.width = 800, node.width = 100, so center = (800 - 100) / 2 = 350
-      expect(n1.x).toBe(350)
-    })
-
-    it("aligns nodes to right edge", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", n1]])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.right()
-      })
-
-      // page.width = 800, node.width = 100, so right = 800 - 100 = 700
-      expect(n1.x).toBe(700)
-    })
-
-    it("aligns nodes to top edge", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 100,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", n1]])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.top()
-      })
-
-      expect(n1.y).toBe(0)
-    })
-
-    it("centers nodes vertically", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", n1]])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.middle()
-      })
-
-      // page.height = 600, node.height = 50, so middle = (600 - 50) / 2 = 275
-      expect(n1.y).toBe(275)
-    })
-
-    it("aligns nodes to bottom edge", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", n1]])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.bottom()
-      })
-
-      // page.height = 600, node.height = 50, so bottom = 600 - 50 = 550
-      expect(n1.y).toBe(550)
-    })
-
-    it("creates history entry for alignment", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "n1",
-        x: 50,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([["n1", n1]])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useAlignAction(), { wrapper })
-
-      act(() => {
-        result.current.left()
-      })
-
-      expect(editor.history.undoHistory).toHaveLength(1)
-
-      act(() => {
-        editor.history.undo()
-      })
-
-      expect(n1.x).toBe(50)
-    })
-  })
-
-  describe("useStackOrderAction", () => {
-    it("brings node forward in stack", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "a",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n2 = new ImageNode(editor, page, {
-        id: "b",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["a", n1],
-        ["b", n2],
-      ])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useStackOrderAction(), { wrapper })
-
-      act(() => {
-        result.current.bringForward()
-      })
-
-      const order = [...page.nodes.keys()]
-      expect(order).toEqual(["b", "a"])
-    })
-
-    it("brings node backward in stack", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "a",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n2 = new ImageNode(editor, page, {
-        id: "b",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["a", n1],
-        ["b", n2],
-      ])
-      editor.selection = new Set([n2])
-
-      const { result } = renderHook(() => useStackOrderAction(), { wrapper })
-
-      act(() => {
-        result.current.bringBackward()
-      })
-
-      const order = [...page.nodes.keys()]
-      expect(order).toEqual(["b", "a"])
-    })
-
-    it("brings node to front", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "a",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n2 = new ImageNode(editor, page, {
-        id: "b",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n3 = new ImageNode(editor, page, {
-        id: "c",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["a", n1],
-        ["b", n2],
-        ["c", n3],
-      ])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useStackOrderAction(), { wrapper })
-
-      act(() => {
-        result.current.bringToFront()
-      })
-
-      const order = [...page.nodes.keys()]
-      expect(order).toEqual(["b", "c", "a"])
-    })
-
-    it("brings node to back", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "a",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n2 = new ImageNode(editor, page, {
-        id: "b",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n3 = new ImageNode(editor, page, {
-        id: "c",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["a", n1],
-        ["b", n2],
-        ["c", n3],
-      ])
-      editor.selection = new Set([n3])
-
-      const { result } = renderHook(() => useStackOrderAction(), { wrapper })
-
-      act(() => {
-        result.current.bringToBack()
-      })
-
-      const order = [...page.nodes.keys()]
-      expect(order).toEqual(["c", "a", "b"])
-    })
-
-    it("undo restores original order", () => {
-      const n1 = new ImageNode(editor, page, {
-        id: "a",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      const n2 = new ImageNode(editor, page, {
-        id: "b",
-        x: 0,
-        y: 0,
-        width: 100,
-        height: 50,
-      })
-      page.nodes = new Map([
-        ["a", n1],
-        ["b", n2],
-      ])
-      editor.selection = new Set([n1])
-
-      const { result } = renderHook(() => useStackOrderAction(), { wrapper })
-
-      act(() => {
-        result.current.bringToFront()
-      })
-
-      expect([...page.nodes.keys()]).toEqual(["b", "a"])
-
-      act(() => {
-        editor.history.undo()
-      })
-
-      expect([...page.nodes.keys()]).toEqual(["a", "b"])
-    })
-  })
-})