@windstream/react-shared-components 0.1.92 → 0.1.94

package/src/contentful/blocks/image-promo-bar/index.test.tsx

@@ -0,0 +1,467 @@
+import React from "react";
+import { ImagePromoBar } from "./index";
+import { ImagePromoBarProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("../button", () => ({
+  __esModule: true,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Button: ({ buttonLabel, ...rest }: any) => (
+    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  ),
+  default: ({ buttonLabel }: any) => (
+    <button data-testid="cta-button">{buttonLabel || "CTA"}</button>
+  ),
+}));
+
+jest.mock("./helper", () => ({
+  PlayButton: ({ isHovered }: any) => (
+    <div data-testid="play-button" data-hovered={isHovered} />
+  ),
+}));
+
+jest.mock("./vimeo-embed", () => ({
+  VimeoEmbed: ({ link, autoplay }: any) => (
+    <div data-testid="vimeo-embed" data-link={link} data-autoplay={autoplay} />
+  ),
+}));
+
+jest.mock("./youtube-embed", () => ({
+  YoutubeEmbed: ({ link, autoplay }: any) => (
+    <div
+      data-testid="youtube-embed"
+      data-link={link}
+      data-autoplay={autoplay}
+    />
+  ),
+}));
+
+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/image", () => ({
+  Image: ({ src, alt }: any) => <img data-testid="image" src={src} alt={alt} />,
+}));
+
+jest.mock("@shared/components/link", () => ({
+  Link: ({ children, href }: any) => (
+    <a data-testid="image-link" href={href}>
+      {children}
+    </a>
+  ),
+}));
+
+jest.mock("@shared/components/next-image", () => ({
+  NextImage: ({ src, alt }: any) => (
+    <img data-testid="next-image" src={src} alt={alt} />
+  ),
+}));
+
+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: ImagePromoBarProps = {
+  brow: "",
+  enableHeading: false,
+  title: "",
+  subTitle: "",
+  image: "",
+  imageWidth: 660,
+  imageHeight: 660,
+  mediaPosition: true,
+  description: null,
+  openDescriptionLinksOnANewTab: false,
+  checklist: [],
+  disclaimer: null,
+  imageLinks: [],
+  cta: null,
+  secondaryCta: null,
+  ctaDisclaimer: null,
+  videoLink: { link: "", image: "", videoPopup: false },
+  maxWidth: true,
+  color: "light",
+};
+
+describe("ImagePromoBar", () => {
+  describe("Text content", () => {
+    it("renders brow text when provided", () => {
+      render(<ImagePromoBar {...defaultProps} brow="New" />);
+      expect(screen.getByText("New")).toBeInTheDocument();
+    });
+
+    it("renders title as h2 when enableHeading is false", () => {
+      render(<ImagePromoBar {...defaultProps} title="Title" />);
+      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+        "Title"
+      );
+    });
+
+    it("renders title as h1 when enableHeading is true", () => {
+      render(
+        <ImagePromoBar {...defaultProps} title="Title" enableHeading={true} />
+      );
+      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
+        "Title"
+      );
+    });
+
+    it("renders subTitle as h3 when enableHeading is false", () => {
+      render(<ImagePromoBar {...defaultProps} subTitle="Sub" />);
+      expect(screen.getByRole("heading", { level: 3 })).toHaveTextContent(
+        "Sub"
+      );
+    });
+
+    it("renders subTitle as h2 when enableHeading is true", () => {
+      render(
+        <ImagePromoBar {...defaultProps} subTitle="Sub" enableHeading={true} />
+      );
+      expect(screen.getByText("Sub").tagName).toBe("H2");
+    });
+
+    it("renders description", () => {
+      render(<ImagePromoBar {...defaultProps} description="Desc text" />);
+      expect(screen.getByText("Desc text")).toBeInTheDocument();
+    });
+
+    it("renders ctaDisclaimer and disclaimer", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          ctaDisclaimer="Discl1"
+          disclaimer="Discl2"
+        />
+      );
+      expect(screen.getByText("Discl1")).toBeInTheDocument();
+      expect(screen.getByText("Discl2")).toBeInTheDocument();
+    });
+  });
+
+  describe("Color and layout", () => {
+    it("applies text-white for light color", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} color="light" />
+      );
+      expect(container.querySelector(".text-white")).toBeInTheDocument();
+    });
+
+    it("applies text-text for dark color", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} color="dark" />
+      );
+      expect(container.querySelector(".text-text")).toBeInTheDocument();
+    });
+
+    it("applies max-w-120 when maxWidth is true", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} maxWidth={true} />
+      );
+      expect(container.querySelector(".max-w-120")).toBeInTheDocument();
+    });
+
+    it("does not apply max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} maxWidth={false} />
+      );
+      expect(container.querySelector(".max-w-120")).not.toBeInTheDocument();
+    });
+
+    it("applies lg:flex-row-reverse when mediaPosition is true", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} mediaPosition={true} />
+      );
+      expect(container.innerHTML).toContain("lg:flex-row-reverse");
+    });
+
+    it("applies lg:flex-row when mediaPosition is false", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} mediaPosition={false} />
+      );
+      expect(container.innerHTML).toContain("lg:flex-row");
+      expect(container.innerHTML).not.toContain("lg:flex-row-reverse");
+    });
+  });
+
+  describe("Checklist", () => {
+    it("renders checklist when items exist", () => {
+      render(
+        <ImagePromoBar {...defaultProps} checklist={["Item 1", "Item 2"]} />
+      );
+      expect(screen.getByTestId("checklist")).toBeInTheDocument();
+    });
+
+    it("does not render checklist when empty", () => {
+      render(<ImagePromoBar {...defaultProps} checklist={[]} />);
+      expect(screen.queryByTestId("checklist")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Image links", () => {
+    it("renders image links when provided", () => {
+      const imageLinks = [
+        { url: "https://a.com", image: "https://img.test/a.png" },
+        { url: "https://b.com", image: "https://img.test/b.png" },
+      ];
+      render(<ImagePromoBar {...defaultProps} imageLinks={imageLinks} />);
+      const links = screen.getAllByTestId("image-link");
+      expect(links).toHaveLength(2);
+      expect(links[0]).toHaveAttribute("href", "https://a.com");
+    });
+  });
+
+  describe("CTAs", () => {
+    it("renders primary CTA", () => {
+      render(<ImagePromoBar {...defaultProps} cta={{ buttonLabel: "Buy" }} />);
+      expect(screen.getByTestId("cta-button")).toBeInTheDocument();
+    });
+
+    it("renders both CTAs", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          cta={{ buttonLabel: "Primary" }}
+          secondaryCta={{ buttonLabel: "Secondary" }}
+        />
+      );
+      expect(screen.getAllByTestId("cta-button")).toHaveLength(2);
+    });
+
+    it("does not render CTA section when neither provided", () => {
+      const { container } = render(<ImagePromoBar {...defaultProps} />);
+      expect(container.querySelector(".primary-cta")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Image", () => {
+    it("renders NextImage when image is provided", () => {
+      render(
+        <ImagePromoBar {...defaultProps} image="https://img.test/hero.jpg" />
+      );
+      const img = screen.getByTestId("next-image");
+      expect(img).toHaveAttribute("src", "https://img.test/hero.jpg");
+    });
+
+    it("does not render image section when image is empty", () => {
+      render(<ImagePromoBar {...defaultProps} image="" />);
+      expect(screen.queryByTestId("next-image")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Video", () => {
+    it("renders video section with play button when videoLink has link and image", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+          }}
+        />
+      );
+      expect(screen.getByTestId("play-button")).toBeInTheDocument();
+      expect(screen.getByAltText("Video preview")).toBeInTheDocument();
+    });
+
+    it("shows youtube embed on click for youtube link", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+            videoPopup: false,
+          }}
+        />
+      );
+      fireEvent.click(
+        screen.getByTestId("play-button").closest(".video-section")!
+      );
+      expect(screen.getByTestId("youtube-embed")).toBeInTheDocument();
+    });
+
+    it("shows vimeo embed on click for vimeo link", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://vimeo.com/123",
+            image: "thumb.jpg",
+            videoPopup: false,
+          }}
+        />
+      );
+      fireEvent.click(
+        screen.getByTestId("play-button").closest(".video-section")!
+      );
+      expect(screen.getByTestId("vimeo-embed")).toBeInTheDocument();
+    });
+
+    it("shows popup overlay when videoPopup is true and playing", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+            videoPopup: true,
+          }}
+        />
+      );
+      fireEvent.click(
+        screen.getByTestId("play-button").closest(".video-section")!
+      );
+      expect(container.querySelector(".fixed")).toBeInTheDocument();
+    });
+
+    it("closes popup on overlay click", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+            videoPopup: true,
+          }}
+        />
+      );
+      fireEvent.click(
+        screen.getByTestId("play-button").closest(".video-section")!
+      );
+      fireEvent.click(container.querySelector(".fixed")!);
+      expect(container.querySelector(".fixed")).not.toBeInTheDocument();
+    });
+
+    it("does not close popup when clicking inside video container", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+            videoPopup: true,
+          }}
+        />
+      );
+      fireEvent.click(
+        screen.getByTestId("play-button").closest(".video-section")!
+      );
+      const inner = container.querySelector(".max-w-6xl");
+      fireEvent.click(inner!);
+      expect(container.querySelector(".fixed")).toBeInTheDocument();
+    });
+
+    it("handles hover state on video section", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+          }}
+        />
+      );
+      const videoSection = screen
+        .getByTestId("play-button")
+        .closest(".video-section")!;
+      fireEvent.mouseEnter(videoSection);
+      expect(screen.getByTestId("play-button")).toHaveAttribute(
+        "data-hovered",
+        "true"
+      );
+      fireEvent.mouseLeave(videoSection);
+      expect(screen.getByTestId("play-button")).toHaveAttribute(
+        "data-hovered",
+        "false"
+      );
+    });
+
+    it("does not render video section when videoLink.link is empty", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{ link: "", image: "thumb.jpg" }}
+        />
+      );
+      expect(container.querySelector(".video-section")).not.toBeInTheDocument();
+    });
+
+    it("does not render video preview image when videoLink.image is missing", () => {
+      render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{ link: "https://youtube.com/watch?v=123" }}
+        />
+      );
+      expect(screen.queryByAltText("Video preview")).not.toBeInTheDocument();
+    });
+
+    it("handles videoLink being undefined", () => {
+      const { container } = render(
+        <ImagePromoBar {...defaultProps} videoLink={undefined as any} />
+      );
+      expect(container.querySelector(".video-section")).not.toBeInTheDocument();
+    });
+
+    it("handles videoLink with no videoPopup property (defaults to false)", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+          }}
+        />
+      );
+      fireEvent.click(container.querySelector(".video-section")!);
+      // Should show inline embed, not popup
+      expect(container.querySelector(".fixed")).not.toBeInTheDocument();
+      expect(screen.getByTestId("youtube-embed")).toBeInTheDocument();
+    });
+
+    it("does not render inline embed when videoPopup is true", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            image: "thumb.jpg",
+            videoPopup: true,
+          }}
+        />
+      );
+      fireEvent.click(container.querySelector(".video-section")!);
+      // Popup renders, inline section hidden via the !videoPopup && isPlaying condition
+      expect(container.querySelector(".fixed")).toBeInTheDocument();
+    });
+
+    it("does not render contentVideo embed when videoLink has no image", () => {
+      const { container } = render(
+        <ImagePromoBar
+          {...defaultProps}
+          videoLink={{
+            link: "https://youtube.com/watch?v=123",
+            videoPopup: false,
+          }}
+        />
+      );
+      fireEvent.click(container.querySelector(".video-section")!);
+      // contentVideo is null when videoImage is falsy
+      expect(screen.queryByTestId("youtube-embed")).not.toBeInTheDocument();
+    });
+  });
+});