@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/find-kinetic/index.test.tsx

@@ -0,0 +1,269 @@
+import React from "react";
+import { FindKinetic } from "./index";
+import { FindKineticProps } from "./types";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/link", () => ({
+  Link: ({
+    href,
+    children,
+    className,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/next", () => ({
+  NextImage: ({
+    src,
+    alt,
+    width,
+    height,
+  }: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  }) => <img src={src} alt={alt} width={width} height={height} />,
+}));
+
+const mockList = [
+  { name: "New York", code: "NY" },
+  { name: "California", code: "CA" },
+  { name: "Texas", code: "TX" },
+  { name: "Florida", code: "FL" },
+  { name: "Illinois", code: "IL" },
+  { name: "Ohio", code: "OH" },
+  { name: "Georgia", code: "GA" },
+];
+
+const defaultProps: FindKineticProps = {
+  title: "Find Kinetic Near You",
+  subTitle: "Available in many locations",
+  description: "Check availability in your area.",
+  list: mockList,
+  image: "https://example.com/image.png",
+};
+
+describe("FindKinetic", () => {
+  describe("Rendering", () => {
+    it("renders with default props", () => {
+      render(<FindKinetic {...defaultProps} />);
+      expect(screen.getByText("Find Kinetic Near You")).toBeInTheDocument();
+    });
+
+    it("renders nothing when no props are provided", () => {
+      const { container } = render(<FindKinetic />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it("renders title when provided", () => {
+      render(<FindKinetic title="Test Title" />);
+      expect(screen.getByText("Test Title")).toBeInTheDocument();
+    });
+
+    it("does not render title when not provided", () => {
+      render(<FindKinetic subTitle="Sub" />);
+      expect(screen.queryByText("Test Title")).not.toBeInTheDocument();
+    });
+
+    it("renders subtitle when provided", () => {
+      render(<FindKinetic subTitle="Subtitle Text" />);
+      expect(screen.getByText("Subtitle Text")).toBeInTheDocument();
+    });
+
+    it("does not render subtitle when not provided", () => {
+      render(<FindKinetic title="Title Only" />);
+      expect(screen.queryByText("Subtitle Text")).not.toBeInTheDocument();
+    });
+
+    it("renders description when provided", () => {
+      render(<FindKinetic description="Desc text here" />);
+      expect(screen.getByText("Desc text here")).toBeInTheDocument();
+    });
+
+    it("does not render description when not provided", () => {
+      render(<FindKinetic title="Title" />);
+      expect(screen.queryByText("Desc text here")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Heading levels", () => {
+    it("renders title as h2 when enableHeading is false", () => {
+      render(<FindKinetic title="Heading Test" enableHeading={false} />);
+      const el = screen.getByText("Heading Test");
+      expect(el.tagName).toBe("H2");
+    });
+
+    it("renders title as h1 when enableHeading is true", () => {
+      render(<FindKinetic title="Heading Test" enableHeading={true} />);
+      const el = screen.getByText("Heading Test");
+      expect(el.tagName).toBe("H1");
+    });
+
+    it("renders subtitle as h3 when enableHeading is false", () => {
+      render(<FindKinetic subTitle="Sub Heading" enableHeading={false} />);
+      const el = screen.getByText("Sub Heading");
+      expect(el.tagName).toBe("H3");
+    });
+
+    it("renders subtitle as h2 when enableHeading is true", () => {
+      render(<FindKinetic subTitle="Sub Heading" enableHeading={true} />);
+      const el = screen.getByText("Sub Heading");
+      expect(el.tagName).toBe("H2");
+    });
+  });
+
+  describe("Background themes", () => {
+    it("applies white background by default", () => {
+      const { container } = render(<FindKinetic title="BG Test" />);
+      expect(container.firstChild).toHaveClass("bg-white");
+    });
+
+    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(
+        <FindKinetic title="BG Test" background={bg} />
+      );
+      expect(container.firstChild).toHaveClass(expectedClass);
+    });
+  });
+
+  describe("Color theme", () => {
+    it("applies dark text color by default", () => {
+      const { container } = render(<FindKinetic title="Color Test" />);
+      expect(container.firstChild).toHaveClass("text-text");
+    });
+
+    it("applies light text color when color is light", () => {
+      const { container } = render(
+        <FindKinetic title="Color Test" color="light" />
+      );
+      expect(container.firstChild).toHaveClass("text-white");
+    });
+
+    it("applies dark text color when color is dark", () => {
+      const { container } = render(
+        <FindKinetic title="Color Test" color="dark" />
+      );
+      expect(container.firstChild).toHaveClass("text-text");
+    });
+  });
+
+  describe("Max width", () => {
+    it("applies max-w-120 class when maxWidth is true (default)", () => {
+      const { container } = render(<FindKinetic title="Width Test" />);
+      const innerDiv = container.firstChild?.firstChild as HTMLElement;
+      expect(innerDiv).toHaveClass("max-w-120");
+    });
+
+    it("does not apply max-w-120 class when maxWidth is false", () => {
+      const { container } = render(
+        <FindKinetic title="Width Test" maxWidth={false} />
+      );
+      const innerDiv = container.firstChild?.firstChild as HTMLElement;
+      expect(innerDiv).not.toHaveClass("max-w-120");
+    });
+  });
+
+  describe("Location directory list", () => {
+    it("renders location links from list", () => {
+      render(<FindKinetic list={mockList} />);
+      // Each item appears in both mobile (2-col) and desktop (3-col) lists
+      const nyLinks = screen.getAllByText("New York");
+      expect(nyLinks.length).toBeGreaterThanOrEqual(2);
+    });
+
+    it("generates correct href with lowercase code", () => {
+      render(<FindKinetic list={[{ name: "New York", code: "NY" }]} />);
+      const links = screen.getAllByText("New York");
+      links.forEach(link => {
+        expect(link.closest("a")).toHaveAttribute("href", "/local/ny");
+      });
+    });
+
+    it("sorts list items alphabetically by name", () => {
+      const unsortedList = [
+        { name: "Texas", code: "TX" },
+        { name: "Alabama", code: "AL" },
+        { name: "Michigan", code: "MI" },
+      ];
+      render(<FindKinetic list={unsortedList} />);
+      const listItems = screen.getAllByRole("listitem");
+      const texts = listItems.map(li => li.textContent);
+      // In both grids, Alabama should come before Michigan, Michigan before Texas
+      expect(texts[0]).toBe("Alabama");
+    });
+
+    it("does not render lists when list is empty", () => {
+      render(<FindKinetic list={[]} title="No List" />);
+      expect(screen.queryAllByRole("list")).toHaveLength(0);
+    });
+
+    it("does not render lists when list is not provided", () => {
+      render(<FindKinetic title="No List" />);
+      expect(screen.queryAllByRole("list")).toHaveLength(0);
+    });
+
+    it("renders two column layout for mobile and three for desktop", () => {
+      const { container } = render(<FindKinetic list={mockList} />);
+      const lists = container.querySelectorAll("ul");
+      expect(lists).toHaveLength(2);
+      expect(lists[0]).toHaveClass("grid-cols-2");
+      expect(lists[1]).toHaveClass("md:grid-cols-3");
+    });
+
+    it("rearranges items in column-major order for 2-col layout", () => {
+      const list = [
+        { name: "A", code: "A" },
+        { name: "B", code: "B" },
+        { name: "C", code: "C" },
+        { name: "D", code: "D" },
+      ];
+      const { container } = render(<FindKinetic list={list} />);
+      // Mobile list (2-col): sorted [A, B, C, D], 2 rows, column-major: A, C, B, D
+      const mobileList = container.querySelector(
+        "ul.grid-cols-2"
+      ) as HTMLElement;
+      const items = mobileList?.querySelectorAll("li");
+      expect(items?.[0]?.textContent).toBe("A");
+      expect(items?.[1]?.textContent).toBe("C");
+      expect(items?.[2]?.textContent).toBe("B");
+      expect(items?.[3]?.textContent).toBe("D");
+    });
+  });
+
+  describe("Image", () => {
+    it("renders image when provided", () => {
+      render(<FindKinetic image="https://example.com/img.png" />);
+      const img = screen.getByAltText("image");
+      expect(img).toHaveAttribute("src", "https://example.com/img.png");
+      expect(img).toHaveAttribute("width", "472");
+    });
+
+    it("does not render image when not provided", () => {
+      render(<FindKinetic title="No Image" />);
+      expect(screen.queryByAltText("image")).not.toBeInTheDocument();
+    });
+  });
+});

package/src/contentful/blocks/floating-banner/index.test.tsx

@@ -0,0 +1,246 @@
+import React from "react";
+import { FloatingBanner } from "./index";
+import { FloatingBannerProps } from "./types";
+
+import { render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({
+    src,
+    alt,
+    width,
+    height,
+  }: {
+    src: string;
+    alt: string;
+    width: number;
+    height: number;
+  }) => <img src={src} alt={alt} width={width} height={height} />,
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Button: ({ buttonLabel, buttonVariant, size, ...rest }: any) => (
+    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  ),
+}));
+
+const defaultProps: FloatingBannerProps = {
+  title: "Special Offer",
+  subtitle: "Limited Time",
+  description: "Get the best deals now",
+  disclaimer: "Terms and conditions apply",
+  icon: "https://example.com/icon.png",
+  cta: { buttonLabel: "Shop Now", href: "/shop" },
+};
+
+describe("FloatingBanner", () => {
+  describe("Rendering", () => {
+    it("renders with all props", () => {
+      render(<FloatingBanner {...defaultProps} />);
+      expect(screen.getByText("Special Offer")).toBeInTheDocument();
+      expect(screen.getByText("Limited Time")).toBeInTheDocument();
+      expect(screen.getByText("Get the best deals now")).toBeInTheDocument();
+      expect(
+        screen.getByText("Terms and conditions apply")
+      ).toBeInTheDocument();
+    });
+
+    it("renders with no optional props", () => {
+      const { container } = render(<FloatingBanner />);
+      expect(container.firstChild).toBeInTheDocument();
+    });
+
+    it("renders title when provided", () => {
+      render(<FloatingBanner title="Banner Title" />);
+      expect(screen.getByText("Banner Title")).toBeInTheDocument();
+    });
+
+    it("does not render title when not provided", () => {
+      render(<FloatingBanner subtitle="Sub" />);
+      expect(screen.queryByText("Banner Title")).not.toBeInTheDocument();
+    });
+
+    it("renders subtitle when provided", () => {
+      render(<FloatingBanner subtitle="Sub Text" />);
+      expect(screen.getByText("Sub Text")).toBeInTheDocument();
+    });
+
+    it("does not render subtitle when not provided", () => {
+      render(<FloatingBanner title="Title" />);
+      expect(screen.queryByText("Sub Text")).not.toBeInTheDocument();
+    });
+
+    it("renders description when provided", () => {
+      render(<FloatingBanner description="Desc here" />);
+      expect(screen.getByText("Desc here")).toBeInTheDocument();
+    });
+
+    it("does not render description when not provided", () => {
+      render(<FloatingBanner title="Title" />);
+      expect(screen.queryByText("Desc here")).not.toBeInTheDocument();
+    });
+
+    it("renders disclaimer when provided", () => {
+      render(<FloatingBanner disclaimer="Disclaimer text" />);
+      expect(screen.getByText("Disclaimer text")).toBeInTheDocument();
+    });
+
+    it("does not render disclaimer when not provided", () => {
+      render(<FloatingBanner title="No Disclaimer" />);
+      expect(screen.queryByText("Disclaimer text")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Heading levels", () => {
+    it("renders title as h2 when enableHeading is false/undefined", () => {
+      render(<FloatingBanner title="H2 Title" />);
+      const el = screen.getByText("H2 Title");
+      expect(el.tagName).toBe("H2");
+    });
+
+    it("renders title as h1 when enableHeading is true", () => {
+      render(<FloatingBanner title="H1 Title" enableHeading={true} />);
+      const el = screen.getByText("H1 Title");
+      expect(el.tagName).toBe("H1");
+    });
+
+    it("renders subtitle always as h3", () => {
+      render(<FloatingBanner subtitle="Always H3" />);
+      const el = screen.getByText("Always H3");
+      expect(el.tagName).toBe("H3");
+    });
+  });
+
+  describe("Background themes", () => {
+    it("applies navy background by default", () => {
+      const { container } = render(<FloatingBanner title="BG" />);
+      const bannerInner = container.querySelector(".bg-\\[\\#00002D\\]");
+      expect(bannerInner).toBeInTheDocument();
+    });
+
+    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(
+        <FloatingBanner title="BG" background={bg} />
+      );
+      const bannerInner = container.querySelector(
+        `.${CSS.escape(expectedClass)}`
+      );
+      expect(bannerInner).toBeInTheDocument();
+    });
+  });
+
+  describe("Color theme", () => {
+    it("applies light (white) text by default", () => {
+      const { container } = render(<FloatingBanner title="Color" />);
+      const bannerInner = container.querySelector(".text-white");
+      expect(bannerInner).toBeInTheDocument();
+    });
+
+    it("applies dark text when color is dark", () => {
+      const { container } = render(
+        <FloatingBanner title="Color" color="dark" />
+      );
+      const bannerInner = container.querySelector(".text-text");
+      expect(bannerInner).toBeInTheDocument();
+    });
+
+    it("applies white text when color is light", () => {
+      const { container } = render(
+        <FloatingBanner title="Color" color="light" />
+      );
+      const bannerInner = container.querySelector(".text-white");
+      expect(bannerInner).toBeInTheDocument();
+    });
+  });
+
+  describe("Max width", () => {
+    it("applies max-w-120 when maxWidth is true (default)", () => {
+      const { container } = render(<FloatingBanner title="Width" />);
+      const wrapper = container.querySelector(".max-w-120");
+      expect(wrapper).toBeInTheDocument();
+    });
+
+    it("does not apply max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <FloatingBanner title="Width" maxWidth={false} />
+      );
+      const wrapper = container.querySelector(".max-w-120");
+      expect(wrapper).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Icon", () => {
+    it("renders icon image when provided", () => {
+      render(<FloatingBanner icon="https://example.com/icon.png" />);
+      const img = screen.getByAltText("icon");
+      expect(img).toHaveAttribute("src", "https://example.com/icon.png");
+      expect(img).toHaveAttribute("width", "80");
+      expect(img).toHaveAttribute("height", "80");
+    });
+
+    it("does not render icon when not provided", () => {
+      render(<FloatingBanner title="No Icon" />);
+      expect(screen.queryByAltText("icon")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("CTA Button", () => {
+    it("renders CTA button when cta is provided", () => {
+      render(
+        <FloatingBanner cta={{ buttonLabel: "Get Started", href: "/start" }} />
+      );
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("does not render CTA button when cta is not provided", () => {
+      render(<FloatingBanner title="No CTA" />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+
+    it("does not render CTA button when cta is null", () => {
+      render(<FloatingBanner title="Null CTA" cta={null} />);
+      expect(screen.queryByTestId("cta-button")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Description as ReactNode", () => {
+    it("renders JSX description", () => {
+      render(
+        <FloatingBanner
+          description={
+            <span data-testid="jsx-desc">
+              Rich <strong>description</strong>
+            </span>
+          }
+        />
+      );
+      expect(screen.getByTestId("jsx-desc")).toBeInTheDocument();
+    });
+  });
+
+  describe("Disclaimer as ReactNode", () => {
+    it("renders JSX disclaimer", () => {
+      render(
+        <FloatingBanner
+          disclaimer={<span data-testid="jsx-disc">Legal info</span>}
+        />
+      );
+      expect(screen.getByTestId("jsx-disc")).toBeInTheDocument();
+    });
+  });
+});