@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/search-block/index.test.tsx

@@ -0,0 +1,268 @@
+import React from "react";
+import { SearchBlock } from "./index";
+import { SearchBlockProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, type, className, ...rest }: any) => (
+    <button onClick={onClick} type={type} className={className} {...rest}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/input", () => ({
+  Input: ({
+    value,
+    onChange,
+    placeholder,
+    className,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    containerClassName,
+    ...rest
+  }: any) => (
+    <input
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      className={className}
+      data-testid="search-input"
+      {...rest}
+    />
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid={`icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+const defaultProps: SearchBlockProps = {
+  title: "Search Our Plans",
+  backgroundColor: "white",
+  color: "dark",
+};
+
+describe("SearchBlock", () => {
+  describe("Rendering", () => {
+    it("renders with data-testid", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("search-block")).toBeInTheDocument();
+    });
+
+    it("renders title", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByText("Search Our Plans")).toBeInTheDocument();
+    });
+
+    it("renders with default anchorId", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("search-block")).toHaveAttribute(
+        "id",
+        "SearchBlock"
+      );
+    });
+
+    it("renders with custom anchorId", () => {
+      render(<SearchBlock {...defaultProps} anchorId="custom-search" />);
+      expect(screen.getByTestId("search-block")).toHaveAttribute(
+        "id",
+        "custom-search"
+      );
+    });
+
+    it("renders search input with placeholder", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          searchInputPlaceholder="Enter your address"
+        />
+      );
+      expect(screen.getByTestId("search-input")).toHaveAttribute(
+        "placeholder",
+        "Enter your address"
+      );
+    });
+
+    it("renders search icon button", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.getByTestId("icon-search")).toBeInTheDocument();
+    });
+
+    it("renders submit button with type submit", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const submitBtn = screen.getByTestId("icon-search").closest("button");
+      expect(submitBtn).toHaveAttribute("type", "submit");
+    });
+  });
+
+  describe("Optional content", () => {
+    it("renders subtitle when provided", () => {
+      render(<SearchBlock {...defaultProps} subTitle="Find the best plan" />);
+      expect(screen.getByText("Find the best plan")).toBeInTheDocument();
+    });
+
+    it("does not render subtitle when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByText("Find the best plan")).not.toBeInTheDocument();
+    });
+
+    it("renders searchDescription when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          searchDescription="Enter your ZIP code"
+        />
+      );
+      expect(screen.getByText("Enter your ZIP code")).toBeInTheDocument();
+    });
+
+    it("does not render searchDescription when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByText("Enter your ZIP code")).not.toBeInTheDocument();
+    });
+
+    it("renders caption ReactNode when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          caption={<div data-testid="caption">Caption content</div>}
+        />
+      );
+      expect(screen.getByTestId("caption")).toBeInTheDocument();
+    });
+
+    it("does not render caption when not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      expect(screen.queryByTestId("caption")).not.toBeInTheDocument();
+    });
+
+    it("renders basicCaption ReactNode when provided", () => {
+      render(
+        <SearchBlock
+          {...defaultProps}
+          basicCaption={<p data-testid="basic-caption">Basic caption</p>}
+        />
+      );
+      expect(screen.getByTestId("basic-caption")).toBeInTheDocument();
+    });
+  });
+
+  describe("Heading levels", () => {
+    it("renders title as h2 when enableHeading is false/undefined", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const el = screen.getByText("Search Our Plans");
+      expect(el.tagName).toBe("H2");
+    });
+
+    it("renders title as h1 when enableHeading is true", () => {
+      render(<SearchBlock {...defaultProps} enableHeading={true} />);
+      const el = screen.getByText("Search Our Plans");
+      expect(el.tagName).toBe("H1");
+    });
+  });
+
+  describe("Background and color themes", () => {
+    it("applies supporting background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="supporting" />);
+      expect(screen.getByTestId("search-block")).toHaveClass(
+        "bg-bg-fill-brand-supporting"
+      );
+    });
+
+    it("applies white background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="white" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("bg-bg");
+    });
+
+    it("applies brand background class", () => {
+      render(<SearchBlock {...defaultProps} backgroundColor="brand" />);
+      expect(screen.getByTestId("search-block")).toHaveClass(
+        "bg-bg-fill-brand"
+      );
+    });
+
+    it("applies dark text color", () => {
+      render(<SearchBlock {...defaultProps} color="dark" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("text-text");
+    });
+
+    it("applies light (white) text color", () => {
+      render(<SearchBlock {...defaultProps} color="light" />);
+      expect(screen.getByTestId("search-block")).toHaveClass("text-white");
+    });
+  });
+
+  describe("Form submission", () => {
+    it("calls onSubmit with searchText on form submit", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const input = screen.getByTestId("search-input");
+      fireEvent.change(input, { target: { value: "90210" } });
+      const form = input.closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "90210" });
+    });
+
+    it("calls onSubmit with empty string when no text entered", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "" });
+    });
+
+    it("does not throw when onSubmit is not provided", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      expect(() => fireEvent.submit(form)).not.toThrow();
+    });
+
+    it("prevents default form submission", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const form = screen.getByTestId("search-input").closest("form")!;
+      const submitEvent = new Event("submit", {
+        bubbles: true,
+        cancelable: true,
+      });
+      const prevented = !form.dispatchEvent(submitEvent);
+      expect(prevented).toBe(true);
+    });
+  });
+
+  describe("Input interaction", () => {
+    it("updates input value on change", () => {
+      render(<SearchBlock {...defaultProps} />);
+      const input = screen.getByTestId("search-input") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "test query" } });
+      expect(input.value).toBe("test query");
+    });
+
+    it("submits the latest typed value", () => {
+      const mockSubmit = jest.fn();
+      render(<SearchBlock {...defaultProps} onSubmit={mockSubmit} />);
+      const input = screen.getByTestId("search-input");
+      fireEvent.change(input, { target: { value: "first" } });
+      fireEvent.change(input, { target: { value: "second" } });
+      const form = input.closest("form")!;
+      fireEvent.submit(form);
+      expect(mockSubmit).toHaveBeenCalledWith({ searchText: "second" });
+    });
+  });
+});

package/src/contentful/blocks/shape-background-wrapper/index.test.tsx

@@ -0,0 +1,284 @@
+import React from "react";
+import { ShapeBackgroundWrapper } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+describe("ShapeBackgroundWrapper", () => {
+  describe("Rendering with show=true (default)", () => {
+    it("renders children inside shape-bg-content wrapper", () => {
+      render(
+        <ShapeBackgroundWrapper background="white">
+          <p>Child content</p>
+        </ShapeBackgroundWrapper>
+      );
+      expect(screen.getByText("Child content")).toBeInTheDocument();
+      expect(
+        screen.getByText("Child content").closest(".shape-bg-content")
+      ).toBeInTheDocument();
+    });
+
+    it("renders the outer container with shape-bg class", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Test</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
+    });
+
+    it("renders content div with z-[1] for layering above SVG", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Layered</span>
+        </ShapeBackgroundWrapper>
+      );
+      const content = container.querySelector(".shape-bg-content");
+      expect(content).toHaveClass("relative", "z-[1]");
+    });
+  });
+
+  describe("Rendering with show=false", () => {
+    it("renders children without shape-bg wrapper", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} background="navy">
+          <p>Hidden shape</p>
+        </ShapeBackgroundWrapper>
+      );
+      expect(screen.getByText("Hidden shape")).toBeInTheDocument();
+      expect(container.querySelector(".shape-bg")).not.toBeInTheDocument();
+    });
+
+    it("does not render any SVG when show is false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} path="path1" background="white">
+          <span>No SVG</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector("svg")).not.toBeInTheDocument();
+    });
+
+    it("applies className when show is false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper show={false} className="custom-class">
+          <span>Styled</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.firstChild).toHaveClass("custom-class");
+    });
+
+    it("applies custom background style when show is false and background is non-theme", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper
+          show={false}
+          background="linear-gradient(red, blue)"
+        >
+          <span>Gradient</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.firstChild).toHaveStyle({
+        background: "linear-gradient(red, blue)",
+      });
+    });
+  });
+
+  describe("SVG path rendering", () => {
+    it("renders path1 SVG when path='path1'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path1" background="white">
+          <span>Path1</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "2262");
+      expect(svgs[0]).toHaveAttribute("height", "4359");
+    });
+
+    it("renders path2 SVG by default", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Default path</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3739");
+      expect(svgs[0]).toHaveAttribute("height", "3666");
+    });
+
+    it("renders path3 SVG when path='path3'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path3" background="white">
+          <span>Path3</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3044");
+      expect(svgs[0]).toHaveAttribute("height", "3248");
+    });
+
+    it("renders path4 SVG when path='path4'", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path4" background="white">
+          <span>Path4</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svgs = container.querySelectorAll("svg");
+      expect(svgs).toHaveLength(1);
+      expect(svgs[0]).toHaveAttribute("width", "3739");
+      expect(svgs[0]).toHaveAttribute("height", "3666");
+    });
+
+    it("does not render SVG for unrecognized path value", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path={"path5" as any} background="white">
+          <span>Unknown</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector("svg")).not.toBeInTheDocument();
+    });
+
+    it("marks SVG with aria-hidden and focusable=false", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path1" background="white">
+          <span>Accessible</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg).toHaveAttribute("aria-hidden", "true");
+      expect(svg).toHaveAttribute("focusable", "false");
+    });
+
+    it("applies pointer-events-none to SVG", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper path="path2" background="white">
+          <span>Non-interactive</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg).toHaveClass("pointer-events-none");
+    });
+  });
+
+  describe("Background themes", () => {
+    it.each([
+      ["blue", "bg-[#07B2E2]"],
+      ["green", "bg-[#26B170]"],
+      ["yellow", "bg-[#F5FF1E]"],
+      ["purple", "bg-[#931D69]"],
+      ["white", "bg-white"],
+      ["navy", "bg-[#00002D]"],
+    ] as const)("applies %s background class", (bg, expectedClass) => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background={bg}>
+          <span>BG Test</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain(expectedClass);
+    });
+
+    it("applies inline style for custom (non-theme) background", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="#FF5733">
+          <span>Custom BG</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg") as HTMLElement;
+      expect(outer.style.background).toBe("rgb(255, 87, 51)");
+    });
+
+    it("falls back to bg-white when no background provided", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper>
+          <span>No BG</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain("bg-white");
+    });
+  });
+
+  describe("Fill color (SVG)", () => {
+    it.each([
+      ["blue", "text-[#07B2E2]"],
+      ["green", "text-[#26B170]"],
+      ["yellow", "text-[#F5FF1E]"],
+      ["purple", "text-[#931D69]"],
+      ["white", "text-white"],
+      ["navy", "text-[#00002D]"],
+    ] as const)("applies %s fill color to SVG", (fill, expectedClass) => {
+      const { container } = render(
+        <ShapeBackgroundWrapper fill={fill} background="white">
+          <span>Fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain(expectedClass);
+    });
+
+    it("defaults to yellow fill when fill not specified", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>Default fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
+    });
+
+    it("falls back to yellow for unrecognized fill value", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper fill="magenta" background="white">
+          <span>Unknown fill</span>
+        </ShapeBackgroundWrapper>
+      );
+      const svg = container.querySelector("svg")!;
+      expect(svg.className.baseVal).toContain("text-[#F5FF1E]");
+    });
+  });
+
+  describe("className prop", () => {
+    it("applies custom className to shape-bg wrapper", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper className="extra-class" background="white">
+          <span>Classy</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer).toHaveClass("extra-class");
+    });
+
+    it("handles undefined className without errors", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>No class</span>
+        </ShapeBackgroundWrapper>
+      );
+      expect(container.querySelector(".shape-bg")).toBeInTheDocument();
+    });
+  });
+
+  describe("maxFit prop", () => {
+    it("applies max-content class when maxFit is true", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper maxFit={true} background="white">
+          <span>Max fit</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).toContain("max-content");
+    });
+
+    it("does not apply max-content when maxFit is false/undefined", () => {
+      const { container } = render(
+        <ShapeBackgroundWrapper background="white">
+          <span>No max fit</span>
+        </ShapeBackgroundWrapper>
+      );
+      const outer = container.querySelector(".shape-bg")!;
+      expect(outer.className).not.toContain("max-content");
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import React from "react";
+import { Text } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/text", () => ({
+  Text: ({ children }: { children: React.ReactNode }) => (
+    <span data-testid="text-component">{children}</span>
+  ),
+}));
+
+describe("Text (Contentful Block)", () => {
+  describe("Rendering", () => {
+    it("renders the Text Block placeholder text", () => {
+      render(<Text fields={{}} />);
+      expect(screen.getByText("Text Block")).toBeInTheDocument();
+    });
+
+    it("renders inside a div wrapper", () => {
+      const { container } = render(<Text fields={{}} />);
+      expect(container.firstChild?.nodeName).toBe("DIV");
+    });
+
+    it("uses the shared TextComponent", () => {
+      render(<Text fields={{}} />);
+      expect(screen.getByTestId("text-component")).toBeInTheDocument();
+    });
+
+    it("renders consistently with empty fields object", () => {
+      const { container: first } = render(<Text fields={{}} />);
+      const { container: second } = render(<Text fields={{}} />);
+      expect(first.innerHTML).toBe(second.innerHTML);
+    });
+  });
+});

package/src/contentful/index.test.ts

@@ -0,0 +1,45 @@
+import * as ContentfulExports from "./index";
+
+describe("contentful barrel exports", () => {
+  it("exports all expected contentful blocks", () => {
+    expect(ContentfulExports.Accordion).toBeDefined();
+    expect(ContentfulExports.Callout).toBeDefined();
+    expect(ContentfulExports.Cards).toBeDefined();
+    expect(ContentfulExports.SimpleCard).toBeDefined();
+    expect(ContentfulExports.Carousel).toBeDefined();
+    expect(ContentfulExports.FloatingBanner).toBeDefined();
+    expect(ContentfulExports.Footer).toBeDefined();
+    expect(ContentfulExports.ImagePromoBar).toBeDefined();
+    expect(ContentfulExports.Navigation).toBeDefined();
+    expect(ContentfulExports.PrimaryHero).toBeDefined();
+    expect(ContentfulExports.Text).toBeDefined();
+    expect(ContentfulExports.Button).toBeDefined();
+    expect(ContentfulExports.Modal).toBeDefined();
+    expect(ContentfulExports.ShapeBackgroundWrapper).toBeDefined();
+    expect(ContentfulExports.CtaCallout).toBeDefined();
+    expect(ContentfulExports.FindKinetic).toBeDefined();
+    expect(ContentfulExports.ComparisonTable).toBeDefined();
+    expect(ContentfulExports.TestimonialCard).toBeDefined();
+    expect(ContentfulExports.ProductCard).toBeDefined();
+    expect(ContentfulExports.BlogCard).toBeDefined();
+    expect(ContentfulExports.BlogGrid).toBeDefined();
+    expect(ContentfulExports.BlogGridBase).toBeDefined();
+    expect(ContentfulExports.BreadcrumbNavigation).toBeDefined();
+    expect(ContentfulExports.SearchBlock).toBeDefined();
+    expect(ContentfulExports.AddressInputBanner).toBeDefined();
+    expect(ContentfulExports.DynamicTabs).toBeDefined();
+    expect(ContentfulExports.AnchoredBottomBanner).toBeDefined();
+    expect(ContentfulExports.CookieBanner).toBeDefined();
+    expect(ContentfulExports.EmailInputBlock).toBeDefined();
+    expect(ContentfulExports.CartRetentionBanner).toBeDefined();
+  });
+
+  it("exports contentful rich text utilities", () => {
+    expect(ContentfulExports.toDocument).toBeDefined();
+    expect(ContentfulExports.renderContentfulRichText).toBeDefined();
+    expect(ContentfulExports.useContentfulRichText).toBeDefined();
+    expect(ContentfulExports.renderContentfulRichTextTable).toBeDefined();
+    expect(ContentfulExports.useProcessedChecklist).toBeDefined();
+    expect(ContentfulExports.label1BoldOptions).toBeDefined();
+  });
+});

package/src/global-mocks/contentful/to-document.ts

@@ -0,0 +1,25 @@
+/* eslint-env jest */
+/**
+ * Mock: utils/contentful/to-document.ts
+ *
+ * Provides a mock `toDocument` that returns null by default.
+ *
+ * Usage:
+ *   import { mockToDocumentUtil, resetToDocumentMocks } from "@shared/global-mocks/contentful/to-document";
+ *   mockToDocumentUtil();
+ *   afterEach(resetToDocumentMocks);
+ */
+
+export const mockToDocument = jest.fn().mockReturnValue(null);
+
+export function mockToDocumentUtil() {
+  jest.mock("@shared/utils/contentful/to-document", () => ({
+    toDocument: mockToDocument,
+  }));
+
+  return { mockToDocument };
+}
+
+export function resetToDocumentMocks() {
+  mockToDocument.mockReset().mockReturnValue(null);
+}