@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/components/see-more/index.test.tsx

@@ -0,0 +1,96 @@
+import { SeeMore } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("SeeMore", () => {
+  const defaultList = ["Item 1", "Item 2", "Item 3"];
+
+  it("renders with default text when no text prop is provided", () => {
+    render(<SeeMore list={defaultList} />);
+    expect(screen.getByText("See details")).toBeInTheDocument();
+  });
+
+  it("renders with custom text when text prop is provided", () => {
+    render(<SeeMore list={defaultList} text="Show more info" />);
+    expect(screen.getByText("Show more info")).toBeInTheDocument();
+  });
+
+  it("renders the checklist items", () => {
+    render(<SeeMore list={defaultList} />);
+    defaultList.forEach(item => {
+      expect(screen.getByText(item)).toBeInTheDocument();
+    });
+  });
+
+  it("starts with details expanded (showDetails is true)", () => {
+    render(<SeeMore list={defaultList} />);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("shows keyboard_arrow_down icon when expanded", () => {
+    render(<SeeMore list={defaultList} />);
+    expect(screen.getByText("keyboard_arrow_down")).toBeInTheDocument();
+  });
+
+  it("collapses details when button is clicked", () => {
+    render(<SeeMore list={defaultList} />);
+    const button = screen.getByRole("button");
+
+    fireEvent.click(button);
+
+    expect(button).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("shows keyboard_arrow_up icon when collapsed", () => {
+    render(<SeeMore list={defaultList} />);
+    const button = screen.getByRole("button");
+
+    fireEvent.click(button);
+
+    expect(screen.getByText("keyboard_arrow_up")).toBeInTheDocument();
+  });
+
+  it("expands details again on second click", () => {
+    render(<SeeMore list={defaultList} />);
+    const button = screen.getByRole("button");
+
+    fireEvent.click(button);
+    fireEvent.click(button);
+
+    expect(button).toHaveAttribute("aria-expanded", "true");
+    expect(screen.getByText("keyboard_arrow_down")).toBeInTheDocument();
+  });
+
+  it("stops event propagation on click", () => {
+    const parentClickHandler = jest.fn();
+    render(
+      <div onClick={parentClickHandler}>
+        <SeeMore list={defaultList} />
+      </div>
+    );
+    const button = screen.getByRole("button");
+
+    fireEvent.click(button);
+
+    expect(parentClickHandler).not.toHaveBeenCalled();
+  });
+
+  it("passes list items to Checklist", () => {
+    const items = ["Feature A", "Feature B"];
+    render(<SeeMore list={items} />);
+
+    items.forEach(item => {
+      expect(screen.getByText(item)).toBeInTheDocument();
+    });
+  });
+
+  it("renders with an empty list without crashing", () => {
+    render(<SeeMore list={[]} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("has the correct displayName", () => {
+    expect(SeeMore.displayName).toBe("SeeMore");
+  });
+});

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

@@ -0,0 +1,256 @@
+import React from "react";
+import { Select } from "./index";
+import { SelectOption } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock react-select to simplify testing
+jest.mock("react-select", () => {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const { forwardRef } = require("react");
+  // eslint-disable-next-line react/display-name
+  const MockSelect = forwardRef((props: any, ref: any) => {
+    const {
+      options,
+      value,
+      placeholder,
+      onChange,
+      className,
+      classNames,
+      ...rest
+    } = props;
+
+    // Call classNames functions to exercise them for coverage
+    if (classNames) {
+      classNames.control?.({ isFocused: false });
+      classNames.control?.({ isFocused: true });
+      classNames.indicatorSeparator?.();
+      classNames.dropdownIndicator?.({ selectProps: { value: null } });
+      classNames.dropdownIndicator?.({ selectProps: { value: "test" } });
+      classNames.singleValue?.();
+      classNames.menu?.();
+      classNames.option?.({ isFocused: false, isSelected: false, label: "A" });
+      classNames.option?.({ isFocused: true, isSelected: false, label: "A" });
+      classNames.option?.({ isFocused: false, isSelected: true, label: "A" });
+      classNames.placeholder?.();
+      classNames.input?.();
+      classNames.valueContainer?.();
+    }
+
+    return (
+      <select
+        ref={ref}
+        data-testid={rest["data-testid"] || "mock-select"}
+        data-cy={rest["data-cy"]}
+        className={className}
+        value={value?.value || ""}
+        onChange={e => {
+          const selected = options?.find(
+            (o: SelectOption) => o.value === e.target.value
+          );
+          onChange?.(selected, { action: "select-option", option: selected });
+        }}
+      >
+        {placeholder && (
+          <option value="" disabled={true}>
+            {placeholder}
+          </option>
+        )}
+        {options?.map((opt: SelectOption) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    );
+  });
+
+  return {
+    __esModule: true,
+    default: MockSelect,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    createFilter: (filterConfig: any) => () => true,
+  };
+});
+
+const defaultOptions: SelectOption[] = [
+  { label: "Option A", value: "a" },
+  { label: "Option B", value: "b" },
+  { label: "Option C", value: "c" },
+];
+
+describe("Select", () => {
+  it("renders with options", () => {
+    render(<Select options={defaultOptions} data-testid="my-select" />);
+    expect(screen.getByTestId("my-select")).toBeInTheDocument();
+  });
+
+  it("renders placeholder", () => {
+    render(<Select options={defaultOptions} placeholder="Pick one" />);
+    expect(screen.getByText("Pick one")).toBeInTheDocument();
+  });
+
+  it("appends * to placeholder when required", () => {
+    render(
+      <Select options={defaultOptions} placeholder="Pick" required={true} />
+    );
+    expect(screen.getByText("Pick*")).toBeInTheDocument();
+  });
+
+  it("calls onChange when an option is selected", () => {
+    const onChange = jest.fn();
+    render(
+      <Select options={defaultOptions} onChange={onChange} data-testid="sel" />
+    );
+    fireEvent.change(screen.getByTestId("sel"), { target: { value: "b" } });
+    expect(onChange).toHaveBeenCalledWith(
+      defaultOptions[1],
+      expect.objectContaining({ action: "select-option" })
+    );
+  });
+
+  it("renders label when provided", () => {
+    render(<Select options={defaultOptions} label="My Label" />);
+    expect(screen.getByText("My Label")).toBeInTheDocument();
+  });
+
+  it("renders label with custom className", () => {
+    render(
+      <Select
+        options={defaultOptions}
+        label="Label"
+        labelClassName="custom-class"
+      />
+    );
+    const label = screen.getByText("Label");
+    expect(label).toHaveClass("custom-class");
+  });
+
+  it("does not render label when not provided", () => {
+    const { container } = render(<Select options={defaultOptions} />);
+    expect(container.querySelector("label")).not.toBeInTheDocument();
+  });
+
+  it("renders error message when error prop is provided", () => {
+    render(<Select options={defaultOptions} error="Required field" />);
+    expect(screen.getByText("Required field")).toBeInTheDocument();
+  });
+
+  it("renders helperText when no error", () => {
+    render(<Select options={defaultOptions} helperText="Choose wisely" />);
+    expect(screen.getByText("Choose wisely")).toBeInTheDocument();
+  });
+
+  it("does not render helperText when error is present", () => {
+    render(
+      <Select
+        options={defaultOptions}
+        error="Error"
+        helperText="Choose wisely"
+      />
+    );
+    expect(screen.getByText("Error")).toBeInTheDocument();
+    expect(screen.queryByText("Choose wisely")).not.toBeInTheDocument();
+  });
+
+  it("renders unstyled variant without label/error wrapper", () => {
+    const { container } = render(
+      <Select
+        options={defaultOptions}
+        variant="unstyled"
+        label="Should not appear"
+        error="Should not appear"
+      />
+    );
+    expect(screen.queryByText("Should not appear")).not.toBeInTheDocument();
+    // unstyled variant doesn't wrap in a div.w-full
+    expect(container.querySelector(".w-full")).not.toBeInTheDocument();
+  });
+
+  it("applies size sm classes via classNames", () => {
+    // This test exercises the getSizeClasses branch for "sm"
+    render(
+      <Select options={defaultOptions} size="sm" data-testid="sm-select" />
+    );
+    expect(screen.getByTestId("sm-select")).toBeInTheDocument();
+  });
+
+  it("applies default (md) size classes", () => {
+    render(
+      <Select options={defaultOptions} size="md" data-testid="md-select" />
+    );
+    expect(screen.getByTestId("md-select")).toBeInTheDocument();
+  });
+
+  it("handles isCustomStyle prop", () => {
+    render(
+      <Select
+        options={defaultOptions}
+        isCustomStyle={true}
+        data-testid="custom-select"
+      />
+    );
+    expect(screen.getByTestId("custom-select")).toBeInTheDocument();
+  });
+
+  it("handles hasError prop", () => {
+    render(
+      <Select
+        options={defaultOptions}
+        hasError={true}
+        data-testid="err-select"
+      />
+    );
+    expect(screen.getByTestId("err-select")).toBeInTheDocument();
+  });
+
+  it("handles filterOptions prop", () => {
+    render(
+      <Select
+        options={defaultOptions}
+        filterOptions={{ matchFrom: "start", ignoreCase: true }}
+        data-testid="filter-select"
+      />
+    );
+    expect(screen.getByTestId("filter-select")).toBeInTheDocument();
+  });
+
+  it("passes data-cy prop", () => {
+    render(<Select options={defaultOptions} data-cy="cypress-sel" />);
+    expect(
+      document.querySelector('[data-cy="cypress-sel"]')
+    ).toBeInTheDocument();
+  });
+
+  it("renders with a selected value", () => {
+    render(
+      <Select
+        options={defaultOptions}
+        value={defaultOptions[2]}
+        data-testid="val-select"
+      />
+    );
+    const select = screen.getByTestId("val-select") as HTMLSelectElement;
+    expect(select.value).toBe("c");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Select.displayName).toBe("Select");
+  });
+
+  it("exercises option classNames with last option label", () => {
+    // Ensures the last-option border logic is covered
+    const opts = [
+      { label: "First", value: "1" },
+      { label: "Last", value: "2" },
+    ];
+    render(
+      <Select
+        options={opts}
+        isCustomStyle={true}
+        data-testid="last-opt-select"
+      />
+    );
+    expect(screen.getByTestId("last-opt-select")).toBeInTheDocument();
+  });
+});

package/src/components/select-plan-button/index.test.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+import { SelectPlanButton } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("SelectPlanButton", () => {
+  const defaultProps = {
+    onSelect: jest.fn(),
+    speed: "500",
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders with default props", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    expect(screen.getByText("Select plan")).toBeInTheDocument();
+  });
+
+  it("calls onSelect when clicked", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(defaultProps.onSelect).toHaveBeenCalledTimes(1);
+  });
+
+  it("applies selected styles when isSelected is true", () => {
+    render(<SelectPlanButton {...defaultProps} isSelected={true} />);
+    const button = screen.getByRole("button");
+    expect(button.className).toContain("bg-bg-surface");
+    expect(button.className).toContain("text-text");
+  });
+
+  it("applies default (unselected) styles when isSelected is false", () => {
+    render(<SelectPlanButton {...defaultProps} isSelected={false} />);
+    const button = screen.getByRole("button");
+    expect(button.className).toContain("bg-bg-fill-brand");
+    expect(button.className).toContain("text-text-brand-on-bg-fill");
+  });
+
+  it("renders the expand_circle_right icon", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    expect(screen.getByText("expand_circle_right")).toBeInTheDocument();
+  });
+
+  it("applies icon className for unselected state", () => {
+    render(
+      <SelectPlanButton
+        {...defaultProps}
+        isSelected={false}
+        iconClassName="custom-icon"
+      />
+    );
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.className).toContain("text-icon-inverse");
+    expect(icon.className).toContain("custom-icon");
+  });
+
+  it("applies icon className for selected state", () => {
+    render(
+      <SelectPlanButton
+        {...defaultProps}
+        isSelected={true}
+        iconClassName="custom-icon"
+      />
+    );
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.className).toContain("text-icon");
+    expect(icon.className).toContain("custom-icon");
+  });
+
+  it("sets data-track attributes on the button", () => {
+    render(<SelectPlanButton {...defaultProps} speed="1000" />);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute(
+      "data-track-element-name",
+      "speed_plan_select_button"
+    );
+    expect(button).toHaveAttribute(
+      "data-track-click-text",
+      "Select plan speed 1000"
+    );
+    expect(button).toHaveAttribute(
+      "data-track-element-clicked",
+      "speed_plan_card"
+    );
+  });
+
+  it("calls renderCheckPlans with correct arguments", () => {
+    const renderCheckPlans = jest.fn(() => <div data-testid="check-plans" />);
+    render(
+      <SelectPlanButton
+        {...defaultProps}
+        speed="300"
+        techType="fiber"
+        isMax={true}
+        cta={{ label: "Go", url: "/go" } as any}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+
+    expect(renderCheckPlans).toHaveBeenCalledWith({
+      speedCardConfig: expect.objectContaining({
+        speed: "300",
+        techType: "fiber",
+        isMax: true,
+        isModalOpen: false,
+      }),
+      cta: { label: "Go", url: "/go" },
+    });
+    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
+  });
+
+  it("sets isModalOpen to true after click and passes setModalOpen", () => {
+    let capturedConfig: any;
+    const renderCheckPlans = jest.fn(args => {
+      capturedConfig = args;
+      return null;
+    });
+
+    const { rerender } = render(
+      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
+    );
+
+    // Initially modal is closed
+    expect(renderCheckPlans).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
+      })
+    );
+
+    // Click opens modal
+    fireEvent.click(screen.getByRole("button"));
+
+    // After click, re-render happens with open=true
+    expect(renderCheckPlans).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        speedCardConfig: expect.objectContaining({ isModalOpen: true }),
+      })
+    );
+
+    // Call setModalOpen to close
+    capturedConfig.speedCardConfig.setModalOpen();
+
+    // Need rerender to capture new state
+    rerender(
+      <SelectPlanButton {...defaultProps} renderCheckPlans={renderCheckPlans} />
+    );
+
+    expect(renderCheckPlans).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        speedCardConfig: expect.objectContaining({ isModalOpen: false }),
+      })
+    );
+  });
+
+  it("renders without renderCheckPlans (optional)", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+
+  it("uses default iconSize of 24", () => {
+    render(<SelectPlanButton {...defaultProps} />);
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.style.fontSize).toBe("24px");
+  });
+
+  it("uses custom iconSize", () => {
+    render(<SelectPlanButton {...defaultProps} iconSize={32} />);
+    const icon = screen.getByText("expand_circle_right");
+    expect(icon.style.fontSize).toBe("32px");
+  });
+});

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

