@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/navigation/mobile-link-groups.tsx/index.test.tsx

@@ -0,0 +1,131 @@
+import React from "react";
+import { MobileLinkGroups } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid={`icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: ({
+    children,
+    buttonClassName,
+    onClick,
+    linkClassName,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    linkVariant,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    showButtonAs,
+    ...rest
+  }: any) => (
+    <button
+      data-testid="button"
+      className={buttonClassName || linkClassName}
+      onClick={onClick}
+      aria-expanded={rest["aria-expanded"]}
+    >
+      {children || rest.buttonLabel}
+    </button>
+  ),
+}));
+
+describe("MobileLinkGroups", () => {
+  it("renders nothing when link is undefined", () => {
+    const { container } = render(<MobileLinkGroups link={undefined} />);
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders single Button when link has href (isButton)", () => {
+    const link = { href: "/shop", buttonLabel: "Shop", anchorId: "shop1" };
+    render(<MobileLinkGroups link={link as any} />);
+    expect(screen.getByTestId("button")).toHaveTextContent("Shop");
+  });
+
+  describe("Group rendering", () => {
+    const groupLink = {
+      anchorId: "grp-1",
+      title: "Services",
+      items: {
+        items: [
+          { buttonLabel: "Internet", href: "/internet", anchorId: "s1" },
+          { buttonLabel: "TV", href: "/tv", anchorId: "s2" },
+        ],
+      },
+    };
+
+    it("renders group title button", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      expect(screen.getByText("Services")).toBeInTheDocument();
+    });
+
+    it("renders down arrow icon when closed", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      expect(
+        screen.getByTestId("icon-keyboard_arrow_down")
+      ).toBeInTheDocument();
+    });
+
+    it("toggles open state and shows up arrow when open", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      expect(screen.getByTestId("icon-keyboard_arrow_up")).toBeInTheDocument();
+    });
+
+    it("renders submenu items when open", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      fireEvent.click(screen.getAllByTestId("button")[0]);
+      expect(screen.getByText("Internet")).toBeInTheDocument();
+      expect(screen.getByText("TV")).toBeInTheDocument();
+    });
+
+    it("renders submenu as list items", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      fireEvent.click(screen.getAllByTestId("button")[0]);
+      const listItems = screen.getAllByRole("listitem");
+      expect(listItems).toHaveLength(2);
+    });
+
+    it("closes on second toggle click", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      fireEvent.click(toggleBtn);
+      expect(
+        screen.getByTestId("icon-keyboard_arrow_down")
+      ).toBeInTheDocument();
+    });
+
+    it("does not render submenu when closed", () => {
+      render(<MobileLinkGroups link={groupLink as any} />);
+      expect(screen.queryByRole("list")).not.toBeInTheDocument();
+    });
+
+    it("handles null items", () => {
+      const nullItems = { ...groupLink, items: null };
+      render(<MobileLinkGroups link={nullItems as any} />);
+      fireEvent.click(screen.getAllByTestId("button")[0]);
+      // No list rendered since subMenu is empty
+      expect(screen.queryByRole("list")).not.toBeInTheDocument();
+    });
+
+    it("handles empty items array", () => {
+      const emptyItems = { ...groupLink, items: { items: [] } };
+      render(<MobileLinkGroups link={emptyItems as any} />);
+      fireEvent.click(screen.getAllByTestId("button")[0]);
+      expect(screen.queryByRole("list")).not.toBeInTheDocument();
+    });
+
+    it("renders null title when title is missing", () => {
+      const noTitle = { ...groupLink, title: null };
+      render(<MobileLinkGroups link={noTitle as any} />);
+      // Should render without error, button exists
+      expect(screen.getAllByTestId("button")[0]).toBeInTheDocument();
+    });
+  });
+});

package/src/contentful/blocks/primary-hero/index.test.tsx

@@ -0,0 +1,286 @@
+import React from "react";
+import { PrimaryHero } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/checklist", () => ({
+  Checklist: ({ items }: any) => (
+    <ul data-testid="checklist">
+      {items?.map((i: string, idx: number) => (
+        <li key={idx}>{i}</li>
+      ))}
+    </ul>
+  ),
+}));
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt, className }: any) => (
+    <img data-testid="next-image" src={src} alt={alt} className={className} />
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: ({
+    children,
+    buttonLabel,
+    linkClassName,
+    buttonClassName,
+    ...rest
+  }: any) => (
+    <button data-testid="button" className={buttonClassName || linkClassName}>
+      {children || buttonLabel || rest.label}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+const baseProps = { title: "Fast Internet" };
+
+describe("PrimaryHero", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  it("renders title as h2 by default", () => {
+    render(<PrimaryHero {...baseProps} />);
+    expect(screen.getByText("Fast Internet").tagName).toBe("H2");
+  });
+
+  it("renders title as h1 when showAsHeading is true", () => {
+    render(<PrimaryHero {...baseProps} showAsHeading={true} />);
+    expect(screen.getByText("Fast Internet").tagName).toBe("H1");
+  });
+
+  it("does not render title section when title is empty", () => {
+    render(<PrimaryHero {...baseProps} title="" />);
+    expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+  });
+
+  it("renders subtitle when provided", () => {
+    render(<PrimaryHero {...baseProps} subTitle="Super fast speeds" />);
+    expect(screen.getByText("Super fast speeds")).toBeInTheDocument();
+  });
+
+  it("does not render subtitle when not provided", () => {
+    const { container } = render(<PrimaryHero {...baseProps} />);
+    expect(container.querySelectorAll("p.subheading3")).toHaveLength(0);
+  });
+
+  describe("Price section", () => {
+    it("renders price with dollar sign", () => {
+      render(<PrimaryHero {...baseProps} price="49.99" />);
+      expect(screen.getByText("$")).toBeInTheDocument();
+      expect(screen.getByText("49.99")).toBeInTheDocument();
+    });
+
+    it("renders priceSuffix when provided", () => {
+      render(<PrimaryHero {...baseProps} price="30" priceSuffix="/mo" />);
+      expect(screen.getByText("/mo")).toBeInTheDocument();
+    });
+
+    it("does not render priceSuffix when not provided", () => {
+      render(<PrimaryHero {...baseProps} price="30" />);
+      expect(screen.queryByText("/mo")).not.toBeInTheDocument();
+    });
+
+    it("renders priceCallout split by pipe", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          price="50"
+          priceCallout="Starting at|per month"
+        />
+      );
+      expect(screen.getByText("Starting at")).toBeInTheDocument();
+      expect(screen.getByText("per month")).toBeInTheDocument();
+    });
+
+    it("does not render priceCallout when not provided", () => {
+      render(<PrimaryHero {...baseProps} price="50" />);
+      expect(screen.queryByText("Starting at")).not.toBeInTheDocument();
+    });
+
+    it("does not render price section when price is not provided", () => {
+      render(<PrimaryHero {...baseProps} />);
+      expect(screen.queryByText("$")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Checklist", () => {
+    it("renders checklist when provided", () => {
+      const checklist = [{ title: "No data caps" }, { title: "Free install" }];
+      render(<PrimaryHero {...baseProps} checklist={checklist} />);
+      expect(screen.getByTestId("checklist")).toBeInTheDocument();
+      expect(screen.getByText("No data caps")).toBeInTheDocument();
+      expect(screen.getByText("Free install")).toBeInTheDocument();
+    });
+
+    it("does not render checklist when not provided", () => {
+      render(<PrimaryHero {...baseProps} />);
+      expect(screen.queryByTestId("checklist")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Primary CTA", () => {
+    it("renders primaryCta1 button", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta1={{ buttonLabel: "Get Started", href: "/start" }}
+        />
+      );
+      expect(screen.getByText("Get Started")).toBeInTheDocument();
+    });
+
+    it("hides primaryCta1 on mobile when hideOnMobileCta1 is true", () => {
+      const { container } = render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta1={{ buttonLabel: "Go" }}
+          hideOnMobileCta1={true}
+        />
+      );
+      const ctaWrapper = container.querySelector(".hidden.md\\:block");
+      expect(ctaWrapper).toBeInTheDocument();
+    });
+
+    it("does not render primaryCta1 when not provided", () => {
+      render(<PrimaryHero {...baseProps} />);
+      expect(screen.queryByText("Get Started")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Secondary CTA", () => {
+    it("renders secondaryCtaPrefix and secondaryCta", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          secondaryCtaPrefix="Or"
+          secondaryCta={{ buttonLabel: "Call us" }}
+        />
+      );
+      expect(screen.getAllByText("Or").length).toBeGreaterThan(0);
+      expect(screen.getAllByText("Call us").length).toBeGreaterThan(0);
+    });
+
+    it("renders only secondaryCtaPrefix without secondaryCta", () => {
+      render(<PrimaryHero {...baseProps} secondaryCtaPrefix="Or" />);
+      expect(screen.getAllByText("Or").length).toBeGreaterThan(0);
+    });
+
+    it("renders only secondaryCta without prefix", () => {
+      render(
+        <PrimaryHero {...baseProps} secondaryCta={{ buttonLabel: "Call us" }} />
+      );
+      expect(screen.getAllByText("Call us").length).toBeGreaterThan(0);
+    });
+
+    it("does not render secondary section when neither provided", () => {
+      const { container } = render(<PrimaryHero {...baseProps} />);
+      expect(container.querySelectorAll(".md\\:flex")).toHaveLength(0);
+    });
+  });
+
+  describe("Bottom link", () => {
+    it("renders bottom link when buttonLabel and href exist", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          bottomLink={{ buttonLabel: "Learn more", href: "/learn" }}
+        />
+      );
+      expect(screen.getAllByText("Learn more").length).toBeGreaterThan(0);
+    });
+
+    it("renders bottom link when only href exists (label is from label prop)", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          bottomLink={{ label: "Details", href: "/details" }}
+        />
+      );
+      expect(screen.getAllByText("Details").length).toBeGreaterThan(0);
+    });
+
+    it("does not render bottom link when no label and no href", () => {
+      render(<PrimaryHero {...baseProps} bottomLink={{}} />);
+      // No button rendered for bottom link
+      expect(screen.queryAllByTestId("button")).toHaveLength(0);
+    });
+
+    it("does not render bottom link when bottomLink is undefined", () => {
+      render(<PrimaryHero {...baseProps} />);
+      expect(screen.queryByText("Learn more")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Pricing description disclaimer", () => {
+    it("renders pricingDescriptionDisclaimer (desktop and mobile)", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          pricingDescriptionDisclaimer="Taxes apply"
+        />
+      );
+      expect(screen.getAllByText("Taxes apply")).toHaveLength(2);
+    });
+
+    it("does not render disclaimer when not provided", () => {
+      render(<PrimaryHero {...baseProps} />);
+      expect(screen.queryByText("Taxes apply")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Images", () => {
+    it("renders carousel image (mobile and desktop)", () => {
+      render(
+        <PrimaryHero
+          {...baseProps}
+          carouselImages={["https://img.test/hero.jpg"]}
+        />
+      );
+      const imgs = screen.getAllByAltText("Hero");
+      expect(imgs).toHaveLength(2);
+      expect(imgs[0]).toHaveAttribute("src", "https://img.test/hero.jpg");
+    });
+
+    it("does not render carousel image when empty array", () => {
+      render(<PrimaryHero {...baseProps} carouselImages={[]} />);
+      expect(screen.queryByAltText("Hero")).not.toBeInTheDocument();
+    });
+
+    it("renders badge image (mobile and desktop)", () => {
+      render(
+        <PrimaryHero {...baseProps} badgeImage="https://img.test/badge.png" />
+      );
+      const badges = screen.getAllByAltText("Badge");
+      expect(badges).toHaveLength(2);
+    });
+
+    it("does not render badge image when not provided", () => {
+      render(<PrimaryHero {...baseProps} />);
+      expect(screen.queryByAltText("Badge")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("renderCheckPlans", () => {
+    it("passes renderCheckPlans to Button", () => {
+      const renderFn = jest.fn();
+      render(
+        <PrimaryHero
+          {...baseProps}
+          primaryCta1={{ buttonLabel: "Go" }}
+          renderCheckPlans={renderFn}
+        />
+      );
+      expect(screen.getByText("Go")).toBeInTheDocument();
+    });
+  });
+});

package/src/contentful/blocks/primary-hero/index.tsx

@@ -29,9 +29,8 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
   } = props;
 
   const bottomLinkLabel = bottomLink?.buttonLabel ?? bottomLink?.label;
-  console.log(primaryCta1);
   return (
-    <div className="component-container p-5 lg:h-[724px] lg:p-0">
+    <div className="component-container p-5 lg:flex lg:min-h-[724px] lg:items-center lg:p-0 lg:py-4">
       <div
         className={cx(
           "primary-hero-container mx-auto flex flex-col sm:items-center sm:text-center lg:h-full lg:max-w-120 lg:flex-row lg:items-center lg:justify-between lg:gap-4 lg:px-4 lg:text-left"
@@ -86,7 +85,11 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
             {checklist && (
               <Checklist
                 listItemClassName="text-white text-left"
-                items={checklist.map(item => item.title)}
+                items={checklist.map(item =>
+                  item.iconUrl
+                    ? { title: item.title, iconUrl: item.iconUrl }
+                    : item.title
+                )}
               />
             )}
 
@@ -186,7 +189,7 @@ export const PrimaryHero: React.FC<PrimaryHeroProps> = props => {
           ) : null}
 
           {secondaryCtaPrefix || secondaryCta ? (
-            <div className="flex md:hidden">
+            <div className="flex flex-wrap items-center text-white md:hidden">
               {secondaryCtaPrefix && (
                 <Text as="span" className="body2 mr-1">
                   {secondaryCtaPrefix}