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

package/dist/components/FeaturedList/FeaturedList.test.js

@@ -0,0 +1,353 @@
+import { jsxs as f, jsx as s } from "react/jsx-runtime";
+import { v as u, d as m, b as y, a as T, i as o, r as n, g as i, s as l } from "../../react.esm-DLSrfVwM.mjs";
+import { u as p } from "../../index-BUN4jQ3m.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { FeaturedList as r } from "./FeaturedList.js";
+u.mock("../ImageCard", () => ({
+  default: ({ cta: d, content: a, image: e, fullCardClickable: t, displayCTA: c, handleClicks: g, relatedResourceId: h }) => /* @__PURE__ */ f(
+    "div",
+    {
+      "data-cta-href": d == null ? void 0 : d.href,
+      "data-cta-type": d == null ? void 0 : d.type,
+      "data-resource-id": h,
+      "data-testid": "image-card",
+      children: [
+        /* @__PURE__ */ s("div", { "data-testid": "card-content", children: a }),
+        /* @__PURE__ */ s("img", { alt: e == null ? void 0 : e.altText, src: e == null ? void 0 : e.url }),
+        t && /* @__PURE__ */ s("span", { "data-testid": "full-card-clickable", children: "clickable" }),
+        c && /* @__PURE__ */ s("span", { "data-testid": "display-cta", children: "cta visible" }),
+        /* @__PURE__ */ s("button", { onClick: () => g && g({ resourceId: h }), children: "Click" })
+      ]
+    }
+  )
+}));
+u.mock("../Loading", () => ({
+  default: () => /* @__PURE__ */ s("div", { "data-testid": "loading", children: "Loading..." })
+}));
+u.mock("../AirDateFormatter", () => ({
+  default: ({ airdateStr: d, separatorType: a }) => /* @__PURE__ */ s("div", { "data-airdate": d, "data-separator": a, "data-testid": "air-date-formatter", children: d })
+}));
+u.mock("../../utils/helpers", () => ({
+  convert12to24: u.fn((d) => d === "10:00 PM" ? "22:00" : d === "08:30 AM" ? "08:30" : d)
+}));
+u.mock("../../utils/program-helpers", () => ({
+  determineSeriesPrefix: u.fn((d) => `series-${d}`)
+}));
+m("FeaturedList", () => {
+  let d;
+  y(() => {
+    d = document.createElement("div"), d.id = "root", document.body.appendChild(d), u.clearAllMocks();
+  }), T(() => {
+    document.body.removeChild(d);
+  });
+  const a = (e) => ({
+    id: 1,
+    program: "Test Program",
+    program_class: "Series",
+    title_code: "TEST123",
+    series_prefix: "TP",
+    start_date: "2024-01-15",
+    start_time: "10:00 PM",
+    content: {
+      slug: "test-program",
+      image: "https://example.com/image.jpg"
+    },
+    ...e
+  });
+  m("Loading State", () => {
+    o("should render Loading component when list is null", () => {
+      n(/* @__PURE__ */ s(r, { list: null })), i(l.getByTestId("loading")).toBeInTheDocument();
+    }), o("should render Loading inside a div when list is null", () => {
+      const { container: e } = n(/* @__PURE__ */ s(r, { list: null })), t = e.querySelector("div");
+      i(t).toBeInTheDocument(), i(t == null ? void 0 : t.querySelector('[data-testid="loading"]')).toBeInTheDocument();
+    });
+  }), m("Empty State", () => {
+    o("should render no results message when list is empty", () => {
+      n(/* @__PURE__ */ s(r, { list: [] })), i(l.getByText("There are no items to display.")).toBeInTheDocument();
+    }), o("should apply featured-list__no-results class to no results message", () => {
+      const { container: e } = n(/* @__PURE__ */ s(r, { list: [] })), t = e.querySelector(".featured-list__no-results");
+      i(t).toBeInTheDocument(), i(t).toHaveTextContent("There are no items to display.");
+    }), o("should not render featured-list element when empty", () => {
+      n(/* @__PURE__ */ s(r, { list: [] }));
+      const e = document.querySelector("featured-list");
+      i(e).not.toBeInTheDocument();
+    });
+  }), m("List with Items", () => {
+    o("should render featured-list custom element", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = document.querySelector("featured-list");
+      i(t).toBeInTheDocument();
+    }), o("should render ImageCard for single item", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getAllByTestId("image-card");
+      i(t).toHaveLength(1);
+    }), o("should render ImageCard for multiple items", () => {
+      const e = [
+        a({ id: 1 }),
+        a({ id: 2 }),
+        a({ id: 3 })
+      ];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getAllByTestId("image-card");
+      i(t).toHaveLength(3);
+    }), o("should pass correct image data to ImageCard", () => {
+      const e = [a({
+        program: "Test Show",
+        content: {
+          slug: "test-show",
+          image: "https://example.com/test.jpg"
+        }
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByAltText("Test Show");
+      i(t).toHaveAttribute("src", "https://example.com/test.jpg");
+    }), o("should use default imageAspectRatio", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { list: e })), i(l.getByTestId("image-card")).toBeInTheDocument();
+    }), o("should use custom imageAspectRatio", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { imageAspectRatio: 16 / 9, list: e })), i(l.getByTestId("image-card")).toBeInTheDocument();
+    });
+  }), m("AirDateFormatter Integration", () => {
+    o("should render AirDateFormatter with correct date and time", () => {
+      const e = [a({
+        start_date: "2024-01-15",
+        start_time: "10:00 PM"
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("air-date-formatter");
+      i(t).toHaveAttribute("data-airdate", "2024-01-15 22:00");
+    }), o("should use pipe separator type", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("air-date-formatter");
+      i(t).toHaveAttribute("data-separator", "pipe");
+    }), o("should convert 12-hour time to 24-hour format", () => {
+      const e = [a({
+        start_date: "2024-01-20",
+        start_time: "08:30 AM"
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("air-date-formatter");
+      i(t).toHaveAttribute("data-airdate", "2024-01-20 08:30");
+    });
+  }), m("CTA Configuration - Series", () => {
+    o("should create show link for Series when hasSeriesPages is true", () => {
+      const e = [a({
+        program_class: "Series",
+        content: { slug: "test-series", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !0, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-href", "/show/test-series");
+    }), o("should use internal-link type for Series when hasSeriesPages is true", () => {
+      const e = [a({
+        program_class: "Series",
+        content: { slug: "test-series", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !0, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-type", "internal-link");
+    }), o("should use empty href for Series when hasSeriesPages is false", () => {
+      const e = [a({
+        program_class: "Series",
+        content: { slug: "test-series", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !1, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-href", "");
+    }), o("should use show-modal type when hasSeriesPages is false", () => {
+      const e = [a({
+        program_class: "Series",
+        content: { slug: "test-series", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !1, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-type", "show-modal");
+    }), o("should use determineSeriesPrefix for Series relatedResourceId", () => {
+      const e = [a({
+        program_class: "Series",
+        series_prefix: "ABC"
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-resource-id", "series-ABC");
+    });
+  }), m("CTA Configuration - Film", () => {
+    o("should create movie link for Film when hasSeriesPages is true", () => {
+      const e = [a({
+        program_class: "Film",
+        content: { slug: "test-movie", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !0, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-href", "/movie/test-movie");
+    }), o("should use internal-link type for Film when hasSeriesPages is true", () => {
+      const e = [a({
+        program_class: "Film",
+        content: { slug: "test-movie", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !0, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-type", "internal-link");
+    }), o("should use empty href for Film when hasSeriesPages is false", () => {
+      const e = [a({
+        program_class: "Film",
+        content: { slug: "test-movie", image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !1, list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-href", "");
+    }), o("should use title_code for Film relatedResourceId", () => {
+      const e = [a({
+        program_class: "Film",
+        title_code: "MOVIE123"
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-resource-id", "MOVIE123");
+    });
+  }), m("ImageCard Props", () => {
+    o("should set fullCardClickable to true", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { list: e })), i(l.getByTestId("full-card-clickable")).toBeInTheDocument();
+    }), o("should set displayCTA to false", () => {
+      const e = [a()];
+      n(/* @__PURE__ */ s(r, { list: e })), i(l.queryByTestId("display-cta")).not.toBeInTheDocument();
+    }), o("should handle missing slug gracefully", () => {
+      const e = [a({
+        content: { slug: void 0, image: "" }
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toHaveAttribute("data-cta-href", "");
+    }), o("should handle missing content gracefully", () => {
+      const e = [a({
+        content: void 0
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByTestId("image-card");
+      i(t).toBeInTheDocument();
+    }), o("should use empty string for missing image", () => {
+      const e = [a({
+        content: { slug: "test", image: void 0 }
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByAltText("Test Program");
+      i(t).toHaveAttribute("src", "");
+    });
+  }), m("HandleClicks Functionality", () => {
+    o("should not call handleClicks when hasSeriesPages is true", async () => {
+      const e = u.fn(), t = [a()];
+      n(/* @__PURE__ */ s(r, { hasSeriesPages: !0, handleClicks: e, list: t }));
+      const c = l.getByRole("button");
+      await p.click(c), i(e).not.toHaveBeenCalled();
+    }), o("should call handleClicks when hasSeriesPages is false", async () => {
+      const e = u.fn(), t = [a({
+        program_class: "Series",
+        series_prefix: "TEST"
+      })];
+      n(/* @__PURE__ */ s(r, { handleClicks: e, hasSeriesPages: !1, list: t }));
+      const c = l.getByRole("button");
+      await p.click(c), i(e).toHaveBeenCalled();
+    }), o("should use default no-op handleClicks when not provided", () => {
+      const e = [a()];
+      i(() => n(/* @__PURE__ */ s(r, { hasSeriesPages: !1, list: e }))).not.toThrow();
+    });
+  }), m("Edge Cases", () => {
+    o("should handle items with null content image", () => {
+      const e = [a({
+        content: { slug: "test", image: null }
+      })];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getByAltText("Test Program");
+      i(t).toHaveAttribute("src", "");
+    }), o("should handle different program classes", () => {
+      const e = [
+        a({ id: 1, program_class: "Series" }),
+        a({ id: 2, program_class: "Film" }),
+        a({ id: 3, program_class: "Special" })
+      ];
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getAllByTestId("image-card");
+      i(t).toHaveLength(3);
+    }), o("should handle very long list", () => {
+      const e = Array.from(
+        { length: 50 },
+        (c, g) => a({ id: g + 1 })
+      );
+      n(/* @__PURE__ */ s(r, { list: e }));
+      const t = l.getAllByTestId("image-card");
+      i(t).toHaveLength(50);
+    }), o("should handle items with special characters in program name", () => {
+      const e = [a({
+        program: "Test's Program & More!"
+      })];
+      n(/* @__PURE__ */ s(r, { list: e })), i(l.getByAltText("Test's Program & More!")).toBeInTheDocument();
+    }), o("should render unique keys for each item", () => {
+      const e = [
+        a({ id: 1 }),
+        a({ id: 2 }),
+        a({ id: 3 })
+      ], { container: t } = n(/* @__PURE__ */ s(r, { list: e })), c = t.querySelector("featured-list");
+      i(c == null ? void 0 : c.children).toHaveLength(3);
+    });
+  }), m("Integration", () => {
+    o("should render complete featured list with all features", () => {
+      const e = u.fn(), t = [
+        a({
+          id: 1,
+          program: "Drama Series",
+          program_class: "Series",
+          series_prefix: "DS",
+          start_date: "2024-01-15",
+          start_time: "10:00 PM",
+          content: {
+            slug: "drama-series",
+            image: "https://example.com/drama.jpg"
+          }
+        }),
+        a({
+          id: 2,
+          program: "Action Movie",
+          program_class: "Film",
+          title_code: "FILM123",
+          start_date: "2024-01-16",
+          start_time: "08:30 AM",
+          content: {
+            slug: "action-movie",
+            image: "https://example.com/movie.jpg"
+          }
+        })
+      ];
+      n(/* @__PURE__ */ s(
+        r,
+        {
+          hasSeriesPages: !0,
+          handleClicks: e,
+          imageAspectRatio: 16 / 9,
+          list: t
+        }
+      ));
+      const c = document.querySelector("featured-list");
+      i(c).toBeInTheDocument();
+      const g = l.getAllByTestId("image-card");
+      i(g).toHaveLength(2), i(l.getByAltText("Drama Series")).toBeInTheDocument(), i(l.getByAltText("Action Movie")).toBeInTheDocument();
+      const h = l.getAllByTestId("air-date-formatter");
+      i(h).toHaveLength(2);
+    }), o("should update when list changes", () => {
+      const { rerender: e } = n(/* @__PURE__ */ s(r, { list: [a({ id: 1 })] }));
+      i(l.getAllByTestId("image-card")).toHaveLength(1), e(/* @__PURE__ */ s(
+        r,
+        {
+          list: [
+            a({ id: 1 }),
+            a({ id: 2 })
+          ]
+        }
+      )), i(l.getAllByTestId("image-card")).toHaveLength(2), e(/* @__PURE__ */ s(r, { list: [] })), i(l.getByText("There are no items to display.")).toBeInTheDocument();
+    });
+  });
+});

package/dist/components/Figure/Figure.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { p as s } from "../../index-VjANCDXC.mjs";
+import { p as s } from "../../index-06PEPfBQ.mjs";
 import '../../assets/Figure2.css';const o = "_figure_1alhd_1", c = {
   figure: o
 };

package/dist/components/Figure/Figure.test.js

@@ -0,0 +1,198 @@
+import { jsx as n, jsxs as p, Fragment as h } from "react/jsx-runtime";
+import { d as s, b as d, a as T, i, r, g as e, s as c } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { Figure as a } from "./Figure.js";
+s("Figure", () => {
+  let g;
+  d(() => {
+    g = document.createElement("div"), g.id = "root", document.body.appendChild(g);
+  }), T(() => {
+    document.body.removeChild(g);
+  }), s("Basic Rendering", () => {
+    i("should render figure element", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test" } }));
+      const t = document.querySelector("figure");
+      e(t).toBeInTheDocument();
+    }), i("should render img element", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test" } }));
+      const t = c.getByRole("img");
+      e(t).toBeInTheDocument();
+    }), i("should apply figure CSS class", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test" } })), o = t.querySelector(".figure");
+      e(o).toBeInTheDocument(), e(o == null ? void 0 : o.tagName).toBe("FIGURE");
+    });
+  }), s("Image Attributes", () => {
+    i("should set src attribute on img", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "https://example.com/image.jpg", altText: "Test" } }));
+      const t = c.getByRole("img");
+      e(t).toHaveAttribute("src", "https://example.com/image.jpg");
+    }), i("should set alt attribute on img", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test Image" } }));
+      const t = c.getByRole("img");
+      e(t).toHaveAttribute("alt", "Test Image");
+    }), i("should handle empty url", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "", altText: "Test" } }));
+      const t = c.getByRole("img");
+      e(t).toHaveAttribute("src", "");
+    }), i("should handle empty altText", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "" } }));
+      const t = document.querySelector("img");
+      e(t).toBeInTheDocument(), e(t).toHaveAttribute("alt", "");
+    }), i("should handle altText with special characters", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test's Image & More!" } }));
+      const t = c.getByRole("img");
+      e(t).toHaveAttribute("alt", "Test's Image & More!");
+    });
+  }), s("Title Attribute", () => {
+    i("should set title attribute on figure when altText is provided", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test Title" } })), o = t.querySelector("figure");
+      e(o).toHaveAttribute("title", "Test Title");
+    }), i("should set empty title when altText is empty", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "" } })), o = t.querySelector("figure");
+      e(o).toHaveAttribute("title", "");
+    }), i("should handle title with special characters", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: 'Title: "Special" & More!' } })), o = t.querySelector("figure");
+      e(o).toHaveAttribute("title", 'Title: "Special" & More!');
+    });
+  }), s("Caption Rendering", () => {
+    i("should not render figcaption when caption is not provided", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test" } }));
+      const t = document.querySelector("figcaption");
+      e(t).not.toBeInTheDocument();
+    }), i("should render figcaption when caption is provided", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Test caption" } }));
+      const t = document.querySelector("figcaption");
+      e(t).toBeInTheDocument();
+    }), i("should render caption text", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "This is a caption" } })), e(c.getByText("This is a caption")).toBeInTheDocument();
+    }), i("should not render figcaption when caption is empty string", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "" } }));
+      const t = document.querySelector("figcaption");
+      e(t).not.toBeInTheDocument();
+    }), i("should not render figcaption when caption is undefined", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: void 0 } }));
+      const t = document.querySelector("figcaption");
+      e(t).not.toBeInTheDocument();
+    });
+  }), s("HTML Parsing in Caption", () => {
+    i("should parse HTML tags in caption", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "<strong>Bold text</strong>" } }));
+      const t = document.querySelector("strong");
+      e(t).toBeInTheDocument(), e(t).toHaveTextContent("Bold text");
+    }), i("should parse multiple HTML tags", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "<em>Italic</em> and <strong>bold</strong>" } })), e(document.querySelector("em")).toBeInTheDocument(), e(document.querySelector("strong")).toBeInTheDocument();
+    }), i("should parse links in caption", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: '<a href="/source">Source</a>' } }));
+      const t = c.getByRole("link", { name: /source/i });
+      e(t).toBeInTheDocument(), e(t).toHaveAttribute("href", "/source");
+    }), i("should parse nested HTML elements", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "<span>Nested <strong>content</strong></span>" } }));
+      const t = document.querySelector("span"), o = t == null ? void 0 : t.querySelector("strong");
+      e(t).toBeInTheDocument(), e(o).toBeInTheDocument(), e(o).toHaveTextContent("content");
+    }), i("should handle plain text caption without HTML", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Plain text caption" } })), e(c.getByText("Plain text caption")).toBeInTheDocument();
+    }), i("should parse line breaks", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Line 1<br/>Line 2" } }));
+      const t = document.querySelector("br");
+      e(t).toBeInTheDocument();
+    }), i("should handle mixed content", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Some text <strong>bold</strong> more text" } }));
+      const t = document.querySelector("figcaption");
+      e(t).toHaveTextContent("Some text bold more text"), e(t == null ? void 0 : t.querySelector("strong")).toBeInTheDocument();
+    });
+  }), s("Default Props", () => {
+    i("should use default image values when not provided", () => {
+      r(/* @__PURE__ */ n(a, {}));
+      const t = document.querySelector("img");
+      e(t).toBeInTheDocument(), e(t).toHaveAttribute("src", ""), e(t).toHaveAttribute("alt", "");
+    }), i("should not render caption with default values", () => {
+      r(/* @__PURE__ */ n(a, {}));
+      const t = document.querySelector("figcaption");
+      e(t).not.toBeInTheDocument();
+    }), i("should render figure element with defaults", () => {
+      r(/* @__PURE__ */ n(a, {}));
+      const t = document.querySelector("figure");
+      e(t).toBeInTheDocument();
+    }), i("should set empty title with default values", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, {})), o = t.querySelector("figure");
+      e(o).toHaveAttribute("title", "");
+    });
+  }), s("Component Structure", () => {
+    i("should have correct DOM hierarchy without caption", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test" } })), o = t.querySelector("figure"), l = o == null ? void 0 : o.querySelector("img"), u = o == null ? void 0 : o.querySelector("figcaption");
+      e(o).toBeInTheDocument(), e(l).toBeInTheDocument(), e(u).not.toBeInTheDocument();
+    }), i("should have correct DOM hierarchy with caption", () => {
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Caption" } })), o = t.querySelector("figure"), l = o == null ? void 0 : o.querySelector("img"), u = o == null ? void 0 : o.querySelector("figcaption");
+      e(o).toBeInTheDocument(), e(l).toBeInTheDocument(), e(u).toBeInTheDocument();
+    }), i("should render img before figcaption", () => {
+      var u, m;
+      const { container: t } = r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Caption" } })), o = t.querySelector("figure"), l = Array.from((o == null ? void 0 : o.children) || []);
+      e((u = l[0]) == null ? void 0 : u.tagName).toBe("IMG"), e((m = l[1]) == null ? void 0 : m.tagName).toBe("FIGCAPTION");
+    });
+  }), s("Edge Cases", () => {
+    i("should handle very long alt text", () => {
+      const t = "This is a very long alt text that describes the image in great detail and contains a lot of information about what is shown in the image.";
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: t } }));
+      const o = c.getByRole("img");
+      e(o).toHaveAttribute("alt", t);
+    }), i("should handle very long caption", () => {
+      const t = "This is a very long caption that provides extensive information about the image, its context, and any relevant details that might be important for understanding the visual content.";
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: t } })), e(c.getByText(t)).toBeInTheDocument();
+    }), i("should handle caption with only HTML tags", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "<strong></strong>" } }));
+      const t = document.querySelector("figcaption"), o = t == null ? void 0 : t.querySelector("strong");
+      e(t).toBeInTheDocument(), e(o).toBeInTheDocument();
+    }), i("should handle self-closing tags in caption", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Line 1<br />Line 2" } }));
+      const t = document.querySelector("br");
+      e(t).toBeInTheDocument();
+    }), i("should handle unicode characters in alt text", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Photo © 2024 — Image™ 😊" } }));
+      const t = c.getByRole("img");
+      e(t).toHaveAttribute("alt", "Photo © 2024 — Image™ 😊");
+    }), i("should handle unicode characters in caption", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "test.jpg", altText: "Test", caption: "Caption © 2024 — Text™ 😊" } })), e(c.getByText(/Caption © 2024 — Text™ 😊/)).toBeInTheDocument();
+    }), i("should handle url with query parameters", () => {
+      r(/* @__PURE__ */ n(a, { image: { url: "https://example.com/image.jpg?w=500&h=300", altText: "Test" } }));
+      const t = c.getByRole("img");
+      e(t).toHaveAttribute("src", "https://example.com/image.jpg?w=500&h=300");
+    }), i("should handle data URLs", () => {
+      const t = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA";
+      r(/* @__PURE__ */ n(a, { image: { url: t, altText: "Test" } }));
+      const o = c.getByRole("img");
+      e(o).toHaveAttribute("src", t);
+    });
+  }), s("Integration", () => {
+    i("should render complete figure with all features", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ n(
+          a,
+          {
+            image: {
+              url: "https://example.com/photo.jpg",
+              altText: "Beautiful Landscape Photo",
+              caption: 'A stunning view of the <strong>mountains</strong> at <a href="/sunset">sunset</a>.'
+            }
+          }
+        )
+      ), o = t.querySelector("figure");
+      e(o).toHaveAttribute("title", "Beautiful Landscape Photo"), e(o).toHaveClass("figure");
+      const l = c.getByRole("img");
+      e(l).toHaveAttribute("src", "https://example.com/photo.jpg"), e(l).toHaveAttribute("alt", "Beautiful Landscape Photo");
+      const u = document.querySelector("figcaption");
+      e(u).toBeInTheDocument(), e(u).toHaveTextContent("A stunning view of the mountains at sunset."), e(document.querySelector("strong")).toHaveTextContent("mountains"), e(c.getByRole("link", { name: /sunset/i })).toHaveAttribute("href", "/sunset");
+    }), i("should update when props change", () => {
+      const { rerender: t } = r(/* @__PURE__ */ n(a, { image: { url: "image1.jpg", altText: "First" } }));
+      let o = c.getByRole("img");
+      e(o).toHaveAttribute("src", "image1.jpg"), e(o).toHaveAttribute("alt", "First"), e(document.querySelector("figcaption")).not.toBeInTheDocument(), t(/* @__PURE__ */ n(a, { image: { url: "image2.jpg", altText: "Second", caption: "New caption" } })), o = c.getByRole("img"), e(o).toHaveAttribute("src", "image2.jpg"), e(o).toHaveAttribute("alt", "Second"), e(document.querySelector("figcaption")).toBeInTheDocument(), e(c.getByText("New caption")).toBeInTheDocument();
+    }), i("should render multiple Figure components independently", () => {
+      const { container: t } = r(
+        /* @__PURE__ */ p(h, { children: [
+          /* @__PURE__ */ n(a, { image: { url: "image1.jpg", altText: "First Image", caption: "Caption 1" } }),
+          /* @__PURE__ */ n(a, { image: { url: "image2.jpg", altText: "Second Image", caption: "Caption 2" } })
+        ] })
+      ), o = t.querySelectorAll("figure");
+      e(o).toHaveLength(2), e(c.getByAltText("First Image")).toBeInTheDocument(), e(c.getByAltText("Second Image")).toBeInTheDocument(), e(c.getByText("Caption 1")).toBeInTheDocument(), e(c.getByText("Caption 2")).toBeInTheDocument();
+    });
+  });
+});