@windstream/react-shared-components 0.1.93 → 0.1.95

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

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

@@ -0,0 +1,199 @@
+import React from "react";
+import { Link } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+// Mock next/link
+jest.mock("next/link", () => {
+  const MockLink = ({ children, href, className, onClick, ...rest }: any) => (
+    <a href={href} className={className} onClick={onClick} {...rest}>
+      {children}
+    </a>
+  );
+  MockLink.displayName = "MockNextLink";
+  return MockLink;
+});
+
+describe("Link", () => {
+  describe("Rendering", () => {
+    it("renders children content", () => {
+      render(<Link href="/test">Click me</Link>);
+      expect(screen.getByText("Click me")).toBeInTheDocument();
+    });
+
+    it("has correct displayName", () => {
+      expect(Link.displayName).toBe("Link");
+    });
+
+    it("renders as a Next.js Link for internal links", () => {
+      render(<Link href="/internal">Internal</Link>);
+      const el = screen.getByText("Internal");
+      expect(el.closest("a")).toHaveAttribute("href", "/internal");
+    });
+
+    it("renders as <a> for external links", () => {
+      render(
+        <Link href="https://example.com" external={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External");
+      expect(el.closest("a")).toHaveAttribute("href", "https://example.com");
+    });
+
+    it("renders as <a> for http links even without external prop", () => {
+      render(<Link href="https://example.com">Auto External</Link>);
+      const el = screen.getByText("Auto External");
+      expect(el.closest("a")).toHaveAttribute("href", "https://example.com");
+    });
+  });
+
+  describe("Variants", () => {
+    it("applies unstyled variant with no extra classes", () => {
+      render(
+        <Link href="/test" variant="unstyled">
+          Unstyled
+        </Link>
+      );
+      const el = screen.getByText("Unstyled").closest("a");
+      expect(el?.className).toContain("link--unstyled");
+    });
+
+    it("applies default variant classes", () => {
+      render(
+        <Link href="/test" variant="default">
+          Default
+        </Link>
+      );
+      const el = screen.getByText("Default").closest("a");
+      expect(el?.className).toContain("link--default");
+      expect(el?.className).toContain("underline");
+    });
+  });
+
+  describe("Disabled state", () => {
+    it("adds disabled class when disabled", () => {
+      render(
+        <Link href="/test" disabled={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      expect(el?.className).toContain("link--disabled");
+    });
+
+    it("sets aria-disabled when disabled", () => {
+      render(
+        <Link href="/test" disabled={true} external={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      expect(el).toHaveAttribute("aria-disabled", "true");
+    });
+
+    it("sets tabIndex -1 when disabled", () => {
+      render(
+        <Link href="/test" disabled={true} external={true}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a");
+      expect(el).toHaveAttribute("tabindex", "-1");
+    });
+
+    it("prevents click when disabled", () => {
+      const onClick = jest.fn();
+      render(
+        <Link href="/test" disabled={true} external={true} onClick={onClick}>
+          Disabled
+        </Link>
+      );
+      const el = screen.getByText("Disabled").closest("a")!;
+      fireEvent.click(el);
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("External links", () => {
+    it("adds target=_blank for external links", () => {
+      render(
+        <Link href="https://example.com" external={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External").closest("a");
+      expect(el).toHaveAttribute("target", "_blank");
+    });
+
+    it("adds rel=noopener noreferrer for external links", () => {
+      render(
+        <Link href="https://example.com" external={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External").closest("a");
+      expect(el).toHaveAttribute("rel", "noopener noreferrer");
+    });
+
+    it("does not add target for disabled external links", () => {
+      render(
+        <Link href="https://example.com" external={true} disabled={true}>
+          External
+        </Link>
+      );
+      const el = screen.getByText("External").closest("a");
+      expect(el).not.toHaveAttribute("target", "_blank");
+    });
+  });
+
+  describe("Event handling", () => {
+    it("calls onClick handler when clicked", () => {
+      const onClick = jest.fn();
+      render(
+        <Link href="https://example.com" external={true} onClick={onClick}>
+          Click
+        </Link>
+      );
+      const el = screen.getByText("Click").closest("a")!;
+      fireEvent.click(el);
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Ref forwarding", () => {
+    it("forwards ref to the anchor element", () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(
+        <Link ref={ref} href="https://test.com" external={true}>
+          Ref
+        </Link>
+      );
+      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
+    });
+  });
+
+  describe("Custom className and style", () => {
+    it("applies custom className", () => {
+      render(
+        <Link href="/test" className="custom-class">
+          Custom
+        </Link>
+      );
+      const el = screen.getByText("Custom").closest("a");
+      expect(el?.className).toContain("custom-class");
+    });
+
+    it("applies inline style", () => {
+      render(
+        <Link href="https://test.com" external={true} style={{ color: "red" }}>
+          Styled
+        </Link>
+      );
+      const el = screen.getByText("Styled").closest("a")!;
+      expect(el.style.color).toBe("red");
+    });
+  });
+});