@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/toast/toast.test.tsx

@@ -0,0 +1,331 @@
+import { render, renderHook, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import {
+  createToastManager,
+  ToastPrimitive,
+  ToastProvider,
+  toast,
+  useToastManager,
+} from "../toast";
+
+function ToastTrigger({
+  variant,
+  title,
+  description,
+}: {
+  variant?: string;
+  title?: string;
+  description?: string;
+}) {
+  const manager = useToastManager();
+  return (
+    <button
+      onClick={() =>
+        manager.add({ variant: variant as any, title, description })
+      }
+    >
+      Show toast
+    </button>
+  );
+}
+
+function renderWithProvider(ui: React.ReactNode) {
+  return render(<ToastProvider>{ui}</ToastProvider>);
+}
+
+describe("Toast component", () => {
+  it("should render description", async () => {
+    renderWithProvider(<ToastTrigger description="test" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    expect(await screen.findByText("test")).toBeInTheDocument();
+  });
+
+  it("should render title", async () => {
+    renderWithProvider(<ToastTrigger title="title" description="test" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    expect(await screen.findByText("title")).toBeInTheDocument();
+  });
+
+  it("should render with success variant ring", async () => {
+    renderWithProvider(<ToastTrigger variant="success" description="test" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("test");
+    const toastEl = document.querySelector(
+      '[data-slot="toast"]',
+    ) as HTMLElement;
+    expect(toastEl.className).toContain("ring-success");
+  });
+});
+
+describe("Toast data-slots", () => {
+  it("sets data-slot='toast-title' on title", async () => {
+    renderWithProvider(<ToastTrigger title="My Title" description="desc" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("My Title");
+    expect(
+      document.querySelector('[data-slot="toast-title"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("sets data-slot='toast-description' on description", async () => {
+    renderWithProvider(<ToastTrigger description="My Desc" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("My Desc");
+    expect(
+      document.querySelector('[data-slot="toast-description"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Toast variants", () => {
+  it.each([
+    ["error", "ring-error"],
+    ["warning", "ring-warning"],
+    ["info", "ring-info"],
+    ["default", "ring-input"],
+  ] as const)("%s variant applies correct ring class", async (variant, ringClass) => {
+    renderWithProvider(<ToastTrigger variant={variant} description="msg" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("msg");
+    const toastEl = document.querySelector(
+      '[data-slot="toast"]',
+    ) as HTMLElement;
+    expect(toastEl.className).toContain(ringClass);
+  });
+});
+
+describe("Toast close button", () => {
+  it("renders a close button with aria-label='Cerrar'", async () => {
+    renderWithProvider(<ToastTrigger description="msg" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("msg");
+    expect(
+      document.querySelector('button[aria-label="Cerrar"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Toast imperative API", () => {
+  it("toast.success shows a toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.success("Success msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Success msg")).toBeInTheDocument();
+  });
+
+  it("toast.error shows a toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.error("Error msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Error msg")).toBeInTheDocument();
+  });
+
+  it("toast() with string shows default toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast("Default msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Default msg")).toBeInTheDocument();
+  });
+
+  it("toast.warning shows a warning toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.warning("Warning msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Warning msg")).toBeInTheDocument();
+  });
+
+  it("toast.info shows an info toast", async () => {
+    renderWithProvider(
+      <button onClick={() => toast.info("Info msg")}>Trigger</button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Info msg")).toBeInTheDocument();
+  });
+
+  it("toast.promise shows success description when promise resolves", async () => {
+    renderWithProvider(
+      <button
+        onClick={() =>
+          toast.promise(Promise.resolve("done"), {
+            loading: { description: "Loading..." },
+            success: { description: "Resolved!" },
+            error: { description: "Failed!" },
+          })
+        }
+      >
+        Trigger
+      </button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Resolved!")).toBeInTheDocument();
+  });
+
+  it("toast.promise with function success handler shows dynamic description", async () => {
+    renderWithProvider(
+      <button
+        onClick={() =>
+          toast.promise(Promise.resolve({ label: "Data OK" }), {
+            loading: { description: "Working..." },
+            success: (data) => ({ description: data.label }),
+            error: { description: "Failed!" },
+          })
+        }
+      >
+        Trigger
+      </button>,
+    );
+    await userEvent.click(screen.getByText("Trigger"));
+    expect(await screen.findByText("Data OK")).toBeInTheDocument();
+  });
+
+  it("toast.promise covers the object-form error and success branches", async () => {
+    // Tests both object-form (non-function) branches of wrapManagerMethods.promise.
+    // The function-form success branch is covered by the test above.
+    renderWithProvider(
+      <button
+        onClick={() =>
+          toast.promise(Promise.resolve("ok"), {
+            loading: { description: "Loading2..." },
+            success: { description: "Success2!" },
+            error: { description: "Error2!" },
+          })
+        }
+      >
+        Trigger2
+      </button>,
+    );
+    await userEvent.click(screen.getByText("Trigger2"));
+    expect(await screen.findByText("Success2!")).toBeInTheDocument();
+  });
+});
+
+describe("Toast manager.update", () => {
+  it("update method does not throw", async () => {
+    function UpdateTrigger() {
+      const manager = useToastManager();
+      return (
+        <>
+          <button
+            onClick={() =>
+              manager.add({ id: "upd-id", description: "Original" })
+            }
+          >
+            Add
+          </button>
+          <button
+            onClick={() => manager.update("upd-id", { description: "Updated" })}
+          >
+            Update
+          </button>
+        </>
+      );
+    }
+    renderWithProvider(<UpdateTrigger />);
+    await userEvent.click(screen.getByText("Add"));
+    await screen.findByText("Original");
+    await userEvent.click(screen.getByText("Update"));
+    expect(screen.getByText("Add")).toBeInTheDocument();
+  });
+});
+
+describe("Toast manager.close", () => {
+  it("close method removes the toast", async () => {
+    function CloseTrigger() {
+      const manager = useToastManager();
+      return (
+        <>
+          <button
+            onClick={() =>
+              manager.add({ id: "close-id", description: "To remove" })
+            }
+          >
+            Add
+          </button>
+          <button onClick={() => manager.close("close-id")}>Close</button>
+        </>
+      );
+    }
+    renderWithProvider(<CloseTrigger />);
+    await userEvent.click(screen.getByText("Add"));
+    await screen.findByText("To remove");
+    await userEvent.click(screen.getByText("Close"));
+    expect(screen.getByText("Add")).toBeInTheDocument();
+  });
+});
+
+describe("Toast dedup", () => {
+  it("adding toast with same id deduplicates instead of creating a new one", async () => {
+    function DupTrigger() {
+      const manager = useToastManager();
+      return (
+        <>
+          <button
+            onClick={() => manager.add({ id: "dup-id", description: "First" })}
+          >
+            Add First
+          </button>
+          <button
+            onClick={() => manager.add({ id: "dup-id", description: "Second" })}
+          >
+            Add Second
+          </button>
+        </>
+      );
+    }
+    renderWithProvider(<DupTrigger />);
+    await userEvent.click(screen.getByText("Add First"));
+    await screen.findByText("First");
+    await userEvent.click(screen.getByText("Add Second"));
+    expect(document.querySelectorAll('[data-slot="toast"]')).toHaveLength(1);
+  });
+});
+
+describe("Toast actions", () => {
+  it("renders action buttons", async () => {
+    function ActionTrigger() {
+      const manager = useToastManager();
+      return (
+        <button
+          onClick={() =>
+            manager.add({
+              description: "with actions",
+              actions: [{ children: "Undo", size: "sm" }],
+            })
+          }
+        >
+          Show toast
+        </button>
+      );
+    }
+    renderWithProvider(<ActionTrigger />);
+    await userEvent.click(screen.getByText("Show toast"));
+    await screen.findByText("with actions");
+    expect(screen.getByRole("button", { name: "Undo" })).toBeInTheDocument();
+  });
+});
+
+describe("Toast exports", () => {
+  it("exports ToastPrimitive", () => {
+    expect(ToastPrimitive).toBeDefined();
+  });
+
+  it("createToastManager returns object with add/close methods", () => {
+    const manager = createToastManager();
+    expect(manager).toBeDefined();
+    expect(typeof manager.add).toBe("function");
+    expect(typeof manager.close).toBe("function");
+  });
+
+  it("useToastManager returns toasts list", () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <ToastProvider>{children}</ToastProvider>
+    );
+    const { result } = renderHook(() => useToastManager(), { wrapper });
+    expect(Array.isArray(result.current.toasts)).toBe(true);
+  });
+});