@yh-ui/components 0.1.0

package/dist/table/__tests__/table-utils.test.mjs

@@ -0,0 +1,485 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  getRowKey,
+  getColumnKey,
+  flattenColumns,
+  getColumnDepth,
+  buildHeaderRows,
+  calculateColumnWidth,
+  defaultSortMethod,
+  multiColumnSort,
+  defaultFilterMethod,
+  multiValueFilter,
+  flattenTreeData,
+  getAllTreeKeys,
+  formatSize,
+  calculateSpan,
+  throttle,
+  debounce,
+  deepClone,
+  isEmpty,
+  generateId,
+  formatCellValue,
+  getFixedStyle,
+  exportToCSV
+} from "../src/utils.mjs";
+describe("table/utils", () => {
+  describe("getRowKey", () => {
+    it("should return key via string rowKey", () => {
+      expect(getRowKey({ id: 1, name: "a" }, "id")).toBe(1);
+    });
+    it("should return key via function rowKey", () => {
+      expect(getRowKey({ id: 2 }, (row) => row.id)).toBe(2);
+    });
+  });
+  describe("getColumnKey", () => {
+    it("should prefer key over prop", () => {
+      expect(getColumnKey({ key: "myKey", prop: "myProp", label: "Label" })).toBe("myKey");
+    });
+    it("should fall back to prop when key is missing", () => {
+      expect(getColumnKey({ prop: "name", label: "Name" })).toBe("name");
+    });
+    it("should return empty string when both missing", () => {
+      expect(getColumnKey({ label: "Test" })).toBe("");
+    });
+  });
+  describe("flattenColumns", () => {
+    it("should flatten nested columns", () => {
+      const cols = [
+        {
+          label: "Group",
+          children: [
+            { prop: "a", label: "A" },
+            { prop: "b", label: "B" }
+          ]
+        },
+        { prop: "c", label: "C" }
+      ];
+      const flat = flattenColumns(cols);
+      expect(flat).toHaveLength(3);
+      expect(flat.map((c) => c.prop)).toEqual(["a", "b", "c"]);
+    });
+    it("should return leaf columns as-is", () => {
+      const cols = [{ prop: "x", label: "X" }];
+      expect(flattenColumns(cols)).toHaveLength(1);
+    });
+  });
+  describe("getColumnDepth", () => {
+    it("should return 1 for flat columns", () => {
+      const cols = [{ prop: "a", label: "A" }];
+      expect(getColumnDepth(cols)).toBe(1);
+    });
+    it("should return correct depth for nested columns", () => {
+      const cols = [
+        {
+          label: "Level1",
+          children: [
+            {
+              label: "Level2",
+              children: [{ prop: "leaf", label: "Leaf" }]
+            }
+          ]
+        }
+      ];
+      expect(getColumnDepth(cols)).toBe(3);
+    });
+  });
+  describe("buildHeaderRows", () => {
+    it("should return empty array for single-level columns", () => {
+      const cols = [{ prop: "a", label: "A" }];
+      expect(buildHeaderRows(cols)).toHaveLength(0);
+    });
+    it("should build correct header rows for grouped columns", () => {
+      const cols = [
+        {
+          label: "Group",
+          children: [
+            { prop: "a", label: "A" },
+            { prop: "b", label: "B" }
+          ]
+        },
+        { prop: "c", label: "C" }
+      ];
+      const rows = buildHeaderRows(cols);
+      expect(rows).toHaveLength(2);
+      expect(rows[0][0].colspan).toBe(2);
+      expect(rows[0][1].rowspan).toBe(2);
+    });
+  });
+  describe("calculateColumnWidth", () => {
+    it("should return numeric width directly", () => {
+      const col = { prop: "a", label: "A", width: 100 };
+      expect(calculateColumnWidth(col, 800, [col])).toBe(100);
+    });
+    it("should compute percentage width", () => {
+      const col = { prop: "a", label: "A", width: "50%" };
+      expect(calculateColumnWidth(col, 800, [col])).toBe(400);
+    });
+    it("should parse string pixel width", () => {
+      const col = { prop: "a", label: "A", width: "120px" };
+      expect(calculateColumnWidth(col, 800, [col])).toBe(120);
+    });
+    it("should distribute remaining width evenly for flex columns", () => {
+      const fixedCol = { prop: "a", label: "A", width: 200 };
+      const flexCol = { prop: "b", label: "B" };
+      const all = [fixedCol, flexCol];
+      const width = calculateColumnWidth(flexCol, 800, all);
+      expect(width).toBe(600);
+    });
+    it("should respect minWidth", () => {
+      const col = { prop: "a", label: "A", minWidth: 150 };
+      const width = calculateColumnWidth(col, 100, [col]);
+      expect(width).toBe(150);
+    });
+  });
+  describe("defaultSortMethod", () => {
+    it("should return 0 when no order", () => {
+      expect(defaultSortMethod({ age: 1 }, { age: 2 }, "age", null)).toBe(0);
+    });
+    it("should sort numbers ascending", () => {
+      expect(defaultSortMethod({ age: 1 }, { age: 2 }, "age", "asc")).toBeLessThan(0);
+      expect(defaultSortMethod({ age: 2 }, { age: 1 }, "age", "asc")).toBeGreaterThan(0);
+    });
+    it("should sort numbers descending", () => {
+      expect(defaultSortMethod({ age: 1 }, { age: 2 }, "age", "desc")).toBeGreaterThan(0);
+    });
+    it("should sort strings", () => {
+      expect(defaultSortMethod({ name: "b" }, { name: "a" }, "name", "asc")).toBeGreaterThan(0);
+    });
+    it("should handle null/undefined values", () => {
+      expect(defaultSortMethod({ v: null }, { v: 1 }, "v", "asc")).toBeGreaterThan(0);
+      expect(defaultSortMethod({ v: 1 }, { v: null }, "v", "asc")).toBeLessThan(0);
+      expect(defaultSortMethod({ v: null }, { v: null }, "v", "asc")).toBe(0);
+    });
+  });
+  describe("multiColumnSort", () => {
+    it("should return original data when no sort states", () => {
+      const data = [{ a: 2 }, { a: 1 }];
+      expect(multiColumnSort(data, [])).toEqual(data);
+    });
+    it("should sort by single column", () => {
+      const data = [{ age: 3 }, { age: 1 }, { age: 2 }];
+      const sorted = multiColumnSort(data, [{ prop: "age", order: "asc" }]);
+      expect(sorted.map((r) => r.age)).toEqual([1, 2, 3]);
+    });
+    it("should respect custom sortMethod", () => {
+      const data = [{ v: "b" }, { v: "a" }];
+      const sortMethod = vi.fn((a, b) => a.v.localeCompare(b.v));
+      multiColumnSort(data, [{ prop: "v", order: "asc", sortMethod }]);
+      expect(sortMethod).toHaveBeenCalled();
+    });
+    it("should skip columns with no order", () => {
+      const data = [{ a: 2 }, { a: 1 }];
+      const sorted = multiColumnSort(data, [{ prop: "a", order: null }]);
+      expect(sorted).toHaveLength(2);
+    });
+  });
+  describe("defaultFilterMethod", () => {
+    it("should match exact value", () => {
+      const col = { prop: "status", label: "Status" };
+      expect(defaultFilterMethod("active", { status: "active" }, col)).toBe(true);
+      expect(defaultFilterMethod("inactive", { status: "active" }, col)).toBe(false);
+    });
+    it("should return true when no prop", () => {
+      expect(defaultFilterMethod("x", { a: "x" }, { label: "Test" })).toBe(true);
+    });
+  });
+  describe("multiValueFilter", () => {
+    const data = [
+      { name: "Alice", status: "active", age: 25 },
+      { name: "Bob", status: "inactive", age: 30 },
+      { name: "Charlie", status: "active", age: 35 }
+    ];
+    const columns = [
+      { prop: "status", label: "Status" },
+      { prop: "age", label: "Age" }
+    ];
+    it("should return all data when no active filters", () => {
+      expect(multiValueFilter(data, {}, columns)).toHaveLength(3);
+    });
+    it("should filter by single value", () => {
+      const result = multiValueFilter(data, { status: ["active"] }, columns);
+      expect(result).toHaveLength(2);
+      expect(result.every((r) => r.status === "active")).toBe(true);
+    });
+    it("should filter by multiple columns", () => {
+      const result = multiValueFilter(data, { status: ["active"], age: [25] }, columns);
+      expect(result).toHaveLength(1);
+      expect(result[0].name).toBe("Alice");
+    });
+    it("should handle missing column gracefully", () => {
+      const result = multiValueFilter(data, { missing: ["x"] }, columns);
+      expect(result).toHaveLength(3);
+    });
+  });
+  describe("flattenTreeData", () => {
+    const treeData = [
+      {
+        id: 1,
+        name: "Parent",
+        children: [
+          { id: 11, name: "Child1" },
+          { id: 12, name: "Child2" }
+        ]
+      },
+      { id: 2, name: "Leaf" }
+    ];
+    it("should flatten visible expanded nodes", () => {
+      const expanded = /* @__PURE__ */ new Set([1]);
+      const flat = flattenTreeData(treeData, "children", expanded, "id");
+      expect(flat).toHaveLength(4);
+      expect(flat[0]._level).toBe(0);
+      expect(flat[1]._level).toBe(1);
+    });
+    it("should not show children when not expanded", () => {
+      const expanded = /* @__PURE__ */ new Set();
+      const flat = flattenTreeData(treeData, "children", expanded, "id");
+      expect(flat).toHaveLength(2);
+    });
+    it("should mark leaf nodes correctly", () => {
+      const expanded = /* @__PURE__ */ new Set([1]);
+      const flat = flattenTreeData(treeData, "children", expanded, "id");
+      expect(flat[0]._hasChildren).toBe(true);
+      expect(flat[0]._isLeaf).toBe(false);
+      expect(flat[1]._isLeaf).toBe(true);
+    });
+    it("should support function rowKey", () => {
+      const expanded = /* @__PURE__ */ new Set([1]);
+      const flat = flattenTreeData(treeData, "children", expanded, (row) => row.id);
+      expect(flat).toHaveLength(4);
+    });
+  });
+  describe("getAllTreeKeys", () => {
+    it("should get all tree node keys recursively", () => {
+      const data = [{ id: 1, children: [{ id: 11 }, { id: 12 }] }, { id: 2 }];
+      const keys = getAllTreeKeys(data, "children", "id");
+      expect(keys).toEqual([1, 11, 12, 2]);
+    });
+  });
+  describe("formatSize", () => {
+    it("should return empty string for undefined", () => {
+      expect(formatSize(void 0)).toBe("");
+    });
+    it("should append px for numbers", () => {
+      expect(formatSize(100)).toBe("100px");
+    });
+    it("should append px for pure numeric strings", () => {
+      expect(formatSize("200")).toBe("200px");
+    });
+    it("should return string as-is when has unit", () => {
+      expect(formatSize("50%")).toBe("50%");
+      expect(formatSize("100px")).toBe("100px");
+    });
+  });
+  describe("calculateSpan", () => {
+    const col = { prop: "a", label: "A" };
+    const row = { a: 1 };
+    it("should return default span when no spanMethod", () => {
+      expect(calculateSpan(row, col, 0, 0)).toEqual({ rowspan: 1, colspan: 1 });
+    });
+    it("should handle array return from spanMethod", () => {
+      const result = calculateSpan(row, col, 0, 0, () => [2, 3]);
+      expect(result).toEqual({ rowspan: 2, colspan: 3 });
+    });
+    it("should handle object return from spanMethod", () => {
+      const result = calculateSpan(row, col, 0, 0, () => ({ rowspan: 3, colspan: 1 }));
+      expect(result).toEqual({ rowspan: 3, colspan: 1 });
+    });
+    it("should use default when spanMethod returns void", () => {
+      const result = calculateSpan(row, col, 0, 0, () => void 0);
+      expect(result).toEqual({ rowspan: 1, colspan: 1 });
+    });
+  });
+  describe("throttle", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+    it("should call function immediately on first invocation", () => {
+      const fn = vi.fn();
+      const throttled = throttle(fn, 100);
+      throttled();
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+    it("should not call again within delay", () => {
+      const fn = vi.fn();
+      const throttled = throttle(fn, 100);
+      throttled();
+      throttled();
+      throttled();
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+    it("should call again after delay", () => {
+      const fn = vi.fn();
+      const throttled = throttle(fn, 100);
+      throttled();
+      vi.advanceTimersByTime(150);
+      throttled();
+      expect(fn).toHaveBeenCalledTimes(2);
+    });
+  });
+  describe("debounce", () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+    it("should delay function invocation", () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+      debounced();
+      debounced();
+      debounced();
+      expect(fn).not.toHaveBeenCalled();
+      vi.advanceTimersByTime(100);
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+    it("should reset delay on repeated calls", () => {
+      const fn = vi.fn();
+      const debounced = debounce(fn, 100);
+      debounced();
+      vi.advanceTimersByTime(50);
+      debounced();
+      vi.advanceTimersByTime(50);
+      expect(fn).not.toHaveBeenCalled();
+      vi.advanceTimersByTime(50);
+      expect(fn).toHaveBeenCalledTimes(1);
+    });
+  });
+  describe("deepClone", () => {
+    it("should clone primitives", () => {
+      expect(deepClone(42)).toBe(42);
+      expect(deepClone("hello")).toBe("hello");
+      expect(deepClone(null)).toBeNull();
+    });
+    it("should deep clone arrays", () => {
+      const arr = [1, [2, 3]];
+      const cloned = deepClone(arr);
+      expect(cloned).toEqual(arr);
+      cloned[1][0] = 999;
+      expect(arr[1][0]).toBe(2);
+    });
+    it("should deep clone objects", () => {
+      const obj = { a: 1, b: { c: 2 } };
+      const cloned = deepClone(obj);
+      cloned.b.c = 999;
+      expect(obj.b.c).toBe(2);
+    });
+  });
+  describe("isEmpty", () => {
+    it("should identify empty values", () => {
+      expect(isEmpty(null)).toBe(true);
+      expect(isEmpty(void 0)).toBe(true);
+      expect(isEmpty("")).toBe(true);
+      expect(isEmpty("  ")).toBe(true);
+      expect(isEmpty([])).toBe(true);
+      expect(isEmpty({})).toBe(true);
+    });
+    it("should identify non-empty values", () => {
+      expect(isEmpty("a")).toBe(false);
+      expect(isEmpty([1])).toBe(false);
+      expect(isEmpty({ a: 1 })).toBe(false);
+      expect(isEmpty(0)).toBe(false);
+    });
+  });
+  describe("generateId", () => {
+    it("should generate unique IDs", () => {
+      const id1 = generateId();
+      const id2 = generateId();
+      expect(id1).toMatch(/^yh-table-/);
+      expect(id1).not.toBe(id2);
+    });
+  });
+  describe("formatCellValue", () => {
+    it("should return empty string for missing prop", () => {
+      expect(formatCellValue({ a: 1 }, { label: "Test" }, 0)).toBe("");
+    });
+    it("should format with formatter function", () => {
+      const col = {
+        prop: "age",
+        label: "Age",
+        formatter: (row, col2, val) => `${val}\u5C81`
+      };
+      expect(formatCellValue({ age: 25 }, col, 0)).toBe("25\u5C81");
+    });
+    it("should return empty string for null/undefined value", () => {
+      expect(formatCellValue({ age: null }, { prop: "age", label: "Age" }, 0)).toBe("");
+      expect(formatCellValue({ age: void 0 }, { prop: "age", label: "Age" }, 0)).toBe("");
+    });
+    it("should stringify value as default", () => {
+      expect(formatCellValue({ count: 42 }, { prop: "count", label: "Count" }, 0)).toBe("42");
+    });
+  });
+  describe("getFixedStyle", () => {
+    const columns = [
+      { prop: "a", label: "A", fixed: "left", width: 100 },
+      { prop: "b", label: "B", fixed: "left", width: 80 },
+      { prop: "c", label: "C" },
+      { prop: "d", label: "D", fixed: "right", width: 90 }
+    ];
+    it("should compute left offset for left-fixed column", () => {
+      const style = getFixedStyle(columns[1], columns, "left");
+      expect(style.left).toBe("100px");
+    });
+    it("should compute right offset for right-fixed column", () => {
+      const style = getFixedStyle(columns[3], columns, "right");
+      expect(style.right).toBe("0px");
+    });
+    it("should return empty when column not found", () => {
+      const notFound = { prop: "z", label: "Z" };
+      expect(getFixedStyle(notFound, columns, "left")).toEqual({});
+    });
+  });
+  describe("exportToCSV", () => {
+    it("should trigger download", () => {
+      const createElementSpy = vi.spyOn(document, "createElement");
+      const clickMock = vi.fn();
+      const linkMock = {
+        href: "",
+        download: "",
+        click: clickMock
+      };
+      createElementSpy.mockReturnValue(linkMock);
+      vi.stubGlobal("URL", {
+        createObjectURL: vi.fn().mockReturnValue("blob:url"),
+        revokeObjectURL: vi.fn()
+      });
+      exportToCSV(
+        [
+          { name: "Alice", age: 25 },
+          { name: "Bob, Jr.", age: 30 }
+        ],
+        [
+          { prop: "name", label: "\u59D3\u540D" },
+          { prop: "age", label: "\u5E74\u9F84" }
+        ],
+        "test-export"
+      );
+      expect(clickMock).toHaveBeenCalled();
+      expect(linkMock.download).toBe("test-export.csv");
+      vi.restoreAllMocks();
+    });
+    it("should skip hidden columns (visible=false)", () => {
+      const createElementSpy = vi.spyOn(document, "createElement");
+      const clickMock = vi.fn();
+      const linkMock = { href: "", download: "", click: clickMock };
+      createElementSpy.mockReturnValue(linkMock);
+      vi.stubGlobal("URL", {
+        createObjectURL: vi.fn().mockReturnValue("blob:url"),
+        revokeObjectURL: vi.fn()
+      });
+      exportToCSV(
+        [{ name: "Alice", age: 25 }],
+        [
+          { prop: "name", label: "\u59D3\u540D" },
+          { prop: "age", label: "\u5E74\u9F84", visible: false }
+        ]
+      );
+      expect(clickMock).toHaveBeenCalled();
+      vi.restoreAllMocks();
+    });
+  });
+});