@getmicdrop/svelte-components 5.17.1 → 5.17.3

package/dist/recipes/modals/ConfirmationModal.spec.js

@@ -1,206 +1,396 @@
-import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import ConfirmationModal from "./ConfirmationModal.svelte";
-
-const defaultActions = [
-  { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
-  { label: "Confirm", onClick: vi.fn(), variant: "blue-solid" },
-];
-
-function setupTest(args = {}) {
-  const user = userEvent.setup();
-  const { component } = render(ConfirmationModal, {
-    props: {
-      open: true,
-      title: "Test Modal",
-      description: "This is a test description",
-      actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
-      ...args,
-    },
-  });
-  return { user, component };
-}
-
-describe("ConfirmationModal Component Tests", () => {
-  // Note: Modal renders both mobile sheet and desktop centered versions
-  // CSS hides one based on viewport, but in tests both are in DOM
-  // Use getAllByText/queryAllByText and check length or first element
-
-  test("Does not render when show is false", () => {
-    render(ConfirmationModal, { props: { open: false } });
-    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
-  });
-
-  test("Renders when show is true", () => {
-    setupTest();
-    // Modal renders both mobile and desktop versions
-    expect(screen.getAllByText("Test Modal").length).toBeGreaterThan(0);
-  });
-
-  test("Displays title", () => {
-    setupTest({ title: "Confirm Delete" });
-    expect(screen.getAllByText("Confirm Delete").length).toBeGreaterThan(0);
-  });
-
-  test("Displays description", () => {
-    setupTest({ description: "Are you sure you want to proceed?" });
-    expect(
-      screen.getAllByText("Are you sure you want to proceed?").length
-    ).toBeGreaterThan(0);
-  });
-
-  test("Displays warning text when provided", () => {
-    setupTest({ warningText: "This action cannot be undone" });
-    expect(
-      screen.getAllByText("This action cannot be undone").length
-    ).toBeGreaterThan(0);
-  });
-
-  test("Warning text has danger styling", () => {
-    setupTest({ warningText: "Warning!" });
-    const warning = screen.getAllByText("Warning!")[0];
-    expect(warning).toHaveClass("text-red-600");
-    expect(warning).toHaveClass("font-medium");
-  });
-
-  test("Renders action buttons", () => {
-    const actions = [
-      { label: "No", onClick: vi.fn() },
-      { label: "Yes", onClick: vi.fn() },
-    ];
-    setupTest({ actions });
-    expect(screen.getAllByText("No").length).toBeGreaterThan(0);
-    expect(screen.getAllByText("Yes").length).toBeGreaterThan(0);
-  });
-
-  test("Calls action onClick when button clicked", async () => {
-    const cancelFn = vi.fn();
-    const confirmFn = vi.fn();
-    const actions = [
-      { label: "Cancel", onClick: cancelFn },
-      { label: "Confirm", onClick: confirmFn },
-    ];
-    const { user } = setupTest({ actions });
-
-    // Click the first Confirm button (both mobile and desktop versions exist)
-    await user.click(screen.getAllByText("Confirm")[0]);
-    expect(confirmFn).toHaveBeenCalled();
-  });
-
-  // Note: Svelte 5 removed $on - component no longer dispatches custom events
-  // The component calls action.onClick directly, which we test above
-  test("Clicking action calls onClick handler", async () => {
-    const confirmFn = vi.fn();
-    const actions = [{ label: "Delete", onClick: confirmFn }];
-    const { user } = setupTest({ actions });
-
-    await user.click(screen.getAllByText("Delete")[0]);
-    expect(confirmFn).toHaveBeenCalled();
-  });
-
-  test("Shows close button when closeBtn is true", () => {
-    setupTest({ closeBtn: true });
-    const closeImg = document.querySelector('img[alt="Close"]');
-    expect(closeImg).toBeInTheDocument();
-  });
-
-  test("Does not show close button by default", () => {
-    setupTest({ closeBtn: false });
-    const closeImg = document.querySelector('img[alt="Close"]');
-    expect(closeImg).not.toBeInTheDocument();
-  });
-
-  test("Shows icon when provided", () => {
-    setupTest({ icon: "/test-icon.svg" });
-    const icon = document.querySelector('img[alt=""]');
-    expect(icon).toBeInTheDocument();
-    expect(icon).toHaveAttribute("src", "/test-icon.svg");
-  });
-
-  test("Does not show icon by default", () => {
-    setupTest();
-    const icon = document.querySelector('img[alt=""]');
-    expect(icon).not.toBeInTheDocument();
-  });
-
-  test("Maps danger action to red variant", async () => {
-    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete")[0].closest("button");
-    // Button applies Tailwind classes for red variant
-    expect(button).toHaveClass("bg-red-700");
-    expect(button).toHaveClass("text-white");
-  });
-
-  test("Maps strokebtn + danger to red-outline variant", async () => {
-    const actions = [
-      { label: "Remove", onClick: vi.fn(), strokebtn: true, danger: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Remove")[0].closest("button, a");
-    // Button applies Tailwind classes for red-outline variant
-    expect(button).toHaveClass("text-red-700");
-    expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-red-700");
-  });
-
-  test("Maps strokebtn + deemphasized to alternative variant", async () => {
-    const actions = [
-      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Cancel")[0].closest("button, a");
-    // Button applies Tailwind classes for alternative variant
-    expect(button).toHaveClass("text-gray-900");
-    expect(button).toHaveClass("bg-white");
-    expect(button).toHaveClass("border-gray-200");
-  });
-
-  test("Maps textBtn + danger to ghost-red variant", async () => {
-    const actions = [
-      { label: "Delete Text", onClick: vi.fn(), textBtn: true, danger: true },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete Text")[0].closest("button, a");
-    // Button applies Tailwind classes for ghost-red variant
-    expect(button).toHaveClass("text-red-700");
-    expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-transparent");
-  });
-
-  test("Uses explicit variant when provided", async () => {
-    const actions = [
-      { label: "Custom", onClick: vi.fn(), variant: "outline" },
-    ];
-    setupTest({ actions });
-    const button = screen.getAllByText("Custom")[0].closest("button, a");
-    // Button applies Tailwind classes for outline variant
-    expect(button).toHaveClass("text-blue-700");
-    expect(button).toHaveClass("bg-transparent");
-    expect(button).toHaveClass("border-blue-700");
-  });
-
-  test("Auto-maps Delete label to red variant", async () => {
-    const actions = [{ label: "Delete", onClick: vi.fn() }];
-    setupTest({ actions });
-    const button = screen.getAllByText("Delete")[0].closest("button, a");
-    // Button applies Tailwind classes for red variant (auto-detected from "Delete" label)
-    expect(button).toHaveClass("bg-red-700");
-    expect(button).toHaveClass("text-white");
-  });
-
-  test("Title has proper styling", () => {
-    setupTest({ title: "Modal Title" });
-    const title = screen.getAllByText("Modal Title")[0];
-    expect(title.tagName).toBe("H2");
-    expect(title).toHaveClass("text-xl");
-  });
-
-  test("Description has proper styling", () => {
-    setupTest({ description: "Description text" });
-    const desc = screen.getAllByText("Description text")[0];
-    expect(desc).toHaveClass("text-gray-500");
-    expect(desc).toHaveClass("text-sm");
-  });
-});
+import { render, screen, fireEvent, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+
+// Mock haptic utility before importing component
+vi.mock('$lib/utils/haptic.js', () => ({
+  triggerHaptic: vi.fn()
+}));
+
+import ConfirmationModal from "./ConfirmationModal.svelte";
+import { triggerHaptic } from '../../utils/haptic.js';
+
+const defaultActions = [
+  { label: "Cancel", onClick: vi.fn(), variant: "gray-outline" },
+  { label: "Confirm", onClick: vi.fn(), variant: "blue-solid" },
+];
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(ConfirmationModal, {
+    props: {
+      open: true,
+      title: "Test Modal",
+      description: "This is a test description",
+      actions: defaultActions.map((a) => ({ ...a, onClick: vi.fn() })),
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("ConfirmationModal Component Tests", () => {
+  // Note: Modal renders both mobile sheet and desktop centered versions
+  // CSS hides one based on viewport, but in tests both are in DOM
+  // Use getAllByText/queryAllByText and check length or first element
+
+  test("Does not render when show is false", () => {
+    render(ConfirmationModal, { props: { open: false } });
+    expect(screen.queryByText("Test Modal")).not.toBeInTheDocument();
+  });
+
+  test("Renders when show is true", () => {
+    setupTest();
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText("Test Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Displays title", () => {
+    setupTest({ title: "Confirm Delete" });
+    expect(screen.getAllByText("Confirm Delete").length).toBeGreaterThan(0);
+  });
+
+  test("Displays description", () => {
+    setupTest({ description: "Are you sure you want to proceed?" });
+    expect(
+      screen.getAllByText("Are you sure you want to proceed?").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Displays warning text when provided", () => {
+    setupTest({ warningText: "This action cannot be undone" });
+    expect(
+      screen.getAllByText("This action cannot be undone").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Warning text has danger styling", () => {
+    setupTest({ warningText: "Warning!" });
+    const warning = screen.getAllByText("Warning!")[0];
+    expect(warning).toHaveClass("text-red-600");
+    expect(warning).toHaveClass("font-medium");
+  });
+
+  test("Renders action buttons", () => {
+    const actions = [
+      { label: "No", onClick: vi.fn() },
+      { label: "Yes", onClick: vi.fn() },
+    ];
+    setupTest({ actions });
+    expect(screen.getAllByText("No").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Yes").length).toBeGreaterThan(0);
+  });
+
+  test("Calls action onClick when button clicked", async () => {
+    const cancelFn = vi.fn();
+    const confirmFn = vi.fn();
+    const actions = [
+      { label: "Cancel", onClick: cancelFn },
+      { label: "Confirm", onClick: confirmFn },
+    ];
+    const { user } = setupTest({ actions });
+
+    // Click the first Confirm button (both mobile and desktop versions exist)
+    await user.click(screen.getAllByText("Confirm")[0]);
+    expect(confirmFn).toHaveBeenCalled();
+  });
+
+  // Note: Svelte 5 removed $on - component no longer dispatches custom events
+  // The component calls action.onClick directly, which we test above
+  test("Clicking action calls onClick handler", async () => {
+    const confirmFn = vi.fn();
+    const actions = [{ label: "Delete", onClick: confirmFn }];
+    const { user } = setupTest({ actions });
+
+    await user.click(screen.getAllByText("Delete")[0]);
+    expect(confirmFn).toHaveBeenCalled();
+  });
+
+  test("Shows close button when closeBtn is true", () => {
+    setupTest({ closeBtn: true });
+    const closeImg = document.querySelector('img[alt="Close"]');
+    expect(closeImg).toBeInTheDocument();
+  });
+
+  test("Does not show close button by default", () => {
+    setupTest({ closeBtn: false });
+    const closeImg = document.querySelector('img[alt="Close"]');
+    expect(closeImg).not.toBeInTheDocument();
+  });
+
+  test("Shows icon when provided", () => {
+    setupTest({ icon: "/test-icon.svg" });
+    const icon = document.querySelector('img[alt=""]');
+    expect(icon).toBeInTheDocument();
+    expect(icon).toHaveAttribute("src", "/test-icon.svg");
+  });
+
+  test("Does not show icon by default", () => {
+    setupTest();
+    const icon = document.querySelector('img[alt=""]');
+    expect(icon).not.toBeInTheDocument();
+  });
+
+  test("Maps danger action to red variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn(), danger: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button");
+    // Button applies Tailwind classes for red variant
+    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("text-white");
+  });
+
+  test("Maps strokebtn + danger to red-outline variant", async () => {
+    const actions = [
+      { label: "Remove", onClick: vi.fn(), strokebtn: true, danger: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Remove")[0].closest("button, a");
+    // Button applies Tailwind classes for red-outline variant
+    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-red-700");
+  });
+
+  test("Maps strokebtn + deemphasized to alternative variant", async () => {
+    const actions = [
+      { label: "Cancel", onClick: vi.fn(), strokebtn: true, deemphasized: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Cancel")[0].closest("button, a");
+    // Button applies Tailwind classes for alternative variant
+    expect(button).toHaveClass("text-gray-900");
+    expect(button).toHaveClass("bg-white");
+    expect(button).toHaveClass("border-gray-200");
+  });
+
+  test("Maps textBtn + danger to ghost-red variant", async () => {
+    const actions = [
+      { label: "Delete Text", onClick: vi.fn(), textBtn: true, danger: true },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete Text")[0].closest("button, a");
+    // Button applies Tailwind classes for ghost-red variant
+    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-transparent");
+  });
+
+  test("Uses explicit variant when provided", async () => {
+    const actions = [
+      { label: "Custom", onClick: vi.fn(), variant: "outline" },
+    ];
+    setupTest({ actions });
+    const button = screen.getAllByText("Custom")[0].closest("button, a");
+    // Button applies Tailwind classes for outline variant
+    expect(button).toHaveClass("text-blue-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-blue-700");
+  });
+
+  test("Auto-maps Delete label to red variant", async () => {
+    const actions = [{ label: "Delete", onClick: vi.fn() }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Delete")[0].closest("button, a");
+    // Button applies Tailwind classes for red variant (auto-detected from "Delete" label)
+    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("text-white");
+  });
+
+  test("Title has proper styling", () => {
+    setupTest({ title: "Modal Title" });
+    const title = screen.getAllByText("Modal Title")[0];
+    expect(title.tagName).toBe("H2");
+    expect(title).toHaveClass("text-xl");
+  });
+
+  test("Description has proper styling", () => {
+    setupTest({ description: "Description text" });
+    const desc = screen.getAllByText("Description text")[0];
+    expect(desc).toHaveClass("text-gray-500");
+    expect(desc).toHaveClass("text-sm");
+  });
+
+  test("Does not render title when title is empty", () => {
+    setupTest({ title: "" });
+    const headings = document.querySelectorAll("h2");
+    expect(headings.length).toBe(0);
+  });
+
+  test("Triggers haptic with 'medium' for non-danger action when haptic is enabled", async () => {
+    vi.clearAllMocks();
+    const clickFn = vi.fn();
+    const actions = [{ label: "Save", onClick: clickFn, variant: "default" }];
+    const { user } = setupTest({ actions, haptic: true });
+
+    await user.click(screen.getAllByText("Save")[0]);
+
+    expect(triggerHaptic).toHaveBeenCalledWith('medium');
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  test("Triggers haptic with 'heavy' for danger action when haptic is enabled", async () => {
+    vi.clearAllMocks();
+    const clickFn = vi.fn();
+    const actions = [{ label: "Remove", onClick: clickFn, variant: "red" }];
+    const { user } = setupTest({ actions, haptic: true });
+
+    await user.click(screen.getAllByText("Remove")[0]);
+
+    expect(triggerHaptic).toHaveBeenCalledWith('heavy');
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  test("Does not trigger haptic on action click when haptic is disabled", async () => {
+    const clickFn = vi.fn();
+    const actions = [{ label: "OK", onClick: clickFn }];
+    const { user } = setupTest({ actions, haptic: false });
+
+    // Clear mocks after render to ignore Modal's own open haptic
+    vi.clearAllMocks();
+
+    await user.click(screen.getAllByText("OK")[0]);
+
+    // triggerHaptic should NOT have been called for the action click
+    expect(triggerHaptic).not.toHaveBeenCalled();
+    expect(clickFn).toHaveBeenCalled();
+  });
+
+  test("Does not call action onClick when disabled is true", async () => {
+    const clickFn = vi.fn();
+    const actions = [{ label: "Submit", onClick: clickFn }];
+    const { user } = setupTest({ actions, disabled: true });
+
+    await user.click(screen.getAllByText("Submit")[0]);
+
+    expect(clickFn).not.toHaveBeenCalled();
+  });
+
+  test("Does not call action onClick when loading is true", async () => {
+    const clickFn = vi.fn();
+    const actions = [{ label: "Submit", onClick: clickFn }];
+    const { user } = setupTest({ actions, loading: true });
+
+    await user.click(screen.getAllByText("Submit")[0]);
+
+    expect(clickFn).not.toHaveBeenCalled();
+  });
+
+  test("handleClose does not close when disabled is true", async () => {
+    const onclose = vi.fn();
+    setupTest({ closeBtn: true, disabled: true, onclose });
+
+    // Find the close button (the X button)
+    const closeImg = document.querySelector('img[alt="Close"]');
+    const closeBtn = closeImg.closest('button');
+    await fireEvent.click(closeBtn);
+
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test("handleClose calls onclose and sets open to false when not disabled", async () => {
+    const onclose = vi.fn();
+    setupTest({ closeBtn: true, disabled: false, loading: false, onclose });
+
+    const closeImg = document.querySelector('img[alt="Close"]');
+    const closeBtn = closeImg.closest('button');
+    await fireEvent.click(closeBtn);
+
+    expect(onclose).toHaveBeenCalled();
+  });
+
+  test("Uses customIcon over icon when both provided", () => {
+    setupTest({ icon: "/icon.svg", customIcon: "/custom-icon.svg" });
+    const img = document.querySelector('img[alt=""]');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute("src", "/custom-icon.svg");
+  });
+
+  test("Maps strokebtn without other flags to outline variant", () => {
+    const actions = [{ label: "Outline", onClick: vi.fn(), strokebtn: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Outline")[0].closest("button, a");
+    expect(button).toHaveClass("text-blue-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-blue-700");
+  });
+
+  test("Maps btnDanger to red variant", () => {
+    const actions = [{ label: "Danger", onClick: vi.fn(), btnDanger: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("Danger")[0].closest("button, a");
+    expect(button).toHaveClass("bg-red-700");
+    expect(button).toHaveClass("text-white");
+  });
+
+  test("Maps btnDanger + strokebtn to red-outline variant", () => {
+    const actions = [{ label: "OutlineDanger", onClick: vi.fn(), btnDanger: true, strokebtn: true }];
+    setupTest({ actions });
+    const button = screen.getAllByText("OutlineDanger")[0].closest("button, a");
+    expect(button).toHaveClass("text-red-700");
+    expect(button).toHaveClass("bg-transparent");
+    expect(button).toHaveClass("border-red-700");
+  });
+
+  test("Builds actions from primaryButtonText and secondaryButtonText props", async () => {
+    const onconfirm = vi.fn();
+    const oncancel = vi.fn();
+    setupTest({
+      actions: [],
+      primaryButtonText: "Yes, Delete",
+      secondaryButtonText: "No, Keep",
+      onconfirm,
+      oncancel
+    });
+
+    expect(screen.getAllByText("Yes, Delete").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("No, Keep").length).toBeGreaterThan(0);
+  });
+
+  test("Built primary action calls onconfirm callback", async () => {
+    const onconfirm = vi.fn();
+    const { user } = setupTest({
+      actions: [],
+      primaryButtonText: "Confirm",
+      onconfirm
+    });
+
+    await user.click(screen.getAllByText("Confirm")[0]);
+    expect(onconfirm).toHaveBeenCalled();
+  });
+
+  test("Built secondary action calls oncancel callback", async () => {
+    const oncancel = vi.fn();
+    const { user } = setupTest({
+      actions: [],
+      secondaryButtonText: "Cancel",
+      oncancel
+    });
+
+    await user.click(screen.getAllByText("Cancel")[0]);
+    expect(oncancel).toHaveBeenCalled();
+  });
+
+  test("Danger variant uses red variant for primary button", () => {
+    setupTest({
+      actions: [],
+      primaryButtonText: "Delete",
+      variant: "danger"
+    });
+    const button = screen.getAllByText("Delete")[0].closest("button, a");
+    expect(button).toHaveClass("bg-red-700");
+  });
+
+  test("Does not render description when empty", () => {
+    setupTest({ description: "" });
+    // No <p> with muted style should exist in the body area for description
+    const bodyArea = document.querySelectorAll('p.text-gray-500');
+    expect(bodyArea.length).toBe(0);
+  });
+
+  test("Does not render warningText when empty", () => {
+    setupTest({ warningText: "" });
+    const warnings = document.querySelectorAll('.text-red-600');
+    expect(warnings.length).toBe(0);
+  });
+});