@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10-alpha.0

package/dist/components/ImageCard/ImageCardCore.test.js

@@ -0,0 +1,577 @@
+import { jsx as n } from "react/jsx-runtime";
+import { v as y, d as p, b as T, a as B, i as l, r as a, g as t, s as c } from "../../react.esm-DLSrfVwM.mjs";
+import { u as g } from "../../index-BUN4jQ3m.mjs";
+import v from "react";
+import i from "./ImageCardCore.js";
+y.mock("html-react-parser", () => ({
+  default: (o) => /* @__PURE__ */ n("span", { "data-parsed": !0, children: o })
+}));
+y.mock("../../utils/helpers", () => ({
+  classes: (o) => o.filter(Boolean).join(" ")
+}));
+y.mock("../AnchorTag", () => ({
+  default: ({ label: o, href: m, type: r, classname: e, onClick: s, ...d }) => /* @__PURE__ */ n(
+    "a",
+    {
+      className: e,
+      "data-testid": "anchor-tag",
+      "data-type": r,
+      href: m,
+      onClick: (u) => {
+        u.preventDefault(), s == null || s(u);
+      },
+      ...d,
+      children: o
+    }
+  )
+}));
+y.mock("../ButtonAnchor", () => ({
+  default: ({ label: o, classname: m, onClick: r, ...e }) => /* @__PURE__ */ n(
+    "button",
+    {
+      className: m,
+      "data-testid": "button-anchor",
+      onClick: r,
+      ...e,
+      children: o
+    }
+  )
+}));
+y.mock("../ResponsiveImage", () => ({
+  default: ({ altText: o, classname: m, fullSizeUrl: r, handleClick: e, loading: s, sources: d, decoding: u, fetchPriority: h }) => /* @__PURE__ */ n(
+    "img",
+    {
+      alt: o,
+      className: m,
+      "data-fetch-priority": h,
+      "data-sources": JSON.stringify(d),
+      "data-testid": "responsive-image",
+      decoding: u,
+      loading: s,
+      src: r,
+      onClick: e
+    }
+  )
+}));
+p("ImageCardCore", () => {
+  const o = {
+    "image-card__img-wrapper": "img-wrapper-module",
+    "image-card__mobile-image": "mobile-image-module",
+    "image-card__image": "image-module",
+    "image-card__overlay-content": "overlay-content-module",
+    "image-card__play-icon": "play-icon-module",
+    "play-icon__triangle": "triangle-module",
+    "image-card__content": "content-module",
+    "image-card__cta": "cta-module",
+    "image-card__cta-wrapper": "cta-wrapper-module"
+  }, m = (e) => ({
+    url: "https://example.com/image.jpg",
+    altText: "Test image",
+    aspectRatio: 16 / 9,
+    sources: [],
+    ...e
+  }), r = (e) => ({
+    label: "Click Here",
+    href: "#test",
+    type: "external-link",
+    relatedResourceId: "resource-123",
+    relatedResourceType: "article",
+    position: "end",
+    ...e
+  });
+  T(() => {
+    y.clearAllMocks();
+  }), B(() => {
+    y.restoreAllMocks();
+  }), p("Basic Rendering", () => {
+    l("should render image wrapper", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = document.querySelector(".img-wrapper-module");
+      t(e).toBeInTheDocument();
+    }), l("should render responsive image with default values", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("src", ""), t(e).toHaveAttribute("alt", "");
+    }), l("should apply wrapper classes", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = document.querySelector(".image-card__img-wrapper");
+      t(e).toHaveClass("img-wrapper-module"), t(e).toHaveClass("image-card__img-wrapper");
+    }), l("should forward ref", () => {
+      const e = v.createRef();
+      a(/* @__PURE__ */ n(i, { ref: e, styles: o })), t(e.current).toBeNull();
+    });
+  }), p("Responsive Image", () => {
+    l("should render responsive image with provided props", () => {
+      const e = m({
+        url: "https://example.com/photo.jpg",
+        altText: "Photo description"
+      });
+      a(/* @__PURE__ */ n(i, { image: e, styles: o }));
+      const s = c.getByTestId("responsive-image");
+      t(s).toHaveAttribute("src", "https://example.com/photo.jpg"), t(s).toHaveAttribute("alt", "Photo description");
+    }), l("should apply image classname", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveClass("image-module");
+    }), l("should set lazy loading by default", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("loading", "lazy");
+    }), l("should disable lazy loading when lazyLoad is false", () => {
+      a(/* @__PURE__ */ n(i, { lazyLoad: !1, styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).not.toHaveAttribute("loading");
+    }), l("should pass fetchPriority to responsive image", () => {
+      a(/* @__PURE__ */ n(i, { fetchPriority: "high", styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("data-fetch-priority", "high");
+    }), l("should pass decoding to responsive image", () => {
+      a(/* @__PURE__ */ n(i, { decoding: "sync", styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("decoding", "sync");
+    }), l("should use async decoding by default", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("decoding", "async");
+    }), l("should pass sources to responsive image", () => {
+      const e = m({
+        sources: [
+          { media: "(max-width: 600px)", srcsets: ["https://example.com/small.jpg"] },
+          { media: "(min-width: 601px)", srcsets: ["https://example.com/large.jpg"] }
+        ]
+      });
+      a(/* @__PURE__ */ n(i, { image: e, styles: o }));
+      const s = c.getByTestId("responsive-image"), d = JSON.parse(s.getAttribute("data-sources") || "[]");
+      t(d).toHaveLength(2);
+    });
+  }), p("Mobile Image", () => {
+    l("should render mobile image when mobileImage url is provided", () => {
+      const e = m({
+        url: "https://example.com/mobile.jpg",
+        altText: "Mobile version"
+      });
+      a(/* @__PURE__ */ n(i, { mobileImage: e, styles: o }));
+      const s = c.getByRole("img", { name: "Mobile version" });
+      t(s).toBeInTheDocument(), t(s).toHaveAttribute("src", "https://example.com/mobile.jpg");
+    }), l("should not render mobile image when url is empty", () => {
+      const e = m({ url: "" });
+      a(/* @__PURE__ */ n(i, { mobileImage: e, styles: o }));
+      const s = c.queryAllByRole("img").filter(
+        (d) => d.getAttribute("src") === ""
+      );
+      t(s).toHaveLength(0);
+    }), l("should apply mobile image class", () => {
+      const e = m({ url: "https://example.com/mobile.jpg" });
+      a(/* @__PURE__ */ n(i, { mobileImage: e, styles: o }));
+      const s = c.getByRole("img", { name: "Test image" });
+      t(s).toHaveClass("mobile-image-module");
+    }), l("should set lazy loading on mobile image by default", () => {
+      const e = m({ url: "https://example.com/mobile.jpg" });
+      a(/* @__PURE__ */ n(i, { mobileImage: e, styles: o }));
+      const s = c.getByRole("img", { name: "Test image" });
+      t(s).toHaveAttribute("loading", "lazy");
+    }), l("should disable lazy loading on mobile image when lazyLoad is false", () => {
+      const e = m({ url: "https://example.com/mobile.jpg" });
+      a(/* @__PURE__ */ n(i, { lazyLoad: !1, mobileImage: e, styles: o }));
+      const s = c.getByRole("img", { name: "Test image" });
+      t(s).not.toHaveAttribute("loading");
+    }), l("should pass decoding to mobile image", () => {
+      const e = m({ url: "https://example.com/mobile.jpg" });
+      a(/* @__PURE__ */ n(i, { decoding: "auto", mobileImage: e, styles: o }));
+      const s = c.getByRole("img", { name: "Test image" });
+      t(s).toHaveAttribute("decoding", "auto");
+    }), l("should pass fetchPriority to mobile image", () => {
+      const e = m({ url: "https://example.com/mobile.jpg" });
+      a(/* @__PURE__ */ n(i, { fetchPriority: "low", mobileImage: e, styles: o }));
+      const s = c.getByRole("img", { name: "Test image" });
+      t(s).toHaveAttribute("fetchPriority", "low");
+    });
+  }), p("Overlay Content", () => {
+    l("should render overlay content when string provided", () => {
+      a(/* @__PURE__ */ n(i, { overlayContent: "<p>Overlay text</p>", styles: o }));
+      const e = document.querySelector(".overlay-content-module");
+      t(e).toBeInTheDocument(), t(c.getByText("<p>Overlay text</p>")).toBeInTheDocument();
+    }), l("should render overlay content when JSX provided", () => {
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            overlayContent: /* @__PURE__ */ n("div", { "data-testid": "custom-overlay", children: "Custom" }),
+            styles: o
+          }
+        )
+      ), t(c.getByTestId("custom-overlay")).toBeInTheDocument();
+    }), l("should not render overlay when overlayContent is empty", () => {
+      a(/* @__PURE__ */ n(i, { overlayContent: "", styles: o }));
+      const e = document.querySelector(".overlay-content-module");
+      t(e).not.toBeInTheDocument();
+    }), l("should apply overlay classes", () => {
+      a(/* @__PURE__ */ n(i, { overlayContent: "Text", styles: o }));
+      const e = document.querySelector(".overlay-content-module");
+      t(e).toHaveClass("image-card__overlay-content");
+    }), l("should parse HTML string in overlay", () => {
+      a(/* @__PURE__ */ n(i, { overlayContent: "<strong>Bold</strong>", styles: o })), t(c.getByText("<strong>Bold</strong>")).toBeInTheDocument();
+    });
+  }), p("Content Section", () => {
+    l("should render content section when content is provided", () => {
+      a(/* @__PURE__ */ n(i, { content: "<p>Card content</p>", styles: o }));
+      const e = document.querySelector(".content-module");
+      t(e).toBeInTheDocument();
+    }), l("should not render content section when content is empty", () => {
+      a(/* @__PURE__ */ n(i, { content: "", styles: o }));
+      const e = document.querySelector(".content-module");
+      t(e).not.toBeInTheDocument();
+    }), l("should render title when provided", () => {
+      a(/* @__PURE__ */ n(i, { content: "Content", styles: o, title: "Card Title" }));
+      const e = c.getByRole("heading", { level: 2 });
+      t(e).toHaveTextContent("Card Title"), t(e).toHaveClass("h4");
+    }), l("should not render title when empty", () => {
+      a(/* @__PURE__ */ n(i, { content: "Content", styles: o, title: "" })), t(c.queryByRole("heading")).not.toBeInTheDocument();
+    }), l("should parse HTML string content", () => {
+      a(/* @__PURE__ */ n(i, { content: "<p>HTML content</p>", styles: o })), t(c.getByText("<p>HTML content</p>")).toBeInTheDocument();
+    }), l("should render JSX content", () => {
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            content: /* @__PURE__ */ n("div", { "data-testid": "custom-content", children: "Custom" }),
+            styles: o
+          }
+        )
+      ), t(c.getByTestId("custom-content")).toBeInTheDocument();
+    });
+  }), p("CTA Rendering", () => {
+    l("should render external-link CTA as AnchorTag", () => {
+      const e = r({ type: "external-link", label: "Learn More" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByTestId("anchor-tag")).toBeInTheDocument(), t(c.getByText("Learn More")).toBeInTheDocument();
+    }), l("should render internal-link CTA as AnchorTag", () => {
+      const e = r({ type: "internal-link", href: "/about" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByTestId("anchor-tag")).toBeInTheDocument();
+    }), l("should render play-video CTA as ButtonAnchor", () => {
+      const e = r({ type: "play-video" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByTestId("button-anchor")).toBeInTheDocument();
+    }), l("should render info-panel CTA as ButtonAnchor", () => {
+      const e = r({ type: "info-panel" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByTestId("button-anchor")).toBeInTheDocument();
+    }), l("should render show-modal CTA as ButtonAnchor", () => {
+      const e = r({ type: "show-modal" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByTestId("button-anchor")).toBeInTheDocument();
+    }), l("should not render CTA when type is unrecognized", () => {
+      const e = r({ type: "unknown-type" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.queryByTestId("anchor-tag")).not.toBeInTheDocument(), t(c.queryByTestId("button-anchor")).not.toBeInTheDocument();
+    }), l("should use custom label when provided", () => {
+      const e = r({ type: "external-link", label: "Custom Label" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("Custom Label")).toBeInTheDocument();
+    }), l("should use default label when not provided", () => {
+      const e = r({ type: "external-link", label: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("Learn More")).toBeInTheDocument();
+    }), l("should not render CTA when displayCTA is false", () => {
+      const e = r({ type: "external-link" });
+      a(/* @__PURE__ */ n(i, { cta: e, displayCTA: !1, styles: o })), t(c.queryByTestId("anchor-tag")).not.toBeInTheDocument();
+    }), l("should pass href to AnchorTag", () => {
+      const e = r({ type: "internal-link", href: "/contact" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByTestId("anchor-tag");
+      t(s).toHaveAttribute("href", "/contact");
+    }), l("should pass type to AnchorTag for links", () => {
+      const e = r({ type: "external-link" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByTestId("anchor-tag");
+      t(s).toHaveAttribute("data-type", "external-link");
+    }), l("should pass relatedResourceId to CTA", () => {
+      const e = r({ type: "external-link", relatedResourceId: "res-456" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByTestId("anchor-tag");
+      t(s).toHaveAttribute("data-resource-id", "res-456");
+    }), l("should apply CTA classes", () => {
+      const e = r({ type: "external-link" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByTestId("anchor-tag");
+      t(s).toHaveClass("cta-module"), t(s).toHaveClass("image-card__cta");
+    });
+  }), p("CTA Position", () => {
+    l("should render CTA at end position by default", () => {
+      const e = r({ type: "external-link", position: "end" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = document.querySelector(".cta-wrapper-module");
+      t(s).toBeInTheDocument();
+    }), l("should render CTA inline when position is inline and content is string", () => {
+      const e = r({ type: "external-link", position: "inline" });
+      a(/* @__PURE__ */ n(i, { content: "Content text", cta: e, styles: o })), t(c.getByTestId("anchor-tag")).toBeInTheDocument();
+      const s = document.querySelector(".cta-wrapper-module");
+      t(s).not.toBeInTheDocument();
+    }), l("should render CTA inline when position is inline and content is JSX", () => {
+      const e = r({ type: "external-link", position: "inline" });
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            content: /* @__PURE__ */ n("div", { children: "JSX content" }),
+            cta: e,
+            styles: o
+          }
+        )
+      ), t(c.getByTestId("anchor-tag")).toBeInTheDocument();
+    }), l("should not render end CTA when position is inline", () => {
+      const e = r({ type: "external-link", position: "inline" });
+      a(/* @__PURE__ */ n(i, { content: "Content", cta: e, styles: o }));
+      const s = document.querySelector(".cta-wrapper-module");
+      t(s).not.toBeInTheDocument();
+    }), l("should not render inline CTA when no content", () => {
+      const e = r({ type: "external-link", position: "inline" });
+      a(/* @__PURE__ */ n(i, { content: "", cta: e, styles: o })), t(c.queryByTestId("anchor-tag")).not.toBeInTheDocument();
+    });
+  }), p("Play Video CTA", () => {
+    l("should render play icon button for play-video type", () => {
+      const e = r({ type: "play-video" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByRole("button", { name: /play button/i });
+      t(s).toBeInTheDocument();
+    }), l("should apply play icon classes", () => {
+      const e = r({ type: "play-video" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByRole("button", { name: /play button/i });
+      t(s).toHaveClass("play-icon-module"), t(s).toHaveClass("image-card__play-icon");
+    }), l("should render triangle inside play button", () => {
+      const e = r({ type: "play-video" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = document.querySelector(".triangle-module");
+      t(s).toBeInTheDocument();
+    }), l("should not render play icon for other CTA types", () => {
+      const e = r({ type: "external-link" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.queryByRole("button", { name: /play button/i })).not.toBeInTheDocument();
+    }), l("should call handleClicks when play button is clicked", async () => {
+      const e = g.setup(), s = y.fn(), d = r({ type: "play-video", relatedResourceId: "video-123" });
+      a(/* @__PURE__ */ n(i, { cta: d, handleClicks: s, styles: o }));
+      const u = c.getByRole("button", { name: /play button/i });
+      await e.click(u), t(s).toHaveBeenCalledTimes(1), t(s).toHaveBeenCalledWith(
+        t.objectContaining({
+          type: "play-video",
+          resourceId: "video-123"
+        })
+      );
+    });
+  }), p("Click Handling", () => {
+    l("should call handleClicks when button CTA is clicked", async () => {
+      const e = g.setup(), s = y.fn(), d = r({
+        type: "info-panel",
+        relatedResourceId: "panel-123",
+        relatedResourceType: "info"
+      });
+      a(/* @__PURE__ */ n(i, { cta: d, handleClicks: s, styles: o }));
+      const u = c.getByTestId("button-anchor");
+      await e.click(u), t(s).toHaveBeenCalledTimes(1), t(s).toHaveBeenCalledWith(
+        t.objectContaining({
+          type: "info-panel",
+          resourceId: "panel-123",
+          resourceType: "info"
+        })
+      );
+    }), l("should not call handleClicks for link CTAs", async () => {
+      const e = g.setup(), s = y.fn(), d = r({ type: "external-link" });
+      a(/* @__PURE__ */ n(i, { cta: d, handleClicks: s, styles: o }));
+      const u = c.getByTestId("anchor-tag");
+      await e.click(u), t(s).not.toHaveBeenCalled();
+    }), l("should include event target in handleClicks details", async () => {
+      const e = g.setup(), s = y.fn(), d = r({ type: "show-modal" });
+      a(/* @__PURE__ */ n(i, { cta: d, handleClicks: s, styles: o }));
+      const u = c.getByTestId("button-anchor");
+      await e.click(u);
+      const h = s.mock.calls[0][0];
+      t(h.target).toBeTruthy(), t(h.currentTarget).toBeTruthy();
+    }), l("should stop event propagation when CTA is clicked", async () => {
+      const e = g.setup(), s = y.fn(), d = r({ type: "info-panel" });
+      a(
+        /* @__PURE__ */ n("div", { onClick: y.fn(), children: /* @__PURE__ */ n(i, { cta: d, handleClicks: s, styles: o }) })
+      );
+      const u = c.getByTestId("button-anchor");
+      await e.click(u), t(s).toHaveBeenCalled();
+    }), l("should use default noop handler when handleClicks not provided", async () => {
+      const e = g.setup(), s = r({ type: "play-video" });
+      a(/* @__PURE__ */ n(i, { cta: s, styles: o }));
+      const d = c.getByRole("button", { name: /play button/i });
+      await e.click(d), t(d).toBeInTheDocument();
+    });
+  }), p("Image Click Handling for Special CTA Types", () => {
+    l("should handle mobile image click for play-video type", async () => {
+      const e = g.setup(), s = y.fn(), d = m({ url: "https://example.com/mobile.jpg" }), u = r({ type: "play-video" });
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            cta: u,
+            handleClicks: s,
+            mobileImage: d,
+            styles: o
+          }
+        )
+      );
+      const h = c.getByRole("img", { name: "Test image" });
+      await e.click(h), t(s).toHaveBeenCalled();
+    }), l("should handle mobile image click for show-modal type", async () => {
+      const e = g.setup(), s = y.fn(), d = m({ url: "https://example.com/mobile.jpg" }), u = r({ type: "show-modal" });
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            cta: u,
+            handleClicks: s,
+            mobileImage: d,
+            styles: o
+          }
+        )
+      );
+      const h = c.getByRole("img", { name: "Test image" });
+      await e.click(h), t(s).toHaveBeenCalled();
+    }), l("should not handle mobile image click when fullCardClickable", async () => {
+      const e = g.setup(), s = y.fn(), d = m({ url: "https://example.com/mobile.jpg" }), u = r({ type: "play-video" });
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            fullCardClickable: !0,
+            cta: u,
+            handleClicks: s,
+            mobileImage: d,
+            styles: o
+          }
+        )
+      );
+      const h = c.getByRole("img", { name: "Test image" });
+      await e.click(h), t(s).not.toHaveBeenCalled();
+    }), l("should not handle mobile image click for link types", async () => {
+      const e = g.setup(), s = y.fn(), d = m({ url: "https://example.com/mobile.jpg" }), u = r({ type: "external-link" });
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            cta: u,
+            handleClicks: s,
+            mobileImage: d,
+            styles: o
+          }
+        )
+      );
+      const h = c.getByRole("img", { name: "Test image" });
+      await e.click(h), t(s).not.toHaveBeenCalled();
+    });
+  }), p("Default Props", () => {
+    l("should use default image values", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("src", ""), t(e).toHaveAttribute("alt", "");
+    }), l("should use default mobileImage values", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.queryAllByRole("img").filter(
+        (s) => s.className.includes("mobile-image")
+      );
+      t(e).toHaveLength(0);
+    }), l("should use lazyLoad true by default", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("loading", "lazy");
+    }), l("should use async decoding by default", () => {
+      a(/* @__PURE__ */ n(i, { styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toHaveAttribute("decoding", "async");
+    }), l("should use displayCTA true by default", () => {
+      const e = r({ type: "external-link" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByTestId("anchor-tag")).toBeInTheDocument();
+    }), l("should use empty strings for title and content by default", () => {
+      a(/* @__PURE__ */ n(i, { styles: o })), t(c.queryByRole("heading")).not.toBeInTheDocument();
+      const e = document.querySelector(".content-module");
+      t(e).not.toBeInTheDocument();
+    });
+  }), p("Default CTA Labels", () => {
+    l('should use "View Promo" for play-video when no label', () => {
+      const e = r({ type: "play-video", label: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("View Promo")).toBeInTheDocument();
+    }), l('should use "View More" for internal-link when no label', () => {
+      const e = r({ type: "internal-link", label: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("View More")).toBeInTheDocument();
+    }), l('should use "Learn More" for external-link when no label', () => {
+      const e = r({ type: "external-link", label: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("Learn More")).toBeInTheDocument();
+    }), l('should use "View More" for info-panel when no label', () => {
+      const e = r({ type: "info-panel", label: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("View More")).toBeInTheDocument();
+    }), l('should use "See More" for show-modal when no label', () => {
+      const e = r({ type: "show-modal", label: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o })), t(c.getByText("See More")).toBeInTheDocument();
+    });
+  }), p("Edge Cases", () => {
+    l("should handle empty styles object", () => {
+      a(/* @__PURE__ */ n(i, { styles: {} }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toBeInTheDocument();
+    }), l("should handle very long title", () => {
+      const e = "A".repeat(500);
+      a(/* @__PURE__ */ n(i, { content: "Content", styles: o, title: e })), t(c.getByText(e)).toBeInTheDocument();
+    }), l("should handle special characters in overlay content", () => {
+      a(/* @__PURE__ */ n(i, { overlayContent: '<>"', styles: o }));
+      const e = document.querySelector(".overlay-content-module");
+      t(e).toBeInTheDocument(), t(e == null ? void 0 : e.textContent).toBe('<>"');
+    }), l("should handle undefined fetchPriority", () => {
+      a(/* @__PURE__ */ n(i, { fetchPriority: void 0, styles: o }));
+      const e = c.getByTestId("responsive-image");
+      t(e).toBeInTheDocument();
+    }), l("should handle CTA with empty relatedResourceId", () => {
+      const e = r({ type: "external-link", relatedResourceId: "" });
+      a(/* @__PURE__ */ n(i, { cta: e, styles: o }));
+      const s = c.getByTestId("anchor-tag");
+      t(s).toHaveAttribute("data-resource-id", "");
+    }), l("should handle both title and JSX content", () => {
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            content: /* @__PURE__ */ n("div", { "data-testid": "jsx-content", children: "JSX" }),
+            styles: o,
+            title: "Title"
+          }
+        )
+      ), t(c.getByRole("heading")).toHaveTextContent("Title"), t(c.getByTestId("jsx-content")).toBeInTheDocument();
+    });
+  }), p("Integration", () => {
+    l("should render complete card with all features", () => {
+      const e = m({ url: "https://example.com/image.jpg" }), s = m({ url: "https://example.com/mobile.jpg" }), d = r({
+        type: "play-video",
+        label: "Watch Now",
+        position: "end"
+      }), u = y.fn();
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            displayCTA: !0,
+            lazyLoad: !0,
+            content: "Video description",
+            cta: d,
+            handleClicks: u,
+            image: e,
+            mobileImage: s,
+            overlayContent: "Featured",
+            styles: o,
+            title: "Video Title"
+          }
+        )
+      ), t(c.getByTestId("responsive-image")).toBeInTheDocument();
+      const h = c.getAllByRole("img", { name: "Test image" });
+      t(h).toHaveLength(2), t(c.getByText("Featured")).toBeInTheDocument(), t(c.getByRole("heading")).toHaveTextContent("Video Title"), t(c.getByText("Video description")).toBeInTheDocument(), t(c.getByRole("button", { name: /play button/i })).toBeInTheDocument(), t(c.getByText("Watch Now")).toBeInTheDocument();
+    }), l("should render minimal card with only image", () => {
+      a(/* @__PURE__ */ n(i, { styles: o })), t(c.getByTestId("responsive-image")).toBeInTheDocument(), t(c.queryByRole("heading")).not.toBeInTheDocument(), t(document.querySelector(".content-module")).not.toBeInTheDocument();
+    }), l("should handle inline CTA with string content", () => {
+      const e = r({ type: "external-link", position: "inline" });
+      a(
+        /* @__PURE__ */ n(
+          i,
+          {
+            content: "Read the full article",
+            cta: e,
+            styles: o
+          }
+        )
+      ), t(c.getByText("Read the full article")).toBeInTheDocument(), t(c.getByTestId("anchor-tag")).toBeInTheDocument(), t(document.querySelector(".cta-wrapper-module")).not.toBeInTheDocument();
+    });
+  });
+});