@simplysm/solid 13.0.0-beta.6

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

@@ -0,0 +1,564 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@solidjs/testing-library";
+import { DataSheet } from "../../../../src/components/data/sheet/DataSheet";
+import { applySorting, collectAllExpandable, flattenTree } from "../../../../src/components/data/sheet/sheetUtils";
+import type { SortingDef } from "../../../../src/components/data/sheet/types";
+import { ConfigContext } from "../../../../src/providers/ConfigContext";
+import type { JSX } from "solid-js";
+
+function TestWrapper(props: { children: JSX.Element }) {
+  return <ConfigContext.Provider value={{ clientName: "test" }}>{props.children}</ConfigContext.Provider>;
+}
+
+interface TestItem {
+  name: string;
+  age: number;
+  email: string;
+}
+
+const testData: TestItem[] = [
+  { name: "홍길동", age: 30, email: "hong@test.com" },
+  { name: "김철수", age: 25, email: "kim@test.com" },
+  { name: "이영희", age: 28, email: "lee@test.com" },
+];
+
+describe("DataSheet", () => {
+  it("기본 렌더링: 컬럼 헤더와 데이터 행이 표시된다", () => {
+    const { container } = render(() => (
+      <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>
+    ));
+
+    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("다단계 헤더: colspan과 rowspan이 올바르게 적용된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-multi">
+          <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>
+    ));
+
+    const headerRows = container.querySelectorAll("thead tr");
+    // 2행: 첫 행에 "기본정보"(colspan=2) + "이메일"(rowspan=2), 둘째 행에 "이름" + "나이"
+    expect(headerRows.length).toBeGreaterThanOrEqual(2);
+
+    const firstRowThs = headerRows[0].querySelectorAll("th");
+    // "기본정보" th는 colspan=2
+    const groupTh = Array.from(firstRowThs).find((th) => th.textContent?.includes("기본정보"));
+    expect(groupTh).toBeTruthy();
+    expect(groupTh!.getAttribute("colspan")).toBe("2");
+
+    // "이메일" th는 rowspan=2
+    const emailTh = Array.from(firstRowThs).find((th) => th.textContent?.includes("이메일"));
+    expect(emailTh).toBeTruthy();
+    expect(emailTh!.getAttribute("rowspan")).toBe("2");
+  });
+
+  it("합계 행: summary가 있으면 thead에 합계 행이 표시된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-summary">
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+          <DataSheet.Column<TestItem> key="age" header="나이" summary={() => <span>합계: 83</span>}>
+            {(ctx) => <div>{ctx.item.age}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const theadRows = container.querySelectorAll("thead tr");
+    // 헤더 1행 + 합계 1행 = 2행
+    expect(theadRows.length).toBe(2);
+
+    const summaryRow = theadRows[theadRows.length - 1];
+    expect(summaryRow.textContent).toContain("합계: 83");
+  });
+
+  it("빈 데이터: tbody가 비어있다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={[] as TestItem[]} persistKey="test-empty">
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const rows = container.querySelectorAll("tbody tr");
+    expect(rows.length).toBe(0);
+
+    // 헤더는 여전히 표시
+    const ths = container.querySelectorAll("thead th");
+    expect(ths.length).toBe(1);
+  });
+
+  it("hidden 컬럼은 렌더링되지 않는다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-hidden">
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+          <DataSheet.Column<TestItem> key="age" header="나이" hidden>
+            {(ctx) => <div>{ctx.item.age}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const ths = container.querySelectorAll("thead th");
+    expect(ths.length).toBe(1);
+    expect(ths[0].textContent).toContain("이름");
+  });
+
+  it("정렬: 헤더 클릭 시 onSortsChange가 호출된다", () => {
+    let capturedSorts: SortingDef[] = [];
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet
+          items={testData}
+          persistKey="test-sort"
+          sorts={[]}
+          onSortsChange={(s) => {
+            capturedSorts = s;
+          }}
+        >
+          <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>
+      </TestWrapper>
+    ));
+
+    // "이름" 헤더 클릭
+    const ths = container.querySelectorAll("thead th");
+    (ths[0] as HTMLElement).click();
+    expect(capturedSorts).toEqual([{ key: "name", desc: false }]);
+  });
+
+  it("정렬: sortable={false} 컬럼은 클릭해도 정렬되지 않는다", () => {
+    let capturedSorts: SortingDef[] = [];
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet
+          items={testData}
+          persistKey="test-no-sort"
+          sorts={[]}
+          onSortsChange={(s) => {
+            capturedSorts = s;
+          }}
+        >
+          <DataSheet.Column<TestItem> key="name" header="이름" sortable={false}>
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const th = container.querySelector("thead th") as HTMLElement;
+    th.click();
+    expect(capturedSorts).toEqual([]);
+  });
+
+  it("자동정렬: autoSort가 true면 데이터가 정렬된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-auto-sort" sorts={[{ key: "name", desc: false }]} autoSort>
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div data-testid="name">{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const cells = container.querySelectorAll("tbody [data-testid='name']");
+    const names = Array.from(cells).map((c) => c.textContent);
+    expect(names).toEqual(["김철수", "이영희", "홍길동"]);
+  });
+
+  it("페이지네이션: itemsPerPage로 데이터가 잘린다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-paging" itemsPerPage={2} pageIndex={0}>
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const rows = container.querySelectorAll("tbody tr");
+    expect(rows.length).toBe(2);
+  });
+
+  it("페이지네이션: 2페이지 이상일 때 Pagination이 표시된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-paging-nav" itemsPerPage={2} pageIndex={0}>
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const pagination = container.querySelector("[data-pagination]");
+    expect(pagination).toBeTruthy();
+  });
+
+  it("페이지네이션: 1페이지면 Pagination이 표시되지 않는다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-no-paging" itemsPerPage={10} pageIndex={0}>
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const pagination = container.querySelector("[data-pagination]");
+    expect(pagination).toBeFalsy();
+  });
+
+  it("고정 컬럼: fixed 컬럼의 td에 sticky 클래스가 적용된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-fixed">
+          <DataSheet.Column<TestItem> key="name" header="이름" fixed width="100px">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+          <DataSheet.Column<TestItem> key="age" header="나이">
+            {(ctx) => <div>{ctx.item.age}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const tds = container.querySelectorAll("tbody tr:first-child td");
+    expect(tds[0].classList.contains("sticky")).toBe(true);
+    expect(tds[1].classList.contains("sticky")).toBe(false);
+  });
+
+  it("고정 컬럼: 마지막 고정 컬럼에 경계 테두리 클래스가 적용된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-fixed-border">
+          <DataSheet.Column<TestItem> key="name" header="이름" fixed width="100px">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+          <DataSheet.Column<TestItem> key="age" header="나이">
+            {(ctx) => <div>{ctx.item.age}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const tds = container.querySelectorAll("tbody tr:first-child td");
+    // fixedLastClass에 포함된 클래스 확인
+    expect(tds[0].classList.contains("border-r-2")).toBe(true);
+  });
+
+  it("리사이저: resizable 컬럼에 리사이저 핸들이 있다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={testData} persistKey="test-resizer">
+          <DataSheet.Column<TestItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+          <DataSheet.Column<TestItem> key="age" header="나이" resizable={false}>
+            {(ctx) => <div>{ctx.item.age}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const resizers = container.querySelectorAll(".cursor-ew-resize");
+    // 첫 번째 컬럼에만 리사이저가 있어야 함
+    expect(resizers.length).toBe(1);
+  });
+});
+
+describe("applySorting", () => {
+  interface Item {
+    name: string;
+    age: number;
+  }
+
+  const items: Item[] = [
+    { name: "다", age: 30 },
+    { name: "가", age: 25 },
+    { name: "나", age: 28 },
+  ];
+
+  it("빈 sorts면 원본 순서 유지", () => {
+    const result = applySorting(items, []);
+    expect(result.map((i) => i.name)).toEqual(["다", "가", "나"]);
+  });
+
+  it("단일 오름차순 정렬", () => {
+    const result = applySorting(items, [{ key: "name", desc: false }]);
+    expect(result.map((i) => i.name)).toEqual(["가", "나", "다"]);
+  });
+
+  it("단일 내림차순 정렬", () => {
+    const result = applySorting(items, [{ key: "age", desc: true }]);
+    expect(result.map((i) => i.age)).toEqual([30, 28, 25]);
+  });
+
+  it("다중 정렬: 첫 번째 키 우선, 동일 값은 두 번째 키로", () => {
+    const data: Item[] = [
+      { name: "가", age: 30 },
+      { name: "나", age: 25 },
+      { name: "가", age: 20 },
+    ];
+    const result = applySorting(data, [
+      { key: "name", desc: false },
+      { key: "age", desc: false },
+    ]);
+    expect(result).toEqual([
+      { name: "가", age: 20 },
+      { name: "가", age: 30 },
+      { name: "나", age: 25 },
+    ]);
+  });
+
+  it("원본 배열을 변경하지 않는다", () => {
+    const original = [...items];
+    applySorting(items, [{ key: "name", desc: false }]);
+    expect(items).toEqual(original);
+  });
+});
+
+describe("flattenTree", () => {
+  interface TreeNode {
+    id: string;
+    children?: TreeNode[];
+  }
+
+  const getChildren = (item: TreeNode) => item.children;
+
+  const tree: TreeNode[] = [
+    {
+      id: "a",
+      children: [{ id: "a1" }, { id: "a2", children: [{ id: "a2x" }] }],
+    },
+    { id: "b" },
+  ];
+
+  it("getChildren이 없으면 flat 리스트를 반환한다", () => {
+    const result = flattenTree(tree, []);
+    expect(result.map((r) => r.item.id)).toEqual(["a", "b"]);
+    expect(result.every((r) => r.depth === 0)).toBe(true);
+    expect(result.every((r) => !r.hasChildren)).toBe(true);
+  });
+
+  it("모두 접힌 상태면 루트만 반환한다", () => {
+    const result = flattenTree(tree, [], getChildren);
+    expect(result.map((r) => r.item.id)).toEqual(["a", "b"]);
+    expect(result[0].hasChildren).toBe(true);
+    expect(result[1].hasChildren).toBe(false);
+  });
+
+  it("루트 확장 시 1단계 자식이 포함된다", () => {
+    const result = flattenTree(tree, [tree[0]], getChildren);
+    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]);
+    expect(result[2].hasChildren).toBe(true);
+  });
+
+  it("중첩 확장 시 2단계 자식까지 포함된다", () => {
+    const a2 = tree[0].children![1];
+    const result = flattenTree(tree, [tree[0], a2], getChildren);
+    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);
+  });
+
+  it("접힌 노드의 자식은 포함되지 않는다", () => {
+    // a2만 확장하고 a는 접힘 → a2 자체가 보이지 않으므로 a2의 자식도 안 보임
+    const a2 = tree[0].children![1];
+    const result = flattenTree(tree, [a2], getChildren);
+    expect(result.map((r) => r.item.id)).toEqual(["a", "b"]);
+  });
+
+  it("빈 배열이면 빈 결과를 반환한다", () => {
+    const result = flattenTree([], [], getChildren);
+    expect(result).toEqual([]);
+  });
+
+  it("index는 순서대로 증가한다", () => {
+    const result = flattenTree(tree, [tree[0]], getChildren);
+    expect(result.map((r) => r.index)).toEqual([0, 1, 2, 3]);
+  });
+});
+
+describe("collectAllExpandable", () => {
+  interface TreeNode {
+    id: string;
+    children?: TreeNode[];
+  }
+
+  const getChildren = (item: TreeNode) => item.children;
+
+  it("자식이 있는 모든 노드를 재귀적으로 수집한다", () => {
+    const tree: TreeNode[] = [
+      {
+        id: "a",
+        children: [{ id: "a1" }, { id: "a2", children: [{ id: "a2x" }] }],
+      },
+      { id: "b" },
+    ];
+    const result = collectAllExpandable(tree, getChildren);
+    expect(result.map((r) => r.id)).toEqual(["a", "a2"]);
+  });
+
+  it("자식이 없는 트리면 빈 배열을 반환한다", () => {
+    const tree: TreeNode[] = [{ id: "a" }, { id: "b" }];
+    const result = collectAllExpandable(tree, getChildren);
+    expect(result).toEqual([]);
+  });
+});
+
+describe("DataSheet 트리 확장", () => {
+  interface TreeItem {
+    name: string;
+    children?: TreeItem[];
+  }
+
+  const treeData: TreeItem[] = [
+    {
+      name: "폴더A",
+      children: [{ name: "파일A1" }, { name: "파일A2" }],
+    },
+    { name: "폴더B" },
+  ];
+
+  it("getChildren 설정 시 확장 기능 컬럼이 렌더링된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet items={treeData} persistKey="test-tree" getChildren={(item) => item.children}>
+          <DataSheet.Column<TreeItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    // colgroup에 확장 컬럼 col이 추가됨
+    const cols = container.querySelectorAll("colgroup col");
+    expect(cols.length).toBe(2); // 확장 컬럼 + name 컬럼
+
+    // 헤더에 확장 토글 버튼이 존재
+    const expandBtn = container.querySelector("thead button");
+    expect(expandBtn).toBeTruthy();
+  });
+
+  it("접힌 상태에서는 루트 항목만 표시된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet
+          items={treeData}
+          persistKey="test-tree-collapsed"
+          getChildren={(item) => item.children}
+          expandedItems={[]}
+        >
+          <DataSheet.Column<TreeItem> key="name" header="이름">
+            {(ctx) => <div data-testid="name">{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const rows = container.querySelectorAll("tbody tr");
+    expect(rows.length).toBe(2);
+
+    const names = container.querySelectorAll("tbody [data-testid='name']");
+    expect(Array.from(names).map((n) => n.textContent)).toEqual(["폴더A", "폴더B"]);
+  });
+
+  it("확장된 항목의 자식이 표시된다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet
+          items={treeData}
+          persistKey="test-tree-expanded"
+          getChildren={(item) => item.children}
+          expandedItems={[treeData[0]]}
+        >
+          <DataSheet.Column<TreeItem> key="name" header="이름">
+            {(ctx) => <div data-testid="name">{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const rows = container.querySelectorAll("tbody tr");
+    expect(rows.length).toBe(4); // 폴더A, 파일A1, 파일A2, 폴더B
+
+    const names = container.querySelectorAll("tbody [data-testid='name']");
+    expect(Array.from(names).map((n) => n.textContent)).toEqual(["폴더A", "파일A1", "파일A2", "폴더B"]);
+  });
+
+  it("자식이 없는 항목은 확장 아이콘이 숨겨진다", () => {
+    const { container } = render(() => (
+      <TestWrapper>
+        <DataSheet
+          items={treeData}
+          persistKey="test-tree-no-children"
+          getChildren={(item) => item.children}
+          expandedItems={[]}
+        >
+          <DataSheet.Column<TreeItem> key="name" header="이름">
+            {(ctx) => <div>{ctx.item.name}</div>}
+          </DataSheet.Column>
+        </DataSheet>
+      </TestWrapper>
+    ));
+
+    const tbodyRows = container.querySelectorAll("tbody tr");
+    // 폴더B(인덱스 1)에는 자식이 없으므로 확장 버튼이 없어야 함
+    const secondRowBtns = tbodyRows[1].querySelectorAll("button");
+    expect(secondRowBtns.length).toBe(0);
+
+    // 폴더A(인덱스 0)에는 자식이 있으므로 확장 버튼이 있어야 함
+    const firstRowBtns = tbodyRows[0].querySelectorAll("button");
+    expect(firstRowBtns.length).toBe(1);
+  });
+});