@windstream/react-shared-components 0.1.93 → 0.1.95

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

@@ -0,0 +1,65 @@
+import React from "react";
+import { Text } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("Text", () => {
+  it("renders children as a p element by default", () => {
+    render(<Text>Hello</Text>);
+    const el = screen.getByText("Hello");
+    expect(el.tagName).toBe("P");
+  });
+
+  it("renders as a custom element when 'as' prop is provided", () => {
+    render(<Text as="h1">Heading</Text>);
+    const el = screen.getByText("Heading");
+    expect(el.tagName).toBe("H1");
+  });
+
+  it("renders as a span", () => {
+    render(<Text as="span">Inline</Text>);
+    expect(screen.getByText("Inline").tagName).toBe("SPAN");
+  });
+
+  it("applies className", () => {
+    render(<Text className="text-bold">Styled</Text>);
+    expect(screen.getByText("Styled")).toHaveClass("text-bold");
+  });
+
+  it("uses empty string as default className", () => {
+    render(<Text>No class</Text>);
+    expect(screen.getByText("No class")).toHaveAttribute("class", "");
+  });
+
+  it("applies inline style", () => {
+    render(<Text style={{ color: "red" }}>Red</Text>);
+    expect(screen.getByText("Red").style.color).toBe("red");
+  });
+
+  it("passes additional HTML attributes", () => {
+    render(
+      <Text data-testid="custom-text" id="my-text">
+        Attr
+      </Text>
+    );
+    const el = screen.getByTestId("custom-text");
+    expect(el).toHaveAttribute("id", "my-text");
+  });
+
+  it("forwards ref to the element", () => {
+    const ref = React.createRef<HTMLElement>();
+    render(<Text ref={ref}>Ref test</Text>);
+    expect(ref.current).toBeInstanceOf(HTMLParagraphElement);
+    expect(ref.current?.textContent).toBe("Ref test");
+  });
+
+  it("renders without children", () => {
+    const { container } = render(<Text />);
+    expect(container.querySelector("p")).toBeInTheDocument();
+    expect(container.querySelector("p")?.textContent).toBe("");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Text.displayName).toBe("Text");
+  });
+});

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

@@ -0,0 +1,50 @@
+import { Tooltip } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("Tooltip", () => {
+  it("renders children", () => {
+    render(<Tooltip tooltipMsg="Info">Hover me</Tooltip>);
+    expect(screen.getByText("Hover me")).toBeInTheDocument();
+  });
+
+  it("sets data-text attribute with tooltip message", () => {
+    render(<Tooltip tooltipMsg="Helpful tip">Content</Tooltip>);
+    const span = screen.getByText("Content");
+    expect(span).toHaveAttribute("data-text", "Helpful tip");
+  });
+
+  it("applies tooltip-custom class to the span", () => {
+    render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
+    const span = screen.getByText("Child");
+    expect(span).toHaveClass("tooltip-custom");
+  });
+
+  it("applies custom className when provided", () => {
+    render(
+      <Tooltip tooltipMsg="Tip" className="extra-class">
+        Child
+      </Tooltip>
+    );
+    const span = screen.getByText("Child");
+    expect(span).toHaveClass("tooltip-custom");
+    expect(span).toHaveClass("extra-class");
+  });
+
+  it("does not add undefined to class when className is not provided", () => {
+    render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
+    const span = screen.getByText("Child");
+    expect(span.className).not.toContain("undefined");
+  });
+
+  it("injects a style element", () => {
+    const { container } = render(<Tooltip tooltipMsg="Tip">Child</Tooltip>);
+    const style = container.querySelector("style");
+    expect(style).toBeInTheDocument();
+    expect(style?.textContent).toContain(".tooltip-custom");
+  });
+
+  it("has the correct displayName", () => {
+    expect(Tooltip.displayName).toBe("Tooltip");
+  });
+});

package/src/components/view-cart-button/index.test.tsx

@@ -0,0 +1,57 @@
+import { ViewCartButton } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("ViewCartButton", () => {
+  const defaultProps = {
+    cartTotalText: "$49.99/mo",
+    onClick: jest.fn(),
+    isOpen: false,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders 'View cart' label", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    expect(screen.getByText("View cart")).toBeInTheDocument();
+  });
+
+  it("renders cart total text", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    expect(screen.getByTestId("cart-total")).toHaveTextContent("$49.99/mo");
+  });
+
+  it("calls onClick when clicked", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    fireEvent.click(screen.getByRole("button"));
+    expect(defaultProps.onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders arrow icon", () => {
+    render(<ViewCartButton {...defaultProps} />);
+    expect(screen.getByText("keyboard_arrow_up")).toBeInTheDocument();
+  });
+
+  it("applies rotate-0 class when isOpen is false", () => {
+    render(<ViewCartButton {...defaultProps} isOpen={false} />);
+    const icon = screen.getByText("keyboard_arrow_up");
+    expect(icon.className).toContain("rotate-0");
+  });
+
+  it("applies rotate-180 class when isOpen is true", () => {
+    render(<ViewCartButton {...defaultProps} isOpen={true} />);
+    const icon = screen.getByText("keyboard_arrow_up");
+    expect(icon.className).toContain("rotate-180");
+  });
+
+  it("passes additional button attributes", () => {
+    render(
+      <ViewCartButton {...defaultProps} disabled={true} aria-label="cart" />
+    );
+    const button = screen.getByRole("button");
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute("aria-label", "cart");
+  });
+});

