@simplysm/solid 13.0.75 → 13.0.76

package/tests/components/data/sheet/hooks/useDataSheetPaging.spec.ts

@@ -0,0 +1,359 @@
+import { describe, it, expect } from "vitest";
+import { createRoot, createSignal } from "solid-js";
+import { useDataSheetPaging } from "../../../../../src/components/data/sheet/hooks/useDataSheetPaging";
+
+interface TestItem {
+  id: number;
+  name: string;
+}
+
+const testData: TestItem[] = [
+  { id: 1, name: "Item 1" },
+  { id: 2, name: "Item 2" },
+  { id: 3, name: "Item 3" },
+  { id: 4, name: "Item 4" },
+  { id: 5, name: "Item 5" },
+  { id: 6, name: "Item 6" },
+];
+
+describe("useDataSheetPaging", () => {
+  it("initializes with page 1", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(undefined);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(undefined);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { currentPage } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(currentPage()).toBe(1);
+    });
+  });
+
+  it("calculates pageCount from pageSize and items length", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pageCount } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // 6 items / 2 per page = 3 pages
+      expect(pageCount()).toBe(3);
+    });
+  });
+
+  it("returns totalPageCount when pageSize is not set", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(undefined);
+      const [totalPageCount] = createSignal<number | undefined>(5);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pageCount } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(pageCount()).toBe(5);
+    });
+  });
+
+  it("returns 0 pageCount when items are empty", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>([]);
+      const [sortedItems] = createSignal<TestItem[]>([]);
+
+      const { pageCount } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(pageCount()).toBe(0);
+    });
+  });
+
+  it("returns pageCount 0 when pageSize is 0", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(0);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pageCount } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(pageCount()).toBe(0);
+    });
+  });
+
+  it("slices items correctly for current page", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(2);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // Page 2 with 2 items per page should return items 3-4
+      const result = pagedItems();
+      expect(result).toEqual([
+        { id: 3, name: "Item 3" },
+        { id: 4, name: "Item 4" },
+      ]);
+    });
+  });
+
+  it("returns all sortedItems when pageSize is not set", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(undefined);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(pagedItems()).toEqual(testData);
+    });
+  });
+
+  it("returns all sortedItems when pageSize is 0", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(0);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(pagedItems()).toEqual(testData);
+    });
+  });
+
+  it("returns all sortedItems when items are empty", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>([]);
+      const [sortedItems] = createSignal<TestItem[]>([]);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      expect(pagedItems()).toEqual([]);
+    });
+  });
+
+  it("clamps currentPage to 1 when negative", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(-5);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // Should clamp to page 1, returning first 2 items
+      const result = pagedItems();
+      expect(result).toEqual([
+        { id: 1, name: "Item 1" },
+        { id: 2, name: "Item 2" },
+      ]);
+    });
+  });
+
+  it("clamps currentPage to 1 when 0", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(0);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // Should clamp to page 1, returning first 2 items
+      const result = pagedItems();
+      expect(result).toEqual([
+        { id: 1, name: "Item 1" },
+        { id: 2, name: "Item 2" },
+      ]);
+    });
+  });
+
+  it("handles last page with fewer items than pageSize", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(3);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // Page 3 with 2 items per page should return items 5-6
+      const result = pagedItems();
+      expect(result).toEqual([
+        { id: 5, name: "Item 5" },
+        { id: 6, name: "Item 6" },
+      ]);
+    });
+  });
+
+  it("can change page using setCurrentPage", () => {
+    createRoot(() => {
+      const [page, _setPage] = createSignal<number | undefined>(1);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { setCurrentPage, pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // Initial page
+      expect(pagedItems()[0].id).toBe(1);
+
+      // Change to page 2
+      setCurrentPage(2);
+      expect(pagedItems()[0].id).toBe(3);
+
+      // Change to page 3
+      setCurrentPage(3);
+      expect(pagedItems()[0].id).toBe(5);
+    });
+  });
+
+  it("supports functional setter for setCurrentPage", () => {
+    createRoot(() => {
+      const [page] = createSignal<number | undefined>(2);
+      const [onPageChange] = createSignal<((page: number) => void) | undefined>(undefined);
+      const [pageSize] = createSignal<number | undefined>(2);
+      const [totalPageCount] = createSignal<number | undefined>(undefined);
+      const [items] = createSignal<TestItem[] | undefined>(testData);
+      const [sortedItems] = createSignal<TestItem[]>(testData);
+
+      const { setCurrentPage, pagedItems } = useDataSheetPaging({
+        page,
+        onPageChange,
+        pageSize,
+        totalPageCount,
+        items,
+        sortedItems,
+      });
+
+      // Increment page using functional setter
+      setCurrentPage((prev) => prev + 1);
+      expect(pagedItems()[0].id).toBe(5);
+    });
+  });
+});

