@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/components/input/index.test.tsx

@@ -0,0 +1,348 @@
+import "@testing-library/jest-dom";
+
+import { createRef } from "react";
+import { Input, InputField } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, size, className }: any) => (
+    <span data-testid={`icon-${name}`} data-size={size} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children, className, as }: any) => {
+    const Tag = as || "span";
+    return (
+      <Tag data-testid="text" className={className}>
+        {children}
+      </Tag>
+    );
+  },
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Input", () => {
+  it("has displayName set to Input", () => {
+    expect(Input.displayName).toBe("Input");
+  });
+
+  describe("basic rendering", () => {
+    it("renders an input element", () => {
+      render(<Input />);
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("renders with placeholder", () => {
+      render(<Input placeholder="Enter text" />);
+      expect(screen.getByPlaceholderText("Enter text")).toBeInTheDocument();
+    });
+
+    it("renders with default type text", () => {
+      render(<Input data-testid="input" />);
+      const input = screen.getByTestId("input");
+      expect(input).toHaveAttribute("type", "text");
+    });
+
+    it("renders with custom type", () => {
+      render(<Input type="email" data-testid="input" />);
+      const input = screen.getByTestId("input");
+      expect(input).toHaveAttribute("type", "email");
+    });
+  });
+
+  describe("ref forwarding", () => {
+    it("forwards ref to input element", () => {
+      const ref = createRef<HTMLInputElement>();
+      render(<Input ref={ref} />);
+      expect(ref.current).toBeInstanceOf(HTMLInputElement);
+    });
+
+    it("can imperatively focus the input via ref", () => {
+      const ref = createRef<HTMLInputElement>();
+      render(<Input ref={ref} />);
+      ref.current?.focus();
+      expect(ref.current).toBe(document.activeElement);
+    });
+  });
+
+  describe("label", () => {
+    it("renders label when provided", () => {
+      render(<Input label="Email" />);
+      expect(screen.getByText("Email")).toBeInTheDocument();
+    });
+
+    it("does not render label when not provided", () => {
+      const { container } = render(<Input />);
+      expect(container.querySelector("label")).not.toBeInTheDocument();
+    });
+
+    it("associates label with input via htmlFor/id", () => {
+      render(<Input label="Username" />);
+      const input = screen.getByRole("textbox");
+      expect(input).toHaveAttribute("id", "Username");
+    });
+
+    it("shows required asterisk when required is true", () => {
+      render(<Input label="Email" required={true} />);
+      expect(screen.getByText("*")).toBeInTheDocument();
+    });
+
+    it("does not show asterisk when required is false", () => {
+      render(<Input label="Email" />);
+      expect(screen.queryByText("*")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("size variants", () => {
+    it("applies medium size class by default", () => {
+      const { container } = render(<Input />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("h-14");
+    });
+
+    it("applies slim size class", () => {
+      const { container } = render(<Input size="slim" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("h-12");
+    });
+
+    it("applies large size class", () => {
+      const { container } = render(<Input size="large" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("h-[60px]");
+    });
+  });
+
+  describe("state management", () => {
+    it("applies hover state on mouseOver", () => {
+      render(<Input data-testid="input" />);
+      const input = screen.getByTestId("input");
+      fireEvent.mouseOver(input);
+      const wrapper = input.closest(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-hover");
+    });
+
+    it("removes hover state on mouseOut", () => {
+      render(<Input data-testid="input" />);
+      const input = screen.getByTestId("input");
+      fireEvent.mouseOver(input);
+      fireEvent.mouseOut(input);
+      const wrapper = input.closest(".relative.flex");
+      expect(wrapper?.className).not.toContain("border-input-border-hover");
+    });
+
+    it("applies focus state on focus", () => {
+      render(<Input data-testid="input" />);
+      const input = screen.getByTestId("input");
+      fireEvent.focus(input);
+      const wrapper = input.closest(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-selected");
+    });
+
+    it("removes focus state on blur", () => {
+      render(<Input data-testid="input" />);
+      const input = screen.getByTestId("input");
+      fireEvent.focus(input);
+      fireEvent.blur(input);
+      const wrapper = input.closest(".relative.flex");
+      expect(wrapper?.className).not.toContain("border-input-border-selected");
+    });
+
+    it("calls onFocus callback", () => {
+      const onFocus = jest.fn();
+      render(<Input data-testid="input" onFocus={onFocus} />);
+      fireEvent.focus(screen.getByTestId("input"));
+      expect(onFocus).toHaveBeenCalled();
+    });
+
+    it("calls onBlur callback", () => {
+      const onBlur = jest.fn();
+      render(<Input data-testid="input" onBlur={onBlur} />);
+      fireEvent.blur(screen.getByTestId("input"));
+      expect(onBlur).toHaveBeenCalled();
+    });
+  });
+
+  describe("error state", () => {
+    it("applies error state styling when state is error", () => {
+      const { container } = render(<Input state="error" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-critical");
+    });
+
+    it("displays error text when state is error and errorText provided", () => {
+      render(<Input state="error" errorText="Invalid input" />);
+      expect(screen.getByText("Invalid input")).toBeInTheDocument();
+    });
+
+    it("does not display error text when state is not error", () => {
+      render(<Input state="default" errorText="Invalid input" />);
+      expect(screen.queryByText("Invalid input")).not.toBeInTheDocument();
+    });
+
+    it("does not display error section when errorText is empty", () => {
+      render(<Input state="error" errorText="" />);
+      expect(screen.queryByTestId("icon-info")).not.toBeInTheDocument();
+    });
+
+    it("applies error state when hasError is true", () => {
+      const { container } = render(<Input hasError={true} />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-critical");
+    });
+
+    it("hasError overrides state prop", () => {
+      const { container } = render(<Input hasError={true} state="default" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-critical");
+    });
+
+    it("renders info icon with error text", () => {
+      render(<Input state="error" errorText="Error msg" />);
+      expect(screen.getByTestId("icon-info")).toBeInTheDocument();
+    });
+  });
+
+  describe("prefix icon", () => {
+    it("renders prefix icon when prefixIconName is provided", () => {
+      render(<Input prefixIconName="search" />);
+      expect(screen.getByTestId("icon-search")).toBeInTheDocument();
+    });
+
+    it("does not render prefix icon when not provided", () => {
+      render(<Input />);
+      expect(screen.queryByTestId("icon-search")).not.toBeInTheDocument();
+      expect(screen.queryByTestId("icon-location_on")).not.toBeInTheDocument();
+    });
+
+    it("applies custom prefix icon size", () => {
+      render(<Input prefixIconName="search" prefixIconSize={40} />);
+      const icon = screen.getByTestId("icon-search");
+      expect(icon).toHaveAttribute("data-size", "40");
+    });
+
+    it("applies prefixIconClassName", () => {
+      render(
+        <Input prefixIconName="search" prefixIconClassName="text-gray-500" />
+      );
+      const icon = screen.getByTestId("icon-search");
+      expect(icon).toHaveClass("text-gray-500");
+    });
+  });
+
+  describe("suffix icon and password toggle", () => {
+    it("renders suffix icon when suffixIconName is provided", () => {
+      render(<Input suffixIconName="visibility" />);
+      // Default inputType is "text", so icon shows "visibility"
+      expect(screen.getByTestId("icon-visibility")).toBeInTheDocument();
+    });
+
+    it("toggles password visibility on suffix icon click", () => {
+      render(
+        <Input
+          type="password"
+          suffixIconName="visibility"
+          data-testid="input"
+        />
+      );
+      const input = screen.getByTestId("input");
+      expect(input).toHaveAttribute("type", "password");
+
+      // When type is password, icon shows visibility_off
+      const iconWrapper = screen.getByTestId(
+        "icon-visibility_off"
+      ).parentElement;
+      fireEvent.click(iconWrapper!);
+      expect(input).toHaveAttribute("type", "text");
+
+      // After toggle to text, icon shows visibility
+      const visibleIcon = screen.getByTestId("icon-visibility").parentElement;
+      fireEvent.click(visibleIcon!);
+      expect(input).toHaveAttribute("type", "password");
+    });
+
+    it("shows visibility icon when type is text after toggle", () => {
+      render(<Input type="password" suffixIconName="visibility" />);
+      const iconWrapper = screen.getByTestId(
+        "icon-visibility_off"
+      ).parentElement;
+      fireEvent.click(iconWrapper!);
+      expect(screen.getByTestId("icon-visibility")).toBeInTheDocument();
+    });
+  });
+
+  describe("disabled and loading", () => {
+    it("disables input when disabled prop is true", () => {
+      render(<Input disabled={true} data-testid="input" />);
+      expect(screen.getByTestId("input")).toBeDisabled();
+    });
+
+    it("disables input when loading is true", () => {
+      render(<Input loading={true} data-testid="input" />);
+      expect(screen.getByTestId("input")).toBeDisabled();
+    });
+
+    it("is not disabled by default", () => {
+      render(<Input data-testid="input" />);
+      expect(screen.getByTestId("input")).not.toBeDisabled();
+    });
+  });
+
+  describe("containerClassName", () => {
+    it("applies containerClassName to the input wrapper", () => {
+      const { container } = render(<Input containerClassName="custom-cnt" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("custom-cnt");
+    });
+  });
+
+  describe("className", () => {
+    it("applies className to the input element", () => {
+      render(<Input className="custom-input" data-testid="input" />);
+      const input = screen.getByTestId("input");
+      expect(input).toHaveClass("custom-input");
+    });
+  });
+
+  describe("state prop variants", () => {
+    it("applies focus styling when state is focus", () => {
+      const { container } = render(<Input state="focus" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-selected");
+    });
+
+    it("applies active styling when state is active", () => {
+      const { container } = render(<Input state="active" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-selected");
+    });
+
+    it("applies hover styling when state is hover and not focused", () => {
+      const { container } = render(<Input state="hover" />);
+      const wrapper = container.querySelector(".relative.flex");
+      expect(wrapper?.className).toContain("border-input-border-hover");
+    });
+
+    it("does not apply hover styling when state is hover but focused", () => {
+      render(<Input state="hover" data-testid="input" />);
+      const input = screen.getByTestId("input");
+      fireEvent.focus(input);
+      const wrapper = input.closest(".relative.flex");
+      expect(wrapper?.className).not.toContain("border-input-border-hover");
+    });
+  });
+
+  describe("InputField export", () => {
+    it("exports InputField as a render function", () => {
+      expect(typeof InputField).toBe("function");
+    });
+  });
+});