package/src/contentful/blocks/accordion/index.test.tsx

@@ -0,0 +1,218 @@
+import Accordion from "./index";
+import { AccordionItem } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+const items: AccordionItem[] = [
+  { anchorId: "item-1", title: "First Question", description: "Answer one" },
+  { anchorId: "item-2", title: "Second Question", description: "Answer two" },
+  { anchorId: "item-3", title: "Third Question", description: "Answer three" },
+];
+
+describe("Contentful Accordion", () => {
+  beforeEach(() => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "" },
+    });
+  });
+
+  it("renders the title as h2 by default", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    const heading = screen.getByText("FAQ");
+    expect(heading.tagName).toBe("H2");
+  });
+
+  it("renders the title as h1 when enableHeading is true", () => {
+    render(<Accordion items={items} title="FAQ" enableHeading={true} />);
+    const heading = screen.getByText("FAQ");
+    expect(heading.tagName).toBe("H1");
+  });
+
+  it("renders all accordion item titles", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    expect(screen.getByText("First Question")).toBeInTheDocument();
+    expect(screen.getByText("Second Question")).toBeInTheDocument();
+    expect(screen.getByText("Third Question")).toBeInTheDocument();
+  });
+
+  it("renders item descriptions", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    expect(screen.getByText("Answer one")).toBeInTheDocument();
+    expect(screen.getByText("Answer two")).toBeInTheDocument();
+    expect(screen.getByText("Answer three")).toBeInTheDocument();
+  });
+
+  it("applies anchorId to the section", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" anchorId="faq-section" />
+    );
+    expect(container.querySelector("#faq-section")).toBeInTheDocument();
+  });
+
+  it("applies white background by default", () => {
+    const { container } = render(<Accordion items={items} title="FAQ" />);
+    expect(container.querySelector(".bg-white")).toBeInTheDocument();
+  });
+
+  it("applies navy background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="navy" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#00002D]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies blue background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="blue" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#07B2E2]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies green background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="green" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#26B170]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies yellow background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="yellow" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#F5FF1E]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies purple background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="purple" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#931D69]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies cream500 background", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" background="cream500" />
+    );
+    expect(
+      container.querySelector('section[class*="bg-[#FFFEEF]"]')
+    ).toBeInTheDocument();
+  });
+
+  it("applies maxWidth class by default", () => {
+    const { container } = render(<Accordion items={items} title="FAQ" />);
+    expect(container.querySelector(".max-w-120")).toBeInTheDocument();
+  });
+
+  it("does not apply maxWidth class when maxWidth is false", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" maxWidth={false} />
+    );
+    expect(container.querySelector(".max-w-120")).not.toBeInTheDocument();
+  });
+
+  it("renders dividers between items but not after the last", () => {
+    const { container } = render(<Accordion items={items} title="FAQ" />);
+    const dividers = container.querySelectorAll(
+      ".bg-bg-surface-tertiary-active"
+    );
+    expect(dividers).toHaveLength(items.length - 1);
+  });
+
+  it("expands items in initialExpandedItems", () => {
+    render(
+      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
+    );
+    const arrowsUp = screen.getAllByText("keyboard_arrow_up");
+    expect(arrowsUp.length).toBeGreaterThanOrEqual(1);
+  });
+
+  it("auto-expands item matching URL hash when hashAutoExpand is true", () => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "#item-2" },
+    });
+    render(<Accordion items={items} title="FAQ" hashAutoExpand={true} />);
+    expect(document.getElementById("item-2")).toBeInTheDocument();
+  });
+
+  it("does not auto-expand when hashAutoExpand is false", () => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "#item-2" },
+    });
+    render(<Accordion items={items} title="FAQ" hashAutoExpand={false} />);
+    const arrowsDown = screen.getAllByText("keyboard_arrow_down");
+    expect(arrowsDown.length).toBe(items.length);
+  });
+
+  it("does not duplicate item in expandedItems if already present", () => {
+    Object.defineProperty(window, "location", {
+      writable: true,
+      value: { hash: "#item-1" },
+    });
+    render(
+      <Accordion
+        items={items}
+        title="FAQ"
+        hashAutoExpand={true}
+        initialExpandedItems={["item-1"]}
+      />
+    );
+    expect(document.getElementById("item-1")).toBeInTheDocument();
+  });
+
+  it("applies itemContainerClassName", () => {
+    const { container } = render(
+      <Accordion items={items} title="FAQ" itemContainerClassName="gap-4" />
+    );
+    expect(container.querySelector(".gap-4")).toBeInTheDocument();
+  });
+
+  it("applies descriptionMaxWidth class", () => {
+    const { container } = render(
+      <Accordion
+        items={items}
+        title="FAQ"
+        descriptionMaxWidth="max-w-[500px]"
+      />
+    );
+    expect(container.querySelector(".max-w-\\[500px\\]")).toBeInTheDocument();
+  });
+
+  it("sets id on items with anchorId", () => {
+    render(<Accordion items={items} title="FAQ" />);
+    expect(document.getElementById("item-1")).toBeInTheDocument();
+    expect(document.getElementById("item-2")).toBeInTheDocument();
+  });
+
+  it("handles items without anchorId using index as key", () => {
+    const noAnchorItems: AccordionItem[] = [
+      { title: "Q1", description: "A1" },
+      { title: "Q2", description: "A2" },
+    ];
+    render(<Accordion items={noAnchorItems} title="FAQ" />);
+    expect(screen.getByText("Q1")).toBeInTheDocument();
+    expect(screen.getByText("Q2")).toBeInTheDocument();
+  });
+
+  it("toggles expanded state when an accordion item button is clicked", () => {
+    render(
+      <Accordion items={items} title="FAQ" initialExpandedItems={["item-1"]} />
+    );
+    const buttons = screen.getAllByRole("button");
+    fireEvent.click(buttons[0]);
+    fireEvent.click(buttons[0]);
+    expect(screen.getByText("First Question")).toBeInTheDocument();
+  });
+});

