@lazlon-platform/html-editor 0.1.0

package/tests/hooks/batch.test.tsx

@@ -0,0 +1,332 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { renderHook, act } from "@testing-library/react"
+import { useNodeField, useNodeFieldBatch, useBatchSet } from "../../lib/hooks/batch"
+import { EditorContext } from "../../lib/hooks/editor"
+import { Page } from "../../lib/model/page"
+import { ImageNode } from "../../lib/model/node/image"
+import { Node } from "../../lib/model"
+import { createTestEditor } from "../createTestEditor"
+
+describe("batch hooks", () => {
+  let editor: ReturnType<typeof createTestEditor>
+  let page: Page
+
+  beforeEach(() => {
+    editor = createTestEditor()
+    page = new Page(editor, { id: "page-1" })
+    editor.pages = new Map([["page-1", page]])
+  })
+
+  function wrapper({ children }: { children: React.ReactNode }) {
+    return <EditorContext value={editor}>{children}</EditorContext>
+  }
+
+  describe("useNodeField", () => {
+    it("returns the field value for a single node", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 50,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      const { result } = renderHook(() => useNodeField([node], "x", 0), { wrapper })
+
+      expect(result.current).toBe(50)
+    })
+
+    it("returns the field value when all nodes have the same value", () => {
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 50,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 50,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+
+      const { result } = renderHook(() => useNodeField([node1, node2], "x", 0), {
+        wrapper,
+      })
+
+      expect(result.current).toBe(50)
+    })
+
+    it("returns fallback when nodes have different values", () => {
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 50,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 100,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+
+      const { result } = renderHook(() => useNodeField([node1, node2], "x", -999), {
+        wrapper,
+      })
+
+      expect(result.current).toBe(-999)
+    })
+
+    it("returns fallback for empty nodes array", () => {
+      const { result } = renderHook(() => useNodeField<Node, "x">([], "x", 42), {
+        wrapper,
+      })
+
+      expect(result.current).toBe(42)
+    })
+  })
+
+  describe("useNodeFieldBatch", () => {
+    it("returns value from useNodeField", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 75,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      const { result } = renderHook(() => useNodeFieldBatch([node], "x", 0), { wrapper })
+
+      expect(result.current.value).toBe(75)
+    })
+
+    it("onChange updates node property", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      const { result } = renderHook(() => useNodeFieldBatch([node], "x", 0), { wrapper })
+
+      act(() => {
+        result.current.onChange(100)
+      })
+
+      expect(node.x).toBe(100)
+    })
+
+    it("onChange with function updates each node individually", () => {
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 10,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 20,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+
+      const { result } = renderHook(() => useNodeFieldBatch([node1, node2], "x", 0), {
+        wrapper,
+      })
+
+      act(() => {
+        result.current.onChange((node) => node.x + 50)
+      })
+
+      expect(node1.x).toBe(60)
+      expect(node2.x).toBe(70)
+    })
+
+    it("onChangeEnd creates history entry", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      const { result } = renderHook(() => useNodeFieldBatch([node], "x", 0), { wrapper })
+
+      act(() => {
+        result.current.onChange(50) // Start tracking
+        result.current.onChangeEnd(100) // End with final value
+      })
+
+      expect(node.x).toBe(100)
+      expect(editor.history.undoHistory).toHaveLength(1)
+
+      // Verify undo works
+      act(() => {
+        editor.history.undo()
+      })
+
+      expect(node.x).toBe(0)
+    })
+
+    it("does nothing for empty nodes array", () => {
+      const { result } = renderHook(() => useNodeFieldBatch<Node, "x">([], "x", 0), {
+        wrapper,
+      })
+
+      act(() => {
+        result.current.onChange(100)
+        result.current.onChangeEnd(100)
+      })
+
+      expect(editor.history.undoHistory).toHaveLength(0)
+    })
+  })
+
+  describe("useBatchSet", () => {
+    it("updates multiple properties on a single node", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      const { result } = renderHook(() => useBatchSet(), { wrapper })
+
+      act(() => {
+        result.current([node], { x: 50, y: 100 })
+      })
+
+      expect(node.x).toBe(50)
+      expect(node.y).toBe(100)
+      expect(editor.history.undoHistory).toHaveLength(1)
+    })
+
+    it("updates multiple nodes with same values", () => {
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 0,
+        y: 0,
+        width: 100,
+        height: 100,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 10,
+        y: 10,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+
+      const { result } = renderHook(() => useBatchSet(), { wrapper })
+
+      act(() => {
+        result.current([node1, node2], { x: 200, y: 200 })
+      })
+
+      expect(node1.x).toBe(200)
+      expect(node1.y).toBe(200)
+      expect(node2.x).toBe(200)
+      expect(node2.y).toBe(200)
+    })
+
+    it("updates multiple nodes with function setter", () => {
+      const node1 = new ImageNode(editor, page, {
+        id: "n1",
+        x: 10,
+        y: 20,
+        width: 100,
+        height: 100,
+      })
+      const node2 = new ImageNode(editor, page, {
+        id: "n2",
+        x: 30,
+        y: 40,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([
+        ["n1", node1],
+        ["n2", node2],
+      ])
+
+      const { result } = renderHook(() => useBatchSet(), { wrapper })
+
+      act(() => {
+        result.current([node1, node2], (n) => ({ x: n.x + 100 }))
+      })
+
+      expect(node1.x).toBe(110)
+      expect(node2.x).toBe(130)
+    })
+
+    it("does not push history for empty nodes", () => {
+      const { result } = renderHook(() => useBatchSet(), { wrapper })
+
+      act(() => {
+        result.current([], { x: 100 })
+      })
+
+      expect(editor.history.undoHistory).toHaveLength(0)
+    })
+
+    it("creates history entry for batch updates", () => {
+      const node = new ImageNode(editor, page, {
+        id: "n1",
+        x: 25,
+        y: 50,
+        width: 100,
+        height: 100,
+      })
+      page.nodes = new Map([["n1", node]])
+
+      const { result } = renderHook(() => useBatchSet(), { wrapper })
+
+      act(() => {
+        result.current([node], { x: 200, y: 300 })
+      })
+
+      expect(node.x).toBe(200)
+      expect(node.y).toBe(300)
+
+      // Verify history was created
+      expect(editor.history.undoHistory).toHaveLength(1)
+      const [entry] = editor.history.undoHistory
+      expect(entry.undo[0]).toBe("batch")
+      expect(entry.redo[0]).toBe("batch")
+    })
+  })
+})

