@multiplatform.one/table 6.1.0 → 6.3.0

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

@@ -1,469 +0,0 @@
-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();
-    });
-  });
-});