@windstream/react-shared-components 0.1.93 → 0.1.94

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

@@ -0,0 +1,252 @@
+/// <reference types="@testing-library/jest-dom" />
+import React from "react";
+import { Checkbox } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/button", () => {
+  const MockButton = React.forwardRef<
+    HTMLButtonElement,
+    React.ButtonHTMLAttributes<HTMLButtonElement>
+  >(({ children, ...props }, ref) => (
+    <button ref={ref} {...props}>
+      {children}
+    </button>
+  ));
+  MockButton.displayName = "MockButton";
+  return { Button: MockButton };
+});
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: unknown[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Checkbox", () => {
+  describe("rendering", () => {
+    it("renders an unchecked checkbox by default", () => {
+      render(<Checkbox name="test" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).not.toBeChecked();
+    });
+
+    it("renders a checked checkbox when checked is true", () => {
+      render(<Checkbox name="test" checked={true} />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeChecked();
+    });
+
+    it("renders with the correct name attribute", () => {
+      render(<Checkbox name="agreement" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("name", "agreement");
+    });
+
+    it("renders with the correct value attribute", () => {
+      render(<Checkbox name="test" value="yes" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("value", "yes");
+    });
+
+    it("applies displayName correctly", () => {
+      expect(Checkbox.displayName).toBe("Checkbox");
+    });
+  });
+
+  describe("label", () => {
+    it("renders a string label", () => {
+      render(<Checkbox name="test" label="Accept terms" />);
+      expect(screen.getByText("Accept terms")).toBeInTheDocument();
+    });
+
+    it("renders a ReactNode label", () => {
+      render(
+        <Checkbox
+          name="test"
+          label={<span data-testid="custom-label">Custom</span>}
+        />
+      );
+      expect(screen.getByTestId("custom-label")).toBeInTheDocument();
+    });
+
+    it("does not render label element when label is not provided", () => {
+      const { container } = render(<Checkbox name="test" />);
+      const labels = container.querySelectorAll("label");
+      // Only the icon label, no text label
+      expect(labels.length).toBe(1);
+    });
+
+    it("applies labelClassName to the label", () => {
+      render(
+        <Checkbox name="test" label="Label" labelClassName="custom-label" />
+      );
+      const label = screen.getByText("Label");
+      expect(label.className).toContain("custom-label");
+    });
+
+    it("applies error class to label when error is true", () => {
+      render(<Checkbox name="test" label="Label" error={true} />);
+      const label = screen.getByText("Label");
+      expect(label.className).toContain("text-text-critical");
+    });
+  });
+
+  describe("interactive behavior", () => {
+    it("calls onChange with boolean when handler expects a parameter", () => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const handleChange = jest.fn((_isChecked: boolean) => undefined);
+      render(<Checkbox name="test" onChange={handleChange} />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it("calls onChange without parameters for zero-arity handler", () => {
+      const handleChange = jest.fn();
+      // Override length to simulate zero-arity
+      Object.defineProperty(handleChange, "length", { value: 0 });
+      render(<Checkbox name="test" onChange={handleChange} />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).toHaveBeenCalled();
+    });
+
+    it("does not call onChange when disabled", () => {
+      const handleChange = jest.fn();
+      render(<Checkbox name="test" onChange={handleChange} disabled={true} />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+
+    it("does not call onChange when state is disabled", () => {
+      const handleChange = jest.fn();
+      render(<Checkbox name="test" onChange={handleChange} state="disabled" />);
+      const input = screen.getByRole("checkbox");
+      fireEvent.click(input);
+      expect(handleChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("disabled state", () => {
+    it("sets disabled attribute when disabled prop is true", () => {
+      render(<Checkbox name="test" disabled={true} />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeDisabled();
+    });
+
+    it("sets disabled attribute when state is disabled", () => {
+      render(<Checkbox name="test" state="disabled" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeDisabled();
+    });
+
+    it("applies disabled styling to unchecked icon", () => {
+      const { container } = render(<Checkbox name="test" disabled={true} />);
+      const rect = container.querySelector("rect");
+      expect(rect).toHaveClass("fill-checkbox-bg-surface-disabled");
+    });
+
+    it("applies disabled styling to checked icon", () => {
+      const { container } = render(
+        <Checkbox name="test" disabled={true} checked={true} />
+      );
+      const rect = container.querySelector("rect");
+      expect(rect).toHaveClass("fill-checkbox-bg-surface-selected-disabled");
+    });
+  });
+
+  describe("focus state", () => {
+    it("applies focus outline class when state is focus", () => {
+      const { container } = render(<Checkbox name="test" state="focus" />);
+      const label = container.querySelector("label");
+      expect(label?.className).toContain("outline");
+    });
+  });
+
+  describe("required", () => {
+    it("sets required attribute when required is true", () => {
+      render(<Checkbox name="test" required={true} />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toBeRequired();
+    });
+  });
+
+  describe("id handling", () => {
+    it("uses provided id for input and label", () => {
+      render(<Checkbox name="test" id="custom-id" label="Label" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("id", "custom-id");
+    });
+
+    it("falls back to name when id is not provided", () => {
+      render(<Checkbox name="fallback-name" label="Label" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("id", "fallback-name");
+    });
+  });
+
+  describe("data-cy attribute", () => {
+    it("passes data-cy to the input element", () => {
+      render(<Checkbox name="test" data-cy="checkbox-cy" />);
+      const input = screen.getByRole("checkbox");
+      expect(input).toHaveAttribute("data-cy", "checkbox-cy");
+    });
+  });
+
+  describe("renderInfoIcon", () => {
+    it("renders info icon button when renderInfoIcon is provided", () => {
+      const onClick = jest.fn();
+      render(
+        <Checkbox
+          name="test"
+          renderInfoIcon={{ onClick, dataTestId: "info-btn" }}
+        />
+      );
+      expect(screen.getByTestId("info-btn")).toBeInTheDocument();
+    });
+
+    it("calls onClick when info icon is clicked", () => {
+      const onClick = jest.fn();
+      render(
+        <Checkbox
+          name="test"
+          renderInfoIcon={{ onClick, dataTestId: "info-btn" }}
+        />
+      );
+      fireEvent.click(screen.getByTestId("info-btn"));
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it("does not render info icon when renderInfoIcon is not provided", () => {
+      const { container } = render(<Checkbox name="test" />);
+      const buttons = container.querySelectorAll("button");
+      expect(buttons.length).toBe(0);
+    });
+  });
+
+  describe("containerClassName", () => {
+    it("applies containerClassName to the wrapper div", () => {
+      const { container } = render(
+        <Checkbox name="test" containerClassName="wrapper-class" />
+      );
+      const wrapper = container.firstChild as HTMLElement;
+      expect(wrapper.className).toContain("wrapper-class");
+    });
+  });
+
+  describe("checked icon rendering", () => {
+    it("renders checkmark SVG when checked", () => {
+      const { container } = render(<Checkbox name="test" checked={true} />);
+      const paths = container.querySelectorAll("path");
+      // Checked state has a checkmark path
+      expect(paths.length).toBeGreaterThan(0);
+    });
+
+    it("renders empty box SVG when unchecked", () => {
+      const { container } = render(<Checkbox name="test" checked={false} />);
+      const rects = container.querySelectorAll("rect");
+      // Unchecked state has border rects
+      expect(rects.length).toBeGreaterThan(0);
+    });
+  });
+});

package/src/components/checkbox/index.tsx

@@ -1,197 +1,197 @@
-"use client";
-
-import React, { useCallback } from "react";
-import { CheckboxProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { cx } from "@shared/utils";
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  state,
-  checked = false,
-  onChange,
-  className,
-  label,
-  labelClassName,
-  containerClassName,
-  name,
-  value,
-  id,
-  disabled = false,
-  required = false,
-  error = false,
-  "data-cy": dataCy,
-  renderInfoIcon,
-  ...rest
-}) => {
-  const isDisabled = disabled || state === "disabled";
-  const isFocused = state === "focus";
-  const inputId = id || name;
-
-  const checkboxClasses = cx(
-    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
-    isFocused && "outline",
-    className
-  );
-
-  const handleInputChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      if (!isDisabled) {
-        if (onChange) {
-          // Check if onChange expects a boolean parameter (new signature)
-          if (onChange.length === 1) {
-            (onChange as (isChecked: boolean) => void)(e.target.checked);
-          } else {
-            // Old signature - just call without parameters
-            (onChange as () => void)();
-          }
-        }
-      }
-    },
-    [isDisabled, onChange]
-  );
-
-  const renderIcon = () => {
-    if (checked) {
-      return (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width="24"
-          height="24"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <rect
-            width="24"
-            height="24"
-            rx="4"
-            className={cx(
-              isDisabled
-                ? "fill-checkbox-bg-surface-selected-disabled"
-                : "fill-bg-fill-brand"
-            )}
-          />
-          <path
-            d="M8 11.9593L11.0316 15L17 9"
-            stroke="white"
-            strokeWidth="2.2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
-      );
-    }
-    return (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="24"
-        viewBox="0 0 24 24"
-        fill="none"
-      >
-        <rect
-          x="0.5"
-          y="0.5"
-          width="23"
-          height="23"
-          rx="3.5"
-          className={cx(
-            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
-          )}
-        />
-        <rect
-          x="0.5"
-          y="0.5"
-          width="23"
-          height="23"
-          rx="3.5"
-          stroke="#CECECE"
-        />
-      </svg>
-    );
-  };
-
-  const checkboxElement = (
-    <div className={cx("flex items-center gap-3", containerClassName)}>
-      <div className="relative">
-        <input
-          type="checkbox"
-          id={inputId}
-          name={name}
-          value={value}
-          checked={checked}
-          onChange={handleInputChange}
-          disabled={isDisabled}
-          required={required}
-          className="peer sr-only"
-          data-cy={dataCy}
-          {...rest}
-        />
-        <label
-          htmlFor={inputId}
-          className={cx("peer-focus:outline", checkboxClasses)}
-          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
-        >
-          {renderIcon()}
-        </label>
-      </div>
-      {label && (
-        <label
-          htmlFor={inputId}
-          className={cx(
-            "cursor-pointer",
-            error && "text-text-critical",
-            labelClassName
-          )}
-        >
-          {label}
-        </label>
-      )}
-      {renderInfoIcon && (
-        <Button
-          type="button"
-          onClick={renderInfoIcon.onClick}
-          data-testid={renderInfoIcon.dataTestId}
-          className="ml-2 cursor-pointer text-icon-info"
-          aria-label="More information"
-        >
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <circle
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="2"
-            />
-            <path
-              d="M12 16v-4"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-            <path
-              d="M12 8h.01"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </Button>
-      )}
-    </div>
-  );
-
-  return checkboxElement;
-};
-
-Checkbox.displayName = "Checkbox";
-
-export type { CheckboxProps };
+"use client";
+
+import React, { useCallback } from "react";
+import { CheckboxProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { cx } from "@shared/utils";
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  state,
+  checked = false,
+  onChange,
+  className,
+  label,
+  labelClassName,
+  containerClassName,
+  name,
+  value,
+  id,
+  disabled = false,
+  required = false,
+  error = false,
+  "data-cy": dataCy,
+  renderInfoIcon,
+  ...rest
+}) => {
+  const isDisabled = disabled || state === "disabled";
+  const isFocused = state === "focus";
+  const inputId = id || name;
+
+  const checkboxClasses = cx(
+    "flex items-center justify-center w-6 h-6 rounded-[4px] outline-offset-2",
+    isFocused && "outline",
+    className
+  );
+
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!isDisabled) {
+        if (onChange) {
+          // Check if onChange expects a boolean parameter (new signature)
+          if (onChange.length === 1) {
+            (onChange as (isChecked: boolean) => void)(e.target.checked);
+          } else {
+            // Old signature - just call without parameters
+            (onChange as () => void)();
+          }
+        }
+      }
+    },
+    [isDisabled, onChange]
+  );
+
+  const renderIcon = () => {
+    if (checked) {
+      return (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+        >
+          <rect
+            width="24"
+            height="24"
+            rx="4"
+            className={cx(
+              isDisabled
+                ? "fill-checkbox-bg-surface-selected-disabled"
+                : "fill-bg-fill-brand"
+            )}
+          />
+          <path
+            d="M8 11.9593L11.0316 15L17 9"
+            stroke="white"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      );
+    }
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          className={cx(
+            isDisabled ? "fill-checkbox-bg-surface-disabled" : "fill-white"
+          )}
+        />
+        <rect
+          x="0.5"
+          y="0.5"
+          width="23"
+          height="23"
+          rx="3.5"
+          stroke="#CECECE"
+        />
+      </svg>
+    );
+  };
+
+  const checkboxElement = (
+    <div className={cx("flex items-center gap-3", containerClassName)}>
+      <div className="relative">
+        <input
+          type="checkbox"
+          id={inputId}
+          name={name}
+          value={value}
+          checked={checked}
+          onChange={handleInputChange}
+          disabled={isDisabled}
+          required={required}
+          className="peer sr-only"
+          data-cy={dataCy}
+          {...rest}
+        />
+        <label
+          htmlFor={inputId}
+          className={cx("peer-focus:outline", checkboxClasses)}
+          style={{ pointerEvents: isDisabled ? "none" : "auto" }}
+        >
+          {renderIcon()}
+        </label>
+      </div>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cx(
+            "cursor-pointer",
+            error && "text-text-critical",
+            labelClassName
+          )}
+        >
+          {label}
+        </label>
+      )}
+      {renderInfoIcon && (
+        <Button
+          type="button"
+          onClick={renderInfoIcon.onClick}
+          data-testid={renderInfoIcon.dataTestId}
+          className="ml-2 cursor-pointer text-icon-info"
+          aria-label="More information"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+          >
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+              stroke="currentColor"
+              strokeWidth="2"
+            />
+            <path
+              d="M12 16v-4"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M12 8h.01"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </Button>
+      )}
+    </div>
+  );
+
+  return checkboxElement;
+};
+
+Checkbox.displayName = "Checkbox";
+
+export type { CheckboxProps };