@getmicdrop/svelte-components 1.0.2 → 1.0.3

package/dist/components/Icons/WarningIcon.spec.js

@@ -0,0 +1,30 @@
+import { render } from "@testing-library/svelte";
+import { expect, describe, test } from "vitest";
+import WarningIcon from "./WarningIcon.svelte";
+
+describe("WarningIcon Component Tests", () => {
+  test("Renders warning icon SVG", () => {
+    const { container } = render(WarningIcon);
+    const svg = container.querySelector("svg");
+    expect(svg).toBeInTheDocument();
+  });
+
+  test("Has default dimensions", () => {
+    const { container } = render(WarningIcon);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("width", "12");
+    expect(svg).toHaveAttribute("height", "12");
+  });
+
+  test("Accepts custom className", () => {
+    const { container } = render(WarningIcon, { props: { className: "custom-class" } });
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveClass("custom-class");
+  });
+
+  test("Has aria-hidden attribute", () => {
+    const { container } = render(WarningIcon);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+});

package/dist/components/Icons/WarningIcon.svelte

@@ -0,0 +1,24 @@
+<script>
+    export let className = "";
+</script>
+
+<svg
+    aria-hidden="true"
+    class={className}
+    height="12"
+    width="12"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+>
+    <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="m10.461 1.705 4.918 8.941a3 3 0 0 1 .371 1.446v.658a3 3 0 0 1-3 3h-9.5a3 3 0 0 1-3-3v-.658a3 3 0 0 1 .371-1.446l4.918-8.94a2.809 2.809 0 0 1 4.922 0ZM12.75 14.25h-9.5a1.5 1.5 0 0 1-1.5-1.5v-.658a1.5 1.5 0 0 1 .186-.723l4.917-8.941a1.309 1.309 0 0 1 2.294 0l4.917 8.941a1.5 1.5 0 0 1 .186.723v.658a1.5 1.5 0 0 1-1.5 1.5Z"
+        fill="currentColor"
+    ></path>
+    <path
+        d="M9.25 11.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0ZM7 5.499c-.029-.543.456-.999 1-.999s1.029.456 1 .999L8.79 8.5a.79.79 0 0 1-1.58 0L7 5.5Z"
+        fill="currentColor"
+    ></path>
+</svg>

package/dist/components/Icons/WarningIcon.svelte.d.ts

@@ -0,0 +1,26 @@
+/** @typedef {typeof __propDef.props}  WarningIconProps */
+/** @typedef {typeof __propDef.events}  WarningIconEvents */
+/** @typedef {typeof __propDef.slots}  WarningIconSlots */
+export default class WarningIcon extends SvelteComponent<{
+    className?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type WarningIconProps = typeof __propDef.props;
+export type WarningIconEvents = typeof __propDef.events;
+export type WarningIconSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        className?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+    exports?: undefined;
+    bindings?: undefined;
+};
+export {};
+//# sourceMappingURL=WarningIcon.svelte.d.ts.map

package/dist/components/Icons/WarningIcon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WarningIcon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Icons/WarningIcon.svelte.js"],"names":[],"mappings":"AAeA,0DAA0D;AAC1D,4DAA4D;AAC5D,0DAA0D;AAE1D;;;;;CACC;+BALa,OAAO,SAAS,CAAC,KAAK;gCACtB,OAAO,SAAS,CAAC,MAAM;+BACvB,OAAO,SAAS,CAAC,KAAK;gCAjBJ,QAAQ;AAcxC;;;;;;;;;;EAA+F"}

package/dist/components/Input/Input.spec.d.ts

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

package/dist/components/Input/Input.spec.d.ts.map

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

package/dist/components/Input/Input.spec.js

@@ -0,0 +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");
+  });
+});