@multiplatform.one/table 6.1.0 → 6.3.0

package/dist/cjs/components/DataTable/DataTable.spec.cjs

@@ -1,516 +0,0 @@
-var import_react_table = require("@tanstack/react-table");
-var import_test_utils = require("@multiplatform.one/test-utils");
-var import_react = require("@testing-library/react");
-var import_vitest = require("vitest");
-var import_index = require("./index.cjs");
-var import_jsx_runtime = require("react/jsx-runtime");
-const sampleData = [{
-  id: 1,
-  firstName: "John",
-  lastName: "Doe",
-  age: 28,
-  email: "john.doe@example.com",
-  status: "active"
-}, {
-  id: 2,
-  firstName: "Jane",
-  lastName: "Smith",
-  age: 32,
-  email: "jane.smith@example.com",
-  status: "active"
-}, {
-  id: 3,
-  firstName: "Bob",
-  lastName: "Johnson",
-  age: 45,
-  email: "bob.johnson@example.com",
-  status: "inactive"
-}, {
-  id: 4,
-  firstName: "Alice",
-  lastName: "Williams",
-  age: 29,
-  email: "alice.williams@example.com",
-  status: "active"
-}, {
-  id: 5,
-  firstName: "Charlie",
-  lastName: "Brown",
-  age: 35,
-  email: "charlie.brown@example.com",
-  status: "inactive"
-}];
-const columnHelper = (0, import_react_table.createColumnHelper)();
-const columns = [columnHelper.accessor("id", {
-  header: "ID",
-  cell: info => info.getValue(),
-  size: 60
-}), columnHelper.accessor("firstName", {
-  header: "First Name",
-  cell: info => info.getValue()
-}), columnHelper.accessor("lastName", {
-  header: "Last Name",
-  cell: info => info.getValue()
-}), columnHelper.accessor("age", {
-  header: "Age",
-  cell: info => info.getValue(),
-  size: 80
-}), columnHelper.accessor("email", {
-  header: "Email",
-  cell: info => info.getValue()
-}), columnHelper.accessor("status", {
-  header: "Status",
-  cell: info => {
-    const status = info.getValue();
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)("span", {
-      style: {
-        color: status === "active" ? "green" : "red",
-        fontWeight: "bold"
-      },
-      children: status
-    });
-  }
-})];
-(0, import_vitest.describe)("DataTable", () => {
-  (0, import_vitest.describe)("basic rendering", () => {
-    (0, import_vitest.it)("should render table with data and columns", () => {
-      const {
-        container,
-        getByText
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-      (0, import_vitest.expect)(getByText("John")).toBeDefined();
-      (0, import_vitest.expect)(getByText("john.doe@example.com")).toBeDefined();
-    });
-    (0, import_vitest.it)("should render data rows correctly", () => {
-      const {
-        getByText
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(getByText("John")).toBeDefined();
-      (0, import_vitest.expect)(getByText("Doe")).toBeDefined();
-      (0, import_vitest.expect)(getByText("28")).toBeDefined();
-      (0, import_vitest.expect)(getByText("john.doe@example.com")).toBeDefined();
-    });
-    (0, import_vitest.it)("should handle empty data", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: [],
-        columns,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should apply different sizes", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        size: "sm",
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should apply different sizes (large)", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        size: "lg",
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("sorting functionality", () => {
-    (0, import_vitest.it)("should enable sorting when enableSorting is true", () => {
-      const {
-        getAllByText
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableSorting: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      const firstNameLabels = getAllByText("First Name");
-      (0, import_vitest.expect)(firstNameLabels.length).toBeGreaterThan(0);
-    });
-    (0, import_vitest.it)("should disable sorting when enableSorting is false", () => {
-      const {
-        getAllByText
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableSorting: false,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      const firstNameLabels = getAllByText("First Name");
-      (0, import_vitest.expect)(firstNameLabels.length).toBeGreaterThan(0);
-    });
-    (0, import_vitest.it)("should call onStateChange when sorting changes", async () => {
-      const onStateChange = import_vitest.vi.fn();
-      (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableSorting: true,
-        onStateChange
-      }));
-      await (0, import_react.waitFor)(() => {
-        (0, import_vitest.expect)(onStateChange).toHaveBeenCalled();
-      });
-    });
-  });
-  (0, import_vitest.describe)("pagination functionality", () => {
-    (0, import_vitest.it)("should enable pagination when enablePagination is true", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enablePagination: true,
-        initialState: {
-          pagination: {
-            pageIndex: 0,
-            pageSize: 2
-          }
-        },
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should disable pagination when enablePagination is false", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enablePagination: false,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should respect pageSize prop", () => {
-      const {
-        getByText
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enablePagination: true,
-        initialState: {
-          pagination: {
-            pageIndex: 0,
-            pageSize: 2
-          }
-        },
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(getByText("John")).toBeDefined();
-      (0, import_vitest.expect)(getByText("Jane")).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("filtering functionality", () => {
-    (0, import_vitest.it)("should enable filtering when enableFiltering is true", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableFiltering: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should disable filtering when enableFiltering is false", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableFiltering: false,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("global search functionality", () => {
-    (0, import_vitest.it)("should enable global search when enableGlobalSearch is true", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableGlobalSearch: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should disable global search when enableGlobalSearch is false", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableGlobalSearch: false,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("column visibility", () => {
-    (0, import_vitest.it)("should enable column visibility when enableColumnVisibility is true", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableColumnVisibility: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should disable column visibility when enableColumnVisibility is false", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableColumnVisibility: false,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("toolbar functionality", () => {
-    (0, import_vitest.it)("should show toolbar by default", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should hide toolbar when search/filtering/views are disabled", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        enableGlobalSearch: false,
-        enableFiltering: false,
-        enableViews: false,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should support custom toolbar rendering", () => {
-      const customToolbar = /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-        "data-testid": "custom-toolbar",
-        children: "Custom Toolbar"
-      });
-      const {
-        getByTestId
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        renderToolbar: () => customToolbar,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(getByTestId("custom-toolbar")).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("accessibility", () => {
-    (0, import_vitest.it)("should support aria-label", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        "aria-label": "User management table",
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should support aria-describedby", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        "aria-describedby": "table-description",
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("manual modes", () => {
-    (0, import_vitest.it)("should support manual filtering", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        manualFiltering: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should support manual pagination", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        manualPagination: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should support manual sorting", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        manualSorting: true,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("state management", () => {
-    (0, import_vitest.it)("should call onStateChange when state changes", () => {
-      const onStateChange = import_vitest.vi.fn();
-      (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        onStateChange
-      }));
-      (0, import_vitest.expect)(onStateChange).toHaveBeenCalled();
-    });
-    (0, import_vitest.it)("should accept initialState", () => {
-      const initialState = {
-        sorting: [{
-          id: "firstName",
-          desc: false
-        }],
-        pagination: {
-          pageIndex: 0,
-          pageSize: 2
-        }
-      };
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        initialState,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("arbitrary cell content", () => {
-    (0, import_vitest.it)("should render cell with React component without Text wrapper", () => {
-      const columnsWithCustomCell = [columnHelper.accessor("id", {
-        header: "ID",
-        cell: info => info.getValue()
-      }), columnHelper.accessor("firstName", {
-        header: "Name",
-        cell: info => /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-          "data-testid": `name-cell-${info.row.original.id}`,
-          children: info.getValue()
-        })
-      })];
-      const {
-        getByTestId
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns: columnsWithCustomCell,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      const cellWrapper = getByTestId("name-cell-1");
-      (0, import_vitest.expect)(cellWrapper).toBeDefined();
-      (0, import_vitest.expect)(cellWrapper.textContent).toContain("John");
-    });
-  });
-  (0, import_vitest.describe)("custom rendering", () => {
-    (0, import_vitest.it)("should support custom pagination rendering", () => {
-      const customPagination = /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-        "data-testid": "custom-pagination",
-        children: "Custom Pagination"
-      });
-      const {
-        getByTestId
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        renderPagination: () => customPagination,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(getByTestId("custom-pagination")).toBeDefined();
-    });
-    (0, import_vitest.it)("should support custom filters rendering", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        renderFilters: () => /* @__PURE__ */(0, import_jsx_runtime.jsx)("div", {
-          "data-testid": "custom-filters",
-          children: "Custom Filters"
-        }),
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("responsive behavior", () => {
-    (0, import_vitest.it)("should handle different screen sizes", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-  (0, import_vitest.describe)("error handling", () => {
-    (0, import_vitest.it)("should handle invalid data gracefully", () => {
-      const invalidData = [{
-        invalidField: "value"
-      }];
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: invalidData,
-        columns,
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-    (0, import_vitest.it)("should handle empty columns", () => {
-      const {
-        container
-      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTable, {
-        data: sampleData,
-        columns: [],
-        onStateChange: import_vitest.vi.fn()
-      }));
-      (0, import_vitest.expect)(container).toBeDefined();
-    });
-  });
-});