@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableDateFilter/DataTableDateFilter.spec.cjs

@@ -0,0 +1,409 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var import_react = require("@testing-library/react");
+var import_test_utils = require("@multiplatform.one/test-utils");
+var import_vitest = require("vitest");
+var import_index = require("./index.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const mockData = [{
+  id: "1",
+  name: "Item 1",
+  createdAt: "2024-01-15T10:00:00.000Z",
+  updatedAt: "2024-01-20T10:00:00.000Z"
+}, {
+  id: "2",
+  name: "Item 2",
+  createdAt: "2024-01-16T10:00:00.000Z"
+}, {
+  id: "3",
+  name: "Item 3",
+  createdAt: "2024-01-17T10:00:00.000Z"
+}, {
+  id: "4",
+  name: "Item 4",
+  createdAt: (/* @__PURE__ */new Date()).toISOString()
+  // Today
+}, {
+  id: "5",
+  name: "Item 5",
+  createdAt: new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString()
+  // Yesterday
+}];
+(0, import_vitest.describe)("DataTableDateFilter", () => {
+  (0, import_vitest.beforeEach)(() => {
+    import_vitest.vi.clearAllMocks();
+  });
+  (0, import_vitest.it)("renders with placeholder when no value is set", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {
+      placeholder: "Select date..."
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText("Select date...")).toBeInTheDocument();
+  });
+  (0, import_vitest.it)("renders with display value when value is set", () => {
+    const value = {
+      operator: "is",
+      value: "2024-01-15T10:00:00.000Z"
+    };
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {
+      value
+    }));
+    (0, import_vitest.expect)(import_react.screen.getByText(/Is Jan 15, 2024/)).toBeInTheDocument();
+  });
+  (0, import_vitest.it)("shows different display formats for different operators", () => {
+    const testCases = [{
+      operator: "isToday",
+      expected: "Today"
+    }, {
+      operator: "isYesterday",
+      expected: "Yesterday"
+    }, {
+      operator: "isThisWeek",
+      expected: "This week"
+    }, {
+      operator: "isEmpty",
+      expected: "Is empty"
+    }, {
+      operator: "isNotEmpty",
+      expected: "Is not empty"
+    }];
+    testCases.forEach(({
+      operator,
+      expected
+    }) => {
+      const value = {
+        operator
+      };
+      const {
+        rerender
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {
+        value
+      }));
+      (0, import_vitest.expect)(import_react.screen.getByText(expected)).toBeInTheDocument();
+      rerender(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {}));
+    });
+  });
+  (0, import_vitest.it)("is disabled when disabled prop is true", () => {
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {
+      disabled: true
+    }));
+    const button = import_react.screen.getByRole("button");
+    (0, import_vitest.expect)(button).toHaveAttribute("aria-disabled", "true");
+  });
+});
+(0, import_vitest.describe)("DataTableDateFilter - DatePicker integration", () => {
+  (0, import_vitest.beforeEach)(() => {
+    import_vitest.vi.clearAllMocks();
+  });
+  (0, import_vitest.it)("imports DatePicker from forms and does not use manual YYYY-MM-DD text inputs", async () => {
+    const mod = await import("./index");
+    (0, import_vitest.expect)(mod.DataTableDateFilter).toBeDefined();
+    const {
+      container
+    } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {}));
+    const allInputs = container.querySelectorAll("input");
+    for (const input of allInputs) {
+      const placeholder = input.getAttribute("placeholder") || "";
+      (0, import_vitest.expect)(placeholder).not.toContain("YYYY-MM-DD");
+    }
+    (0, import_vitest.expect)(import_react.screen.getByRole("button")).toBeInTheDocument();
+  });
+  (0, import_vitest.it)("preset selection (Last 7 Days) produces correct isBetween filter with DatePicker-compatible date values", () => {
+    const mockOnChange = import_vitest.vi.fn();
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableDateFilter, {
+      onChange: mockOnChange
+    }));
+    const now = /* @__PURE__ */new Date();
+    const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3);
+    const presetFilter = {
+      operator: "isBetween",
+      values: [sevenDaysAgo.toISOString(), now.toISOString()]
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", presetFilter);
+    const matchingIds = result.map(item => item.id);
+    (0, import_vitest.expect)(matchingIds).toContain("4");
+    (0, import_vitest.expect)(matchingIds).toContain("5");
+    (0, import_vitest.expect)(matchingIds).not.toContain("1");
+    (0, import_vitest.expect)(matchingIds).not.toContain("2");
+    (0, import_vitest.expect)(matchingIds).not.toContain("3");
+  });
+  (0, import_vitest.it)("filter state correctly updates when date range values are selected", () => {
+    const mockOnChange = import_vitest.vi.fn();
+    let currentFilter;
+    const handleChange = value => {
+      currentFilter = value;
+      mockOnChange(value);
+    };
+    const startDate = /* @__PURE__ */new Date("2024-01-15T00:00:00.000Z");
+    const endDate = /* @__PURE__ */new Date("2024-01-17T23:59:59.999Z");
+    const rangeFilter = {
+      operator: "isBetween",
+      values: [startDate.toISOString(), endDate.toISOString()]
+    };
+    handleChange(rangeFilter);
+    (0, import_vitest.expect)(mockOnChange).toHaveBeenCalledTimes(1);
+    (0, import_vitest.expect)(currentFilter).toEqual(rangeFilter);
+    const filtered = (0, import_index.applyDateFilter)(mockData, "createdAt", currentFilter);
+    (0, import_vitest.expect)(filtered).toHaveLength(3);
+    (0, import_vitest.expect)(filtered.map(item => item.id)).toEqual(["1", "2", "3"]);
+    const todayFilter = {
+      operator: "isToday"
+    };
+    handleChange(todayFilter);
+    (0, import_vitest.expect)(mockOnChange).toHaveBeenCalledTimes(2);
+    (0, import_vitest.expect)(currentFilter).toEqual(todayFilter);
+    const todayFiltered = (0, import_index.applyDateFilter)(mockData, "createdAt", currentFilter);
+    (0, import_vitest.expect)(todayFiltered).toHaveLength(1);
+    (0, import_vitest.expect)(todayFiltered[0].id).toBe("4");
+    handleChange(void 0);
+    (0, import_vitest.expect)(mockOnChange).toHaveBeenCalledTimes(3);
+    (0, import_vitest.expect)(currentFilter).toBeUndefined();
+    const unfilteredResult = (0, import_index.applyDateFilter)(mockData, "createdAt", currentFilter);
+    (0, import_vitest.expect)(unfilteredResult).toEqual(mockData);
+  });
+});
+(0, import_vitest.describe)("applyDateFilter", () => {
+  (0, import_vitest.it)("returns original data when no filter is provided", () => {
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", void 0);
+    (0, import_vitest.expect)(result).toEqual(mockData);
+  });
+  (0, import_vitest.it)("filters by exact date match", () => {
+    const filter = {
+      operator: "is",
+      value: "2024-01-15T10:00:00.000Z"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(1);
+    (0, import_vitest.expect)(result[0].id).toBe("1");
+  });
+  (0, import_vitest.it)("filters by date range", () => {
+    const filter = {
+      operator: "isBetween",
+      values: ["2024-01-15T00:00:00.000Z", "2024-01-16T23:59:59.999Z"]
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(2);
+    (0, import_vitest.expect)(result.map(item => item.id)).toEqual(["1", "2"]);
+  });
+  (0, import_vitest.it)("filters by 'isToday'", () => {
+    const filter = {
+      operator: "isToday"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(1);
+    (0, import_vitest.expect)(result[0].id).toBe("4");
+  });
+  (0, import_vitest.it)("filters by 'isYesterday'", () => {
+    const filter = {
+      operator: "isYesterday"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(1);
+    (0, import_vitest.expect)(result[0].id).toBe("5");
+  });
+  (0, import_vitest.it)("filters by 'isBefore'", () => {
+    const filter = {
+      operator: "isBefore",
+      value: "2024-01-16T00:00:00.000Z"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(1);
+    (0, import_vitest.expect)(result[0].id).toBe("1");
+  });
+  (0, import_vitest.it)("filters by 'isAfter'", () => {
+    const filter = {
+      operator: "isAfter",
+      value: "2024-01-16T00:00:00.000Z"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(4);
+    (0, import_vitest.expect)(result.map(item => item.id)).toEqual(["2", "3", "4", "5"]);
+  });
+  (0, import_vitest.it)("filters by 'isThisWeek'", () => {
+    const mockToday = /* @__PURE__ */new Date("2024-01-17T10:00:00.000Z");
+    import_vitest.vi.setSystemTime(mockToday);
+    const filter = {
+      operator: "isThisWeek"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(3);
+    (0, import_vitest.expect)(result.map(item => item.id)).toEqual(["1", "2", "3"]);
+    import_vitest.vi.useRealTimers();
+  });
+  (0, import_vitest.it)("filters by 'isEmpty'", () => {
+    const filter = {
+      operator: "isEmpty"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "updatedAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(4);
+    (0, import_vitest.expect)(result.map(item => item.id)).toEqual(["2", "3", "4", "5"]);
+  });
+  (0, import_vitest.it)("filters by 'isNotEmpty'", () => {
+    const filter = {
+      operator: "isNotEmpty"
+    };
+    const result = (0, import_index.applyDateFilter)(mockData, "updatedAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(1);
+    (0, import_vitest.expect)(result.map(item => item.id)).toEqual(["1"]);
+  });
+  (0, import_vitest.it)("returns empty array for invalid date values", () => {
+    const invalidData = [{
+      id: "1",
+      createdAt: "invalid-date"
+    }];
+    const filter = {
+      operator: "is",
+      value: "2024-01-15T10:00:00.000Z"
+    };
+    const result = (0, import_index.applyDateFilter)(invalidData, "createdAt", filter);
+    (0, import_vitest.expect)(result).toHaveLength(0);
+  });
+});
+(0, import_vitest.describe)("useDateFilter", () => {
+  const TestComponent = ({
+    children
+  }) => {
+    const filterProps = (0, import_index.useDateFilter)({
+      data: mockData,
+      columnKey: "createdAt"
+    });
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+      children: children(filterProps)
+    });
+  };
+  (0, import_vitest.it)("initializes with no filter", () => {
+    let filterProps;
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      children: props => {
+        filterProps = props;
+        return null;
+      }
+    }));
+    (0, import_vitest.expect)(filterProps.filterValue).toBeUndefined();
+    (0, import_vitest.expect)(filterProps.filteredData).toEqual(mockData);
+    (0, import_vitest.expect)(filterProps.isFiltered).toBe(false);
+  });
+  (0, import_vitest.it)("applies filter when setFilterValue is called", () => {
+    let filterProps;
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      children: props => {
+        filterProps = props;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+          type: "button",
+          onClick: () => props.setFilterValue({
+            operator: "isToday"
+          }),
+          children: "Apply Filter"
+        });
+      }
+    }));
+    import_react.fireEvent.click(import_react.screen.getByText("Apply Filter"));
+    (0, import_vitest.expect)(filterProps.filterValue).toEqual({
+      operator: "isToday"
+    });
+    (0, import_vitest.expect)(filterProps.isFiltered).toBe(true);
+    (0, import_vitest.expect)(filterProps.filteredData).toHaveLength(1);
+  });
+  (0, import_vitest.it)("clears filter when clearFilter is called", () => {
+    let filterProps;
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponent, {
+      children: props => {
+        filterProps = props;
+        return /* @__PURE__ */(0, import_jsx_runtime.jsxs)("div", {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+            type: "button",
+            onClick: () => props.setFilterValue({
+              operator: "isToday"
+            }),
+            children: "Apply Filter"
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+            type: "button",
+            onClick: () => props.clearFilter(),
+            children: "Clear Filter"
+          })]
+        });
+      }
+    }));
+    import_react.fireEvent.click(import_react.screen.getByText("Apply Filter"));
+    (0, import_vitest.expect)(filterProps.isFiltered).toBe(true);
+    import_react.fireEvent.click(import_react.screen.getByText("Clear Filter"));
+    (0, import_vitest.expect)(filterProps.filterValue).toBeUndefined();
+    (0, import_vitest.expect)(filterProps.isFiltered).toBe(false);
+  });
+  (0, import_vitest.it)("calls onFilterChange callback when filter changes", () => {
+    const mockOnChange = import_vitest.vi.fn();
+    const TestComponentWithCallback = ({
+      children
+    }) => {
+      const filterProps = (0, import_index.useDateFilter)({
+        data: mockData,
+        columnKey: "createdAt",
+        onFilterChange: mockOnChange
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children: children(filterProps)
+      });
+    };
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponentWithCallback, {
+      children: props => /* @__PURE__ */(0, import_jsx_runtime.jsx)("button", {
+        type: "button",
+        onClick: () => props.setFilterValue({
+          operator: "isToday"
+        }),
+        children: "Apply Filter"
+      })
+    }));
+    import_react.fireEvent.click(import_react.screen.getByText("Apply Filter"));
+    (0, import_vitest.expect)(mockOnChange).toHaveBeenCalledWith(import_vitest.expect.any(Array), {
+      operator: "isToday"
+    });
+  });
+  (0, import_vitest.it)("initializes with initialFilter", () => {
+    const initialFilter = {
+      operator: "isYesterday"
+    };
+    const TestComponentWithInitial = ({
+      children
+    }) => {
+      const filterProps2 = (0, import_index.useDateFilter)({
+        data: mockData,
+        columnKey: "createdAt",
+        initialFilter
+      });
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+        children: children(filterProps2)
+      });
+    };
+    let filterProps;
+    (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(TestComponentWithInitial, {
+      children: props => {
+        filterProps = props;
+        return null;
+      }
+    }));
+    (0, import_vitest.expect)(filterProps.filterValue).toEqual(initialFilter);
+    (0, import_vitest.expect)(filterProps.isFiltered).toBe(true);
+    (0, import_vitest.expect)(filterProps.filteredData).toHaveLength(1);
+  });
+});