@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableToolbar/DataTableToolbar.spec.cjs

@@ -0,0 +1,572 @@
+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");
+(0, import_vitest.describe)("DataTableToolbar", () => {
+  const defaultProps = {
+    globalFilter: "",
+    onGlobalFilterChange: import_vitest.vi.fn(),
+    onClearFilters: import_vitest.vi.fn(),
+    onSaveView: import_vitest.vi.fn(),
+    onLoadView: import_vitest.vi.fn(),
+    views: [],
+    enableViews: false,
+    enableGlobalSearch: true,
+    enableFiltering: true,
+    showFilterCount: true,
+    showViewSelector: true
+  };
+  const sampleViews = [{
+    id: "view1",
+    name: "Default View",
+    columns: {},
+    filters: [],
+    sorting: [],
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10
+    }
+  }, {
+    id: "view2",
+    name: "Custom View",
+    columns: {},
+    filters: [],
+    sorting: [],
+    pagination: {
+      pageIndex: 0,
+      pageSize: 10
+    }
+  }];
+  (0, import_vitest.describe)("basic rendering", () => {
+    (0, import_vitest.it)("should render toolbar with default configuration", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should render search input when enableGlobalSearch is true", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableGlobalSearch: true
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toBeDefined();
+    });
+    (0, import_vitest.it)("should not render search input when enableGlobalSearch is false", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableGlobalSearch: false
+      }));
+      const inputs = container.querySelectorAll("input");
+      (0, import_vitest.expect)(inputs.length).toBe(0);
+    });
+    (0, import_vitest.it)("should display current global filter value", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        globalFilter: "test search"
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toHaveValue("test search");
+    });
+  });
+  (0, import_vitest.describe)("search functionality", () => {
+    (0, import_vitest.it)("should call onGlobalFilterChange when search input changes", () => {
+      const onGlobalFilterChange = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onGlobalFilterChange
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "new search"
+        }
+      });
+      (0, import_vitest.expect)(onGlobalFilterChange).toHaveBeenCalledWith("new search");
+    });
+    (0, import_vitest.it)("should handle empty search", () => {
+      const onGlobalFilterChange = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onGlobalFilterChange,
+        globalFilter: "existing search"
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: ""
+        }
+      });
+      (0, import_vitest.expect)(onGlobalFilterChange).toHaveBeenCalledWith("");
+    });
+    (0, import_vitest.it)("should render with globalFilter value", () => {
+      const onGlobalFilterChange = import_vitest.vi.fn();
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        globalFilter: "test search",
+        onGlobalFilterChange
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+      (0, import_vitest.expect)(container.textContent).toContain("");
+    });
+  });
+  (0, import_vitest.describe)("filter functionality", () => {
+    (0, import_vitest.it)("should render clear filters button when enableFiltering is true", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableFiltering: true
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should not render clear filters button when enableFiltering is false", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableFiltering: false
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should render clear filters button when enableFiltering", () => {
+      const onClearFilters = import_vitest.vi.fn();
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableFiltering: true,
+        onClearFilters
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+      (0, import_vitest.expect)(onClearFilters).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("views functionality", () => {
+    (0, import_vitest.it)("should not render view selector when enableViews is false", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: false
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should render view selector when enableViews is true", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should display available views", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should call onLoadView when a view is selected", () => {
+      const onLoadView = import_vitest.vi.fn();
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews,
+        onLoadView
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should highlight active view", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews,
+        activeViewId: "view1"
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should show save view dialog", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should call onSaveView when saving a new view", () => {
+      const onSaveView = import_vitest.vi.fn();
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        onSaveView
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("custom actions", () => {
+    (0, import_vitest.it)("should render custom actions when provided", () => {
+      const customAction = /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        "data-testid": "custom-action",
+        children: "Custom Action"
+      });
+      const {
+        getByTestId
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        customActions: customAction
+      }));
+      (0, import_vitest.expect)(getByTestId("custom-action")).toBeDefined();
+    });
+    (0, import_vitest.it)("should render multiple custom actions", () => {
+      const customActions = /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+        "data-testid": "custom-actions",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          children: "Action 1"
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          children: "Action 2"
+        })]
+      });
+      const {
+        getByTestId
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        customActions
+      }));
+      (0, import_vitest.expect)(getByTestId("custom-actions")).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("feature flags", () => {
+    (0, import_vitest.it)("should hide all features when disabled", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: false,
+        enableGlobalSearch: false,
+        enableFiltering: false
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should show all features when enabled", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        enableGlobalSearch: true,
+        enableFiltering: true,
+        views: sampleViews
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("responsive behavior", () => {
+    (0, import_vitest.it)("should adapt to different screen sizes", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should show compact layout on mobile", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("accessibility", () => {
+    (0, import_vitest.it)("should have proper ARIA labels for search input", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toBeDefined();
+    });
+    (0, import_vitest.it)("should have proper ARIA labels for buttons", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        globalFilter: "test"
+      }));
+      const buttons = container.querySelectorAll('[role="button"], button');
+      (0, import_vitest.expect)(buttons.length).toBeGreaterThan(0);
+    });
+    (0, import_vitest.it)("should support keyboard navigation", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.keyDown(searchInput, {
+        key: "Enter"
+      });
+      import_react.fireEvent.keyDown(searchInput, {
+        key: "Escape"
+      });
+      (0, import_vitest.expect)(searchInput).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("edge cases", () => {
+    (0, import_vitest.it)("should handle empty views array", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: []
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle undefined views", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle very long search terms", () => {
+      const longSearchTerm = "a".repeat(1e3);
+      const onGlobalFilterChange = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onGlobalFilterChange
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: longSearchTerm
+        }
+      });
+      (0, import_vitest.expect)(onGlobalFilterChange).toHaveBeenCalledWith(longSearchTerm);
+    });
+    (0, import_vitest.it)("should handle special characters in search", () => {
+      const specialChars = "!@#$%^&*()_+-=[]{}|;:,.<>?";
+      const onGlobalFilterChange = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onGlobalFilterChange
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: specialChars
+        }
+      });
+      (0, import_vitest.expect)(onGlobalFilterChange).toHaveBeenCalledWith(specialChars);
+    });
+  });
+  (0, import_vitest.describe)("state synchronization", () => {
+    (0, import_vitest.it)("should update search input when globalFilter prop changes", () => {
+      const {
+        getByRole,
+        rerender
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        globalFilter: "initial"
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toHaveValue("initial");
+      (0, import_vitest.expect)(() => {
+        rerender(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+          ...defaultProps,
+          globalFilter: "updated"
+        }));
+      }).not.toThrow();
+    });
+    (0, import_vitest.it)("should update view selector when activeViewId changes", () => {
+      const {
+        rerender
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews,
+        activeViewId: "view1"
+      }));
+      rerender(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: sampleViews,
+        activeViewId: "view2"
+      }));
+      (0, import_vitest.expect)(true).toBe(true);
+    });
+  });
+  (0, import_vitest.describe)("performance", () => {
+    (0, import_vitest.it)("should handle search input changes", async () => {
+      const onGlobalFilterChange = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onGlobalFilterChange
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "test"
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onGlobalFilterChange).toHaveBeenCalledWith("test");
+      });
+      (0, import_vitest.expect)(onGlobalFilterChange).toHaveBeenCalledTimes(1);
+    });
+  });
+  (0, import_vitest.describe)("error handling", () => {
+    (0, import_vitest.it)("should handle missing onGlobalFilterChange callback", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onGlobalFilterChange: void 0
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(() => {
+        import_react.fireEvent.change(searchInput, {
+          target: {
+            value: "test"
+          }
+        });
+      }).not.toThrow();
+    });
+    (0, import_vitest.it)("should handle missing onClearFilters callback", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        onClearFilters: void 0
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle missing view callbacks", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        onSaveView: void 0,
+        onLoadView: void 0
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("integration scenarios", () => {
+    (0, import_vitest.it)("should work with complex view configurations", () => {
+      const complexViews = [{
+        id: "complex1",
+        name: "Complex View 1",
+        columns: {},
+        filters: [{
+          id: "status-filter",
+          columnId: "status",
+          value: {
+            operator: "is",
+            value: "active"
+          }
+        }],
+        sorting: [{
+          id: "name",
+          desc: false
+        }],
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10
+        }
+      }, {
+        id: "complex2",
+        name: "Complex View 2",
+        columns: {},
+        filters: [{
+          id: "priority-filter",
+          columnId: "priority",
+          value: {
+            operator: "is",
+            value: "high"
+          }
+        }],
+        sorting: [{
+          id: "date",
+          desc: true
+        }],
+        pagination: {
+          pageIndex: 0,
+          pageSize: 10
+        }
+      }];
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        views: complexViews,
+        activeViewId: "complex1"
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle multiple feature combinations", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableToolbar, {
+        ...defaultProps,
+        enableViews: true,
+        enableGlobalSearch: true,
+        enableFiltering: true,
+        views: sampleViews,
+        globalFilter: "search term",
+        showFilterCount: true,
+        showViewSelector: true,
+        customActions: /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          children: "Export"
+        })
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+});