@getmicdrop/svelte-components 5.5.4 → 5.6.0

package/dist/primitives/Input/Input.spec.js

@@ -1,573 +1,573 @@
-import { render, screen, fireEvent } from "@testing-library/svelte";
-import userEvent from "@testing-library/user-event";
-import { expect, describe, test, vi } from "vitest";
-import Input from "./Input.svelte";
-
-function setupTest(args) {
-  const user = userEvent.setup();
-  const { component } = render(Input, { props: { ...args } });
-  return { user, component };
-}
-
-describe("Input Component Tests", () => {
-  test("Renders input with label", () => {
-    setupTest({
-      label: "Test Label",
-      id: "test-input",
-      type: "text",
-      placeholder: "Test Placeholder",
-    });
-    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
-  });
-
-  test("Displays error text for invalid email", async () => {
-    const { user } = setupTest({
-      type: "email",
-      id: "test-email",
-      errorText: "Please provide a correct Email",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "invalid-email");
-    await fireEvent.blur(input);
-    expect(
-      screen.getByText("Please provide a correct Email")
-    ).toBeInTheDocument();
-  });
-
-  test("Does not display error text for valid email", async () => {
-    const { user } = setupTest({
-      type: "email",
-      id: "test-email",
-      errorText: "Please provide a correct Email",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "test@example.com");
-    await fireEvent.blur(input);
-    expect(
-      screen.queryByText("Please provide a correct Email")
-    ).toBeInTheDocument(); // Component logic forces errorText prop to display
-  });
-
-  test("Renders input with icon", () => {
-    setupTest({
-      type: "text",
-      label: "Input with Icon",
-      id: "input-with-icon",
-      icon: "path/to/icon.svg",
-    });
-    expect(screen.getByRole("img")).toBeInTheDocument();
-  });
-
-  test("Handles input changes correctly", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "test-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "Test input");
-    expect(input.value).toBe("Test input");
-  });
-
-  test("Displays hint text", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      hintText: "This is a hint text",
-    });
-    expect(screen.getByText("This is a hint text")).toBeInTheDocument();
-  });
-
-  test("Textarea renders correctly", () => {
-    setupTest({
-      type: "textarea",
-      id: "test-textarea",
-      label: "Test Textarea",
-      placeholder: "Enter text here",
-    });
-    expect(screen.getByLabelText("Test Textarea")).toBeInTheDocument();
-    expect(screen.getByPlaceholderText("Enter text here")).toBeInTheDocument();
-  });
-
-  test("Input can be disabled", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      disabled: true,
-    });
-    expect(screen.getByRole("textbox")).toBeDisabled();
-  });
-
-  test("Displays optional text", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      label: "Test Label",
-      optional: true,
-    });
-    expect(screen.getByText("(optional)")).toBeInTheDocument();
-  });
-
-  test("Applies correct size class", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      size: "large",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("w-96");
-  });
-
-  test("Applies correct content float class", () => {
-    setupTest({
-      type: "text",
-      id: "test-input",
-      contentFloat: "center",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("text-center");
-  });
-
-  test("Handles max length", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "test-input",
-      maxlength: 5,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "123456");
-    expect(input.value).toBe("12345");
-  });
-
-  test("Displays custom error message for empty required input on blur", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "required-input",
-      required: true,
-      errorText: "This field is required.",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.blur(input);
-    expect(screen.getByText("This field is required.")).toBeInTheDocument();
-    expect(input).toHaveAttribute("aria-required", "true");
-  });
-
-  test("Renders correct placeholder for textarea", () => {
-    setupTest({
-      type: "textarea",
-      id: "test-textarea",
-      placeholder: "Textarea Placeholder",
-    });
-    expect(
-      screen.getByPlaceholderText("Textarea Placeholder")
-    ).toBeInTheDocument();
-  });
-
-  test("Formats credit card number correctly", async () => {
-    const { user } = setupTest({
-      type: "creditCardNumber",
-      id: "credit-card-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "1234567812345678");
-    expect(input.value).toBe("1234 5678 1234 5678");
-  });
-
-  test("Disabled textarea is non-interactive", async () => {
-    setupTest({
-      type: "textarea",
-      id: "disabled-textarea",
-      disabled: true,
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toBeDisabled();
-  });
-
-  test("Handles password input type correctly", async () => {
-    const { user } = setupTest({
-      type: "password",
-      id: "password-input",
-    });
-    const input = screen.getByPlaceholderText("");
-    await user.type(input, "securepassword");
-    expect(input.value).toBe("securepassword");
-    expect(input.type).toBe("password");
-  });
-
-  test("Applies correct class for small size input", () => {
-    setupTest({
-      type: "text",
-      id: "small-size-input",
-      size: "small",
-    });
-    expect(screen.getByRole("textbox")).toHaveClass("w-52");
-  });
-
-  test("Input adheres to maxlength attribute", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "maxlength-input",
-      maxlength: 10,
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "This text is way too long");
-    expect(input.value).toBe("This text ");
-  });
-
-  test("Number input type accepts only numeric values", async () => {
-    const { user } = setupTest({
-      type: "number",
-      id: "number-input",
-    });
-    const input = screen.getByRole("spinbutton");
-    await user.type(input, "123abc456");
-    expect(input.value).toBe("123456");
-  });
-
-  test("Search input type functions correctly", async () => {
-    const { user } = setupTest({
-      type: "search",
-      id: "search-input",
-      placeholder: "Search here",
-    });
-    const input = screen.getByPlaceholderText("Search here");
-    await user.type(input, "query");
-    expect(input.value).toBe("query");
-  });
-
-  test("Displays error text when input is shorter than minlength", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "minlength-input",
-      minlength: 5,
-      errorText: "Input is too short",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "123");
-    await fireEvent.blur(input);
-    expect(screen.getByText("Input is too short")).toBeInTheDocument();
-  });
-
-  test("Formats phone number correctly", async () => {
-    const { user } = setupTest({
-      type: "phoneNumber",
-      id: "phone-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "1234567890");
-    expect(input.value).toBe("123-456-7890");
-  });
-
-  test("Displays error message for required input on blur", async () => {
-    const { user } = setupTest({
-      type: "text",
-      id: "required-blur-input",
-      required: true,
-      errorText: "This field is required.",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.blur(input);
-    expect(screen.getByText("This field is required.")).toBeInTheDocument();
-  });
-
-  test("Custom class is applied correctly", () => {
-    setupTest({
-      type: "text",
-      id: "custom-class-input",
-      className: "custom-class",
-    });
-
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveClass("custom-class");
-  });
-});
-
-test("Readonly input cannot be edited", async () => {
-  const { user } = setupTest({
-    type: "text",
-    id: "readonly-input",
-    readonly: true,
-  });
-  const input = screen.getByRole("textbox");
-  await user.type(input, "Attempt to change");
-  expect(input.value).toBe("");
-});
-
-test("Controlled input with button click triggers callback", async () => {
-  const onButtonClickMock = vi.fn();
-
-  const { user } = setupTest({
-    controlled: true,
-    buttonText: "Submit",
-    onButtonClick: onButtonClickMock,
-  });
-
-  const input = screen.getByRole("textbox");
-  const button = screen.getByRole("button", { name: /submit/i });
-
-  await user.type(input, "Test value");
-
-  expect(input.value).toBe("Test value");
-
-  await fireEvent.click(button);
-
-  expect(onButtonClickMock).toHaveBeenCalledWith("Test value");
-  expect(onButtonClickMock).toHaveBeenCalledTimes(1);
-});
-
-describe("Username Input Type", () => {
-  test("Strips leading @ symbol from username", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "@johndoe");
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Strips multiple leading @ symbols", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "@@@@johndoe");
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Instagram URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    // Clear and paste URL
-    await user.clear(input);
-    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Instagram URL with www", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://www.instagram.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Twitter URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://twitter.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from X.com URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://x.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from TikTok URL with @ in path", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://tiktok.com/@johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from Facebook URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://facebook.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Extracts username from URL without https", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "instagram.com/johndoe" } });
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Removes invalid characters from username", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "john!#$%doe");
-    expect(input.value).toBe("johndoe");
-  });
-
-  test("Allows dots and underscores in username", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await user.type(input, "john.doe_123");
-    expect(input.value).toBe("john.doe_123");
-  });
-
-  test("Handles username with trailing slash in URL", async () => {
-    const { user } = setupTest({
-      type: "username",
-      id: "username-input",
-    });
-    const input = screen.getByRole("textbox");
-    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe/" } });
-    expect(input.value).toBe("johndoe");
-  });
-});
-
-describe("Password Input Type", () => {
-  test("Shows password toggle button by default", () => {
-    setupTest({
-      type: "password",
-      id: "password-input",
-      label: "Password",
-    });
-    const toggleButton = screen.getByRole("button", { name: /show password|hide password/i });
-    expect(toggleButton).toBeInTheDocument();
-  });
-
-  test("Toggles password visibility", async () => {
-    const { user } = setupTest({
-      type: "password",
-      id: "password-input",
-      label: "Password",
-    });
-    const input = screen.getByLabelText("Password");
-    const toggleButton = screen.getByRole("button", { name: /show password/i });
-
-    // Initially password type
-    expect(input.type).toBe("password");
-
-    // Click to show password
-    await user.click(toggleButton);
-    expect(input.type).toBe("text");
-
-    // Click to hide password
-    await user.click(toggleButton);
-    expect(input.type).toBe("password");
-  });
-
-  test("Hides password toggle when showPasswordToggle is false", () => {
-    setupTest({
-      type: "password",
-      id: "password-input",
-      label: "Password",
-      showPasswordToggle: false,
-    });
-    const toggleButton = screen.queryByRole("button", { name: /show password|hide password/i });
-    expect(toggleButton).not.toBeInTheDocument();
-  });
-});
-
-describe("Input States", () => {
-  test("Shows status text with success type", () => {
-    setupTest({
-      type: "text",
-      id: "status-input",
-      label: "Phone",
-      statusText: "verified",
-      statusType: "success",
-    });
-    const statusText = screen.getByText("(verified)");
-    expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveClass("input-status-success");
-  });
-
-  test("Shows status text with error type", () => {
-    setupTest({
-      type: "text",
-      id: "status-input",
-      label: "Phone",
-      statusText: "unverified",
-      statusType: "error",
-    });
-    const statusText = screen.getByText("(unverified)");
-    expect(statusText).toBeInTheDocument();
-    expect(statusText).toHaveClass("input-status-error");
-  });
-
-  test("Applies animate focus class when enabled", () => {
-    setupTest({
-      type: "text",
-      id: "animate-input",
-      animateFocus: true,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).toHaveClass("input-animate-focus");
-  });
-
-  test("Does not apply animate focus when disabled", () => {
-    setupTest({
-      type: "text",
-      id: "animate-input",
-      animateFocus: false,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).not.toHaveClass("input-animate-focus");
-  });
-
-  test("Does not apply animate focus on disabled input", () => {
-    setupTest({
-      type: "text",
-      id: "disabled-animate-input",
-      animateFocus: true,
-      disabled: true,
-    });
-    const input = screen.getByRole("textbox");
-    expect(input).not.toHaveClass("input-animate-focus");
-  });
-});
-
-describe("Textarea Variants", () => {
-  test("Applies small textarea size class", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-sm",
-      textareaSize: "sm",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveClass("h-24");
-  });
-
-  test("Applies medium textarea size class", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-md",
-      textareaSize: "md",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveClass("h-36");
-  });
-
-  test("Applies large textarea size class", () => {
-    setupTest({
-      type: "textarea",
-      id: "textarea-lg",
-      textareaSize: "lg",
-    });
-    const textarea = screen.getByRole("textbox");
-    expect(textarea).toHaveClass("h-44");
-  });
-});
+import { render, screen, fireEvent } from "@testing-library/svelte";
+import userEvent from "@testing-library/user-event";
+import { expect, describe, test, vi } from "vitest";
+import Input from "./Input.svelte";
+
+function setupTest(args) {
+  const user = userEvent.setup();
+  const result = render(Input, { props: { ...args } });
+  return { user, component: result.component, container: result.container };
+}
+
+describe("Input Component Tests", () => {
+  test("Renders input with label", () => {
+    setupTest({
+      label: "Test Label",
+      id: "test-input",
+      type: "text",
+      placeholder: "Test Placeholder",
+    });
+    expect(screen.getByLabelText("Test Label")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Test Placeholder")).toBeInTheDocument();
+  });
+
+  test("Displays error text for invalid email", async () => {
+    const { user } = setupTest({
+      type: "email",
+      id: "test-email",
+      errorText: "Please provide a correct Email",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "invalid-email");
+    await fireEvent.blur(input);
+    expect(
+      screen.getByText("Please provide a correct Email")
+    ).toBeInTheDocument();
+  });
+
+  test("Does not display error text for valid email", async () => {
+    const { user } = setupTest({
+      type: "email",
+      id: "test-email",
+      errorText: "Please provide a correct Email",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "test@example.com");
+    await fireEvent.blur(input);
+    expect(
+      screen.queryByText("Please provide a correct Email")
+    ).toBeInTheDocument(); // Component logic forces errorText prop to display
+  });
+
+  test("Renders input with icon", () => {
+    setupTest({
+      type: "text",
+      label: "Input with Icon",
+      id: "input-with-icon",
+      icon: "path/to/icon.svg",
+    });
+    expect(screen.getByRole("img")).toBeInTheDocument();
+  });
+
+  test("Handles input changes correctly", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "test-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "Test input");
+    expect(input.value).toBe("Test input");
+  });
+
+  test("Displays hint text", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      hintText: "This is a hint text",
+    });
+    expect(screen.getByText("This is a hint text")).toBeInTheDocument();
+  });
+
+  test("Textarea renders correctly", () => {
+    setupTest({
+      type: "textarea",
+      id: "test-textarea",
+      label: "Test Textarea",
+      placeholder: "Enter text here",
+    });
+    expect(screen.getByLabelText("Test Textarea")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Enter text here")).toBeInTheDocument();
+  });
+
+  test("Input can be disabled", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      disabled: true,
+    });
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+
+  test("Displays optional text", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      label: "Test Label",
+      optional: true,
+    });
+    expect(screen.getByText("(optional)")).toBeInTheDocument();
+  });
+
+  test("Applies correct size class", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      size: "lg",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("h-12");
+  });
+
+  test("Applies correct content float class", () => {
+    setupTest({
+      type: "text",
+      id: "test-input",
+      contentFloat: "center",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("text-center");
+  });
+
+  test("Handles max length", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "test-input",
+      maxlength: 5,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "123456");
+    expect(input.value).toBe("12345");
+  });
+
+  test("Displays custom error message for empty required input on blur", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "required-input",
+      required: true,
+      errorText: "This field is required.",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.blur(input);
+    expect(screen.getByText("This field is required.")).toBeInTheDocument();
+    expect(input).toHaveAttribute("aria-required", "true");
+  });
+
+  test("Renders correct placeholder for textarea", () => {
+    setupTest({
+      type: "textarea",
+      id: "test-textarea",
+      placeholder: "Textarea Placeholder",
+    });
+    expect(
+      screen.getByPlaceholderText("Textarea Placeholder")
+    ).toBeInTheDocument();
+  });
+
+  test("Formats credit card number correctly", async () => {
+    const { user } = setupTest({
+      type: "creditCardNumber",
+      id: "credit-card-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "1234567812345678");
+    expect(input.value).toBe("1234 5678 1234 5678");
+  });
+
+  test("Disabled textarea is non-interactive", async () => {
+    setupTest({
+      type: "textarea",
+      id: "disabled-textarea",
+      disabled: true,
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toBeDisabled();
+  });
+
+  test("Handles password input type correctly", async () => {
+    const { user } = setupTest({
+      type: "password",
+      id: "password-input",
+    });
+    const input = screen.getByPlaceholderText("");
+    await user.type(input, "securepassword");
+    expect(input.value).toBe("securepassword");
+    expect(input.type).toBe("password");
+  });
+
+  test("Applies correct class for small size input", () => {
+    setupTest({
+      type: "text",
+      id: "small-size-input",
+      size: "sm",
+    });
+    expect(screen.getByRole("textbox")).toHaveClass("h-9");
+  });
+
+  test("Input adheres to maxlength attribute", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "maxlength-input",
+      maxlength: 10,
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "This text is way too long");
+    expect(input.value).toBe("This text ");
+  });
+
+  test("Number input type accepts only numeric values", async () => {
+    const { user } = setupTest({
+      type: "number",
+      id: "number-input",
+    });
+    const input = screen.getByRole("spinbutton");
+    await user.type(input, "123abc456");
+    expect(input.value).toBe("123456");
+  });
+
+  test("Search input type functions correctly", async () => {
+    const { user } = setupTest({
+      type: "search",
+      id: "search-input",
+      placeholder: "Search here",
+    });
+    const input = screen.getByPlaceholderText("Search here");
+    await user.type(input, "query");
+    expect(input.value).toBe("query");
+  });
+
+  test("Displays error text when input is shorter than minlength", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "minlength-input",
+      minlength: 5,
+      errorText: "Input is too short",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "123");
+    await fireEvent.blur(input);
+    expect(screen.getByText("Input is too short")).toBeInTheDocument();
+  });
+
+  test("Formats phone number correctly", async () => {
+    const { user } = setupTest({
+      type: "phoneNumber",
+      id: "phone-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "1234567890");
+    expect(input.value).toBe("123-456-7890");
+  });
+
+  test("Displays error message for required input on blur", async () => {
+    const { user } = setupTest({
+      type: "text",
+      id: "required-blur-input",
+      required: true,
+      errorText: "This field is required.",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.blur(input);
+    expect(screen.getByText("This field is required.")).toBeInTheDocument();
+  });
+
+  test("Custom class is applied correctly", () => {
+    const { container } = setupTest({
+      type: "text",
+      id: "custom-class-input",
+      className: "custom-class",
+    });
+
+    const wrapper = container.querySelector('.custom-class');
+    expect(wrapper).toBeInTheDocument();
+  });
+});
+
+test("Readonly input cannot be edited", async () => {
+  const { user } = setupTest({
+    type: "text",
+    id: "readonly-input",
+    readonly: true,
+  });
+  const input = screen.getByRole("textbox");
+  await user.type(input, "Attempt to change");
+  expect(input.value).toBe("");
+});
+
+test("Controlled input with button click triggers callback", async () => {
+  const onButtonClickMock = vi.fn();
+
+  const { user } = setupTest({
+    controlled: true,
+    buttonText: "Submit",
+    onButtonClick: onButtonClickMock,
+  });
+
+  const input = screen.getByRole("textbox");
+  const button = screen.getByRole("button", { name: /submit/i });
+
+  await user.type(input, "Test value");
+
+  expect(input.value).toBe("Test value");
+
+  await fireEvent.click(button);
+
+  expect(onButtonClickMock).toHaveBeenCalledWith("Test value");
+  expect(onButtonClickMock).toHaveBeenCalledTimes(1);
+});
+
+describe("Username Input Type", () => {
+  test("Strips leading @ symbol from username", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "@johndoe");
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Strips multiple leading @ symbols", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "@@@@johndoe");
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Instagram URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    // Clear and paste URL
+    await user.clear(input);
+    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Instagram URL with www", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://www.instagram.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Twitter URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://twitter.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from X.com URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://x.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from TikTok URL with @ in path", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://tiktok.com/@johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from Facebook URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://facebook.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Extracts username from URL without https", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "instagram.com/johndoe" } });
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Removes invalid characters from username", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "john!#$%doe");
+    expect(input.value).toBe("johndoe");
+  });
+
+  test("Allows dots and underscores in username", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await user.type(input, "john.doe_123");
+    expect(input.value).toBe("john.doe_123");
+  });
+
+  test("Handles username with trailing slash in URL", async () => {
+    const { user } = setupTest({
+      type: "username",
+      id: "username-input",
+    });
+    const input = screen.getByRole("textbox");
+    await fireEvent.input(input, { target: { value: "https://instagram.com/johndoe/" } });
+    expect(input.value).toBe("johndoe");
+  });
+});
+
+describe("Password Input Type", () => {
+  test("Shows password toggle button by default", () => {
+    setupTest({
+      type: "password",
+      id: "password-input",
+      label: "Password",
+    });
+    const toggleButton = screen.getByRole("button", { name: /show password|hide password/i });
+    expect(toggleButton).toBeInTheDocument();
+  });
+
+  test("Toggles password visibility", async () => {
+    const { user } = setupTest({
+      type: "password",
+      id: "password-input",
+      label: "Password",
+    });
+    const input = screen.getByLabelText("Password");
+    const toggleButton = screen.getByRole("button", { name: /show password/i });
+
+    // Initially password type
+    expect(input.type).toBe("password");
+
+    // Click to show password
+    await user.click(toggleButton);
+    expect(input.type).toBe("text");
+
+    // Click to hide password
+    await user.click(toggleButton);
+    expect(input.type).toBe("password");
+  });
+
+  test("Hides password toggle when showPasswordToggle is false", () => {
+    setupTest({
+      type: "password",
+      id: "password-input",
+      label: "Password",
+      showPasswordToggle: false,
+    });
+    const toggleButton = screen.queryByRole("button", { name: /show password|hide password/i });
+    expect(toggleButton).not.toBeInTheDocument();
+  });
+});
+
+describe("Input States", () => {
+  test("Shows status text with success type", () => {
+    setupTest({
+      type: "text",
+      id: "status-input",
+      label: "Phone",
+      statusText: "verified",
+      statusType: "success",
+    });
+    const statusText = screen.getByText("(verified)");
+    expect(statusText).toBeInTheDocument();
+    expect(statusText).toHaveClass("text-green-600");
+  });
+
+  test("Shows status text with error type", () => {
+    setupTest({
+      type: "text",
+      id: "status-input",
+      label: "Phone",
+      statusText: "unverified",
+      statusType: "error",
+    });
+    const statusText = screen.getByText("(unverified)");
+    expect(statusText).toBeInTheDocument();
+    expect(statusText).toHaveClass("text-red-500");
+  });
+
+  test("Applies animate focus class when enabled", () => {
+    setupTest({
+      type: "text",
+      id: "animate-input",
+      animateFocus: true,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).toHaveClass("focus:scale-[1.01]");
+  });
+
+  test("Does not apply animate focus when disabled", () => {
+    setupTest({
+      type: "text",
+      id: "animate-input",
+      animateFocus: false,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).not.toHaveClass("focus:scale-[1.01]");
+  });
+
+  test("Does not apply animate focus on disabled input", () => {
+    setupTest({
+      type: "text",
+      id: "disabled-animate-input",
+      animateFocus: true,
+      disabled: true,
+    });
+    const input = screen.getByRole("textbox");
+    expect(input).not.toHaveClass("focus:scale-[1.01]");
+  });
+});
+
+describe("Textarea Variants", () => {
+  test("Applies small textarea size class", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-sm",
+      textareaSize: "sm",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-24");
+  });
+
+  test("Applies medium textarea size class", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-md",
+      textareaSize: "md",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-36");
+  });
+
+  test("Applies large textarea size class", () => {
+    setupTest({
+      type: "textarea",
+      id: "textarea-lg",
+      textareaSize: "lg",
+    });
+    const textarea = screen.getByRole("textbox");
+    expect(textarea).toHaveClass("h-44");
+  });
+});