@getmicdrop/svelte-components 5.5.4 → 5.6.0

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/AlertModal.svelte

@@ -1,130 +1,130 @@
-<script>
-  /**
-   * AlertModal - Simple alert with single action and optional auto-close
-   *
-   * A lighter alternative to StatusModal for simple notifications.
-   * Supports auto-close after a delay.
-   *
-   * @example
-   * <AlertModal
-   *   bind:show={showAlert}
-   *   variant="success"
-   *   title="Changes saved"
-   *   message="Your changes have been saved successfully."
-   *   autoClose={3000}
-   * />
-   */
-  import Modal from '../../primitives/Modal/Modal.svelte';
-  import Button from '../../primitives/Button/Button.svelte';
-  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
-  import { typography } from '../../tokens/typography';
-
-  let {
-    /** Whether the modal is visible */
-    show = $bindable(false),
-    /** Alert variant */
-    variant = 'info',
-    /** Alert title */
-    title = '',
-    /** Alert message */
-    message = '',
-    /** Button text */
-    buttonText = 'OK',
-    /** Auto-close delay in milliseconds (0 to disable) */
-    autoClose = 0,
-    /** Modal size */
-    size = 'small',
-    /** Callbacks */
-    onclose,
-    onconfirm,
-  } = $props();
-
-  // Variant styles
-  const variantStyles = {
-    success: {
-      bg: 'bg-green-100 dark:bg-green-900/30',
-      icon: 'text-green-600 dark:text-green-400',
-      button: 'default'
-    },
-    error: {
-      bg: 'bg-red-100 dark:bg-red-900/30',
-      icon: 'text-red-600 dark:text-red-400',
-      button: 'red'
-    },
-    warning: {
-      bg: 'bg-amber-100 dark:bg-amber-900/30',
-      icon: 'text-amber-600 dark:text-amber-400',
-      button: 'default'
-    },
-    info: {
-      bg: 'bg-blue-100 dark:bg-blue-900/30',
-      icon: 'text-blue-600 dark:text-blue-400',
-      button: 'default'
-    }
-  };
-
-  let styles = $derived(variantStyles[variant] || variantStyles.info);
-
-  function closeModal() {
-    show = false;
-    onclose?.();
-  }
-
-  function handleConfirm() {
-    onconfirm?.();
-    closeModal();
-  }
-
-  // Start auto-close timer when modal opens
-  $effect(() => {
-    if (show && autoClose > 0) {
-      const timer = setTimeout(() => {
-        closeModal();
-      }, autoClose);
-      return () => clearTimeout(timer);
-    }
-  });
-</script>
-
-<Modal bind:show {size}>
-  {#snippet header()}
-    <div class="text-center">
-      <div class="flex justify-center items-center">
-        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
-          {#if variant === 'success'}
-            <CheckOutline class="w-7 h-7 {styles.icon}" />
-          {:else if variant === 'error'}
-            <CloseOutline class="w-7 h-7 {styles.icon}" />
-          {:else if variant === 'warning'}
-            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
-          {:else}
-            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
-          {/if}
-        </div>
-      </div>
-      {#if title}
-        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet body()}
-    <div class="text-center mt-4">
-      {#if message}
-        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
-      {/if}
-    </div>
-  {/snippet}
-
-  {#snippet footer()}
-    <div class="w-full">
-      <Button
-        size="full"
-        variant={styles.button}
-        onclick={handleConfirm}
-      >
-        {buttonText}
-      </Button>
-    </div>
-  {/snippet}
-</Modal>
+<script>
+  /**
+   * AlertModal - Simple alert with single action and optional auto-close
+   *
+   * A lighter alternative to StatusModal for simple notifications.
+   * Supports auto-close after a delay.
+   *
+   * @example
+   * <AlertModal
+   *   bind:show={showAlert}
+   *   variant="success"
+   *   title="Changes saved"
+   *   message="Your changes have been saved successfully."
+   *   autoClose={3000}
+   * />
+   */
+  import Modal from '../../primitives/Modal/Modal.svelte';
+  import Button from '../../primitives/Button/Button.svelte';
+  import { CheckOutline, CloseOutline, ExclamationTriangleOutline, InfoCircleOutline } from '../../primitives/Icons';
+  import { typography } from '../../tokens/typography';
+
+  let {
+    /** Whether the modal is visible */
+    show = $bindable(false),
+    /** Alert variant */
+    variant = 'info',
+    /** Alert title */
+    title = '',
+    /** Alert message */
+    message = '',
+    /** Button text */
+    buttonText = 'OK',
+    /** Auto-close delay in milliseconds (0 to disable) */
+    autoClose = 0,
+    /** Modal size */
+    size = 'small',
+    /** Callbacks */
+    onclose,
+    onconfirm,
+  } = $props();
+
+  // Variant styles
+  const variantStyles = {
+    success: {
+      bg: 'bg-green-100 dark:bg-green-900/30',
+      icon: 'text-green-600 dark:text-green-400',
+      button: 'default'
+    },
+    error: {
+      bg: 'bg-red-100 dark:bg-red-900/30',
+      icon: 'text-red-600 dark:text-red-400',
+      button: 'red'
+    },
+    warning: {
+      bg: 'bg-amber-100 dark:bg-amber-900/30',
+      icon: 'text-amber-600 dark:text-amber-400',
+      button: 'default'
+    },
+    info: {
+      bg: 'bg-blue-100 dark:bg-blue-900/30',
+      icon: 'text-blue-600 dark:text-blue-400',
+      button: 'default'
+    }
+  };
+
+  let styles = $derived(variantStyles[variant] || variantStyles.info);
+
+  function closeModal() {
+    show = false;
+    onclose?.();
+  }
+
+  function handleConfirm() {
+    onconfirm?.();
+    closeModal();
+  }
+
+  // Start auto-close timer when modal opens
+  $effect(() => {
+    if (show && autoClose > 0) {
+      const timer = setTimeout(() => {
+        closeModal();
+      }, autoClose);
+      return () => clearTimeout(timer);
+    }
+  });
+</script>
+
+<Modal bind:show {size}>
+  {#snippet header()}
+    <div class="text-center">
+      <div class="flex justify-center items-center">
+        <div class="w-14 h-14 rounded-full {styles.bg} flex items-center justify-center">
+          {#if variant === 'success'}
+            <CheckOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'error'}
+            <CloseOutline class="w-7 h-7 {styles.icon}" />
+          {:else if variant === 'warning'}
+            <ExclamationTriangleOutline class="w-7 h-7 {styles.icon}" />
+          {:else}
+            <InfoCircleOutline class="w-7 h-7 {styles.icon}" />
+          {/if}
+        </div>
+      </div>
+      {#if title}
+        <h2 class={`${typography.h2} mt-4`}>{title}</h2>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet body()}
+    <div class="text-center mt-4">
+      {#if message}
+        <p class={`${typography.smMuted} leading-relaxed`}>{message}</p>
+      {/if}
+    </div>
+  {/snippet}
+
+  {#snippet footer()}
+    <div class="w-full">
+      <Button
+        size="full"
+        variant={styles.button}
+        onclick={handleConfirm}
+      >
+        {buttonText}
+      </Button>
+    </div>
+  {/snippet}
+</Modal>