@multiplatform.one/table 6.0.0

package/dist/esm/components/DataTableFilters/DataTableFilters.spec.native.js

@@ -0,0 +1,696 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { describe, expect, it, vi } from "vitest";
+import { DataTableFilters } from "./index.native.js";
+describe("DataTableFilters", function () {
+  var sampleColumns = [{
+    id: "name",
+    label: "Name",
+    type: "text"
+  }, {
+    id: "age",
+    label: "Age",
+    type: "number"
+  }, {
+    id: "status",
+    label: "Status",
+    type: "select",
+    options: [{
+      label: "Active",
+      value: "active"
+    }, {
+      label: "Inactive",
+      value: "inactive"
+    }]
+  }, {
+    id: "date",
+    label: "Date",
+    type: "date"
+  }];
+  var sampleFilters = [{
+    id: "filter1",
+    columnId: "name",
+    value: {
+      operator: "contains",
+      value: "John"
+    }
+  }, {
+    id: "filter2",
+    columnId: "age",
+    value: {
+      operator: "isGreaterThanOrEqual",
+      value: 25
+    }
+  }];
+  var defaultProps = {
+    filters: [],
+    onFiltersChange: vi.fn(),
+    onAddFilter: vi.fn(),
+    onRemoveFilter: vi.fn(),
+    onClearFilters: vi.fn(),
+    availableColumns: sampleColumns,
+    maxFilters: 10,
+    showFilterCount: true,
+    compact: false
+  };
+  describe("basic rendering", function () {
+    it("should render filters component with no filters", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should render filters component with existing filters", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should display filter count when showFilterCount is true", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        showFilterCount: true
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should not display filter count when showFilterCount is false", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        showFilterCount: false
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("filter management", function () {
+    it("should call onAddFilter when adding a new filter", function () {
+      var onAddFilter = vi.fn();
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        onAddFilter
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should call onRemoveFilter when removing a filter", function () {
+      var onRemoveFilter = vi.fn();
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        onRemoveFilter
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should call onClearFilters when clearing all filters", function () {
+      var onClearFilters = vi.fn();
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        onClearFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should call onFiltersChange when filters are updated", function () {
+      var onFiltersChange = vi.fn();
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        onFiltersChange
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should prevent adding filters beyond maxFilters limit", function () {
+      var onAddFilter = vi.fn();
+      var manyFilters = Array.from({
+        length: 10
+      }, function (_, i) {
+        return {
+          id: `filter${i}`,
+          columnId: "name",
+          value: {
+            operator: "contains",
+            value: `value${i}`
+          }
+        };
+      });
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: manyFilters,
+        maxFilters: 10,
+        onAddFilter
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("filter types", function () {
+    it("should handle text filters", function () {
+      var textFilters = [{
+        id: "text1",
+        columnId: "name",
+        value: {
+          operator: "contains",
+          value: "search term"
+        }
+      }, {
+        id: "text2",
+        columnId: "name",
+        value: {
+          operator: "is",
+          value: "exact match"
+        }
+      }, {
+        id: "text3",
+        columnId: "name",
+        value: {
+          operator: "startsWith",
+          value: "prefix"
+        }
+      }];
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: textFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle number filters", function () {
+      var numberFilters = [{
+        id: "num1",
+        columnId: "age",
+        value: {
+          operator: "is",
+          value: 25
+        }
+      }, {
+        id: "num2",
+        columnId: "age",
+        value: {
+          operator: "isGreaterThanOrEqual",
+          value: 18
+        }
+      }, {
+        id: "num3",
+        columnId: "age",
+        value: {
+          operator: "isLessThanOrEqual",
+          value: 65
+        }
+      }, {
+        id: "num4",
+        columnId: "age",
+        value: {
+          operator: "isBetween",
+          value: 20,
+          values: [20, 30]
+        }
+      }];
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: numberFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle select filters", function () {
+      var selectFilters = [{
+        id: "select1",
+        columnId: "status",
+        value: {
+          operator: "is",
+          value: "active"
+        }
+      }, {
+        id: "select2",
+        columnId: "status",
+        value: {
+          operator: "isAnyOf",
+          value: "active",
+          values: ["active", "inactive"]
+        }
+      }];
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: selectFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle date filters", function () {
+      var dateFilters = [{
+        id: "date1",
+        columnId: "date",
+        value: {
+          operator: "is",
+          value: /* @__PURE__ */new Date("2024-01-01")
+        }
+      }, {
+        id: "date2",
+        columnId: "date",
+        value: {
+          operator: "isBefore",
+          value: /* @__PURE__ */new Date("2024-12-31")
+        }
+      }, {
+        id: "date3",
+        columnId: "date",
+        value: {
+          operator: "isAfter",
+          value: /* @__PURE__ */new Date("2024-01-01")
+        }
+      }, {
+        id: "date4",
+        columnId: "date",
+        value: {
+          operator: "isBetween",
+          value: /* @__PURE__ */new Date("2024-01-01"),
+          values: [/* @__PURE__ */new Date("2024-01-01"), /* @__PURE__ */new Date("2024-12-31")]
+        }
+      }];
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: dateFilters
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("compact mode", function () {
+    it("should render in compact mode when compact is true", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        compact: true
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should render in normal mode when compact is false", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        compact: false
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("filter builder", function () {
+    it("should show filter builder dialog", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle column selection in filter builder", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle operator selection in filter builder", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle value input in filter builder", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("filter display", function () {
+    it("should display active filters", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should show filter badges with descriptions", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should allow removing individual filters", function () {
+      var onRemoveFilter = vi.fn();
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        onRemoveFilter
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should show clear all filters button", function () {
+      var onClearFilters = vi.fn();
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters,
+        onClearFilters
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("responsive behavior", function () {
+    it("should adapt to different screen sizes", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should show sheet on mobile devices", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("accessibility", function () {
+    it("should have proper ARIA labels for filter buttons", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should have proper ARIA labels for filter inputs", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should support keyboard navigation", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should announce filter changes to screen readers", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("edge cases", function () {
+    it("should handle empty filters array", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: []
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle empty availableColumns array", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        availableColumns: []
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle filters with invalid column references", function () {
+      var invalidFilters = [{
+        id: "invalid",
+        columnId: "nonexistent",
+        value: {
+          operator: "is",
+          value: "test"
+        }
+      }];
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: invalidFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle filters with null/undefined values", function () {
+      var nullFilters = [{
+        id: "null1",
+        columnId: "name",
+        value: {
+          operator: "is",
+          value: null
+        }
+      }, {
+        id: "undefined1",
+        columnId: "name",
+        value: {
+          operator: "is",
+          value: void 0
+        }
+      }];
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: nullFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle maximum number of filters", function () {
+      var maxFilters = Array.from({
+        length: 10
+      }, function (_, i) {
+        return {
+          id: `filter${i}`,
+          columnId: "name",
+          value: {
+            operator: "contains",
+            value: `value${i}`
+          }
+        };
+      });
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: maxFilters,
+        maxFilters: 10
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("performance", function () {
+    it("should handle large number of filters", function () {
+      var largeFilters = Array.from({
+        length: 50
+      }, function (_, i) {
+        return {
+          id: `filter${i}`,
+          columnId: "name",
+          value: {
+            operator: "contains",
+            value: `search term ${i}`
+          }
+        };
+      });
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: largeFilters
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle large number of available columns", function () {
+      var largeColumns = Array.from({
+        length: 100
+      }, function (_, i) {
+        return {
+          id: `column${i}`,
+          label: `Column ${i}`,
+          type: "text"
+        };
+      });
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        availableColumns: largeColumns
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("error handling", function () {
+    it("should handle missing onFiltersChange callback", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        onFiltersChange: void 0
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle missing onAddFilter callback", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        onAddFilter: void 0
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle missing onRemoveFilter callback", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        onRemoveFilter: void 0
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should handle missing onClearFilters callback", function () {
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        onClearFilters: void 0
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("filter validation", function () {
+    it("should validate filter values based on column type", function () {
+      var invalidNumberFilter = {
+        id: "invalid",
+        columnId: "age",
+        value: {
+          operator: "is",
+          value: "not-a-number"
+        }
+      };
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: [invalidNumberFilter]
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should validate date filter values", function () {
+      var invalidDateFilter = {
+        id: "invalid-date",
+        columnId: "date",
+        value: {
+          operator: "is",
+          value: "not-a-date"
+        }
+      };
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: [invalidDateFilter]
+      }));
+      expect(container).toBeDefined();
+    });
+    it("should validate select filter values", function () {
+      var invalidSelectFilter = {
+        id: "invalid-select",
+        columnId: "status",
+        value: {
+          operator: "is",
+          value: "invalid-option"
+        }
+      };
+      var {
+        container
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: [invalidSelectFilter]
+      }));
+      expect(container).toBeDefined();
+    });
+  });
+  describe("state management", function () {
+    it("should update when filters prop changes", function () {
+      var {
+        rerender
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: []
+      }));
+      rerender(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        filters: sampleFilters
+      }));
+      expect(true).toBe(true);
+    });
+    it("should update when availableColumns prop changes", function () {
+      var {
+        rerender
+      } = renderWithProviders(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps
+      }));
+      var newColumns = [...sampleColumns, {
+        id: "newColumn",
+        label: "New Column",
+        type: "text"
+      }];
+      rerender(/* @__PURE__ */_jsx(DataTableFilters, {
+        ...defaultProps,
+        availableColumns: newColumns
+      }));
+      expect(true).toBe(true);
+    });
+  });
+});
+//# sourceMappingURL=DataTableFilters.spec.native.js.map