@getmicdrop/svelte-components 5.5.4 → 5.5.5

package/dist/recipes/modals/AlertModal.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AlertModal.spec.d.ts.map

package/dist/recipes/modals/AlertModal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertModal.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/AlertModal.spec.js"],"names":[],"mappings":""}

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

@@ -0,0 +1,432 @@
+import { render, screen, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, beforeEach, afterEach } from "vitest";
+import AlertModal from "./AlertModal.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(AlertModal, {
+    props: {
+      show: true,
+      title: "Test Alert",
+      message: "This is a test message",
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("AlertModal Component Tests", () => {
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  // 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(AlertModal, { props: { show: false } });
+    expect(screen.queryByText("Test Alert")).not.toBeInTheDocument();
+  });
+
+  test("Renders when show is true", () => {
+    setupTest();
+    // Modal renders both mobile and desktop versions
+    expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+  });
+
+  test("Displays title", () => {
+    setupTest({ title: "Success!" });
+    expect(screen.getAllByText("Success!").length).toBeGreaterThan(0);
+  });
+
+  test("Displays message", () => {
+    setupTest({ message: "Operation completed successfully" });
+    expect(
+      screen.getAllByText("Operation completed successfully").length
+    ).toBeGreaterThan(0);
+  });
+
+  test("Hides title when not provided", () => {
+    setupTest({ title: "" });
+    const headings = screen.queryAllByRole("heading", { level: 2 });
+    expect(headings.length).toBe(0);
+  });
+
+  test("Hides message when not provided", () => {
+    setupTest({ message: "" });
+    // When message is empty, there should be no paragraph with message content
+    const paragraphs = document.querySelectorAll("p");
+    expect(paragraphs.length).toBe(0);
+  });
+
+  test("Displays custom button text", () => {
+    setupTest({ buttonText: "Got it" });
+    expect(screen.getAllByText("Got it").length).toBeGreaterThan(0);
+  });
+
+  test("Displays default button text", () => {
+    setupTest();
+    expect(screen.getAllByText("OK").length).toBeGreaterThan(0);
+  });
+
+  test("Calls onconfirm when button is clicked", async () => {
+    const onconfirm = vi.fn();
+    const { user } = setupTest({ onconfirm, autoClose: 0 });
+
+    const button = screen.getAllByText("OK")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Calls onclose when button is clicked", async () => {
+    const onclose = vi.fn();
+    const { user } = setupTest({ onclose, autoClose: 0 });
+
+    const button = screen.getAllByText("OK")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Calls both onconfirm and onclose when button is clicked", async () => {
+    const onconfirm = vi.fn();
+    const onclose = vi.fn();
+    const { user } = setupTest({ onconfirm, onclose, autoClose: 0 });
+
+    const button = screen.getAllByText("OK")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Closes modal when button is clicked", async () => {
+    const onclose = vi.fn();
+    const { user } = setupTest({ autoClose: 0, onclose });
+    expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+
+    const button = screen.getAllByText("OK")[0];
+    await user.click(button);
+
+    // Verify close was called (actual DOM removal is tested in Modal component)
+    await waitFor(() => {
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  // Variant tests - Success
+  test("Renders success variant with correct icon", () => {
+    setupTest({ variant: "success" });
+    // CheckOutline icon should be present
+    const iconContainer = document.querySelector(".bg-green-100");
+    expect(iconContainer).toBeInTheDocument();
+    const icon = iconContainer?.querySelector(".text-green-600");
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("Success variant has green styling", () => {
+    setupTest({ variant: "success" });
+    const iconContainer = document.querySelector(".bg-green-100");
+    expect(iconContainer).toHaveClass("bg-green-100");
+  });
+
+  test("Success variant button uses default variant", () => {
+    setupTest({ variant: "success" });
+    const button = screen.getAllByText("OK")[0].closest("button");
+    // Default variant has primary/blue styling
+    expect(button).toHaveClass("bg-blue-700");
+  });
+
+  // Variant tests - Error
+  test("Renders error variant with correct icon", () => {
+    setupTest({ variant: "error" });
+    // CloseOutline icon should be present
+    const iconContainer = document.querySelector(".bg-red-100");
+    expect(iconContainer).toBeInTheDocument();
+    const icon = iconContainer?.querySelector(".text-red-600");
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("Error variant has red styling", () => {
+    setupTest({ variant: "error" });
+    const iconContainer = document.querySelector(".bg-red-100");
+    expect(iconContainer).toHaveClass("bg-red-100");
+  });
+
+  test("Error variant button uses red variant", () => {
+    setupTest({ variant: "error" });
+    const button = screen.getAllByText("OK")[0].closest("button");
+    // Red variant has red styling
+    expect(button).toHaveClass("bg-red-700");
+  });
+
+  // Variant tests - Warning
+  test("Renders warning variant with correct icon", () => {
+    setupTest({ variant: "warning" });
+    // ExclamationTriangleOutline icon should be present
+    const iconContainer = document.querySelector(".bg-amber-100");
+    expect(iconContainer).toBeInTheDocument();
+    const icon = iconContainer?.querySelector(".text-amber-600");
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("Warning variant has amber styling", () => {
+    setupTest({ variant: "warning" });
+    const iconContainer = document.querySelector(".bg-amber-100");
+    expect(iconContainer).toHaveClass("bg-amber-100");
+  });
+
+  test("Warning variant button uses default variant", () => {
+    setupTest({ variant: "warning" });
+    const button = screen.getAllByText("OK")[0].closest("button");
+    // Default variant has primary/blue styling
+    expect(button).toHaveClass("bg-blue-700");
+  });
+
+  // Variant tests - Info
+  test("Renders info variant with correct icon", () => {
+    setupTest({ variant: "info" });
+    // InfoCircleOutline icon should be present
+    const iconContainer = document.querySelector(".bg-blue-100");
+    expect(iconContainer).toBeInTheDocument();
+    const icon = iconContainer?.querySelector(".text-blue-600");
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("Info variant has blue styling", () => {
+    setupTest({ variant: "info" });
+    const iconContainer = document.querySelector(".bg-blue-100");
+    expect(iconContainer).toHaveClass("bg-blue-100");
+  });
+
+  test("Info variant button uses default variant", () => {
+    setupTest({ variant: "info" });
+    const button = screen.getAllByText("OK")[0].closest("button");
+    // Default variant has primary/blue styling
+    expect(button).toHaveClass("bg-blue-700");
+  });
+
+  test("Defaults to info variant when invalid variant provided", () => {
+    setupTest({ variant: "invalid" });
+    // Should fall back to info variant
+    const iconContainer = document.querySelector(".bg-blue-100");
+    expect(iconContainer).toBeInTheDocument();
+  });
+
+  // Auto-close tests
+  test("Does not auto-close when autoClose is 0", async () => {
+    vi.useFakeTimers();
+    try {
+      setupTest({ autoClose: 0 });
+      expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+
+      // Advance time significantly
+      await vi.advanceTimersByTimeAsync(5000);
+
+      // Modal should still be visible
+      expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  test("Auto-closes after specified delay", async () => {
+    vi.useFakeTimers();
+    try {
+      const onclose = vi.fn();
+      setupTest({ autoClose: 3000, onclose });
+
+      expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+
+      // Advance time by the auto-close delay
+      await vi.advanceTimersByTimeAsync(3000);
+
+      // Wait for onclose to be called
+      await waitFor(() => {
+        expect(onclose).toHaveBeenCalledOnce();
+      });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  test("Auto-close timer is cleared when modal closes manually", async () => {
+    // This test verifies that manually closing the modal clears the auto-close timer
+    // We test this by ensuring the close callback is only called once, not twice
+    const onclose = vi.fn();
+    const { user } = setupTest({ autoClose: 10000, onclose });
+
+    // Click button immediately to close before auto-close triggers
+    const button = screen.getAllByText("OK")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+
+    // If timer wasn't cleared, it would call onclose again after 10 seconds
+    // Since we can't easily test this with real timers in a fast test,
+    // we verify the timer cleanup exists in the component (lines 84-85)
+    // and that onclose was only called once
+  });
+
+  // Size prop test
+  test("Passes size prop to Modal", () => {
+    setupTest({ size: "medium" });
+    // Modal component receives the size prop
+    // We can't easily test this without mocking Modal, but we can verify it doesn't error
+    expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+  });
+
+  test("Uses default small size", () => {
+    setupTest();
+    // Default size is small
+    expect(screen.getAllByText("Test Alert").length).toBeGreaterThan(0);
+  });
+
+  // Layout and styling tests
+  test("Icon container is centered", () => {
+    setupTest();
+    const iconWrapper = document.querySelector(".flex.justify-center.items-center");
+    expect(iconWrapper).toBeInTheDocument();
+  });
+
+  test("Icon container has proper dimensions", () => {
+    setupTest();
+    const iconContainer = document.querySelector(".w-14.h-14.rounded-full");
+    expect(iconContainer).toBeInTheDocument();
+    expect(iconContainer).toHaveClass("w-14");
+    expect(iconContainer).toHaveClass("h-14");
+    expect(iconContainer).toHaveClass("rounded-full");
+  });
+
+  test("Title has proper styling", () => {
+    setupTest({ title: "Alert Title" });
+    const title = screen.getAllByText("Alert Title")[0];
+    expect(title.tagName).toBe("H2");
+    expect(title).toHaveClass("mt-4");
+  });
+
+  test("Message has proper styling", () => {
+    setupTest({ message: "Alert message" });
+    const message = screen.getAllByText("Alert message")[0];
+    expect(message.tagName).toBe("P");
+    expect(message).toHaveClass("leading-relaxed");
+  });
+
+  test("Button has full width", () => {
+    setupTest();
+    const button = screen.getAllByText("OK")[0].closest("button");
+    // Button should be in a container with w-full
+    const buttonContainer = button?.parentElement;
+    expect(buttonContainer).toHaveClass("w-full");
+  });
+
+  test("Content is centered", () => {
+    setupTest();
+    const header = document.querySelector(".text-center");
+    expect(header).toBeInTheDocument();
+  });
+
+  // Dark mode styling tests
+  test("Success variant has dark mode classes", () => {
+    setupTest({ variant: "success" });
+    const iconContainer = document.querySelector(".bg-green-100");
+    expect(iconContainer).toHaveClass("dark:bg-green-900/30");
+  });
+
+  test("Error variant has dark mode classes", () => {
+    setupTest({ variant: "error" });
+    const iconContainer = document.querySelector(".bg-red-100");
+    expect(iconContainer).toHaveClass("dark:bg-red-900/30");
+  });
+
+  test("Warning variant has dark mode classes", () => {
+    setupTest({ variant: "warning" });
+    const iconContainer = document.querySelector(".bg-amber-100");
+    expect(iconContainer).toHaveClass("dark:bg-amber-900/30");
+  });
+
+  test("Info variant has dark mode classes", () => {
+    setupTest({ variant: "info" });
+    const iconContainer = document.querySelector(".bg-blue-100");
+    expect(iconContainer).toHaveClass("dark:bg-blue-900/30");
+  });
+
+  // Integration tests
+  test("Full success flow", async () => {
+    const onconfirm = vi.fn();
+    const onclose = vi.fn();
+    const { user } = setupTest({
+      variant: "success",
+      title: "Success!",
+      message: "Your changes have been saved.",
+      buttonText: "Great",
+      onconfirm,
+      onclose,
+      autoClose: 0,
+    });
+
+    // Verify content
+    expect(screen.getAllByText("Success!").length).toBeGreaterThan(0);
+    expect(
+      screen.getAllByText("Your changes have been saved.").length
+    ).toBeGreaterThan(0);
+    expect(screen.getAllByText("Great").length).toBeGreaterThan(0);
+
+    // Verify success styling
+    expect(document.querySelector(".bg-green-100")).toBeInTheDocument();
+
+    // Click button
+    const button = screen.getAllByText("Great")[0];
+    await user.click(button);
+
+    // Verify callbacks were called
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Full error flow with auto-close", async () => {
+    vi.useFakeTimers();
+    try {
+      const onclose = vi.fn();
+      setupTest({
+        variant: "error",
+        title: "Error",
+        message: "Something went wrong.",
+        autoClose: 2000,
+        onclose,
+      });
+
+      // Verify content
+      expect(screen.getAllByText("Error").length).toBeGreaterThan(0);
+      expect(
+        screen.getAllByText("Something went wrong.").length
+      ).toBeGreaterThan(0);
+
+      // Verify error styling
+      expect(document.querySelector(".bg-red-100")).toBeInTheDocument();
+
+      // Advance time to trigger auto-close
+      await vi.advanceTimersByTimeAsync(2000);
+
+      // Verify onclose was called
+      await vi.waitFor(() => {
+        expect(onclose).toHaveBeenCalledOnce();
+      });
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+});

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

@@ -88,48 +88,49 @@ describe("ConfirmationModal Component Tests", () => {
     expect(confirmFn).toHaveBeenCalled();
   });
 
-  test("Dispatches event with action label", async () => {
+  // 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, component } = setupTest({ actions });
-
-    const deleteSpy = vi.fn();
-    component.$on("delete", deleteSpy);
+    const { user } = setupTest({ actions });
 
     await user.click(screen.getAllByText("Delete")[0]);
-    expect(deleteSpy).toHaveBeenCalled();
+    expect(confirmFn).toHaveBeenCalled();
   });
 
   test("Shows close button when closeBtn is true", () => {
     setupTest({ closeBtn: true });
-    const closeImg = document.querySelector('img[alt="Close Icon"]');
+    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 Icon"]');
+    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="Icon here"]');
+    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="Icon here"]');
+    const icon = document.querySelector('img[alt=""]');
     expect(icon).not.toBeInTheDocument();
   });
 
-  test("Maps danger action to red-solid variant", async () => {
+  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");
-    expect(button).toHaveClass("btn-red-solid");
+    // 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 () => {
@@ -138,41 +139,55 @@ describe("ConfirmationModal Component Tests", () => {
     ];
     setupTest({ actions });
     const button = screen.getAllByText("Remove")[0].closest("button, a");
-    expect(button).toHaveClass("btn-red-outline");
+    // 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 gray-outline variant", async () => {
+  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");
-    expect(button).toHaveClass("btn-gray-outline");
+    // 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 red-text variant", async () => {
+  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");
-    expect(button).toHaveClass("btn-red-text");
+    // 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: "blue-outline" },
+      { label: "Custom", onClick: vi.fn(), variant: "outline" },
     ];
     setupTest({ actions });
     const button = screen.getAllByText("Custom")[0].closest("button, a");
-    expect(button).toHaveClass("btn-blue-outline");
+    // 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-solid variant", async () => {
+  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");
-    expect(button).toHaveClass("btn-red-solid");
+    // 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", () => {

package/dist/recipes/modals/InputModal.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=InputModal.spec.d.ts.map

package/dist/recipes/modals/InputModal.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputModal.spec.d.ts","sourceRoot":"","sources":["../../../src/lib/recipes/modals/InputModal.spec.js"],"names":[],"mappings":""}