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

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

@@ -0,0 +1,668 @@
+import { jsx as a } from "react/jsx-runtime";
+import { v as y, d as u, b as k, a as C, i as l, r, g as t, s as c } from "../../react.esm-DLSrfVwM.mjs";
+import { u as g } from "../../index-BUN4jQ3m.mjs";
+import f from "react";
+import { ImageCard as o } from "./ImageCard.js";
+y.mock("../../utils/helpers", () => ({
+  classes: (m) => m.filter(Boolean).join(" ")
+}));
+y.mock("./ImageCard.module.scss", () => ({
+  default: {
+    "image-card--clickable": "image-card--clickable-module",
+    "image-card--inline": "image-card--inline-module"
+  }
+}));
+y.mock("./ImageCardCore", () => ({
+  default: f.forwardRef(
+    (m, i) => /* @__PURE__ */ a("div", { "data-props": JSON.stringify(m), "data-testid": "image-card-core", ref: i, children: "ImageCardCore" })
+  )
+}));
+u("ImageCard", () => {
+  const m = (e) => ({
+    url: "https://example.com/image.jpg",
+    altText: "Test image",
+    aspectRatio: 1.7777777777777777,
+    sources: [],
+    ...e
+  }), i = (e) => ({
+    label: "Learn More",
+    href: "https://example.com",
+    type: "external-link",
+    relatedResourceId: "resource-123",
+    relatedResourceType: "article",
+    position: "end",
+    ...e
+  });
+  k(() => {
+    y.clearAllMocks();
+  }), C(() => {
+    y.restoreAllMocks();
+  }), u("Basic Rendering", () => {
+    l("should render image-card element", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toBeInTheDocument();
+    }), l("should render ImageCardCore component", () => {
+      r(/* @__PURE__ */ a(o, {})), t(c.getByTestId("image-card-core")).toBeInTheDocument();
+    }), l("should pass all props to ImageCardCore", () => {
+      const e = m(), n = i({ type: "button" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            content: "Test Content",
+            cta: n,
+            image: e,
+            title: "Test Title"
+          }
+        )
+      );
+      const s = c.getByTestId("image-card-core"), d = JSON.parse(s.getAttribute("data-props") || "{}");
+      t(d.image).toEqual(e), t(d.cta).toEqual(n), t(d.title).toBe("Test Title"), t(d.content).toBe("Test Content");
+    }), l("should forward ref to ImageCardCore", () => {
+      const e = f.createRef();
+      r(/* @__PURE__ */ a(o, { ref: e })), t(e.current).toBeTruthy();
+    });
+  }), u("Clickable Card with Link", () => {
+    l("should render anchor when fullCardClickable is true and cta type is external-link", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).toBeInTheDocument(), t(n).toHaveAttribute("href", "https://example.com");
+    }), l("should render anchor when fullCardClickable is true and cta type is internal-link", () => {
+      const e = i({ type: "internal-link", href: "/about" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).toBeInTheDocument(), t(n).toHaveAttribute("href", "/about");
+    }), l("should not render anchor when fullCardClickable is false", () => {
+      const e = i({ type: "external-link" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            cta: e,
+            fullCardClickable: !1
+          }
+        )
+      ), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should not render anchor when cta href is empty", () => {
+      const e = i({ type: "external-link", href: "" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      ), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should not render anchor when cta type is button", () => {
+      const e = i({ type: "button" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      ), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should apply clickable class when fullCardClickable is true with valid link", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = document.querySelector("image-card");
+      t(n).toHaveClass("image-card--clickable-module");
+    }), l("should not apply clickable class when not fullCardClickable", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            cta: e,
+            fullCardClickable: !1
+          }
+        )
+      );
+      const n = document.querySelector("image-card");
+      t(n).not.toHaveClass("image-card--clickable-module");
+    });
+  }), u("Link Attributes", () => {
+    l('should set target="_blank" for external-link', () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).toHaveAttribute("target", "_blank");
+    }), l('should set target="_self" for internal-link', () => {
+      const e = i({ type: "internal-link", href: "/about" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).toHaveAttribute("target", "_self");
+    }), l('should set rel="noreferrer" for external-link', () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).toHaveAttribute("rel", "noreferrer");
+    }), l("should not set rel attribute for internal-link", () => {
+      const e = i({ type: "internal-link", href: "/about" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).not.toHaveAttribute("rel");
+    }), l("should set title attribute from image altText", () => {
+      const e = m({ altText: "Beautiful landscape" }), n = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: n,
+            image: e
+          }
+        )
+      );
+      const s = c.getByRole("link");
+      t(s).toHaveAttribute("title", "Beautiful landscape");
+    }), l("should apply image-card__full-card-link class to anchor", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = c.getByRole("link");
+      t(n).toHaveClass("image-card__full-card-link");
+    });
+  }), u("Display Inline", () => {
+    l("should apply inline class when displayInline is true", () => {
+      r(/* @__PURE__ */ a(o, { displayInline: !0 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveClass("image-card--inline-module");
+    }), l("should not apply inline class when displayInline is false", () => {
+      r(/* @__PURE__ */ a(o, { displayInline: !1 }));
+      const e = document.querySelector("image-card");
+      t(e).not.toHaveClass("image-card--inline-module");
+    }), l("should apply inline class to clickable card", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            displayInline: !0,
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = document.querySelector("image-card");
+      t(n).toHaveClass("image-card--inline-module");
+    });
+  }), u("Custom Classes", () => {
+    l("should apply custom classname", () => {
+      r(/* @__PURE__ */ a(o, { classname: "custom-card" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveClass("custom-card");
+    }), l("should combine multiple classes", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            displayInline: !0,
+            fullCardClickable: !0,
+            classname: "custom-card",
+            cta: e
+          }
+        )
+      );
+      const n = document.querySelector("image-card");
+      t(n).toHaveClass("image-card--clickable-module"), t(n).toHaveClass("image-card--inline-module"), t(n).toHaveClass("custom-card");
+    });
+  }), u("CSS Custom Properties", () => {
+    l("should set overlay position to flex-start for left", () => {
+      r(/* @__PURE__ */ a(o, { overlayPosition: "left" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--justify-overlay-content": "flex-start" });
+    }), l("should set overlay position to flex-end for right", () => {
+      r(/* @__PURE__ */ a(o, { overlayPosition: "right" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--justify-overlay-content": "flex-end" });
+    }), l("should set overlay position to center for center", () => {
+      r(/* @__PURE__ */ a(o, { overlayPosition: "center" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--justify-overlay-content": "center" });
+    }), l("should set align-overlay-content to center when displayInline is true", () => {
+      r(/* @__PURE__ */ a(o, { displayInline: !0 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--align-overlay-content": "center" });
+    }), l("should set align-overlay-content to flex-end when displayInline is false", () => {
+      r(/* @__PURE__ */ a(o, { displayInline: !1 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--align-overlay-content": "flex-end" });
+    }), l("should set overlay text color", () => {
+      r(/* @__PURE__ */ a(o, { overlayTextColor: "#ff0000" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--overlay-content-text-color": "#ff0000" });
+    }), l("should set content line clamp when clampContentLines is true", () => {
+      r(/* @__PURE__ */ a(o, { clampContentLines: !0, numberOfLinesToClamp: 5 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--content-line-clamp": "5" });
+    }), l("should set line clamp to unset when clampContentLines is false", () => {
+      r(/* @__PURE__ */ a(o, { clampContentLines: !1, numberOfLinesToClamp: 5 }));
+      const e = document.querySelector("image-card"), n = e == null ? void 0 : e.getAttribute("style");
+      t(n).toContain("--content-line-clamp: unset");
+    }), l("should set image aspect ratio", () => {
+      const e = m({ aspectRatio: 1.7777777777777777 });
+      r(/* @__PURE__ */ a(o, { image: e }));
+      const n = document.querySelector("image-card");
+      t(n).toHaveStyle({ "--image-aspect-ratio": (16 / 9).toString() });
+    }), l("should set mobile image aspect ratio", () => {
+      const e = m({ aspectRatio: 1 });
+      r(/* @__PURE__ */ a(o, { mobileImage: e }));
+      const n = document.querySelector("image-card");
+      t(n).toHaveStyle({ "--mobile-image-aspect-ratio": "1" });
+    }), l("should set background image position", () => {
+      r(/* @__PURE__ */ a(o, { fullSizeImagePosition: [30, 70] }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--background-image-position": "30% 70%" });
+    }), l("should set mobile background image position", () => {
+      r(/* @__PURE__ */ a(o, { mobileImagePosition: [25, 75] }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--mobile-background-image-position": "25% 75%" });
+    }), l("should use default 50% 50% when fullSizeImagePosition is not provided", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--background-image-position": "50% 50%" });
+    }), l("should use default 50% 50% when mobileImagePosition is not provided", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--mobile-background-image-position": "50% 50%" });
+    });
+  }), u("Data Cursor Attribute", () => {
+    l("should set data-cursor to pointer when fullCardClickable with valid link", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      );
+      const n = document.querySelector("image-card");
+      t(n).toHaveAttribute("data-cursor", "pointer");
+    }), l("should set data-cursor to pointer when fullCardClickable without valid link", () => {
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !0 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveAttribute("data-cursor", "pointer");
+    }), l("should set data-cursor to default when not fullCardClickable", () => {
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !1 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveAttribute("data-cursor", "default");
+    });
+  }), u("Click Handling", () => {
+    l("should call handleClicks when card is clicked and fullCardClickable is true", async () => {
+      const e = g.setup(), n = y.fn(), s = i({ type: "button" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: s,
+            handleClicks: n,
+            relatedResourceId: "resource-123"
+          }
+        )
+      );
+      const d = document.querySelector("image-card");
+      await e.click(d), t(n).toHaveBeenCalledTimes(1);
+    }), l("should pass correct details to handleClicks", async () => {
+      const e = g.setup(), n = y.fn(), s = i({
+        type: "external-link",
+        relatedResourceType: "article"
+      });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: s,
+            handleClicks: n,
+            relatedResourceId: "resource-456"
+          }
+        )
+      );
+      const d = document.querySelector("image-card");
+      await e.click(d), t(n).toHaveBeenCalledWith(
+        t.objectContaining({
+          type: "card-clicked",
+          ctaType: "external-link",
+          resourceId: "resource-456",
+          resourceType: "article"
+        })
+      );
+    }), l("should include event target and currentTarget in handleClicks details", async () => {
+      const e = g.setup(), n = y.fn();
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            handleClicks: n
+          }
+        )
+      );
+      const s = document.querySelector("image-card");
+      await e.click(s);
+      const d = n.mock.calls[0][0];
+      t(d.target).toBeTruthy(), t(d.currentTarget).toBeTruthy();
+    }), l("should not call handleClicks when fullCardClickable is false", async () => {
+      const e = g.setup(), n = y.fn();
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !1,
+            handleClicks: n
+          }
+        )
+      );
+      const s = document.querySelector("image-card");
+      await e.click(s), t(n).not.toHaveBeenCalled();
+    }), l("should use default noop handler when handleClicks not provided", async () => {
+      const e = g.setup();
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !0 }));
+      const n = document.querySelector("image-card");
+      await e.click(n), t(n).toBeInTheDocument();
+    });
+  }), u("Default Props", () => {
+    l("should use default image values", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--image-aspect-ratio": "1" });
+    }), l("should use default mobileImage values", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--mobile-image-aspect-ratio": "1" });
+    }), l("should use default fullSizeImagePosition", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--background-image-position": "50% 50%" });
+    }), l("should use default mobileImagePosition", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--mobile-background-image-position": "50% 50%" });
+    }), l("should use default clampContentLines true", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--content-line-clamp": "3" });
+    }), l("should use default numberOfLinesToClamp 3", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--content-line-clamp": "3" });
+    }), l("should use default overlayPosition left", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--justify-overlay-content": "flex-start" });
+    }), l("should use default overlayTextColor #fff", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--overlay-content-text-color": "#fff" });
+    }), l("should use default cta values", () => {
+      r(/* @__PURE__ */ a(o, {})), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should use default fullCardClickable false", () => {
+      r(/* @__PURE__ */ a(o, {})), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should use default displayInline false", () => {
+      r(/* @__PURE__ */ a(o, {}));
+      const e = document.querySelector("image-card");
+      t(e).not.toHaveClass("image-card--inline-module");
+    });
+  }), u("Edge Cases", () => {
+    l("should handle empty cta href", () => {
+      const e = i({ href: "" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      ), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should handle undefined cta type", () => {
+      const e = i({ type: "" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      ), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should handle zero aspect ratio", () => {
+      const e = m({ aspectRatio: 0 });
+      r(/* @__PURE__ */ a(o, { image: e }));
+      const n = document.querySelector("image-card");
+      t(n).toHaveStyle({ "--image-aspect-ratio": "0" });
+    }), l("should handle very large numberOfLinesToClamp", () => {
+      r(/* @__PURE__ */ a(o, { numberOfLinesToClamp: 999 }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--content-line-clamp": "999" });
+    }), l("should handle special characters in classname", () => {
+      r(/* @__PURE__ */ a(o, { classname: "custom-card__special--modifier" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveClass("custom-card__special--modifier");
+    }), l("should handle rgba color for overlayTextColor", () => {
+      r(/* @__PURE__ */ a(o, { overlayTextColor: "rgba(255, 0, 0, 0.5)" }));
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--overlay-content-text-color": "rgba(255, 0, 0, 0.5)" });
+    }), l("should handle empty relatedResourceId", () => {
+      const e = y.fn();
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            handleClicks: e,
+            relatedResourceId: ""
+          }
+        )
+      ), t(c.getByTestId("image-card-core")).toBeInTheDocument();
+    }), l("should handle position values at boundaries [0, 0]", () => {
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullSizeImagePosition: [0, 0],
+            mobileImagePosition: [0, 0]
+          }
+        )
+      );
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--background-image-position": "0% 0%" }), t(e).toHaveStyle({ "--mobile-background-image-position": "0% 0%" });
+    }), l("should handle position values at boundaries [100, 100]", () => {
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullSizeImagePosition: [100, 100],
+            mobileImagePosition: [100, 100]
+          }
+        )
+      );
+      const e = document.querySelector("image-card");
+      t(e).toHaveStyle({ "--background-image-position": "100% 100%" }), t(e).toHaveStyle({ "--mobile-background-image-position": "100% 100%" });
+    });
+  }), u("Integration", () => {
+    l("should render complete clickable card with all features", () => {
+      const e = m({
+        url: "https://example.com/image.jpg",
+        altText: "Product Image",
+        aspectRatio: 1.3333333333333333
+      }), n = m({ aspectRatio: 1 }), s = i({
+        type: "external-link",
+        href: "https://shop.example.com",
+        label: "Buy Now"
+      }), d = y.fn();
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            clampContentLines: !0,
+            displayInline: !0,
+            fullCardClickable: !0,
+            classname: "product-card",
+            content: "Product description",
+            cta: s,
+            fullSizeImagePosition: [30, 40],
+            handleClicks: d,
+            image: e,
+            mobileImage: n,
+            mobileImagePosition: [50, 60],
+            numberOfLinesToClamp: 2,
+            overlayPosition: "center",
+            overlayTextColor: "#000000",
+            title: "Product Title"
+          }
+        )
+      );
+      const p = document.querySelector("image-card");
+      t(p).toHaveClass("image-card--clickable-module"), t(p).toHaveClass("image-card--inline-module"), t(p).toHaveClass("product-card"), t(p).toHaveAttribute("data-cursor", "pointer");
+      const h = c.getByRole("link");
+      t(h).toHaveAttribute("href", "https://shop.example.com"), t(h).toHaveAttribute("target", "_blank"), t(h).toHaveAttribute("rel", "noreferrer"), t(h).toHaveAttribute("title", "Product Image");
+    }), l("should render non-clickable card without anchor", () => {
+      const e = m(), n = i({ type: "button", href: "" });
+      r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            cta: n,
+            displayInline: !1,
+            fullCardClickable: !1,
+            image: e,
+            overlayPosition: "right"
+          }
+        )
+      );
+      const s = document.querySelector("image-card");
+      t(s).not.toHaveClass("image-card--clickable-module"), t(s).toHaveAttribute("data-cursor", "default"), t(c.queryByRole("link")).not.toBeInTheDocument(), t(c.getByTestId("image-card-core")).toBeInTheDocument();
+    }), l("should update from non-clickable to clickable", () => {
+      const e = i({ type: "external-link", href: "https://example.com" }), { rerender: n } = r(
+        /* @__PURE__ */ a(
+          o,
+          {
+            cta: e,
+            fullCardClickable: !1
+          }
+        )
+      );
+      t(c.queryByRole("link")).not.toBeInTheDocument(), n(
+        /* @__PURE__ */ a(
+          o,
+          {
+            fullCardClickable: !0,
+            cta: e
+          }
+        )
+      ), t(c.getByRole("link")).toBeInTheDocument();
+    });
+  }), u("Prop Validation", () => {
+    l("should accept all valid overlayPosition values", () => {
+      const e = ["left", "right", "center"], n = ["flex-start", "flex-end", "center"];
+      e.forEach((s, d) => {
+        const { unmount: p } = r(/* @__PURE__ */ a(o, { overlayPosition: s })), h = document.querySelector("image-card");
+        t(h).toHaveStyle({ "--justify-overlay-content": n[d] }), p();
+      });
+    }), l("should handle numeric id", () => {
+      r(/* @__PURE__ */ a(o, { id: 12345 }));
+      const e = c.getByTestId("image-card-core"), n = JSON.parse(e.getAttribute("data-props") || "{}");
+      t(n.id).toBe(12345);
+    }), l("should handle string id", () => {
+      r(/* @__PURE__ */ a(o, { id: "card-abc-123" }));
+      const e = c.getByTestId("image-card-core"), n = JSON.parse(e.getAttribute("data-props") || "{}");
+      t(n.id).toBe("card-abc-123");
+    }), l("should handle JSX content", () => {
+      r(/* @__PURE__ */ a(o, { content: /* @__PURE__ */ a("div", { children: "Custom Content" }) })), t(c.getByTestId("image-card-core")).toBeInTheDocument();
+    }), l("should handle string overlayContent", () => {
+      r(/* @__PURE__ */ a(o, { overlayContent: "Overlay Text" }));
+      const e = c.getByTestId("image-card-core"), n = JSON.parse(e.getAttribute("data-props") || "{}");
+      t(n.overlayContent).toBe("Overlay Text");
+    }), l("should handle JSX overlayContent", () => {
+      r(/* @__PURE__ */ a(o, { overlayContent: /* @__PURE__ */ a("span", { children: "Custom Overlay" }) })), t(c.getByTestId("image-card-core")).toBeInTheDocument();
+    });
+  }), u("CTA Type Combinations", () => {
+    l("should render link for external-link type", () => {
+      const e = i({ type: "external-link", href: "https://example.com" });
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !0, cta: e })), t(c.getByRole("link")).toBeInTheDocument();
+    }), l("should render link for internal-link type", () => {
+      const e = i({ type: "internal-link", href: "/about" });
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !0, cta: e })), t(c.getByRole("link")).toBeInTheDocument();
+    }), l("should not render link for button type", () => {
+      const e = i({ type: "button", href: "https://example.com" });
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !0, cta: e })), t(c.queryByRole("link")).not.toBeInTheDocument();
+    }), l("should not render link for empty type", () => {
+      const e = i({ type: "", href: "https://example.com" });
+      r(/* @__PURE__ */ a(o, { fullCardClickable: !0, cta: e })), t(c.queryByRole("link")).not.toBeInTheDocument();
+    });
+  });
+});