@getmicdrop/svelte-components 5.5.4 → 5.6.0

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

@@ -0,0 +1,599 @@
+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 StatusModal from "./StatusModal.svelte";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(StatusModal, {
+    props: {
+      show: true,
+      title: "Test Status",
+      description: "This is a test description",
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("StatusModal 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
+
+  describe("Basic Rendering", () => {
+    test("Does not render when show is false", () => {
+      render(StatusModal, { props: { show: false } });
+      expect(screen.queryByText("Test Status")).not.toBeInTheDocument();
+    });
+
+    test("Renders when show is true", () => {
+      setupTest();
+      expect(screen.getAllByText("Test Status").length).toBeGreaterThan(0);
+    });
+
+    test("Displays title", () => {
+      setupTest({ title: "Operation Complete" });
+      expect(screen.getAllByText("Operation Complete").length).toBeGreaterThan(0);
+    });
+
+    test("Displays description", () => {
+      setupTest({ description: "Your changes have been saved" });
+      expect(screen.getAllByText("Your changes have been saved").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 description when not provided", () => {
+      setupTest({ description: "" });
+      const paragraphs = document.querySelectorAll("p");
+      expect(paragraphs.length).toBe(0);
+    });
+
+    test("Displays subtitle in profile mode", () => {
+      setupTest({
+        subtitle: "Test Subtitle",
+        image: "https://example.com/image.jpg"
+      });
+      expect(screen.getAllByText("Test Subtitle").length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Icon Types", () => {
+    test("Renders success icon by default", () => {
+      setupTest();
+      // Success icon should be present
+      const container = document.querySelector(".bg-green-100");
+      expect(container).toBeInTheDocument();
+    });
+
+    test("Renders success icon when iconType is success", () => {
+      setupTest({ iconType: "success" });
+      const container = document.querySelector(".bg-green-100");
+      expect(container).toBeInTheDocument();
+    });
+
+    test("Renders error icon when iconType is error", () => {
+      setupTest({ iconType: "error" });
+      const container = document.querySelector(".bg-red-100");
+      expect(container).toBeInTheDocument();
+    });
+
+    test("Renders warning icon when iconType is warning", () => {
+      setupTest({ iconType: "warning" });
+      const container = document.querySelector(".bg-amber-100");
+      expect(container).toBeInTheDocument();
+    });
+
+    test("Renders info icon when iconType is info", () => {
+      setupTest({ iconType: "info" });
+      const container = document.querySelector(".bg-blue-100");
+      expect(container).toBeInTheDocument();
+    });
+
+    test("Renders custom icon when provided", () => {
+      setupTest({ customIcon: "https://example.com/icon.svg" });
+      const icon = screen.getAllByAltText("Status icon")[0];
+      expect(icon).toBeInTheDocument();
+      expect(icon.src).toContain("icon.svg");
+    });
+  });
+
+  describe("Profile Mode", () => {
+    test("Enables profile mode when image is provided", () => {
+      setupTest({
+        image: "https://example.com/profile.jpg",
+        title: "Profile Test"
+      });
+      const profileImage = screen.getAllByAltText("Profile Test")[0];
+      expect(profileImage).toBeInTheDocument();
+      expect(profileImage.src).toContain("profile.jpg");
+    });
+
+    test("Disables profile mode when image is not provided", () => {
+      setupTest({ title: "Standard Test" });
+      expect(screen.queryByAltText("Standard Test")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Button Behavior", () => {
+    test("Displays custom button text", () => {
+      setupTest({ buttonText: "Continue" });
+      expect(screen.getAllByText("Continue").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 });
+
+      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 });
+
+      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 });
+
+      const button = screen.getAllByText("Ok")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onconfirm).toHaveBeenCalledOnce();
+        expect(onclose).toHaveBeenCalledOnce();
+      });
+    });
+
+    test("Does not call callbacks when disabled", async () => {
+      const onconfirm = vi.fn();
+      const { user } = setupTest({ onconfirm, disabled: true });
+
+      const button = screen.getAllByText("Ok")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onconfirm).not.toHaveBeenCalled();
+      });
+    });
+
+    test("Does not call callbacks when loading", async () => {
+      const onconfirm = vi.fn();
+      const { user } = setupTest({ onconfirm, loading: true });
+
+      const button = screen.getAllByText("Ok")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onconfirm).not.toHaveBeenCalled();
+      });
+    });
+
+    test("Sets correct button variant for error type", () => {
+      setupTest({ iconType: "error", buttonText: "Retry" });
+      const buttons = screen.getAllByText("Retry");
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    test("Sets correct button variant for warning type", () => {
+      setupTest({ iconType: "warning", buttonText: "Proceed" });
+      const buttons = screen.getAllByText("Proceed");
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+
+    test("Sets correct button variant for success type", () => {
+      setupTest({ iconType: "success", buttonText: "Done" });
+      const buttons = screen.getAllByText("Done");
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Close Button", () => {
+    test("Does not render close button by default", () => {
+      setupTest();
+      const closeButtons = screen.queryAllByAltText("Close");
+      expect(closeButtons.length).toBe(0);
+    });
+
+    test("Renders close button when closeBtn is true", () => {
+      setupTest({ closeBtn: true });
+      const closeButtons = screen.getAllByAltText("Close");
+      expect(closeButtons.length).toBeGreaterThan(0);
+    });
+
+    test("Calls onclose when close button is clicked", async () => {
+      const onclose = vi.fn();
+      const { user } = setupTest({ closeBtn: true, onclose });
+
+      const closeButton = screen.getAllByAltText("Close")[0];
+      await user.click(closeButton);
+
+      await waitFor(() => {
+        expect(onclose).toHaveBeenCalledOnce();
+      });
+    });
+
+    test("Does not call onclose when disabled and close button clicked", async () => {
+      const onclose = vi.fn();
+      const { user } = setupTest({ closeBtn: true, onclose, disabled: true });
+
+      const closeButton = screen.getAllByAltText("Close")[0];
+      await user.click(closeButton);
+
+      await waitFor(() => {
+        expect(onclose).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Custom Actions", () => {
+    test("Renders custom actions when provided", () => {
+      setupTest({
+        actions: [
+          { label: "Cancel", onClick: vi.fn() },
+          { label: "Confirm", onClick: vi.fn() }
+        ]
+      });
+
+      expect(screen.getAllByText("Cancel").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Confirm").length).toBeGreaterThan(0);
+    });
+
+    test("Calls action onClick when action button is clicked", async () => {
+      const onClick = vi.fn();
+      const { user } = setupTest({
+        actions: [
+          { label: "Action", onClick }
+        ]
+      });
+
+      const button = screen.getAllByText("Action")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onClick).toHaveBeenCalledOnce();
+      });
+    });
+
+    test("Closes modal after action unless keepOpen is true", async () => {
+      const onclose = vi.fn();
+      const { user } = setupTest({
+        actions: [
+          { label: "Action", onClick: vi.fn() }
+        ],
+        onclose
+      });
+
+      const button = screen.getAllByText("Action")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onclose).toHaveBeenCalledOnce();
+      });
+    });
+
+    test("Does not close modal when keepOpen is true", async () => {
+      const onclose = vi.fn();
+      const { user } = setupTest({
+        actions: [
+          { label: "Action", onClick: vi.fn(), keepOpen: true }
+        ],
+        onclose
+      });
+
+      const button = screen.getAllByText("Action")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onclose).not.toHaveBeenCalled();
+      });
+    });
+
+    test("Applies red variant to delete actions", () => {
+      setupTest({
+        actions: [
+          { label: "Delete Item", onClick: vi.fn() }
+        ]
+      });
+
+      const button = screen.getAllByText("Delete Item")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Applies red variant to archive actions", () => {
+      setupTest({
+        actions: [
+          { label: "Archive Item", onClick: vi.fn() }
+        ]
+      });
+
+      const button = screen.getAllByText("Archive Item")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Applies red variant when danger flag is true", () => {
+      setupTest({
+        actions: [
+          { label: "Dangerous Action", onClick: vi.fn(), danger: true }
+        ]
+      });
+
+      const button = screen.getAllByText("Dangerous Action")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Applies default variant to continue actions", () => {
+      setupTest({
+        actions: [
+          { label: "Continue", onClick: vi.fn() }
+        ]
+      });
+
+      const button = screen.getAllByText("Continue")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Applies default variant to finish actions", () => {
+      setupTest({
+        actions: [
+          { label: "Finish", onClick: vi.fn() }
+        ]
+      });
+
+      const button = screen.getAllByText("Finish")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Applies default variant to done actions", () => {
+      setupTest({
+        actions: [
+          { label: "Done", onClick: vi.fn() }
+        ]
+      });
+
+      const button = screen.getAllByText("Done")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Applies alternative variant to other actions", () => {
+      setupTest({
+        actions: [
+          { label: "Other Action", onClick: vi.fn() }
+        ]
+      });
+
+      const button = screen.getAllByText("Other Action")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Respects custom variant on actions", () => {
+      setupTest({
+        actions: [
+          { label: "Custom", onClick: vi.fn(), variant: "default" }
+        ]
+      });
+
+      const button = screen.getAllByText("Custom")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Disables action button when action.disabled is true", async () => {
+      const onClick = vi.fn();
+      const { user } = setupTest({
+        actions: [
+          { label: "Disabled Action", onClick, disabled: true }
+        ]
+      });
+
+      const button = screen.getAllByText("Disabled Action")[0].closest('button');
+      expect(button).toBeDisabled();
+    });
+
+    test("Disables action button when modal is disabled", () => {
+      setupTest({
+        actions: [
+          { label: "Action", onClick: vi.fn() }
+        ],
+        disabled: true
+      });
+
+      const button = screen.getAllByText("Action")[0].closest('button');
+      expect(button).toBeDisabled();
+    });
+
+    test("Shows loading on primary action when modal is loading", () => {
+      setupTest({
+        actions: [
+          { label: "Primary", onClick: vi.fn(), primary: true }
+        ],
+        loading: true
+      });
+
+      const button = screen.getAllByText("Primary")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Shows loading on action when action.loading is true", () => {
+      setupTest({
+        actions: [
+          { label: "Loading Action", onClick: vi.fn(), loading: true }
+        ]
+      });
+
+      const button = screen.getAllByText("Loading Action")[0];
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Does not call action onClick when disabled", async () => {
+      const onClick = vi.fn();
+      const { user } = setupTest({
+        actions: [
+          { label: "Action", onClick }
+        ],
+        disabled: true
+      });
+
+      const button = screen.getAllByText("Action")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+
+    test("Does not call action onClick when loading", async () => {
+      const onClick = vi.fn();
+      const { user } = setupTest({
+        actions: [
+          { label: "Action", onClick }
+        ],
+        loading: true
+      });
+
+      const button = screen.getAllByText("Action")[0];
+      await user.click(button);
+
+      await waitFor(() => {
+        expect(onClick).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Size Prop", () => {
+    test("Accepts small size prop", () => {
+      setupTest({ size: "small" });
+      expect(screen.getAllByText("Test Status").length).toBeGreaterThan(0);
+    });
+
+    test("Accepts medium size prop", () => {
+      setupTest({ size: "medium" });
+      expect(screen.getAllByText("Test Status").length).toBeGreaterThan(0);
+    });
+
+    test("Accepts large size prop", () => {
+      setupTest({ size: "large" });
+      expect(screen.getAllByText("Test Status").length).toBeGreaterThan(0);
+    });
+  });
+
+  describe("Variant Override", () => {
+    test("Uses variant prop over iconType when both provided", () => {
+      setupTest({ iconType: "success", variant: "error" });
+      const container = document.querySelector(".bg-red-100");
+      expect(container).toBeInTheDocument();
+    });
+
+    test("Falls back to iconType when variant not provided", () => {
+      setupTest({ iconType: "warning" });
+      const container = document.querySelector(".bg-amber-100");
+      expect(container).toBeInTheDocument();
+    });
+  });
+
+  describe("Modal Close Behavior", () => {
+    test("Closes modal when backdrop is clicked", async () => {
+      const onclose = vi.fn();
+      const { user } = setupTest({ onclose });
+
+      // Find backdrop and click it
+      const backdrop = document.querySelector('[data-testid="modal-backdrop"]');
+      if (backdrop) {
+        await user.click(backdrop);
+        await waitFor(() => {
+          expect(onclose).toHaveBeenCalled();
+        });
+      }
+    });
+
+    test("Does not close when disabled and backdrop clicked", async () => {
+      const onclose = vi.fn();
+      const { user } = setupTest({ onclose, disabled: true });
+
+      const backdrop = document.querySelector('[data-testid="modal-backdrop"]');
+      if (backdrop) {
+        await user.click(backdrop);
+        await waitFor(() => {
+          expect(onclose).not.toHaveBeenCalled();
+        });
+      }
+    });
+  });
+
+  describe("Edge Cases", () => {
+    test("Handles undefined callbacks gracefully", async () => {
+      const { user } = setupTest({ onconfirm: undefined, onclose: undefined });
+
+      const button = screen.getAllByText("Ok")[0];
+      await user.click(button);
+
+      // Should not throw error
+      expect(button).toBeInTheDocument();
+    });
+
+    test("Handles empty actions array", () => {
+      setupTest({ actions: [] });
+      // Should render default button
+      expect(screen.getAllByText("Ok").length).toBeGreaterThan(0);
+    });
+
+    test("Handles all props together", () => {
+      setupTest({
+        title: "Complete Title",
+        subtitle: "Complete Subtitle",
+        description: "Complete Description",
+        buttonText: "Complete Button",
+        iconType: "success",
+        image: "https://example.com/image.jpg",
+        closeBtn: true,
+        disabled: false,
+        loading: false,
+        size: "large"
+      });
+
+      expect(screen.getAllByText("Complete Title").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Complete Subtitle").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Complete Description").length).toBeGreaterThan(0);
+    });
+
+    test("Handles empty strings for all text props", () => {
+      setupTest({
+        title: "",
+        subtitle: "",
+        description: "",
+        buttonText: ""
+      });
+
+      // Should still render with empty button text
+      const buttons = document.querySelectorAll("button");
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+  });
+});