@yh-ui/components 0.1.21 → 0.1.23

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

@@ -1,617 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { mount } from "@vue/test-utils";
-import { h, nextTick } from "vue";
-import { YhTable } from "../index.mjs";
-const mockData = [
-  { id: 1, name: "\u5F20\u4E09", age: 28, address: "\u5317\u4EAC\u5E02\u671D\u9633\u533A" },
-  { id: 2, name: "\u674E\u56DB", age: 32, address: "\u4E0A\u6D77\u5E02\u6D66\u4E1C\u65B0\u533A" },
-  { id: 3, name: "\u738B\u4E94", age: 25, address: "\u5E7F\u5DDE\u5E02\u5929\u6CB3\u533A" },
-  { id: 4, name: "\u8D75\u516D", age: 30, address: "\u6DF1\u5733\u5E02\u5357\u5C71\u533A" }
-];
-const mockColumns = [
-  { prop: "name", label: "\u59D3\u540D", width: 100 },
-  { prop: "age", label: "\u5E74\u9F84", width: 80, sortable: true },
-  { prop: "address", label: "\u5730\u5740" }
-];
-describe("Table", () => {
-  it("should render basic table", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      },
-      global: {
-        stubs: {
-          YhPagination: true,
-          YhSelect: true,
-          YhOption: true,
-          YhInput: true,
-          YhTooltip: true
-        }
-      }
-    });
-    expect(wrapper.find(".yh-table").exists()).toBe(true);
-    expect(wrapper.findAll(".yh-table__header-cell").length).toBe(3);
-    expect(wrapper.findAll(".yh-table__row").length).toBe(4);
-  });
-  it("should render with border", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        border: true
-      }
-    });
-    expect(wrapper.classes()).toContain("is-border");
-  });
-  it("should render with stripe", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        stripe: true
-      }
-    });
-    expect(wrapper.classes()).toContain("is-stripe");
-  });
-  it("should support different sizes", () => {
-    const sizes = ["large", "default", "small"];
-    sizes.forEach((size) => {
-      const wrapper = mount(YhTable, {
-        props: {
-          data: mockData,
-          columns: mockColumns,
-          size
-        }
-      });
-      expect(wrapper.classes()).toContain(`yh-table--${size}`);
-    });
-  });
-  it("should show empty text when no data", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: [],
-        columns: mockColumns,
-        emptyText: "\u6682\u65E0\u6570\u636E"
-      }
-    });
-    expect(wrapper.find(".yh-table__empty").exists()).toBe(true);
-    expect(wrapper.find(".yh-table__empty-text").text()).toBe("\u6682\u65E0\u6570\u636E");
-  });
-  it("should hide header when showHeader is false", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        showHeader: false
-      }
-    });
-    expect(wrapper.find(".yh-table__header-wrapper").exists()).toBe(false);
-  });
-  it("should emit row-click event", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const row = wrapper.find(".yh-table__row");
-    await row.trigger("click");
-    expect(wrapper.emitted("row-click")).toBeTruthy();
-    expect(wrapper.emitted("row-click")[0][0]).toEqual(mockData[0]);
-  });
-  it("should emit row-dblclick event", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const row = wrapper.find(".yh-table__row");
-    await row.trigger("dblclick");
-    expect(wrapper.emitted("row-dblclick")).toBeTruthy();
-  });
-  it("should highlight current row", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        highlightCurrentRow: true
-      }
-    });
-    expect(wrapper.classes()).toContain("is-highlight-current-row");
-    const row = wrapper.find(".yh-table__row");
-    await row.trigger("click");
-    expect(row.classes()).toContain("is-current");
-  });
-  it("should render selection column", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "checkbox"
-        }
-      }
-    });
-    expect(wrapper.findAll(".yh-table__selection-cell").length).toBeGreaterThan(0);
-  });
-  it("should render index column", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        showIndex: true
-      }
-    });
-    expect(wrapper.findAll(".yh-table__index-cell").length).toBeGreaterThan(0);
-  });
-  it("should render sortable column", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const sortableHeader = wrapper.find(".yh-table__header-cell.is-sortable");
-    expect(sortableHeader.exists()).toBe(true);
-  });
-  it("should emit sort-change event", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const sortableHeader = wrapper.find(".yh-table__header-cell.is-sortable");
-    await sortableHeader.trigger("click");
-    expect(wrapper.emitted("sort-change")).toBeTruthy();
-  });
-  it("should render with fixed height", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        height: 300
-      }
-    });
-    expect(wrapper.attributes("style")).toContain("height: 300px");
-  });
-  it("should render with max height", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        maxHeight: 400
-      }
-    });
-    expect(wrapper.attributes("style")).toContain("max-height: 400px");
-  });
-  it("should expose getSelectionRows method", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "checkbox"
-        }
-      }
-    });
-    const tableInstance = wrapper.vm;
-    expect(typeof tableInstance.getSelectionRows).toBe("function");
-    expect(tableInstance.getSelectionRows()).toEqual([]);
-  });
-  it("should expose toggleRowSelection method", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "checkbox"
-        }
-      }
-    });
-    const tableInstance = wrapper.vm;
-    tableInstance.toggleRowSelection(mockData[0], true);
-    await nextTick();
-    expect(tableInstance.getSelectionRows()).toContainEqual(mockData[0]);
-  });
-  it("should expose clearSelection method", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "checkbox"
-        }
-      }
-    });
-    const tableInstance = wrapper.vm;
-    tableInstance.toggleRowSelection(mockData[0], true);
-    await nextTick();
-    tableInstance.clearSelection();
-    await nextTick();
-    expect(tableInstance.getSelectionRows()).toEqual([]);
-  });
-  it("should expose sort method", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const tableInstance = wrapper.vm;
-    tableInstance.sort("age", "asc");
-    await nextTick();
-    expect(wrapper.emitted("sort-change")).toBeFalsy();
-  });
-  it("should expose clearSort method", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const tableInstance = wrapper.vm;
-    tableInstance.sort("age", "asc");
-    await nextTick();
-    tableInstance.clearSort();
-    await nextTick();
-  });
-  it("should render loading state", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        loading: true
-      }
-    });
-    expect(wrapper.find(".yh-table__loading").exists()).toBe(true);
-  });
-  it("should render loading with text", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        loading: {
-          visible: true,
-          text: "\u52A0\u8F7D\u4E2D..."
-        }
-      }
-    });
-    expect(wrapper.find(".yh-table__loading").exists()).toBe(true);
-  });
-  it("should format cell content with formatter", () => {
-    const columns = [
-      {
-        prop: "age",
-        label: "\u5E74\u9F84",
-        formatter: (row) => `${row.age}\u5C81`
-      }
-    ];
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns
-      }
-    });
-    const cells = wrapper.findAll(".yh-table__cell");
-    expect(cells[0].text()).toBe("28\u5C81");
-  });
-  it("should render with custom row class", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        rowClassName: "custom-row-class"
-      }
-    });
-    const rows = wrapper.findAll(".yh-table__row");
-    expect(rows[0].classes()).toContain("custom-row-class");
-  });
-  it("should render with row class function", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        rowClassName: ({ rowIndex }) => rowIndex === 0 ? "first-row" : ""
-      }
-    });
-    const rows = wrapper.findAll(".yh-table__row");
-    expect(rows[0].classes()).toContain("first-row");
-    expect(rows[1].classes()).not.toContain("first-row");
-  });
-  it("should support column align", () => {
-    const columns = [{ prop: "name", label: "\u59D3\u540D", align: "center" }];
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns
-      }
-    });
-    const cell = wrapper.find(".yh-table__cell");
-    expect(cell.classes()).toContain("is-center");
-  });
-  it("should expose getTableData method", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      }
-    });
-    const tableInstance = wrapper.vm;
-    const result = tableInstance.getTableData();
-    expect(result.fullData).toEqual(mockData);
-    expect(result.tableData).toEqual(mockData);
-  });
-});
-describe("Table with Selection", () => {
-  it("should toggle row selection", async () => {
-    const onChange = vi.fn();
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "checkbox",
-          onChange
-        }
-      }
-    });
-    const checkbox = wrapper.find('.yh-table__selection-cell input[type="checkbox"]');
-    await checkbox.trigger("change");
-    expect(wrapper.emitted("selection-change")).toBeTruthy();
-  });
-  it("should toggle all selection", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "checkbox"
-        }
-      }
-    });
-    const headerCheckbox = wrapper.find(".yh-table__header-cell .yh-table__selection-cell input");
-    await headerCheckbox.trigger("change");
-    const tableInstance = wrapper.vm;
-    expect(tableInstance.getSelectionRows().length).toBe(4);
-  });
-  it("should support radio selection", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        selectionConfig: {
-          type: "radio"
-        }
-      }
-    });
-    const radios = wrapper.findAll('.yh-table__selection-cell input[type="radio"]');
-    expect(radios.length).toBe(4);
-  });
-});
-describe("Table with Tree", () => {
-  const treeData = [
-    {
-      id: 1,
-      name: "\u4E00\u7EA7 1",
-      children: [
-        { id: 11, name: "\u4E8C\u7EA7 1-1" },
-        { id: 12, name: "\u4E8C\u7EA7 1-2" }
-      ]
-    },
-    {
-      id: 2,
-      name: "\u4E00\u7EA7 2",
-      children: [{ id: 21, name: "\u4E8C\u7EA7 2-1" }]
-    }
-  ];
-  it("should render tree data", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: treeData,
-        columns: [{ prop: "name", label: "\u540D\u79F0", treeNode: true }],
-        treeConfig: {
-          childrenKey: "children"
-        }
-      }
-    });
-    expect(wrapper.find(".yh-table__tree-icon").exists()).toBe(true);
-  });
-  it("should expand tree node", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: treeData,
-        columns: [{ prop: "name", label: "\u540D\u79F0", treeNode: true }],
-        treeConfig: {
-          childrenKey: "children"
-        }
-      }
-    });
-    const treeIcon = wrapper.find(".yh-table__tree-icon");
-    await treeIcon.trigger("click");
-    await nextTick();
-    const rows = wrapper.findAll(".yh-table__row");
-    expect(rows.length).toBeGreaterThan(2);
-  });
-});
-describe("Table with Expand", () => {
-  it("should render expand column", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        expandConfig: {}
-      }
-    });
-    expect(wrapper.find(".yh-table__expand-cell").exists()).toBe(true);
-  });
-  it("should toggle expand row", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        expandConfig: {}
-      }
-    });
-    const expandIcon = wrapper.find(".yh-table__expand-icon");
-    await expandIcon.trigger("click");
-    expect(wrapper.find(".yh-table__expanded-row").exists()).toBe(true);
-    expect(wrapper.emitted("expand-change")).toBeTruthy();
-  });
-});
-describe("TableColumn", () => {
-  it("should render slot content", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      },
-      slots: {
-        name: ({ row }) => h("span", { class: "custom-name" }, String(row.name))
-      }
-    });
-    expect(wrapper.find(".custom-name").exists()).toBe(true);
-  });
-  it("should render header slot", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns
-      },
-      slots: {
-        "header-name": () => h("span", { class: "custom-header" }, "\u81EA\u5B9A\u4E49\u8868\u5934")
-      }
-    });
-    expect(wrapper.find(".custom-header").exists()).toBe(true);
-    expect(wrapper.find(".custom-header").text()).toBe("\u81EA\u5B9A\u4E49\u8868\u5934");
-  });
-});
-describe("Table Complex Scenarios", () => {
-  it("should render summary row", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        summaryConfig: {
-          text: "\u603B\u8BA1",
-          method: ({ columns, data }) => {
-            const sums = [];
-            columns.forEach((column, index) => {
-              if (index === 0) {
-                sums[index] = "\u603B\u8BA1";
-                return;
-              }
-              if (column.prop === "age") {
-                const values = data.map((item) => Number(item[column.prop]));
-                sums[index] = values.reduce((prev, curr) => prev + curr, 0);
-              } else {
-                sums[index] = "-";
-              }
-            });
-            return sums;
-          }
-        }
-      }
-    });
-    expect(wrapper.find(".yh-table__footer-wrapper").exists()).toBe(true);
-    const summaryCells = wrapper.findAll(".yh-table__footer .yh-table__cell");
-    expect(summaryCells[0].text()).toBe("\u603B\u8BA1");
-    expect(summaryCells[1].text()).toBe("115");
-  });
-  it("should support span-method (cell merging)", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        spanMethod: ({ rowIndex, columnIndex }) => {
-          if (rowIndex === 0 && columnIndex === 0) {
-            return { rowspan: 2, colspan: 1 };
-          }
-          if (rowIndex === 1 && columnIndex === 0) {
-            return { rowspan: 0, colspan: 0 };
-          }
-        }
-      }
-    });
-    const rows = wrapper.findAll(".yh-table__row");
-    const firstCell = rows[0].find(".yh-table__cell");
-    expect(firstCell.attributes("rowspan")).toBe("2");
-    const secondRowFirstCell = rows[1].find(".yh-table__cell");
-    expect(rows[1].findAll(".yh-table__cell").length).toBe(2);
-  });
-  it("should render grouped header (multi-level)", () => {
-    const groupedColumns = [
-      {
-        label: "\u5206\u7EC4 1",
-        children: [
-          { prop: "name", label: "\u59D3\u540D", width: 100 },
-          { prop: "age", label: "\u5E74\u9F84", width: 80 }
-        ]
-      },
-      { prop: "address", label: "\u5730\u5740" }
-    ];
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: groupedColumns
-      }
-    });
-    expect(wrapper.findAll(".yh-table__header-row").length).toBe(2);
-    const firstHeaderRow = wrapper.findAll(".yh-table__header-row")[0];
-    expect(firstHeaderRow.text()).toContain("\u5206\u7EC4 1");
-    expect(firstHeaderRow.text()).toContain("\u5730\u5740");
-  });
-  it("should support pagination config", () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        pagination: {
-          currentPage: 1,
-          pageSize: 2,
-          total: mockData.length
-        }
-      },
-      global: {
-        stubs: {
-          YhPagination: true,
-          YhSelect: true,
-          YhOption: true,
-          YhInput: true,
-          YhTooltip: true
-        }
-      }
-    });
-    expect(wrapper.find(".yh-table__pagination-wrapper").exists()).toBe(true);
-    expect(wrapper.findAll(".yh-table__row").length).toBe(2);
-  });
-  it("should emit page-change event", async () => {
-    const wrapper = mount(YhTable, {
-      props: {
-        data: mockData,
-        columns: mockColumns,
-        pagination: {
-          currentPage: 1,
-          pageSize: 2,
-          total: mockData.length
-        }
-      },
-      global: {
-        stubs: {
-          YhPagination: true,
-          YhSelect: true,
-          YhOption: true,
-          YhInput: true,
-          YhTooltip: true
-        }
-      }
-    });
-    const pagination = wrapper.findComponent({ name: "YhPagination" });
-    if (pagination.exists()) {
-      await pagination.vm.$emit("update:currentPage", 2);
-      expect(wrapper.emitted("page-change")).toBeTruthy();
-    }
-  });
-});