@boxcustodia/library 2.0.0-alpha.17 → 2.0.0-alpha.19

package/src/components/date-picker/date-picker.test.tsx

@@ -1,7 +1,10 @@
-import { render } from "@testing-library/react";
-import { describe, it } from "vitest";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
 import { DateInput, DatePicker } from "../../components";
 
+// ─── DatePicker ───────────────────────────────────────────────────────────────
+
 describe("DatePicker component", () => {
   it("should render single mode", () => {
     render(<DatePicker mode="single" />);
@@ -14,10 +17,551 @@ describe("DatePicker component", () => {
   it("should render multiple mode", () => {
     render(<DatePicker mode="multiple" />);
   });
+
+  describe("data-slot", () => {
+    it("trigger has data-slot popover-trigger", () => {
+      render(<DatePicker mode="single" />);
+      expect(screen.getByRole("button")).toHaveAttribute(
+        "data-slot",
+        "popover-trigger",
+      );
+    });
+
+    it("popup has data-slot date-picker-content when open", async () => {
+      render(<DatePicker mode="single" />);
+      await userEvent.click(screen.getByRole("button"));
+      await waitFor(() => {
+        expect(
+          document.querySelector('[data-slot="date-picker-content"]'),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe("placeholder", () => {
+    it("shows default placeholder in single mode", () => {
+      render(<DatePicker mode="single" />);
+      expect(screen.getByRole("button")).toHaveTextContent("Seleccionar fecha");
+    });
+
+    it("shows custom placeholder in single mode", () => {
+      render(<DatePicker mode="single" placeholder="Pick a date" />);
+      expect(screen.getByRole("button")).toHaveTextContent("Pick a date");
+    });
+
+    it("shows default placeholder in range mode", () => {
+      render(<DatePicker mode="range" />);
+      expect(screen.getByRole("button")).toHaveTextContent("Seleccionar rango");
+    });
+
+    it("shows default placeholder in multiple mode", () => {
+      render(<DatePicker mode="multiple" />);
+      expect(screen.getByRole("button")).toHaveTextContent(
+        "Seleccionar fechas",
+      );
+    });
+  });
+
+  describe("disabled", () => {
+    it("disables trigger button", () => {
+      render(<DatePicker mode="single" disabled />);
+      expect(screen.getByRole("button")).toBeDisabled();
+    });
+  });
+
+  describe("className", () => {
+    it("applies className to trigger button", () => {
+      render(<DatePicker mode="single" className="my-custom-class" />);
+      expect(screen.getByRole("button")).toHaveClass("my-custom-class");
+    });
+  });
+
+  describe("required", () => {
+    it("sets required on hidden input", () => {
+      render(<DatePicker mode="single" required />);
+      const hiddenInput = document.querySelector('input[aria-hidden="true"]');
+      expect(hiddenInput).toHaveAttribute("required");
+    });
+  });
+
+  describe("single mode", () => {
+    it("shows formatted date when value provided", () => {
+      render(<DatePicker mode="single" value={new Date(2024, 0, 15)} />);
+      expect(screen.getByRole("button")).toHaveTextContent("15/01/2024");
+    });
+
+    it("shows formatted date when defaultValue provided", () => {
+      render(<DatePicker mode="single" defaultValue={new Date(2024, 5, 20)} />);
+      expect(screen.getByRole("button")).toHaveTextContent("20/06/2024");
+    });
+
+    it("calls onValueChange with null via footer clear", async () => {
+      const onValueChange = vi.fn();
+      render(
+        <DatePicker
+          mode="single"
+          value={new Date(2024, 0, 15)}
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button
+              type="button"
+              onClick={() => props.mode === "single" && props.clear()}
+            >
+              Clear
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button", { name: "15/01/2024" }));
+      await screen.findByRole("button", { name: "Clear" });
+      await userEvent.click(screen.getByRole("button", { name: "Clear" }));
+      expect(onValueChange).toHaveBeenCalledWith(null);
+    });
+
+    it("calls onValueChange with date via footer setValue", async () => {
+      const onValueChange = vi.fn();
+      const newDate = new Date(2024, 5, 20);
+      render(
+        <DatePicker
+          mode="single"
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button
+              type="button"
+              onClick={() => props.mode === "single" && props.setValue(newDate)}
+            >
+              SetDate
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fecha" }),
+      );
+      await screen.findByRole("button", { name: "SetDate" });
+      await userEvent.click(screen.getByRole("button", { name: "SetDate" }));
+      expect(onValueChange).toHaveBeenCalledWith(newDate);
+    });
+  });
+
+  describe("range mode", () => {
+    it("shows formatted range when start and end provided", () => {
+      render(
+        <DatePicker
+          mode="range"
+          value={{ start: new Date(2024, 0, 15), end: new Date(2024, 1, 20) }}
+        />,
+      );
+      expect(screen.getByRole("button")).toHaveTextContent(
+        "15/01/2024 → 20/02/2024",
+      );
+    });
+
+    it("shows partial range when only start provided", () => {
+      render(
+        <DatePicker
+          mode="range"
+          value={{ start: new Date(2024, 0, 15), end: null }}
+        />,
+      );
+      expect(screen.getByRole("button")).toHaveTextContent("15/01/2024 → ...");
+    });
+  });
+
+  describe("multiple mode", () => {
+    it("shows formatted date when single date selected", () => {
+      render(
+        <DatePicker mode="multiple" value={[new Date(2024, 0, 15)]} />,
+      );
+      expect(screen.getByRole("button")).toHaveTextContent("15/01/2024");
+    });
+
+    it("shows count text when multiple dates selected", () => {
+      render(
+        <DatePicker
+          mode="multiple"
+          value={[new Date(2024, 0, 15), new Date(2024, 0, 20)]}
+        />,
+      );
+      expect(screen.getByRole("button")).toHaveTextContent(
+        "2 fechas seleccionadas",
+      );
+    });
+
+    it("calls onValueChange with [] via footer clear in multiple mode", async () => {
+      const onValueChange = vi.fn();
+      render(
+        <DatePicker
+          mode="multiple"
+          value={[new Date(2024, 0, 15)]}
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button
+              type="button"
+              onClick={() => props.mode === "multiple" && props.clear()}
+            >
+              Clear
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button", { name: "15/01/2024" }));
+      await screen.findByRole("button", { name: "Clear" });
+      await userEvent.click(screen.getByRole("button", { name: "Clear" }));
+      expect(onValueChange).toHaveBeenCalledWith([]);
+    });
+
+    it("calls onValueChange via footer setValue in multiple mode", async () => {
+      const onValueChange = vi.fn();
+      const newDates = [new Date(2024, 5, 20), new Date(2024, 5, 21)];
+      render(
+        <DatePicker
+          mode="multiple"
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button
+              type="button"
+              onClick={() =>
+                props.mode === "multiple" && props.setValue(newDates)
+              }
+            >
+              SetDates
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fechas" }),
+      );
+      await screen.findByRole("button", { name: "SetDates" });
+      await userEvent.click(screen.getByRole("button", { name: "SetDates" }));
+      expect(onValueChange).toHaveBeenCalledWith(newDates);
+    });
+  });
+
+  describe("classNames slots", () => {
+    it("applies classNames.popup to popup panel", async () => {
+      render(
+        <DatePicker
+          mode="single"
+          classNames={{ popup: "custom-popup-class" }}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await waitFor(() => {
+        const popup = document.querySelector(
+          '[data-slot="date-picker-content"]',
+        );
+        expect(popup).toHaveClass("custom-popup-class");
+      });
+    });
+
+    it("applies classNames.footer to footer wrapper", async () => {
+      render(
+        <DatePicker
+          mode="single"
+          classNames={{ footer: "custom-footer-class" }}
+          renderFooter={() => <div>Footer</div>}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await waitFor(() => {
+        const footer = document.querySelector(
+          '[data-slot="date-picker-footer"]',
+        );
+        expect(footer).toHaveClass("custom-footer-class");
+      });
+    });
+  });
+
+  describe("renderFooter", () => {
+    it("renders footer content inside popup", async () => {
+      render(
+        <DatePicker
+          mode="single"
+          renderFooter={() => <div>Custom Footer</div>}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await screen.findByText("Custom Footer");
+    });
+
+    it("passes data-slot date-picker-footer to footer wrapper", async () => {
+      render(
+        <DatePicker
+          mode="single"
+          renderFooter={() => <div>Footer</div>}
+        />,
+      );
+      await userEvent.click(screen.getByRole("button"));
+      await waitFor(() => {
+        expect(
+          document.querySelector('[data-slot="date-picker-footer"]'),
+        ).toBeInTheDocument();
+      });
+    });
+  });
 });
 
+// ─── DateInput ────────────────────────────────────────────────────────────────
+
 describe("DateInput component", () => {
   it("should render correctly", () => {
     render(<DateInput name="date" />);
   });
+
+  describe("data-slot", () => {
+    it("calendar trigger has data-slot date-input-trigger", () => {
+      render(<DateInput name="date" />);
+      expect(
+        document.querySelector('[data-slot="date-input-trigger"]'),
+      ).toBeInTheDocument();
+    });
+
+    it("calendar icon has data-slot date-input-icon", () => {
+      render(<DateInput name="date" />);
+      expect(
+        document.querySelector('[data-slot="date-input-icon"]'),
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("placeholder", () => {
+    it("shows default placeholder dd/mm/aaaa", () => {
+      render(<DateInput name="date" />);
+      expect(screen.getByRole("textbox")).toHaveAttribute(
+        "placeholder",
+        "dd/mm/aaaa",
+      );
+    });
+
+    it("shows custom placeholder", () => {
+      render(<DateInput name="date" placeholder="Ingresá la fecha" />);
+      expect(screen.getByRole("textbox")).toHaveAttribute(
+        "placeholder",
+        "Ingresá la fecha",
+      );
+    });
+  });
+
+  describe("disabled", () => {
+    it("disables the text input", () => {
+      render(<DateInput name="date" disabled />);
+      expect(screen.getByRole("textbox")).toBeDisabled();
+    });
+
+    it("disables the calendar trigger button", () => {
+      render(<DateInput name="date" disabled />);
+      expect(
+        document.querySelector('[data-slot="date-input-trigger"]'),
+      ).toBeDisabled();
+    });
+  });
+
+  describe("className", () => {
+    it("applies className to root container", () => {
+      render(<DateInput name="date" className="my-date-input" />);
+      expect(document.querySelector(".my-date-input")).toBeInTheDocument();
+    });
+  });
+
+  describe("controlled value", () => {
+    it("shows formatted date when value provided", async () => {
+      render(<DateInput name="date" value={new Date(2024, 0, 15)} />);
+      await waitFor(() => {
+        expect(screen.getByRole("textbox")).toHaveValue("15/01/2024");
+      });
+    });
+
+    it("shows empty string when value is null", () => {
+      render(<DateInput name="date" value={null} />);
+      expect(screen.getByRole("textbox")).toHaveValue("");
+    });
+  });
+
+  describe("defaultValue", () => {
+    it("shows formatted date when defaultValue provided", async () => {
+      render(<DateInput name="date" defaultValue={new Date(2024, 5, 20)} />);
+      await waitFor(() => {
+        expect(screen.getByRole("textbox")).toHaveValue("20/06/2024");
+      });
+    });
+  });
+
+  describe("onValueChange", () => {
+    it("calls onValueChange with parsed date on valid blur", () => {
+      const onValueChange = vi.fn();
+      render(<DateInput name="date" onValueChange={onValueChange} />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "15/01/2024" } });
+      fireEvent.blur(input);
+      expect(onValueChange).toHaveBeenCalledWith(new Date(2024, 0, 15));
+    });
+
+    it("calls onValueChange with null when input cleared and blurred", () => {
+      const onValueChange = vi.fn();
+      render(
+        <DateInput
+          name="date"
+          defaultValue={new Date(2024, 0, 15)}
+          onValueChange={onValueChange}
+        />,
+      );
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "" } });
+      fireEvent.blur(input);
+      expect(onValueChange).toHaveBeenCalledWith(null);
+    });
+
+    it("clears input on blur with invalid text", () => {
+      render(<DateInput name="date" />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "not-a-date" } });
+      fireEvent.blur(input);
+      expect(input).toHaveValue("");
+    });
+
+    it("does not call onValueChange when date is disabled on blur", () => {
+      const onValueChange = vi.fn();
+      render(
+        <DateInput
+          name="date"
+          onValueChange={onValueChange}
+          disabledDate={() => true}
+        />,
+      );
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "15/01/2024" } });
+      fireEvent.blur(input);
+      expect(onValueChange).not.toHaveBeenCalled();
+      expect(input).toHaveValue("");
+    });
+  });
+
+  describe("keyboard", () => {
+    it("commits value on Enter key", () => {
+      const onValueChange = vi.fn();
+      render(<DateInput name="date" onValueChange={onValueChange} />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "20/06/2024" } });
+      fireEvent.keyDown(input, { key: "Enter" });
+      expect(onValueChange).toHaveBeenCalledWith(new Date(2024, 5, 20));
+    });
+
+    it("reverts to last valid value on Escape", () => {
+      render(<DateInput name="date" value={new Date(2024, 0, 15)} />);
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "99/99/9999" } });
+      fireEvent.keyDown(input, { key: "Escape" });
+      expect(input).toHaveValue("15/01/2024");
+    });
+  });
+
+  describe("onBlur prop", () => {
+    it("calls onBlur when input loses focus", () => {
+      const onBlur = vi.fn();
+      render(<DateInput name="date" onBlur={onBlur} />);
+      fireEvent.blur(screen.getByRole("textbox"));
+      expect(onBlur).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("renderFooter", () => {
+    it("renders footer content inside popup", async () => {
+      render(
+        <DateInput
+          name="date"
+          renderFooter={() => <div>Footer Content</div>}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fecha" }),
+      );
+      await screen.findByText("Footer Content");
+    });
+
+    it("footer data-slot date-input-footer present when open", async () => {
+      render(
+        <DateInput
+          name="date"
+          renderFooter={() => <div>Footer</div>}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fecha" }),
+      );
+      await waitFor(() => {
+        expect(
+          document.querySelector('[data-slot="date-input-footer"]'),
+        ).toBeInTheDocument();
+      });
+    });
+
+    it("footer clear() clears value and calls onValueChange null", async () => {
+      const onValueChange = vi.fn();
+      render(
+        <DateInput
+          name="date"
+          value={new Date(2024, 0, 15)}
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button type="button" onClick={props.clear}>
+              Clear Date
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fecha" }),
+      );
+      await screen.findByRole("button", { name: "Clear Date" });
+      await userEvent.click(screen.getByRole("button", { name: "Clear Date" }));
+      expect(onValueChange).toHaveBeenCalledWith(null);
+    });
+
+    it("footer selectToday() calls onValueChange with today", async () => {
+      const onValueChange = vi.fn();
+      render(
+        <DateInput
+          name="date"
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button type="button" onClick={props.selectToday}>
+              Today
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fecha" }),
+      );
+      await screen.findByRole("button", { name: "Today" });
+      await userEvent.click(screen.getByRole("button", { name: "Today" }));
+      expect(onValueChange).toHaveBeenCalledTimes(1);
+      const called = onValueChange.mock.calls[0][0] as Date;
+      expect(called?.toDateString()).toBe(new Date().toDateString());
+    });
+
+    it("footer setValue() calls onValueChange with provided date", async () => {
+      const onValueChange = vi.fn();
+      const newDate = new Date(2024, 5, 20);
+      render(
+        <DateInput
+          name="date"
+          onValueChange={onValueChange}
+          renderFooter={(props) => (
+            <button type="button" onClick={() => props.setValue(newDate)}>
+              SetDate
+            </button>
+          )}
+        />,
+      );
+      await userEvent.click(
+        screen.getByRole("button", { name: "Seleccionar fecha" }),
+      );
+      await screen.findByRole("button", { name: "SetDate" });
+      await userEvent.click(screen.getByRole("button", { name: "SetDate" }));
+      expect(onValueChange).toHaveBeenCalledWith(newDate);
+    });
+  });
 });

package/src/components/date-picker/date-picker.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { CalendarIcon } from "lucide-react";
 import { type ReactElement, ReactNode, useRef, useState } from "react";