package/tests/hooks/editor.test.tsx

@@ -0,0 +1,56 @@
+import { describe, it, expect } from "vitest"
+import { renderHook } from "@testing-library/react"
+import { EditorContext, PageContext, useEditor, usePage } from "../../lib/hooks/editor"
+import { Page } from "../../lib/model/page"
+import { createTestEditor } from "../createTestEditor"
+
+describe("editor hooks", () => {
+  describe("useEditor", () => {
+    it("returns editor from context", () => {
+      const editor = createTestEditor()
+
+      const { result } = renderHook(() => useEditor(), {
+        wrapper: ({ children }) => (
+          <EditorContext value={editor}>{children}</EditorContext>
+        ),
+      })
+
+      expect(result.current).toBe(editor)
+    })
+
+    it("throws when used outside EditorContext", () => {
+      expect(() => {
+        renderHook(() => useEditor())
+      }).toThrow("missing EditorContext")
+    })
+  })
+
+  describe("usePage", () => {
+    it("returns page from context", () => {
+      const editor = createTestEditor()
+      const page = new Page(editor, { id: "test-page" })
+
+      const { result } = renderHook(() => usePage(), {
+        wrapper: ({ children }) => (
+          <EditorContext value={editor}>
+            <PageContext value={page}>{children}</PageContext>
+          </EditorContext>
+        ),
+      })
+
+      expect(result.current).toBe(page)
+    })
+
+    it("throws when used outside PageContext", () => {
+      const editor = createTestEditor()
+
+      expect(() => {
+        renderHook(() => usePage(), {
+          wrapper: ({ children }) => (
+            <EditorContext value={editor}>{children}</EditorContext>
+          ),
+        })
+      }).toThrow("missing PageContext")
+    })
+  })
+})