package/tests/components/data/sheet/hooks/useDataSheetReorder.spec.ts

@@ -0,0 +1,251 @@
+import { describe, it, expect, vi } from "vitest";
+import { createRoot } from "solid-js";
+import { useDataSheetReorder } from "../../../../../src/components/data/sheet/hooks/useDataSheetReorder";
+
+interface TestItem {
+  id: number;
+  name: string;
+  children?: TestItem[];
+}
+
+describe("useDataSheetReorder", () => {
+  describe("isDescendant", () => {
+    it("should return false for non-descendant items", () => {
+      createRoot(() => {
+        const _item1: TestItem = { id: 1, name: "Item 1" };
+        const _item2: TestItem = { id: 2, name: "Item 2" };
+
+        const displayItems = () => [];
+
+        const { dragState } = useDataSheetReorder<TestItem>(
+          {
+            itemChildren: (item) => item.children,
+          },
+          displayItems
+        );
+
+        // This test verifies the hook is created without errors
+        expect(dragState()).toBeNull();
+      });
+    });
+
+    it("should return true when child is a direct descendant", () => {
+      createRoot(() => {
+        const child: TestItem = { id: 2, name: "Child" };
+        const _parent: TestItem = { id: 1, name: "Parent", children: [child] };
+
+        const displayItems = () => [];
+
+        const { dragState } = useDataSheetReorder<TestItem>(
+          {
+            itemChildren: (item) => item.children,
+          },
+          displayItems
+        );
+
+        // Verifying hook creation and basic state
+        expect(dragState()).toBeNull();
+      });
+    });
+
+    it("should return true when child is a nested descendant", () => {
+      createRoot(() => {
+        const grandChild: TestItem = { id: 3, name: "GrandChild" };
+        const child: TestItem = { id: 2, name: "Child", children: [grandChild] };
+        const _parent: TestItem = { id: 1, name: "Parent", children: [child] };
+
+        const displayItems = () => [];
+
+        const { dragState } = useDataSheetReorder<TestItem>(
+          {
+            itemChildren: (item) => item.children,
+          },
+          displayItems
+        );
+
+        // Verifying hook creation
+        expect(dragState()).toBeNull();
+      });
+    });
+
+    it("should prevent circular references with visited set", () => {
+      createRoot(() => {
+        const item1: TestItem = { id: 1, name: "Item 1" };
+        const item2: TestItem = { id: 2, name: "Item 2" };
+
+        // Create circular reference
+        item1.children = [item2];
+        item2.children = [item1];
+
+        const displayItems = () => [];
+
+        const { dragState } = useDataSheetReorder<TestItem>(
+          {
+            itemChildren: (item) => item.children,
+          },
+          displayItems
+        );
+
+        // Should not throw or infinite loop
+        expect(dragState()).toBeNull();
+      });
+    });
+
+    it("should return false when itemChildren is not provided", () => {
+      createRoot(() => {
+        const _item1: TestItem = { id: 1, name: "Item 1" };
+        const _item2: TestItem = { id: 2, name: "Item 2" };
+
+        const displayItems = () => [];
+
+        const { dragState } = useDataSheetReorder({}, displayItems);
+
+        // Without itemChildren, no parent-child relationships exist
+        expect(dragState()).toBeNull();
+      });
+    });
+  });
+
+  describe("dragState management", () => {
+    it("should initialize dragState as null", () => {
+      createRoot(() => {
+        const displayItems = () => [];
+
+        const { dragState } = useDataSheetReorder({}, displayItems);
+
+        expect(dragState()).toBeNull();
+      });
+    });
+
+    it("should allow setting dragState", () => {
+      createRoot(() => {
+        const item1: TestItem = { id: 1, name: "Item 1" };
+        const item2: TestItem = { id: 2, name: "Item 2" };
+
+        const displayItems = () => [];
+
+        const { dragState, setDragState } = useDataSheetReorder({}, displayItems);
+
+        setDragState({
+          draggingItem: item1,
+          targetItem: item2,
+          position: "before",
+        });
+
+        const state = dragState();
+        expect(state).not.toBeNull();
+        expect(state?.draggingItem).toBe(item1);
+        expect(state?.targetItem).toBe(item2);
+        expect(state?.position).toBe("before");
+      });
+    });
+
+    it("should allow clearing dragState", () => {
+      createRoot(() => {
+        const item1: TestItem = { id: 1, name: "Item 1" };
+        const item2: TestItem = { id: 2, name: "Item 2" };
+
+        const displayItems = () => [];
+
+        const { dragState, setDragState } = useDataSheetReorder({}, displayItems);
+
+        setDragState({
+          draggingItem: item1,
+          targetItem: item2,
+          position: "after",
+        });
+
+        expect(dragState()).not.toBeNull();
+
+        setDragState(null);
+        expect(dragState()).toBeNull();
+      });
+    });
+
+    it("should handle different drag positions", () => {
+      createRoot(() => {
+        const item1: TestItem = { id: 1, name: "Item 1" };
+        const item2: TestItem = { id: 2, name: "Item 2" };
+
+        const displayItems = () => [];
+
+        const { dragState, setDragState } = useDataSheetReorder({}, displayItems);
+
+        // Test "before" position
+        setDragState({
+          draggingItem: item1,
+          targetItem: item2,
+          position: "before",
+        });
+        expect(dragState()?.position).toBe("before");
+
+        // Test "after" position
+        setDragState({
+          draggingItem: item1,
+          targetItem: item2,
+          position: "after",
+        });
+        expect(dragState()?.position).toBe("after");
+
+        // Test "inside" position
+        setDragState({
+          draggingItem: item1,
+          targetItem: item2,
+          position: "inside",
+        });
+        expect(dragState()?.position).toBe("inside");
+      });
+    });
+  });
+
+  describe("onItemsReorder callback", () => {
+    it("should call onItemsReorder when dragState changes with valid target", () => {
+      createRoot(() => {
+        const _item1: TestItem = { id: 1, name: "Item 1" };
+        const _item2: TestItem = { id: 2, name: "Item 2" };
+
+        const onReorder = vi.fn();
+
+        const displayItems = () => [];
+
+        const { setDragState: _setDragState } = useDataSheetReorder(
+          {
+            onItemsReorder: onReorder,
+          },
+          displayItems
+        );
+
+        // This test verifies the callback is properly stored
+        expect(onReorder).not.toHaveBeenCalled();
+      });
+    });
+
+    it("should support multiple hook instances independently", () => {
+      createRoot(() => {
+        const item1: TestItem = { id: 1, name: "Item 1" };
+        const item2: TestItem = { id: 2, name: "Item 2" };
+        const item3: TestItem = { id: 3, name: "Item 3" };
+
+        const displayItems = () => [];
+
+        const hook1 = useDataSheetReorder({}, displayItems);
+        const hook2 = useDataSheetReorder({}, displayItems);
+
+        hook1.setDragState({
+          draggingItem: item1,
+          targetItem: item2,
+          position: "before",
+        });
+
+        hook2.setDragState({
+          draggingItem: item2,
+          targetItem: item3,
+          position: "after",
+        });
+
+        expect(hook1.dragState()?.draggingItem).toBe(item1);
+        expect(hook2.dragState()?.draggingItem).toBe(item2);
+      });
+    });
+  });
+});