@multiplatform.one/table 6.0.0

package/dist/cjs/components/DataTableSearch/DataTableSearch.spec.cjs

@@ -0,0 +1,469 @@
+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)("DataTableSearch", () => {
+  const sampleData = [{
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    status: "active",
+    age: 30
+  }, {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane@example.com",
+    status: "inactive",
+    age: 25
+  }, {
+    id: 3,
+    name: "Bob Johnson",
+    email: "bob@example.com",
+    status: "active",
+    age: 35
+  }];
+  const defaultProps = {
+    data: sampleData,
+    columns: [{
+      accessorKey: "name",
+      header: "Name",
+      id: "name",
+      searchable: true
+    }, {
+      accessorKey: "email",
+      header: "Email",
+      id: "email",
+      searchable: true
+    }, {
+      accessorKey: "status",
+      header: "Status",
+      id: "status",
+      searchable: true
+    }, {
+      accessorKey: "age",
+      header: "Age",
+      id: "age",
+      searchable: true
+    }],
+    placeholder: "Search...",
+    debounceMs: 300
+  };
+  (0, import_vitest.describe)("basic rendering", () => {
+    (0, import_vitest.it)("should render search input", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toBeDefined();
+      (0, import_vitest.expect)(searchInput).toHaveAttribute("placeholder", "Search...");
+    });
+    (0, import_vitest.it)("should display placeholder correctly", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toHaveAttribute("placeholder", "Search...");
+    });
+    (0, import_vitest.it)("should render with custom placeholder", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        placeholder: "Custom placeholder"
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toHaveAttribute("placeholder", "Custom placeholder");
+    });
+  });
+  (0, import_vitest.describe)("search functionality", () => {
+    (0, import_vitest.it)("should call onSearchResults when input changes", async () => {
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "John"
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+      });
+    });
+    (0, import_vitest.it)("should debounce search input", async () => {
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults,
+        debounceMs: 100
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "t"
+        }
+      });
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "te"
+        }
+      });
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "tes"
+        }
+      });
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "test"
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+      }, {
+        timeout: 200
+      });
+    });
+    (0, import_vitest.it)("should clear search when clear button is clicked", async () => {
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole,
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "test search"
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+      });
+      const buttons = container.querySelectorAll('[role="button"], button');
+      if (buttons.length > 0) {
+        import_react.fireEvent.click(buttons[0]);
+        await (0, import_react.waitFor)(() => {
+          (0, import_vitest.expect)(onSearchResults).toHaveBeenCalledWith(sampleData, import_vitest.expect.any(Object));
+        });
+      }
+    });
+  });
+  (0, import_vitest.describe)("column selection", () => {
+    (0, import_vitest.it)("should render column selector button", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      const buttons = container.querySelectorAll('[role="button"], button');
+      (0, import_vitest.expect)(buttons.length).toBeGreaterThan(0);
+    });
+    (0, import_vitest.it)("should show selected columns", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should allow column selection through search options", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("advanced search features", () => {
+    (0, import_vitest.it)("should support case-sensitive search toggle", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should support regex search toggle", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should support whole word search toggle", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("responsive behavior", () => {
+    (0, import_vitest.it)("should adapt to mobile screens", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should show compact layout on small screens", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("accessibility", () => {
+    (0, import_vitest.it)("should have proper ARIA labels", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      const searchInput = getByRole("textbox");
+      (0, import_vitest.expect)(searchInput).toBeDefined();
+    });
+    (0, import_vitest.it)("should support keyboard navigation", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...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.it)("should have proper focus management", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.focus(searchInput);
+      import_react.fireEvent.blur(searchInput);
+      (0, import_vitest.expect)(searchInput).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("edge cases", () => {
+    (0, import_vitest.it)("should handle empty search term", async () => {
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: ""
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalledWith(sampleData, import_vitest.expect.any(Object));
+      });
+    });
+    (0, import_vitest.it)("should handle special characters in search", async () => {
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: "test@#$%^&*()"
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+      });
+    });
+    (0, import_vitest.it)("should handle very long search terms", async () => {
+      const longSearchTerm = "a".repeat(1e3);
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults
+      }));
+      const searchInput = getByRole("textbox");
+      import_react.fireEvent.change(searchInput, {
+        target: {
+          value: longSearchTerm
+        }
+      });
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+      });
+    });
+    (0, import_vitest.it)("should handle empty columns array", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        columns: [],
+        data: []
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle columns with no searchable properties", () => {
+      const nonSearchableColumns = [{
+        accessorKey: "name",
+        header: "Name",
+        id: "name",
+        searchable: false
+      }, {
+        accessorKey: "email",
+        header: "Email",
+        id: "email",
+        searchable: false
+      }];
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        columns: nonSearchableColumns
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+  (0, import_vitest.describe)("search options persistence", () => {
+    (0, import_vitest.it)("should handle re-renders without errors", () => {
+      const {
+        rerender
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      rerender(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      (0, import_vitest.expect)(true).toBe(true);
+    });
+    (0, import_vitest.it)("should maintain column configuration across re-renders", () => {
+      const updatedColumns = [{
+        accessorKey: "name",
+        header: "Name",
+        id: "name",
+        searchable: true
+      }, {
+        accessorKey: "status",
+        header: "Status",
+        id: "status",
+        searchable: true
+      }];
+      const {
+        rerender
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps
+      }));
+      rerender(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        columns: updatedColumns
+      }));
+      (0, import_vitest.expect)(true).toBe(true);
+    });
+  });
+  (0, import_vitest.describe)("performance", () => {
+    (0, import_vitest.it)("should handle rapid typing without performance issues", async () => {
+      const onSearchResults = import_vitest.vi.fn();
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults,
+        debounceMs: 50
+      }));
+      const searchInput = getByRole("textbox");
+      for (let i = 0; i < 10; i++) {
+        import_react.fireEvent.change(searchInput, {
+          target: {
+            value: `search${i}`
+          }
+        });
+      }
+      await (0, import_react.waitFor)(() => {
+        (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+      }, {
+        timeout: 100
+      });
+      (0, import_vitest.expect)(onSearchResults).toHaveBeenCalled();
+    });
+  });
+  (0, import_vitest.describe)("error handling", () => {
+    (0, import_vitest.it)("should handle columns with invalid accessor keys gracefully", () => {
+      const invalidColumns = [{
+        accessorKey: "invalidField",
+        header: "Invalid",
+        id: "invalid",
+        searchable: true
+      }, {
+        accessorKey: "name",
+        header: "Name",
+        id: "name",
+        searchable: true
+      }];
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        columns: invalidColumns
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+    (0, import_vitest.it)("should handle missing onSearchResults callback", () => {
+      const {
+        getByRole
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onSearchResults: 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 onHighlightText callback", () => {
+      const {
+        container
+      } = (0, import_test_utils.renderWithProviders)(/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_index.DataTableSearch, {
+        ...defaultProps,
+        onHighlightText: void 0
+      }));
+      (0, import_vitest.expect)(container).toBeDefined();
+    });
+  });
+});