package/src/contentful/blocks/accordion/index.tsx

@@ -36,6 +36,7 @@ export const Accordion: React.FC<AccordionProps> = ({
     }
   }, [hashAutoExpand]);
 
+  /* istanbul ignore next -- passed to AccordionComponent which does not forward onClick */
   const handleToggle = (itemAnchorId: string) => {
     setExpandedItems(prev =>
       prev.includes(itemAnchorId)
@@ -90,7 +91,8 @@ export const Accordion: React.FC<AccordionProps> = ({
                   borderRadiusNone={true}
                   openOnlyOnDesktop={false}
                   {...(item.anchorId && {
-                    onClick: () => handleToggle(item.anchorId!),
+                    onClick: /* istanbul ignore next */ () =>
+                      handleToggle(item.anchorId!),
                   })}
                 >
                   <div className={descriptionMaxWidth}>

package/src/contentful/blocks/address-input-banner/index.test.tsx

@@ -0,0 +1,132 @@
+import { AddressInputBanner } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("AddressInputBanner", () => {
+  const defaultProps = {
+    title: "Check availability",
+    isVisible: true,
+    navHeight: 64,
+  };
+
+  it("renders title when visible", () => {
+    render(<AddressInputBanner {...defaultProps} />);
+    expect(screen.getByText("Check availability")).toBeInTheDocument();
+  });
+
+  it("returns null when isVisible is false", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} isVisible={false} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it("applies sticky top style from navHeight", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} navHeight={80} />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.style.top).toBe("80px");
+  });
+
+  it("applies yellow variant styles by default", () => {
+    const { container } = render(<AddressInputBanner {...defaultProps} />);
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-brand-accent");
+    expect(div.className).toContain("text-text");
+  });
+
+  it("applies white variant styles", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="white" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-white");
+  });
+
+  it("applies navy variant styles", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="navy" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-inverse");
+    expect(div.className).toContain("text-text-inverse");
+  });
+
+  it("applies green variant styles", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="green" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-success");
+    expect(div.className).toContain("text-text-inverse");
+  });
+
+  it("falls back to yellow for unknown variant", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="unknown" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-brand-accent");
+  });
+
+  it("is case-insensitive for variant", () => {
+    const { container } = render(
+      <AddressInputBanner {...defaultProps} variant="Navy" />
+    );
+    const div = container.firstChild as HTMLElement;
+    expect(div.className).toContain("bg-bg-fill-inverse");
+  });
+
+  it("renders renderCheckPlans output", () => {
+    const renderCheckPlans = jest.fn(() => (
+      <div data-testid="check-plans">Plans</div>
+    ));
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+    expect(screen.getByTestId("check-plans")).toBeInTheDocument();
+  });
+
+  it("calls renderCheckPlans with correct arguments", () => {
+    const renderCheckPlans = jest.fn(() => null);
+    const cta = {
+      buttonLabel: "See plans",
+      buttonVariant: "primary_brand",
+    } as any;
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        cta={cta}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+    expect(renderCheckPlans).toHaveBeenCalledWith({
+      ctaText: "See plans",
+      buttonVariant: "primary_brand",
+      showButtonAs: "solid",
+      cta,
+    });
+  });
+
+  it("uses default ctaLabel 'Check plans' when cta.buttonLabel is not provided", () => {
+    const renderCheckPlans = jest.fn(() => null);
+    render(
+      <AddressInputBanner
+        {...defaultProps}
+        renderCheckPlans={renderCheckPlans}
+      />
+    );
+    expect(renderCheckPlans).toHaveBeenCalledWith(
+      expect.objectContaining({ ctaText: "Check plans" })
+    );
+  });
+
+  it("does not crash without renderCheckPlans", () => {
+    const { container } = render(<AddressInputBanner {...defaultProps} />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});