package/tests/hooks/page.test.tsx

@@ -0,0 +1,135 @@
+import { describe, it, expect, beforeEach } from "vitest"
+import { renderHook, act } from "@testing-library/react"
+import { useEditPage } from "../../lib/hooks/page"
+import { EditorContext } from "../../lib/hooks/editor"
+import { Page } from "../../lib/model/page"
+import { createTestEditor } from "../createTestEditor"
+
+describe("page 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}>{children}</EditorContext>
+  }
+
+  describe("useEditPage", () => {
+    it("returns current value", () => {
+      const { result } = renderHook(() => useEditPage(page, "width"), { wrapper })
+
+      expect(result.current.value).toBe(800)
+    })
+
+    it("onChange updates page property", () => {
+      const { result } = renderHook(() => useEditPage(page, "width"), { wrapper })
+
+      act(() => {
+        result.current.onChange(1024)
+      })
+
+      expect(page.width).toBe(1024)
+    })
+
+    it("onChange does not create history entry", () => {
+      const { result } = renderHook(() => useEditPage(page, "width"), { wrapper })
+
+      act(() => {
+        result.current.onChange(1024)
+      })
+
+      expect(editor.history.undoHistory).toHaveLength(0)
+    })
+
+    it("onChangeEnd creates history entry", () => {
+      const { result } = renderHook(() => useEditPage(page, "width"), { wrapper })
+
+      act(() => {
+        result.current.onChangeEnd(1024)
+      })
+
+      expect(page.width).toBe(1024)
+      expect(editor.history.undoHistory).toHaveLength(1)
+    })
+
+    it("undo restores original value", () => {
+      const { result } = renderHook(() => useEditPage(page, "width"), { wrapper })
+
+      act(() => {
+        result.current.onChangeEnd(1920)
+      })
+
+      expect(page.width).toBe(1920)
+
+      act(() => {
+        editor.history.undo()
+      })
+
+      expect(page.width).toBe(800)
+    })
+
+    it("works with height property", () => {
+      const { result } = renderHook(() => useEditPage(page, "height"), { wrapper })
+
+      expect(result.current.value).toBe(600)
+
+      act(() => {
+        result.current.onChangeEnd(1080)
+      })
+
+      expect(page.height).toBe(1080)
+    })
+
+    it("works with background property", () => {
+      const { result } = renderHook(() => useEditPage(page, "background"), { wrapper })
+
+      expect(result.current.value).toBe("#ffffff")
+
+      act(() => {
+        result.current.onChangeEnd("#ff0000")
+      })
+
+      expect(page.background).toBe("#ff0000")
+    })
+
+    it("tracks multiple changes correctly", () => {
+      const { result } = renderHook(() => useEditPage(page, "width"), { wrapper })
+
+      // First change
+      act(() => {
+        result.current.onChange(900)
+        result.current.onChange(1000)
+        result.current.onChangeEnd(1100)
+      })
+
+      expect(page.width).toBe(1100)
+
+      // Second change
+      act(() => {
+        result.current.onChangeEnd(1200)
+      })
+
+      expect(page.width).toBe(1200)
+      expect(editor.history.undoHistory).toHaveLength(2)
+
+      // Undo second change
+      act(() => {
+        editor.history.undo()
+      })
+
+      expect(page.width).toBe(1100)
+
+      // Undo first change
+      act(() => {
+        editor.history.undo()
+      })
+
+      expect(page.width).toBe(800)
+    })
+  })
+})