@@ -0,0 +1,74 @@
+import { PageSkeleton, Skeleton } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("Skeleton", () => {
+  it("renders with default props (1 skeleton item)", () => {
+    const { container } = render(<Skeleton />);
+    const items = container.querySelectorAll(".h-8");
+    expect(items).toHaveLength(1);
+  });
+
+  it("renders the specified count of skeleton items", () => {
+    const { container } = render(<Skeleton count={4} />);
+    const items = container.querySelectorAll(".h-8");
+    expect(items).toHaveLength(4);
+  });
+
+  it("applies custom className to each skeleton item", () => {
+    const { container } = render(<Skeleton count={2} className="w-1/2" />);
+    const items = container.querySelectorAll(".h-8");
+    items.forEach(item => {
+      expect(item.className).toContain("w-1/2");
+    });
+  });
+
+  it("applies decreasing opacity to each item", () => {
+    const { container } = render(<Skeleton count={3} />);
+    const items = container.querySelectorAll(".h-8");
+    expect(items[0].style.opacity).toBe("1");
+    expect(items[1].style.opacity).toBe("0.9");
+    expect(items[2].style.opacity).toBe("0.8");
+  });
+
+  it("wraps items in an animate-pulse container", () => {
+    const { container } = render(<Skeleton />);
+    expect(container.firstChild).toHaveClass("animate-pulse", "space-y-4");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Skeleton.displayName).toBe("Skeleton");
+  });
+});
+
+describe("PageSkeleton", () => {
+  it("renders the generic-skeleton container", () => {
+    render(<PageSkeleton />);
+    expect(screen.getByTestId("generic-skeleton")).toBeInTheDocument();
+  });
+
+  it("renders title section", () => {
+    render(<PageSkeleton />);
+    expect(screen.getByTestId("title")).toBeInTheDocument();
+  });
+
+  it("renders subtitle section", () => {
+    render(<PageSkeleton />);
+    expect(screen.getByTestId("subtitle")).toBeInTheDocument();
+  });
+
+  it("renders content section", () => {
+    render(<PageSkeleton />);
+    expect(screen.getByTestId("content")).toBeInTheDocument();
+  });
+
+  it("renders additional-info section", () => {
+    render(<PageSkeleton />);
+    expect(screen.getByTestId("additional-info")).toBeInTheDocument();
+  });
+
+  it("renders cta-button section", () => {
+    render(<PageSkeleton />);
+    expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,76 @@
+import { Spinner } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("Spinner", () => {
+  it("renders with role status", () => {
+    render(<Spinner />);
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+
+  it("renders a screen-reader-only loading text", () => {
+    render(<Spinner />);
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("applies medium size class by default", () => {
+    const { container } = render(<Spinner />);
+    const svg = container.querySelector("svg");
+    const classes = svg?.getAttribute("class") || "";
+    expect(classes).toContain("w-6");
+    expect(classes).toContain("h-6");
+  });
+
+  it("applies small size class", () => {
+    const { container } = render(<Spinner size="small" />);
+    const svg = container.querySelector("svg");
+    const classes = svg?.getAttribute("class") || "";
+    expect(classes).toContain("w-4");
+    expect(classes).toContain("h-4");
+  });
+
+  it("applies large size class", () => {
+    const { container } = render(<Spinner size="large" />);
+    const svg = container.querySelector("svg");
+    const classes = svg?.getAttribute("class") || "";
+    expect(classes).toContain("w-8");
+    expect(classes).toContain("h-8");
+  });
+
+  it("applies xlarge size class", () => {
+    const { container } = render(<Spinner size="xlarge" />);
+    const svg = container.querySelector("svg");
+    const classes = svg?.getAttribute("class") || "";
+    expect(classes).toContain("w-12");
+    expect(classes).toContain("h-12");
+  });
+
+  it("uses white as default color", () => {
+    const { container } = render(<Spinner />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("fill", "#fff");
+  });
+
+  it("uses custom color when provided", () => {
+    const { container } = render(<Spinner color="#ff0000" />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("fill", "#ff0000");
+  });
+
+  it("applies custom className to the svg", () => {
+    const { container } = render(<Spinner className="custom-spinner" />);
+    const svg = container.querySelector("svg");
+    const classes = svg?.getAttribute("class") || "";
+    expect(classes).toContain("custom-spinner");
+  });
+
+  it("svg has aria-hidden true", () => {
+    const { container } = render(<Spinner />);
+    const svg = container.querySelector("svg");
+    expect(svg).toHaveAttribute("aria-hidden", "true");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Spinner.displayName).toBe("Spinner");
+  });
+});