@simplysm/solid 13.0.75 → 13.0.76

package/tests/components/data/sheet/DataSheet.spec.tsx

@@ -9,7 +9,7 @@ import {
 import type { SortingDef } from "../../../../src/components/data/sheet/types";
 import { ConfigContext, ConfigProvider } from "../../../../src/providers/ConfigContext";
 import type { JSX } from "solid-js";
-import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nProvider";
 
 function TestWrapper(props: { children: JSX.Element }) {
   return (
@@ -30,40 +30,11 @@ const testData: TestItem[] = [
 ];
 
 describe("DataSheet", () => {
-  it("basic rendering: column headers and data rows are displayed", () => {
-    const { container } = render(() => (
-      <ConfigProvider clientName="test"><I18nProvider>
-        <TestWrapper>
-        <DataSheet items={testData} persistKey="test">
-          <DataSheet.Column<TestItem> key="name" header="이름">
-            {(ctx) => <div>{ctx.item.name}</div>}
-          </DataSheet.Column>
-          <DataSheet.Column<TestItem> key="age" header="나이">
-            {(ctx) => <div>{ctx.item.age}</div>}
-          </DataSheet.Column>
-          <DataSheet.Column<TestItem> key="email" header="이메일">
-            {(ctx) => <div>{ctx.item.email}</div>}
-          </DataSheet.Column>
-        </DataSheet>
-      </TestWrapper>
-      </I18nProvider></ConfigProvider>
-    ));
-
-    const ths = container.querySelectorAll("thead th");
-    expect(ths.length).toBe(3);
-    expect(ths[0].textContent).toContain("이름");
-    expect(ths[1].textContent).toContain("나이");
-    expect(ths[2].textContent).toContain("이메일");
-
-    const rows = container.querySelectorAll("tbody tr");
-    expect(rows.length).toBe(3);
-  });
-
   it("multi-level header: colspan and rowspan are applied correctly", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-multi">
+        <DataSheet items={testData} storageKey="test-multi">
           <DataSheet.Column<TestItem> key="name" header={["기본정보", "이름"]}>
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -98,7 +69,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-summary">
+        <DataSheet items={testData} storageKey="test-summary">
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -122,7 +93,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={[] as TestItem[]} persistKey="test-empty">
+        <DataSheet items={[] as TestItem[]} storageKey="test-empty">
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -143,7 +114,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-hidden">
+        <DataSheet items={testData} storageKey="test-hidden">
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -167,7 +138,7 @@ describe("DataSheet", () => {
         <TestWrapper>
         <DataSheet
           items={testData}
-          persistKey="test-sort"
+          storageKey="test-sort"
           sorts={[]}
           onSortsChange={(s) => {
             capturedSorts = s;
@@ -197,7 +168,7 @@ describe("DataSheet", () => {
         <TestWrapper>
         <DataSheet
           items={testData}
-          persistKey="test-no-sort"
+          storageKey="test-no-sort"
           sorts={[]}
           onSortsChange={(s) => {
             capturedSorts = s;
@@ -222,7 +193,7 @@ describe("DataSheet", () => {
         <TestWrapper>
         <DataSheet
           items={testData}
-          persistKey="test-auto-sort"
+          storageKey="test-auto-sort"
           sorts={[{ key: "name", desc: false }]}
           autoSort
         >
@@ -239,11 +210,11 @@ describe("DataSheet", () => {
     expect(names).toEqual(["김철수", "이영희", "홍길동"]);
   });
 
-  it("pagination: data is sliced by itemsPerPage", () => {
+  it("pagination: data is sliced by pageSize", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-paging" itemsPerPage={2} page={1}>
+        <DataSheet items={testData} storageKey="test-paging" pageSize={2} page={1}>
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -260,7 +231,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-paging-nav" itemsPerPage={2} page={1}>
+        <DataSheet items={testData} storageKey="test-paging-nav" pageSize={2} page={1}>
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -277,7 +248,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-no-paging" itemsPerPage={10} page={1}>
+        <DataSheet items={testData} storageKey="test-no-paging" pageSize={10} page={1}>
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -294,7 +265,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-fixed">
+        <DataSheet items={testData} storageKey="test-fixed">
           <DataSheet.Column<TestItem> key="name" header="이름" fixed width="100px">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -315,7 +286,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-fixed-border">
+        <DataSheet items={testData} storageKey="test-fixed-border">
           <DataSheet.Column<TestItem> key="name" header="이름" fixed width="100px">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -336,7 +307,7 @@ describe("DataSheet", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={testData} persistKey="test-resizer">
+        <DataSheet items={testData} storageKey="test-resizer">
           <DataSheet.Column<TestItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -411,7 +382,7 @@ describe("flattenTree", () => {
     children?: TreeNode[];
   }
 
-  const getChildren = (item: TreeNode) => item.children;
+  const itemChildren = (item: TreeNode) => item.children;
 
   const tree: TreeNode[] = [
     {
@@ -421,7 +392,7 @@ describe("flattenTree", () => {
     { id: "b" },
   ];
 
-  it("returns flat list when getChildren is not provided", () => {
+  it("returns flat list when itemChildren is not provided", () => {
     const result = flattenTree(tree, []);
     expect(result.map((r) => r.item.id)).toEqual(["a", "b"]);
     expect(result.every((r) => r.depth === 0)).toBe(true);
@@ -429,14 +400,14 @@ describe("flattenTree", () => {
   });
 
   it("returns only roots when all are collapsed", () => {
-    const result = flattenTree(tree, [], getChildren);
+    const result = flattenTree(tree, [], itemChildren);
     expect(result.map((r) => r.item.id)).toEqual(["a", "b"]);
     expect(result[0].hasChildren).toBe(true);
     expect(result[1].hasChildren).toBe(false);
   });
 
   it("includes 1-level children when root is expanded", () => {
-    const result = flattenTree(tree, [tree[0]], getChildren);
+    const result = flattenTree(tree, [tree[0]], itemChildren);
     expect(result.map((r) => r.item.id)).toEqual(["a", "a1", "a2", "b"]);
     expect(result[1].depth).toBe(1);
     expect(result[1].parent).toBe(tree[0]);
@@ -445,7 +416,7 @@ describe("flattenTree", () => {
 
   it("includes up to 2-level children when nested expanded", () => {
     const a2 = tree[0].children![1];
-    const result = flattenTree(tree, [tree[0], a2], getChildren);
+    const result = flattenTree(tree, [tree[0], a2], itemChildren);
     expect(result.map((r) => r.item.id)).toEqual(["a", "a1", "a2", "a2x", "b"]);
     expect(result[3].depth).toBe(2);
     expect(result[3].parent).toBe(a2);
@@ -454,22 +425,22 @@ describe("flattenTree", () => {
   it("children of collapsed nodes are not included", () => {
     // only a2 is expanded but a is collapsed → a2 itself is not visible, so its children are also hidden
     const a2 = tree[0].children![1];
-    const result = flattenTree(tree, [a2], getChildren);
+    const result = flattenTree(tree, [a2], itemChildren);
     expect(result.map((r) => r.item.id)).toEqual(["a", "b"]);
   });
 
   it("returns empty result for empty array", () => {
-    const result = flattenTree([], [], getChildren);
+    const result = flattenTree([], [], itemChildren);
     expect(result).toEqual([]);
   });
 
   it("row increments in order", () => {
-    const result = flattenTree(tree, [tree[0]], getChildren);
+    const result = flattenTree(tree, [tree[0]], itemChildren);
     expect(result.map((r) => r.row)).toEqual([0, 1, 2, 3]);
   });
 
   it("index returns position within containing array", () => {
-    const result = flattenTree(tree, [tree[0]], getChildren);
+    const result = flattenTree(tree, [tree[0]], itemChildren);
     // tree[0]="a" → index 0 (root items[0])
     // tree[0].children[0]="a1" → index 0 (children[0])
     // tree[0].children[1]="a2" → index 1 (children[1])
@@ -485,7 +456,7 @@ describe("flattenTree", () => {
     const result = flattenTree(
       items,
       [tree[0]],
-      getChildren,
+      itemChildren,
       (item) => originalMap.get(item) ?? -1,
     );
     // items[0]=tree[1]="b" → originalIndex 1
@@ -503,7 +474,7 @@ describe("collectAllExpandable", () => {
     children?: TreeNode[];
   }
 
-  const getChildren = (item: TreeNode) => item.children;
+  const itemChildren = (item: TreeNode) => item.children;
 
   it("recursively collects all nodes that have children", () => {
     const tree: TreeNode[] = [
@@ -513,13 +484,13 @@ describe("collectAllExpandable", () => {
       },
       { id: "b" },
     ];
-    const result = collectAllExpandable(tree, getChildren);
+    const result = collectAllExpandable(tree, itemChildren);
     expect(result.map((r) => r.id)).toEqual(["a", "a2"]);
   });
 
   it("returns empty array when no nodes have children", () => {
     const tree: TreeNode[] = [{ id: "a" }, { id: "b" }];
-    const result = collectAllExpandable(tree, getChildren);
+    const result = collectAllExpandable(tree, itemChildren);
     expect(result).toEqual([]);
   });
 });
@@ -538,11 +509,11 @@ describe("DataSheet tree expansion", () => {
     { name: "폴더B" },
   ];
 
-  it("renders expand column when getChildren is set", () => {
+  it("renders expand column when itemChildren is set", () => {
     const { container } = render(() => (
       <ConfigProvider clientName="test"><I18nProvider>
         <TestWrapper>
-        <DataSheet items={treeData} persistKey="test-tree" getChildren={(item) => item.children}>
+        <DataSheet items={treeData} storageKey="test-tree" itemChildren={(item) => item.children}>
           <DataSheet.Column<TreeItem> key="name" header="이름">
             {(ctx) => <div>{ctx.item.name}</div>}
           </DataSheet.Column>
@@ -566,8 +537,8 @@ describe("DataSheet tree expansion", () => {
         <TestWrapper>
         <DataSheet
           items={treeData}
-          persistKey="test-tree-collapsed"
-          getChildren={(item) => item.children}
+          storageKey="test-tree-collapsed"
+          itemChildren={(item) => item.children}
           expandedItems={[]}
         >
           <DataSheet.Column<TreeItem> key="name" header="이름">
@@ -591,8 +562,8 @@ describe("DataSheet tree expansion", () => {
         <TestWrapper>
         <DataSheet
           items={treeData}
-          persistKey="test-tree-expanded"
-          getChildren={(item) => item.children}
+          storageKey="test-tree-expanded"
+          itemChildren={(item) => item.children}
           expandedItems={[treeData[0]]}
         >
           <DataSheet.Column<TreeItem> key="name" header="이름">
@@ -621,8 +592,8 @@ describe("DataSheet tree expansion", () => {
         <TestWrapper>
         <DataSheet
           items={treeData}
-          persistKey="test-tree-no-children"
-          getChildren={(item) => item.children}
+          storageKey="test-tree-no-children"
+          itemChildren={(item) => item.children}
           expandedItems={[]}
         >
           <DataSheet.Column<TreeItem> key="name" header="이름">

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

@@ -0,0 +1,254 @@
+import { describe, it, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { useDataSheetExpansion } from "../../../../../src/components/data/sheet/hooks/useDataSheetExpansion";
+
+interface TestNode {
+  id: string;
+  children?: TestNode[];
+}
+
+const flatListData: TestNode[] = [
+  { id: "a" },
+  { id: "b" },
+  { id: "c" },
+];
+
+const treeData: TestNode[] = [
+  {
+    id: "root1",
+    children: [
+      { id: "child1-1" },
+      { id: "child1-2", children: [{ id: "child1-2-1" }] },
+    ],
+  },
+  {
+    id: "root2",
+    children: [{ id: "child2-1" }],
+  },
+  { id: "root3" },
+];
+
+function itemChildren(item: TestNode, _index: number): TestNode[] | undefined {
+  return item.children;
+}
+
+describe("useDataSheetExpansion", () => {
+  it("should initialize with empty expanded items by default", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      expect(result.expandedItems()).toEqual([]);
+    });
+  });
+
+  it("should initialize with provided expanded items", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const expandedItems = [treeData[0]];
+      const result = useDataSheetExpansion(
+        { expandedItems, itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      expect(result.expandedItems()).toEqual(expandedItems);
+    });
+  });
+
+  it("toggleExpand should add item when not expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      const item = treeData[0];
+      result.toggleExpand(item);
+
+      expect(result.expandedItems()).toContain(item);
+    });
+  });
+
+  it("toggleExpand should remove item when already expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const expandedItems = [treeData[0]];
+      const result = useDataSheetExpansion(
+        { expandedItems: [...expandedItems], itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      result.toggleExpand(treeData[0]);
+
+      expect(result.expandedItems()).not.toContain(treeData[0]);
+    });
+  });
+
+  it("flatItems should include children when item is expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { expandedItems: [treeData[0]], itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      const items = result.flatItems();
+
+      expect(items.length).toBeGreaterThan(treeData.length);
+      const itemIds = items.map((f) => f.item.id);
+      expect(itemIds).toContain("root1");
+      expect(itemIds).toContain("child1-1");
+      expect(itemIds).toContain("child1-2");
+    });
+  });
+
+  it("flatItems should not include children when item is not expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      const items = result.flatItems();
+
+      expect(items.length).toBe(treeData.length);
+      const itemIds = items.map((f) => f.item.id);
+      expect(itemIds).toEqual(["root1", "root2", "root3"]);
+    });
+  });
+
+  it("isAllExpanded should be false when no items are expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      expect(result.isAllExpanded()).toBe(false);
+    });
+  });
+
+  it("isAllExpanded should be true when all expandable items are expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      // collectAllExpandable will find root1, child1-2, and root2 as expandable
+      const allExpandable = [treeData[0], treeData[0].children![1], treeData[1]];
+      const result = useDataSheetExpansion(
+        { expandedItems: allExpandable, itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      expect(result.isAllExpanded()).toBe(true);
+    });
+  });
+
+  it("isAllExpanded should be false when only some items are expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { expandedItems: [treeData[0]], itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      expect(result.isAllExpanded()).toBe(false);
+    });
+  });
+
+  it("toggleExpandAll should expand all items when not all are expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      result.toggleExpandAll();
+
+      expect(result.isAllExpanded()).toBe(true);
+      expect(result.expandedItems().length).toBeGreaterThan(0);
+    });
+  });
+
+  it("toggleExpandAll should collapse all items when all are expanded", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      // collectAllExpandable will find root1, child1-2, and root2 as expandable
+      const allExpandable = [treeData[0], treeData[0].children![1], treeData[1]];
+      const result = useDataSheetExpansion(
+        { expandedItems: allExpandable, itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      result.toggleExpandAll();
+
+      expect(result.expandedItems()).toEqual([]);
+      expect(result.isAllExpanded()).toBe(false);
+    });
+  });
+
+  it("flatItems should have correct depth values", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion(
+        { expandedItems: [treeData[0]], itemChildren },
+        () => treeData,
+        createIndexMap,
+      );
+
+      const items = result.flatItems();
+
+      const root = items.find((f) => f.item.id === "root1");
+      const child = items.find((f) => f.item.id === "child1-1");
+
+      expect(root?.depth).toBe(0);
+      expect(child?.depth).toBe(1);
+    });
+  });
+
+  it("should work with flat list (no children)", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      const result = useDataSheetExpansion({}, () => flatListData, createIndexMap);
+
+      expect(result.flatItems().length).toBe(flatListData.length);
+      expect(result.isAllExpanded()).toBe(false);
+    });
+  });
+
+  it("should respect controlled mode with onChange callback", () => {
+    createRoot(() => {
+      const createIndexMap = () => new Map<TestNode, number>();
+      let lastCalledWith: TestNode[] | null = null;
+      const onExpandedItemsChange = (items: TestNode[]) => {
+        lastCalledWith = items;
+      };
+
+      const result = useDataSheetExpansion(
+        { itemChildren, onExpandedItemsChange },
+        () => treeData,
+        createIndexMap,
+      );
+
+      result.toggleExpand(treeData[0]);
+
+      expect(lastCalledWith).toEqual([treeData[0]]);
+    });
+  });
+});