@getmicdrop/svelte-components 5.5.1 → 5.5.5

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

@@ -0,0 +1,872 @@
+import { render, screen, waitFor } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi, afterEach } from "vitest";
+import InputModal from "./InputModal.svelte";
+import { ExclamationTriangleOutline } from "../../primitives/Icons";
+
+function setupTest(args = {}) {
+  const user = userEvent.setup();
+  const { component } = render(InputModal, {
+    props: {
+      show: true,
+      title: "Test Input Modal",
+      ...args,
+    },
+  });
+  return { user, component };
+}
+
+describe("InputModal 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
+
+  // Basic rendering tests
+  test("Does not render when show is false", () => {
+    render(InputModal, { props: { show: false } });
+    expect(screen.queryByText("Test Input Modal")).not.toBeInTheDocument();
+  });
+
+  test("Renders when show is true", () => {
+    setupTest();
+    expect(screen.getAllByText("Test Input Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Displays title", () => {
+    setupTest({ title: "Enter Your Name" });
+    expect(screen.getAllByText("Enter Your Name").length).toBeGreaterThan(0);
+  });
+
+  test("Displays description", () => {
+    setupTest({ description: "Please provide your full name" });
+    expect(screen.getAllByText("Please provide your full name").length).toBeGreaterThan(0);
+  });
+
+  test("Hides title when not provided", () => {
+    setupTest({ title: "" });
+    const headings = screen.queryAllByRole("heading", { level: 3 });
+    expect(headings.length).toBe(0);
+  });
+
+  test("Hides description when not provided", () => {
+    setupTest({ description: "" });
+    const descriptions = screen.queryByText(/Please provide/);
+    expect(descriptions).not.toBeInTheDocument();
+  });
+
+  // Input label tests
+  test("Displays input label", () => {
+    setupTest({ inputLabel: "Email Address" });
+    expect(screen.getAllByText("Email Address").length).toBeGreaterThan(0);
+  });
+
+  test("Hides input label when not provided", () => {
+    setupTest({ inputLabel: "" });
+    const labels = document.querySelectorAll("label");
+    expect(labels.length).toBe(0);
+  });
+
+  // Input placeholder tests
+  test("Displays input placeholder", () => {
+    setupTest({ inputPlaceholder: "Enter your email" });
+    expect(screen.getAllByPlaceholderText("Enter your email").length).toBeGreaterThan(0);
+  });
+
+  // Input type tests
+  test("Renders text input by default", () => {
+    setupTest();
+    const inputs = document.querySelectorAll("input[type='text']");
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  test("Renders email input", () => {
+    setupTest({ inputType: "email" });
+    const inputs = document.querySelectorAll("input[type='email']");
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  test("Renders password input", () => {
+    setupTest({ inputType: "password" });
+    const inputs = document.querySelectorAll("input[type='password']");
+    expect(inputs.length).toBeGreaterThan(0);
+  });
+
+  test("Renders textarea", () => {
+    setupTest({ inputType: "textarea", inputRows: 4 });
+    const textareas = document.querySelectorAll("textarea");
+    expect(textareas.length).toBeGreaterThan(0);
+  });
+
+  test("Textarea has correct rows", () => {
+    setupTest({ inputType: "textarea", inputRows: 6 });
+    const textarea = document.querySelector("textarea");
+    expect(textarea).toHaveAttribute("rows", "6");
+  });
+
+  // Input value binding tests
+  test("Input binds to inputValue", async () => {
+    const { user } = setupTest({ inputValue: "initial value" });
+    const input = screen.getAllByDisplayValue("initial value")[0];
+    expect(input).toBeInTheDocument();
+
+    await user.clear(input);
+    await user.type(input, "new value");
+    expect(input).toHaveValue("new value");
+  });
+
+  test("Textarea binds to inputValue", async () => {
+    const { user } = setupTest({
+      inputType: "textarea",
+      inputValue: "initial text"
+    });
+    const textarea = screen.getAllByDisplayValue("initial text")[0];
+    expect(textarea).toBeInTheDocument();
+
+    await user.clear(textarea);
+    await user.type(textarea, "new text");
+    expect(textarea).toHaveValue("new text");
+  });
+
+  // Input icon tests
+  test("Renders with input icon", () => {
+    setupTest({ inputIcon: ExclamationTriangleOutline });
+    const iconContainer = document.querySelector(".absolute.inset-y-0.left-0");
+    expect(iconContainer).toBeInTheDocument();
+  });
+
+  test("Input has left padding when icon is present", () => {
+    setupTest({ inputIcon: ExclamationTriangleOutline });
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("pl-10");
+  });
+
+  test("Input has regular padding when no icon", () => {
+    setupTest();
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("px-3");
+  });
+
+  // Help text tests
+  test("Displays help text", () => {
+    setupTest({ helpText: "This is a helpful hint" });
+    expect(screen.getAllByText("This is a helpful hint").length).toBeGreaterThan(0);
+  });
+
+  test("Hides help text when error is shown", () => {
+    setupTest({
+      helpText: "This is a helpful hint",
+      showError: true,
+      errorMessage: "Error message"
+    });
+    expect(screen.queryByText("This is a helpful hint")).not.toBeInTheDocument();
+  });
+
+  // Email validation tests
+  test("Shows email error for invalid email", async () => {
+    const { user } = setupTest({ validateEmail: true, inputValue: "" });
+    const input = document.querySelector("input");
+
+    await user.type(input, "invalid-email");
+
+    await waitFor(() => {
+      expect(screen.getAllByText("Please enter a valid email address").length).toBeGreaterThan(0);
+    });
+  });
+
+  test("Does not show email error for valid email", async () => {
+    const { user } = setupTest({ validateEmail: true, inputValue: "" });
+    const input = document.querySelector("input");
+
+    await user.type(input, "valid@email.com");
+
+    await waitFor(() => {
+      expect(screen.queryByText("Please enter a valid email address")).not.toBeInTheDocument();
+    });
+  });
+
+  test("Email validation does not run when validateEmail is false", async () => {
+    const { user } = setupTest({ validateEmail: false, inputValue: "" });
+    const input = document.querySelector("input");
+
+    await user.type(input, "invalid-email");
+
+    expect(screen.queryByText("Please enter a valid email address")).not.toBeInTheDocument();
+  });
+
+  // Error message tests
+  test("Shows error message when showError is true", () => {
+    setupTest({
+      showError: true,
+      errorMessage: "This field is required"
+    });
+    expect(screen.getAllByText("This field is required").length).toBeGreaterThan(0);
+  });
+
+  test("Error message has error icon", () => {
+    setupTest({
+      showError: true,
+      errorMessage: "This field is required"
+    });
+    const errorContainer = screen.getAllByText("This field is required")[0].parentElement;
+    const icon = errorContainer?.querySelector("svg");
+    expect(icon).toBeInTheDocument();
+  });
+
+  test("Input has error border when error is shown", () => {
+    setupTest({
+      showError: true,
+      errorMessage: "Error"
+    });
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("border-red-500");
+  });
+
+  test("Textarea has error border when error is shown", () => {
+    setupTest({
+      inputType: "textarea",
+      showError: true,
+      errorMessage: "Error"
+    });
+    const textarea = document.querySelector("textarea");
+    expect(textarea).toHaveClass("border-red-500");
+  });
+
+  test("Email error takes precedence over custom error message", async () => {
+    const { user } = setupTest({
+      validateEmail: true,
+      showError: true,
+      errorMessage: "Custom error",
+      inputValue: ""
+    });
+    const input = document.querySelector("input");
+
+    await user.type(input, "invalid-email");
+
+    await waitFor(() => {
+      expect(screen.getAllByText("Please enter a valid email address").length).toBeGreaterThan(0);
+      expect(screen.queryByText("Custom error")).not.toBeInTheDocument();
+    });
+  });
+
+  // Required field tests
+  test("Primary button is disabled when required field is empty", () => {
+    setupTest({ inputRequired: true, inputValue: "" });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).toBeDisabled();
+  });
+
+  test("Primary button is enabled when required field has value", () => {
+    setupTest({ inputRequired: true, inputValue: "some value" });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).not.toBeDisabled();
+  });
+
+  test("Primary button is disabled when required field has only whitespace", () => {
+    setupTest({ inputRequired: true, inputValue: "   " });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).toBeDisabled();
+  });
+
+  test("Input has required attribute when inputRequired is true", () => {
+    setupTest({ inputRequired: true });
+    const input = document.querySelector("input");
+    expect(input).toHaveAttribute("required");
+  });
+
+  // Button text tests
+  test("Displays custom primary button text", () => {
+    setupTest({ primaryButtonText: "Submit" });
+    expect(screen.getAllByText("Submit").length).toBeGreaterThan(0);
+  });
+
+  test("Displays default primary button text", () => {
+    setupTest();
+    expect(screen.getAllByText("Confirm").length).toBeGreaterThan(0);
+  });
+
+  test("Displays custom secondary button text", () => {
+    setupTest({ secondaryButtonText: "Go Back" });
+    expect(screen.getAllByText("Go Back").length).toBeGreaterThan(0);
+  });
+
+  test("Displays default secondary button text", () => {
+    setupTest();
+    expect(screen.getAllByText("Cancel").length).toBeGreaterThan(0);
+  });
+
+  test("Hides secondary button when text is empty", () => {
+    setupTest({ secondaryButtonText: "" });
+    expect(screen.queryByText("Cancel")).not.toBeInTheDocument();
+  });
+
+  // Button variant tests
+  test("Primary button uses blue-solid variant by default", () => {
+    setupTest();
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).toHaveClass("bg-blue-700");
+  });
+
+  test("Primary button uses red-solid variant", () => {
+    setupTest({ primaryButtonVariant: "red-solid" });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).toHaveClass("bg-red-700");
+  });
+
+  test("Secondary button uses alternative variant", () => {
+    setupTest();
+    const buttons = screen.getAllByText("Cancel");
+    const secondaryButton = buttons[0].closest("button");
+    expect(secondaryButton).toHaveClass("border-gray-200");
+  });
+
+  // Disabled state tests
+  test("Input is disabled when disabled prop is true", () => {
+    setupTest({ disabled: true });
+    const input = document.querySelector("input");
+    expect(input).toBeDisabled();
+  });
+
+  test("Textarea is disabled when disabled prop is true", () => {
+    setupTest({ inputType: "textarea", disabled: true });
+    const textarea = document.querySelector("textarea");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("Input is disabled when loading is true", () => {
+    setupTest({ loading: true });
+    const input = document.querySelector("input");
+    expect(input).toBeDisabled();
+  });
+
+  test("Primary button is disabled when disabled prop is true", () => {
+    setupTest({ disabled: true });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).toBeDisabled();
+  });
+
+  test("Primary button is disabled when loading is true", () => {
+    setupTest({ loading: true });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    expect(primaryButton).toBeDisabled();
+  });
+
+  test("Primary button is disabled when email is invalid", async () => {
+    const { user } = setupTest({ validateEmail: true, inputValue: "" });
+    const input = document.querySelector("input");
+
+    await user.type(input, "invalid-email");
+
+    await waitFor(() => {
+      const buttons = screen.getAllByText("Confirm");
+      const primaryButton = buttons[0].closest("button");
+      expect(primaryButton).toBeDisabled();
+    });
+  });
+
+  test("Secondary button is disabled when disabled prop is true", () => {
+    setupTest({ disabled: true });
+    const buttons = screen.getAllByText("Cancel");
+    const secondaryButton = buttons[0].closest("button");
+    expect(secondaryButton).toBeDisabled();
+  });
+
+  test("Secondary button is disabled when loading is true", () => {
+    setupTest({ loading: true });
+    const buttons = screen.getAllByText("Cancel");
+    const secondaryButton = buttons[0].closest("button");
+    expect(secondaryButton).toBeDisabled();
+  });
+
+  test("Input has disabled styling", () => {
+    setupTest({ disabled: true });
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("disabled:opacity-50");
+    expect(input).toHaveClass("disabled:cursor-not-allowed");
+  });
+
+  // Loading state tests
+  test("Primary button shows loading state", () => {
+    setupTest({ loading: true });
+    const buttons = screen.getAllByText("Confirm");
+    const primaryButton = buttons[0].closest("button");
+    // Button component handles loading spinner display
+    expect(primaryButton).toBeDisabled();
+  });
+
+  // Callback tests
+  test("Calls onconfirm with input value when primary button clicked", async () => {
+    const onconfirm = vi.fn();
+    const { user } = setupTest({
+      onconfirm,
+      inputValue: "test value"
+    });
+
+    const button = screen.getAllByText("Confirm")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+      expect(onconfirm).toHaveBeenCalledWith({ value: "test value" });
+    });
+  });
+
+  test("Does not call onconfirm when primary button is disabled", async () => {
+    const onconfirm = vi.fn();
+    const { user } = setupTest({
+      onconfirm,
+      disabled: true
+    });
+
+    const button = screen.getAllByText("Confirm")[0];
+    await user.click(button);
+
+    // Wait a bit to ensure no calls were made
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(onconfirm).not.toHaveBeenCalled();
+  });
+
+  test("Calls oncancel when secondary button clicked", async () => {
+    const oncancel = vi.fn();
+    const { user } = setupTest({ oncancel });
+
+    const button = screen.getAllByText("Cancel")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(oncancel).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Calls onclose when secondary button clicked", async () => {
+    const onclose = vi.fn();
+    const { user } = setupTest({ onclose });
+
+    const button = screen.getAllByText("Cancel")[0];
+    await user.click(button);
+
+    await waitFor(() => {
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Does not call oncancel when secondary button is disabled", async () => {
+    const oncancel = vi.fn();
+    const { user } = setupTest({
+      oncancel,
+      disabled: true
+    });
+
+    const button = screen.getAllByText("Cancel")[0];
+    await user.click(button);
+
+    // Wait a bit to ensure no calls were made
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(oncancel).not.toHaveBeenCalled();
+  });
+
+  // Close button tests
+  test("Shows close button when closeBtn is true", () => {
+    setupTest({ closeBtn: true });
+    const closeButton = document.querySelector("img[alt='Close']");
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  test("Hides close button by default", () => {
+    setupTest();
+    const closeButton = document.querySelector("img[alt='Close']");
+    expect(closeButton).not.toBeInTheDocument();
+  });
+
+  test("Calls onclose when close button is clicked", async () => {
+    const onclose = vi.fn();
+    const { user } = setupTest({ closeBtn: true, onclose });
+
+    const closeButton = document.querySelector("img[alt='Close']")?.closest("button");
+    await user.click(closeButton);
+
+    await waitFor(() => {
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Close button is disabled when disabled prop is true", () => {
+    setupTest({ closeBtn: true, disabled: true });
+    const closeButton = document.querySelector("img[alt='Close']")?.closest("button");
+    expect(closeButton).toBeDisabled();
+  });
+
+  test("Close button does not call onclose when loading is true", async () => {
+    const onclose = vi.fn();
+    const { user } = setupTest({ closeBtn: true, loading: true, onclose });
+
+    const closeButton = document.querySelector("img[alt='Close']")?.closest("button");
+    // Button is not visibly disabled but handleClose prevents action
+    await user.click(closeButton);
+
+    // Wait a bit to ensure no calls were made
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test("Does not call onclose when close button is disabled", async () => {
+    const onclose = vi.fn();
+    const { user } = setupTest({
+      closeBtn: true,
+      disabled: true,
+      onclose
+    });
+
+    const closeButton = document.querySelector("img[alt='Close']")?.closest("button");
+    await user.click(closeButton);
+
+    // Wait a bit to ensure no calls were made
+    await new Promise(resolve => setTimeout(resolve, 100));
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  // Size prop test
+  test("Passes size prop to Modal", () => {
+    setupTest({ size: "large" });
+    // Modal component receives the size prop
+    expect(screen.getAllByText("Test Input Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Uses default size", () => {
+    setupTest();
+    // Default size is "default"
+    expect(screen.getAllByText("Test Input Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Accepts small size", () => {
+    setupTest({ size: "small" });
+    expect(screen.getAllByText("Test Input Modal").length).toBeGreaterThan(0);
+  });
+
+  // Persistent modal tests
+  test("Modal is not persistent by default", () => {
+    setupTest();
+    // persistent prop is passed to Modal component
+    expect(screen.getAllByText("Test Input Modal").length).toBeGreaterThan(0);
+  });
+
+  test("Modal can be persistent", () => {
+    setupTest({ persistent: true });
+    // persistent prop is passed to Modal component
+    expect(screen.getAllByText("Test Input Modal").length).toBeGreaterThan(0);
+  });
+
+  // Layout and styling tests
+  test("Header has text-left alignment", () => {
+    setupTest({ title: "Test Title" });
+    const header = screen.getAllByText("Test Title")[0].closest(".text-left");
+    expect(header).toBeInTheDocument();
+  });
+
+  test("Body has text-left alignment", () => {
+    setupTest({ description: "Test Description" });
+    const body = screen.getAllByText("Test Description")[0].closest(".text-left");
+    expect(body).toBeInTheDocument();
+  });
+
+  test("Footer buttons have gap spacing", () => {
+    setupTest();
+    const footer = document.querySelector(".flex.gap-3");
+    expect(footer).toBeInTheDocument();
+  });
+
+  test("Input has proper focus styling classes", () => {
+    setupTest();
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("focus:ring-2");
+    expect(input).toHaveClass("focus:ring-blue-500");
+    expect(input).toHaveClass("focus:border-transparent");
+  });
+
+  test("Textarea has proper focus styling classes", () => {
+    setupTest({ inputType: "textarea" });
+    const textarea = document.querySelector("textarea");
+    expect(textarea).toHaveClass("focus:ring-2");
+    expect(textarea).toHaveClass("focus:ring-blue-500");
+    expect(textarea).toHaveClass("focus:border-transparent");
+  });
+
+  test("Textarea has resize-none class", () => {
+    setupTest({ inputType: "textarea" });
+    const textarea = document.querySelector("textarea");
+    expect(textarea).toHaveClass("resize-none");
+  });
+
+  test("Input label has proper margin", () => {
+    setupTest({ inputLabel: "Test Label" });
+    const label = screen.getAllByText("Test Label")[0];
+    expect(label).toHaveClass("mb-2");
+  });
+
+  // Dark mode styling tests
+  test("Input has dark mode classes", () => {
+    setupTest();
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("dark:bg-gray-700");
+  });
+
+  test("Textarea has dark mode classes", () => {
+    setupTest({ inputType: "textarea" });
+    const textarea = document.querySelector("textarea");
+    expect(textarea).toHaveClass("dark:bg-gray-700");
+    expect(textarea).toHaveClass("dark:border-gray-600");
+  });
+
+  test("Input has dark mode border classes", () => {
+    setupTest();
+    const input = document.querySelector("input");
+    expect(input).toHaveClass("dark:bg-gray-700");
+  });
+
+  test("Error message has dark mode classes", () => {
+    setupTest({
+      showError: true,
+      errorMessage: "Test error"
+    });
+    const errorText = screen.getAllByText("Test error")[0];
+    expect(errorText).toHaveClass("dark:text-red-400");
+  });
+
+  // Integration tests
+  test("Full text input flow", async () => {
+    const onconfirm = vi.fn();
+    const onclose = vi.fn();
+    const { user } = setupTest({
+      title: "Enter Name",
+      description: "Please enter your full name",
+      inputLabel: "Full Name",
+      inputPlaceholder: "John Doe",
+      inputRequired: true,
+      primaryButtonText: "Submit",
+      onconfirm,
+      onclose,
+    });
+
+    // Verify content
+    expect(screen.getAllByText("Enter Name").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Please enter your full name").length).toBeGreaterThan(0);
+    expect(screen.getAllByText("Full Name").length).toBeGreaterThan(0);
+
+    // Primary button should be disabled (empty required field)
+    let button = screen.getAllByText("Submit")[0].closest("button");
+    expect(button).toBeDisabled();
+
+    // Type in input
+    const input = screen.getAllByPlaceholderText("John Doe")[0];
+    await user.type(input, "Jane Smith");
+
+    // Primary button should now be enabled
+    await waitFor(() => {
+      button = screen.getAllByText("Submit")[0].closest("button");
+      expect(button).not.toBeDisabled();
+    });
+
+    // Click submit
+    await user.click(button);
+
+    // Verify callback was called with input value
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+      expect(onconfirm).toHaveBeenCalledWith({ value: "Jane Smith" });
+    });
+  });
+
+  test("Full email validation flow", async () => {
+    const onconfirm = vi.fn();
+    const { user } = setupTest({
+      title: "Enter Email",
+      inputLabel: "Email Address",
+      inputType: "email",
+      validateEmail: true,
+      inputRequired: true,
+      onconfirm,
+    });
+
+    const input = document.querySelector("input");
+
+    // Type invalid email
+    await user.type(input, "invalid-email");
+
+    await waitFor(() => {
+      // Should show error
+      expect(screen.getAllByText("Please enter a valid email address").length).toBeGreaterThan(0);
+
+      // Primary button should be disabled
+      const button = screen.getAllByText("Confirm")[0].closest("button");
+      expect(button).toBeDisabled();
+    });
+
+    // Clear and type valid email
+    await user.clear(input);
+    await user.type(input, "valid@email.com");
+
+    await waitFor(() => {
+      // Error should be gone
+      expect(screen.queryByText("Please enter a valid email address")).not.toBeInTheDocument();
+
+      // Primary button should be enabled
+      const button = screen.getAllByText("Confirm")[0].closest("button");
+      expect(button).not.toBeDisabled();
+    });
+
+    // Click confirm
+    const button = screen.getAllByText("Confirm")[0].closest("button");
+    await user.click(button);
+
+    // Verify callback
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+      expect(onconfirm).toHaveBeenCalledWith({ value: "valid@email.com" });
+    });
+  });
+
+  test("Full textarea flow", async () => {
+    const onconfirm = vi.fn();
+    const oncancel = vi.fn();
+    const { user } = setupTest({
+      title: "Leave a Comment",
+      inputType: "textarea",
+      inputRows: 5,
+      inputLabel: "Your Comment",
+      inputPlaceholder: "Type your comment here...",
+      helpText: "Maximum 500 characters",
+      primaryButtonText: "Post Comment",
+      secondaryButtonText: "Discard",
+      onconfirm,
+      oncancel,
+    });
+
+    // Verify textarea is rendered
+    const textarea = screen.getAllByPlaceholderText("Type your comment here...")[0];
+    expect(textarea.tagName).toBe("TEXTAREA");
+    expect(textarea).toHaveAttribute("rows", "5");
+
+    // Verify help text
+    expect(screen.getAllByText("Maximum 500 characters").length).toBeGreaterThan(0);
+
+    // Type in textarea
+    await user.type(textarea, "This is my comment");
+
+    // Click post
+    const postButton = screen.getAllByText("Post Comment")[0];
+    await user.click(postButton);
+
+    await waitFor(() => {
+      expect(onconfirm).toHaveBeenCalledOnce();
+      expect(onconfirm).toHaveBeenCalledWith({ value: "This is my comment" });
+    });
+  });
+
+  test("Cancel flow", async () => {
+    const oncancel = vi.fn();
+    const onclose = vi.fn();
+    const { user } = setupTest({
+      oncancel,
+      onclose,
+    });
+
+    const cancelButton = screen.getAllByText("Cancel")[0];
+    await user.click(cancelButton);
+
+    await waitFor(() => {
+      expect(oncancel).toHaveBeenCalledOnce();
+      expect(onclose).toHaveBeenCalledOnce();
+    });
+  });
+
+  test("Disabled state prevents all interactions", async () => {
+    const onconfirm = vi.fn();
+    const oncancel = vi.fn();
+    const onclose = vi.fn();
+    const { user } = setupTest({
+      disabled: true,
+      closeBtn: true,
+      inputValue: "test",
+      onconfirm,
+      oncancel,
+      onclose,
+    });
+
+    // Input should be disabled
+    const input = document.querySelector("input");
+    expect(input).toBeDisabled();
+
+    // Primary button should be disabled
+    const primaryButton = screen.getAllByText("Confirm")[0].closest("button");
+    expect(primaryButton).toBeDisabled();
+    await user.click(primaryButton);
+
+    // Secondary button should be disabled
+    const secondaryButton = screen.getAllByText("Cancel")[0].closest("button");
+    expect(secondaryButton).toBeDisabled();
+    await user.click(secondaryButton);
+
+    // Close button should be disabled
+    const closeButton = document.querySelector("img[alt='Close']")?.closest("button");
+    expect(closeButton).toBeDisabled();
+    await user.click(closeButton);
+
+    // Wait a bit
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // No callbacks should have been called
+    expect(onconfirm).not.toHaveBeenCalled();
+    expect(oncancel).not.toHaveBeenCalled();
+    expect(onclose).not.toHaveBeenCalled();
+  });
+
+  test("Loading state prevents all interactions", async () => {
+    const onconfirm = vi.fn();
+    const oncancel = vi.fn();
+    const onclose = vi.fn();
+    const { user } = setupTest({
+      loading: true,
+      closeBtn: true,
+      inputValue: "test",
+      onconfirm,
+      oncancel,
+      onclose,
+    });
+
+    // Input should be disabled
+    const input = document.querySelector("input");
+    expect(input).toBeDisabled();
+
+    // Primary button should be disabled
+    const primaryButton = screen.getAllByText("Confirm")[0].closest("button");
+    expect(primaryButton).toBeDisabled();
+    await user.click(primaryButton);
+
+    // Secondary button should be disabled
+    const secondaryButton = screen.getAllByText("Cancel")[0].closest("button");
+    expect(secondaryButton).toBeDisabled();
+    await user.click(secondaryButton);
+
+    // Close button is not visibly disabled but handleClose prevents action
+    const closeButton = document.querySelector("img[alt='Close']")?.closest("button");
+    await user.click(closeButton);
+
+    // Wait a bit
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // No callbacks should have been called
+    expect(onconfirm).not.toHaveBeenCalled();
+    expect(oncancel).not.toHaveBeenCalled();
+    expect(onclose).not.toHaveBeenCalled();
+  });
+});