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

package/dist/components/CarouselSlide/CarouselSlide.test.js

@@ -0,0 +1,378 @@
+import { jsx as l } from "react/jsx-runtime";
+import { v as y, d, b as p, i as r, r as a, g as i, w as u, s as c } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { CarouselSlide as n } from "./CarouselSlide.js";
+y.mock("@scrippsproduct/console-logger", () => ({
+  default: {
+    setComponent: y.fn(),
+    log: y.fn()
+  }
+}));
+y.mock("../../utils/helpers", () => ({
+  classes: (h) => h.filter(Boolean).join(" ")
+}));
+y.mock("../../settings", () => {
+  const { lazy: h } = require("react"), s = ({ title: o }) => /* @__PURE__ */ l("div", { "data-testid": "figure-layout", children: o }), t = ({ content: o }) => /* @__PURE__ */ l("div", { "data-testid": "text-layout", children: o }), e = ({ videoId: o }) => /* @__PURE__ */ l("div", { "data-testid": "video-layout", children: o });
+  return {
+    slideLayoutsMap: /* @__PURE__ */ new Map([
+      ["Figure", h(() => Promise.resolve({ default: s }))],
+      ["Text", h(() => Promise.resolve({ default: t }))],
+      ["Video", h(() => Promise.resolve({ default: e }))]
+    ])
+  };
+});
+d("CarouselSlide", () => {
+  const h = {
+    id: 1,
+    props: { title: "Test Cell" },
+    layout: "Figure"
+  }, s = {
+    ariaLabel: "1 of 3",
+    cells: [h],
+    layout: "Figure"
+  };
+  p(() => {
+    y.clearAllMocks();
+  }), d("Basic Rendering", () => {
+    r("should render slide with basic props", async () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toBeInTheDocument(), await u(() => {
+        i(e).toBeInTheDocument();
+      });
+    }), r("should render with correct aria-label", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("aria-label", "1 of 3");
+    }), r("should render with aria-roledescription", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("aria-roledescription", "carousel-item");
+    }), r("should render with data-index attribute", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 2, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("data-index", "2");
+    }), r("should render with correct index for different positions", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 5, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("data-index", "5");
+    });
+  }), d("Inert Attribute", () => {
+    r("should not have inert attribute when slide is current", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).not.toHaveAttribute("inert");
+    }), r("should have inert attribute when slide is not current", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 1, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("inert");
+    }), r("should have inert attribute when currentIndex is greater than index", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 2 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("inert");
+    }), r("should not have inert when indices match at higher values", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 5, currentIndex: 5 })
+      ), e = t.querySelector("li");
+      i(e).not.toHaveAttribute("inert");
+    });
+  }), d("Variable Height", () => {
+    r("should apply variable height class when variableHeight is true", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(
+          n,
+          {
+            slide: s,
+            index: 0,
+            currentIndex: 0,
+            variableHeight: !0
+          }
+        )
+      ), e = t.querySelector("li");
+      i(e).toHaveClass("slide--variable-height");
+    }), r("should not apply variable height class when variableHeight is false", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(
+          n,
+          {
+            slide: s,
+            index: 0,
+            currentIndex: 0,
+            variableHeight: !1
+          }
+        )
+      ), e = t.querySelector("li");
+      i(e).not.toHaveClass("slide--variable-height");
+    }), r("should not apply variable height class by default", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).not.toHaveClass("slide--variable-height");
+    });
+  }), d("CSS Classes", () => {
+    r("should always have slide class", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveClass("slide");
+    }), r("should have multiple classes when variableHeight is true", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(
+          n,
+          {
+            slide: s,
+            index: 0,
+            currentIndex: 0,
+            variableHeight: !0
+          }
+        )
+      ), e = t.querySelector("li");
+      i(e == null ? void 0 : e.className).toContain("slide"), i(e == null ? void 0 : e.className).toContain("slide--variable-height");
+    });
+  }), d("Layout Loading", () => {
+    r("should render layout component when layout is found", async () => {
+      a(/* @__PURE__ */ l(n, { slide: {
+        ariaLabel: "1 of 3",
+        cells: [{ id: 1, props: { title: "Figure Title" }, layout: "Figure" }],
+        layout: "Figure"
+      }, index: 0, currentIndex: 0 })), await u(() => {
+        const e = c.getByTestId("figure-layout");
+        i(e).toBeInTheDocument(), i(e).toHaveTextContent("Figure Title");
+      });
+    }), r("should render text layout when layout is Text", async () => {
+      a(/* @__PURE__ */ l(n, { slide: {
+        ariaLabel: "1 of 3",
+        cells: [{ id: 1, props: { content: "Text Content" }, layout: "Text" }],
+        layout: "Text"
+      }, index: 0, currentIndex: 0 })), await u(() => {
+        const e = c.getByTestId("text-layout");
+        i(e).toBeInTheDocument(), i(e).toHaveTextContent("Text Content");
+      });
+    }), r("should render video layout when layout is Video", async () => {
+      a(/* @__PURE__ */ l(n, { slide: {
+        ariaLabel: "1 of 3",
+        cells: [{ id: 1, props: { videoId: "video-123" }, layout: "Video" }],
+        layout: "Video"
+      }, index: 0, currentIndex: 0 })), await u(() => {
+        const e = c.getByTestId("video-layout");
+        i(e).toBeInTheDocument(), i(e).toHaveTextContent("video-123");
+      });
+    }), r("should not render anything when layout is not found", () => {
+      const t = {
+        ariaLabel: "1 of 3",
+        cells: [{ id: 1, props: { title: "Test" }, layout: "Unknown" }],
+        layout: "Unknown"
+      }, { container: e } = a(
+        /* @__PURE__ */ l(n, { slide: t, index: 0, currentIndex: 0 })
+      ), o = e.querySelector("li");
+      i(o).toBeInTheDocument(), i(o == null ? void 0 : o.children.length).toBe(0);
+    });
+  }), d("Multiple Cells", () => {
+    r("should render multiple cells", async () => {
+      a(
+        /* @__PURE__ */ l(n, { slide: {
+          ariaLabel: "1 of 3",
+          cells: [
+            { id: 1, props: { title: "Cell 1" }, layout: "Figure" },
+            { id: 2, props: { title: "Cell 2" }, layout: "Figure" },
+            { id: 3, props: { title: "Cell 3" }, layout: "Figure" }
+          ],
+          layout: "Figure"
+        }, index: 0, currentIndex: 0 })
+      ), await u(() => {
+        const e = c.getAllByTestId("figure-layout");
+        i(e).toHaveLength(3), i(e[0]).toHaveTextContent("Cell 1"), i(e[1]).toHaveTextContent("Cell 2"), i(e[2]).toHaveTextContent("Cell 3");
+      });
+    }), r("should render cells with unique keys", async () => {
+      a(
+        /* @__PURE__ */ l(n, { slide: {
+          ariaLabel: "1 of 3",
+          cells: [
+            { id: 1, props: { title: "Cell A" }, layout: "Figure" },
+            { id: 2, props: { title: "Cell B" }, layout: "Figure" }
+          ],
+          layout: "Figure"
+        }, index: 2, currentIndex: 0 })
+      ), await u(() => {
+        const e = c.getAllByTestId("figure-layout");
+        i(e).toHaveLength(2);
+      });
+    }), r("should use slide layout for all cells in the slide", async () => {
+      a(
+        /* @__PURE__ */ l(n, { slide: {
+          ariaLabel: "1 of 3",
+          cells: [
+            { id: 1, props: { title: "Figure Cell 1" }, layout: "Figure" },
+            { id: 2, props: { title: "Figure Cell 2" }, layout: "Figure" }
+          ],
+          layout: "Figure"
+        }, index: 0, currentIndex: 0 })
+      ), await u(() => {
+        const e = c.getAllByTestId("figure-layout");
+        i(e).toHaveLength(2), i(e[0]).toHaveTextContent("Figure Cell 1"), i(e[1]).toHaveTextContent("Figure Cell 2");
+      });
+    });
+  }), d("Edge Cases", () => {
+    r("should handle empty cells array", () => {
+      const t = {
+        ariaLabel: "1 of 1",
+        cells: [],
+        layout: "Figure"
+      }, { container: e } = a(
+        /* @__PURE__ */ l(n, { slide: t, index: 0, currentIndex: 0 })
+      ), o = e.querySelector("li");
+      i(o).toBeInTheDocument(), i(o == null ? void 0 : o.children.length).toBe(0);
+    }), r("should handle missing layout in cell", async () => {
+      const t = {
+        ariaLabel: "1 of 1",
+        cells: [{ id: 1, props: { title: "Test" } }],
+        layout: ""
+      }, { container: e } = a(
+        /* @__PURE__ */ l(n, { slide: t, index: 0, currentIndex: 0 })
+      ), o = e.querySelector("li");
+      i(o).toBeInTheDocument();
+    }), r("should handle empty aria-label", () => {
+      const t = {
+        ariaLabel: "",
+        cells: [h],
+        layout: "Figure"
+      }, { container: e } = a(
+        /* @__PURE__ */ l(n, { slide: t, index: 0, currentIndex: 0 })
+      ), o = e.querySelector("li");
+      i(o).toHaveAttribute("aria-label", "");
+    }), r("should handle negative indices gracefully", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: -1, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("data-index", "-1"), i(e).toHaveAttribute("inert");
+    }), r("should handle large index values", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 999, currentIndex: 999 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("data-index", "999"), i(e).not.toHaveAttribute("inert");
+    });
+  }), d("Props Passing to Layout", () => {
+    r("should pass all cell props to layout component", async () => {
+      a(
+        /* @__PURE__ */ l(n, { slide: {
+          ariaLabel: "1 of 1",
+          cells: [
+            {
+              id: 1,
+              props: {
+                title: "Complex Title",
+                subtitle: "Subtitle",
+                description: "Description",
+                imageUrl: "http://example.com/image.jpg"
+              },
+              layout: "Figure"
+            }
+          ],
+          layout: "Figure"
+        }, index: 0, currentIndex: 0 })
+      ), await u(() => {
+        const e = c.getByTestId("figure-layout");
+        i(e).toBeInTheDocument();
+      });
+    }), r("should handle cells without id", async () => {
+      a(/* @__PURE__ */ l(n, { slide: {
+        ariaLabel: "1 of 1",
+        cells: [{ props: { title: "No ID Cell" }, layout: "Figure" }],
+        layout: "Figure"
+      }, index: 0, currentIndex: 0 })), await u(() => {
+        const e = c.getByTestId("figure-layout");
+        i(e).toBeInTheDocument();
+      });
+    });
+  }), d("Re-rendering and Updates", () => {
+    r("should update when slide prop changes", async () => {
+      const t = {
+        ariaLabel: "1 of 3",
+        cells: [{ id: 1, props: { title: "Initial" }, layout: "Figure" }],
+        layout: "Figure"
+      }, e = {
+        ariaLabel: "2 of 3",
+        cells: [{ id: 2, props: { title: "Updated" }, layout: "Figure" }],
+        layout: "Figure"
+      }, { rerender: o } = a(
+        /* @__PURE__ */ l(n, { slide: t, index: 0, currentIndex: 0 })
+      );
+      await u(() => {
+        i(c.getByText("Initial")).toBeInTheDocument();
+      }), o(/* @__PURE__ */ l(n, { slide: e, index: 0, currentIndex: 0 })), await u(() => {
+        i(c.getByText("Updated")).toBeInTheDocument();
+      });
+    }), r("should update inert attribute when currentIndex changes", () => {
+      const { container: t, rerender: e } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 1, currentIndex: 0 })
+      );
+      let o = t.querySelector("li");
+      i(o).toHaveAttribute("inert"), e(/* @__PURE__ */ l(n, { slide: s, index: 1, currentIndex: 1 })), o = t.querySelector("li"), i(o).not.toHaveAttribute("inert");
+    }), r("should update data-index when index changes", () => {
+      const { container: t, rerender: e } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      );
+      let o = t.querySelector("li");
+      i(o).toHaveAttribute("data-index", "0"), e(/* @__PURE__ */ l(n, { slide: s, index: 3, currentIndex: 0 })), o = t.querySelector("li"), i(o).toHaveAttribute("data-index", "3");
+    });
+  }), d("Accessibility", () => {
+    r("should have proper role description for screen readers", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector('li[aria-roledescription="carousel-item"]');
+      i(e).toBeInTheDocument();
+    }), r("should provide context with aria-label", () => {
+      const t = {
+        ariaLabel: "Slide 3 of 10",
+        cells: [h],
+        layout: "Figure"
+      }, { container: e } = a(
+        /* @__PURE__ */ l(n, { slide: t, index: 2, currentIndex: 0 })
+      ), o = e.querySelector("li");
+      i(o).toHaveAttribute("aria-label", "Slide 3 of 10");
+    }), r("should be inert when not focused to prevent tab navigation", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 2, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).toHaveAttribute("inert");
+    }), r("should not be inert when focused to allow tab navigation", () => {
+      const { container: t } = a(
+        /* @__PURE__ */ l(n, { slide: s, index: 0, currentIndex: 0 })
+      ), e = t.querySelector("li");
+      i(e).not.toHaveAttribute("inert");
+    });
+  }), d("Integration", () => {
+    r("should work with all props combined", async () => {
+      const t = {
+        ariaLabel: "5 of 10",
+        cells: [
+          { id: 1, props: { title: "Cell 1" }, layout: "Text" },
+          { id: 2, props: { content: "Cell 2" }, layout: "Text" }
+        ],
+        layout: "Text"
+      }, { container: e } = a(
+        /* @__PURE__ */ l(
+          n,
+          {
+            slide: t,
+            index: 4,
+            currentIndex: 4,
+            variableHeight: !0
+          }
+        )
+      ), o = e.querySelector("li");
+      i(o).toHaveAttribute("aria-label", "5 of 10"), i(o).toHaveAttribute("data-index", "4"), i(o).not.toHaveAttribute("inert"), i(o).toHaveClass("slide--variable-height"), await u(() => {
+        const x = c.getAllByTestId("text-layout");
+        i(x).toHaveLength(2);
+      });
+    });
+  });
+});

package/dist/components/CarouselSlide/slide-layouts/TwoColumn/TwoColumnSlide.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as i } from "react/jsx-runtime";
-import { p as o } from "../../../../index-VjANCDXC.mjs";
+import { p as o } from "../../../../index-06PEPfBQ.mjs";
 import { classes as e } from "../../../../utils/helpers.js";
 import '../../../../assets/TwoColumnSlide.css';const t = {
   "two-column-slide": "_two-column-slide_ltehs_1"

package/dist/components/CastInfoLayout/CastInfoLayout.test.js

@@ -0,0 +1,294 @@
+import { jsx as a, jsxs as g } from "react/jsx-runtime";
+import { v as h, d as m, b as y, a as u, i as s, r as c, g as e, s as r } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { CastInfoLayout as i } from "./CastInfoLayout.js";
+h.mock("../Concat", () => ({
+  default: ({ list: n }) => /* @__PURE__ */ a("div", { "data-testid": "concat", children: n.filter(Boolean).map((l, d) => /* @__PURE__ */ a("span", { dangerouslySetInnerHTML: { __html: l || "" } }, d)) })
+}));
+h.mock("../ImageCard", () => ({
+  default: ({ image: n }) => /* @__PURE__ */ a("div", { "data-testid": "image-card", "data-url": n.url, "data-aspect-ratio": n.aspectRatio, children: "ImageCard" })
+}));
+h.mock("../AdjustableTwoColumnGrid", () => ({
+  default: ({ children: n }) => /* @__PURE__ */ a("div", { "data-testid": "two-column-grid", children: n })
+}));
+h.mock("../SectionedContent", () => ({
+  default: ({ sections: n }) => /* @__PURE__ */ a("div", { "data-testid": "sectioned-content", children: n.map((l, d) => /* @__PURE__ */ g("div", { "data-testid": `section-${d}`, children: [
+    /* @__PURE__ */ a("div", { "data-testid": `header-${d}`, "data-type": l.header.type, children: l.header.title }),
+    /* @__PURE__ */ a("div", { "data-testid": `content-${d}`, children: l.content })
+  ] }, d)) })
+}));
+m("CastInfoLayout", () => {
+  const n = {
+    name: "Character Name",
+    real_name: "Actor Real Name",
+    biography: "This is a biography of the cast member.",
+    image: {
+      url: "https://example.com/image.jpg",
+      aspectRatio: 1.77,
+      altText: "Actor Real Name"
+    },
+    hometown: "New York, NY",
+    birthday: "January 1, 1990",
+    facebookHandle: "actorhandle",
+    twitterHandle: "actortwitter",
+    instagramHandle: "actorinsta"
+  };
+  let l, d;
+  y(() => {
+    h.clearAllMocks(), l = h.fn(), window.scrollTo = l, d = h.fn(), document.querySelector = d;
+  }), u(() => {
+    h.restoreAllMocks();
+  }), m("Basic Rendering", () => {
+    s("should render with complete cast member data", () => {
+      const { container: t } = c(/* @__PURE__ */ a(i, { castMember: n }));
+      e(t).toBeInTheDocument();
+    }), s("should render AdjustableTwoColumnGrid", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("two-column-grid");
+      e(t).toBeInTheDocument();
+    }), s("should render ImageCard with correct props", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("image-card");
+      e(t).toBeInTheDocument(), e(t).toHaveAttribute("data-url", "https://example.com/image.jpg"), e(t).toHaveAttribute("data-aspect-ratio", "1.77");
+    }), s("should render SectionedContent", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("sectioned-content");
+      e(t).toBeInTheDocument();
+    });
+  }), m("Sections Rendering", () => {
+    s("should render all three sections", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("section-0"), o = r.getByTestId("section-1"), T = r.getByTestId("section-2");
+      e(t).toBeInTheDocument(), e(o).toBeInTheDocument(), e(T).toBeInTheDocument();
+    }), s("should render primary header with real name", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("header-0");
+      e(t).toHaveTextContent("Actor Real Name"), e(t).toHaveAttribute("data-type", "primary");
+    }), s("should render character name in first section content", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-0");
+      e(t.innerHTML).toContain("Character Name");
+    }), s("should render hometown and birthday when provided", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-0");
+      e(t.innerHTML).toContain("Hometown"), e(t.innerHTML).toContain("New York, NY"), e(t.innerHTML).toContain("Birthday"), e(t.innerHTML).toContain("January 1, 1990");
+    }), s("should render Biography section", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("header-1"), o = r.getByTestId("content-1");
+      e(t).toHaveTextContent("Biography"), e(t).toHaveAttribute("data-type", "secondary"), e(o).toHaveTextContent("This is a biography of the cast member.");
+    }), s("should render Follow section", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("header-2");
+      e(t).toHaveTextContent("Follow"), e(t).toHaveAttribute("data-type", "secondary");
+    });
+  }), m("Social Media Handles", () => {
+    s("should render Facebook handle when provided", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-2");
+      e(t.innerHTML).toContain("Facebook"), e(t.innerHTML).toContain("facebook.com/actorhandle"), e(t.innerHTML).toContain("actorhandle");
+    }), s("should render Twitter handle when provided", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-2");
+      e(t.innerHTML).toContain("Twitter"), e(t.innerHTML).toContain("twitter.com/actortwitter"), e(t.innerHTML).toContain("@actortwitter");
+    }), s("should render Instagram handle when provided", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-2");
+      e(t.innerHTML).toContain("Instagram"), e(t.innerHTML).toContain("instagram.com/actorinsta"), e(t.innerHTML).toContain("@actorinsta");
+    }), s("should render only Facebook when only Facebook is provided", () => {
+      const t = {
+        ...n,
+        twitterHandle: void 0,
+        instagramHandle: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-2");
+      e(o.innerHTML).toContain("Facebook"), e(o.innerHTML).not.toContain("Twitter"), e(o.innerHTML).not.toContain("Instagram");
+    }), s("should render only Twitter when only Twitter is provided", () => {
+      const t = {
+        ...n,
+        facebookHandle: void 0,
+        instagramHandle: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-2");
+      e(o.innerHTML).not.toContain("Facebook"), e(o.innerHTML).toContain("Twitter"), e(o.innerHTML).not.toContain("Instagram");
+    }), s("should render only Instagram when only Instagram is provided", () => {
+      const t = {
+        ...n,
+        facebookHandle: void 0,
+        twitterHandle: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-2");
+      e(o.innerHTML).not.toContain("Facebook"), e(o.innerHTML).not.toContain("Twitter"), e(o.innerHTML).toContain("Instagram");
+    }), s("should render empty string when no social handles are provided", () => {
+      const t = {
+        ...n,
+        facebookHandle: void 0,
+        twitterHandle: void 0,
+        instagramHandle: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-2");
+      e(o).toHaveTextContent("");
+    }), s("should include correct CSS classes in social media links", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-2");
+      e(t.innerHTML).toContain("cast__follow-platform"), e(t.innerHTML).toContain("cast__follow-link");
+    }), s('should include target="_blank" and rel="noreferrer" on social links', () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-2");
+      e(t.innerHTML).toContain('target="_blank"'), e(t.innerHTML).toContain('rel="noreferrer"');
+    });
+  }), m("Optional Fields", () => {
+    s("should not render hometown and birthday section when both are missing", () => {
+      const t = {
+        ...n,
+        hometown: void 0,
+        birthday: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-0");
+      e(o.innerHTML).not.toContain("Hometown"), e(o.innerHTML).not.toContain("Birthday"), e(o.innerHTML).not.toContain("contact-info-pipe");
+    }), s("should not render hometown section when only hometown is missing", () => {
+      const t = {
+        ...n,
+        hometown: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-0");
+      e(o.innerHTML).not.toContain("Hometown"), e(o.innerHTML).not.toContain("contact-info-pipe");
+    }), s("should not render birthday section when only birthday is missing", () => {
+      const t = {
+        ...n,
+        birthday: void 0
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-0");
+      e(o.innerHTML).not.toContain("Birthday"), e(o.innerHTML).not.toContain("contact-info-pipe");
+    }), s("should handle empty string for hometown", () => {
+      const t = {
+        ...n,
+        hometown: ""
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-0");
+      e(o.innerHTML).not.toContain("Hometown");
+    }), s("should handle empty string for birthday", () => {
+      const t = {
+        ...n,
+        birthday: ""
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-0");
+      e(o.innerHTML).not.toContain("Birthday");
+    });
+  }), m("Props Handling", () => {
+    s("should accept castMember as a prop", () => {
+      const { container: t } = c(/* @__PURE__ */ a(i, { castMember: n }));
+      e(t).toBeInTheDocument();
+    }), s("should handle props spread when castMember is not provided", () => {
+      const t = {
+        name: "Spread Character",
+        real_name: "Spread Actor",
+        biography: "Spread biography",
+        image: n.image
+      }, { container: o } = c(/* @__PURE__ */ a(i, { ...t }));
+      e(o).toBeInTheDocument();
+    });
+  }), m("Scroll Behavior", () => {
+    s("should call window.scrollTo when tab-content element exists", () => {
+      const t = {
+        offsetTop: 200
+      };
+      d.mockReturnValue(t), c(/* @__PURE__ */ a(i, { castMember: n })), e(d).toHaveBeenCalledWith("tab-content"), e(l).toHaveBeenCalledWith(0, 176);
+    }), s("should not call window.scrollTo when tab-content element does not exist", () => {
+      d.mockReturnValue(null), c(/* @__PURE__ */ a(i, { castMember: n })), e(d).toHaveBeenCalledWith("tab-content"), e(l).not.toHaveBeenCalled();
+    }), s("should call scroll effect only once on mount", () => {
+      const t = {
+        offsetTop: 200
+      };
+      d.mockReturnValue(t);
+      const { rerender: o } = c(/* @__PURE__ */ a(i, { castMember: n }));
+      e(l).toHaveBeenCalledTimes(1), o(/* @__PURE__ */ a(i, { castMember: n })), e(l).toHaveBeenCalledTimes(1);
+    });
+  }), m("Edge Cases", () => {
+    s("should handle minimal cast member data", () => {
+      const t = {
+        name: "Name Only",
+        real_name: "Real Name Only",
+        biography: "Bio",
+        image: n.image
+      }, { container: o } = c(/* @__PURE__ */ a(i, { castMember: t }));
+      e(o).toBeInTheDocument();
+    }), s("should handle long biography text", () => {
+      const t = "A".repeat(1e3), o = {
+        ...n,
+        biography: t
+      };
+      c(/* @__PURE__ */ a(i, { castMember: o }));
+      const T = r.getByTestId("content-1");
+      e(T).toHaveTextContent(t);
+    }), s("should handle special characters in names", () => {
+      const t = {
+        ...n,
+        name: "O'Brien & D'Angelo",
+        real_name: "François José-María"
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("header-0"), T = r.getByTestId("content-0");
+      e(o).toHaveTextContent("François José-María"), e(T.innerHTML).toContain("O'Brien & D'Angelo");
+    }), s("should handle special characters in social handles", () => {
+      const t = {
+        ...n,
+        twitterHandle: "actor_name.official",
+        instagramHandle: "actor.name_official"
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-2");
+      e(o.innerHTML).toContain("@actor_name.official"), e(o.innerHTML).toContain("@actor.name_official");
+    }), s("should handle empty biography", () => {
+      const t = {
+        ...n,
+        biography: ""
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("content-1");
+      e(o).toHaveTextContent("");
+    }), s("should handle different image aspect ratios", () => {
+      const t = {
+        ...n,
+        image: {
+          url: "https://example.com/square.jpg",
+          aspectRatio: 1,
+          altText: "Square image"
+        }
+      };
+      c(/* @__PURE__ */ a(i, { castMember: t }));
+      const o = r.getByTestId("image-card");
+      e(o).toHaveAttribute("data-aspect-ratio", "1");
+    });
+  }), m("Content Structure", () => {
+    s("should render character name inside a div", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-0");
+      e(t.innerHTML).toContain("<div>Character Name</div>");
+    }), s("should render hometown and birthday with strong tags", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-0");
+      e(t.innerHTML).toContain("<strong>Hometown</strong>"), e(t.innerHTML).toContain("<strong>Birthday</strong>");
+    }), s("should render pipe separator between hometown and birthday", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getByTestId("content-0");
+      e(t.innerHTML).toContain("contact-info-pipe");
+    });
+  }), m("Integration", () => {
+    s("should render complete layout with all components", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n })), e(r.getByTestId("two-column-grid")).toBeInTheDocument(), e(r.getByTestId("image-card")).toBeInTheDocument(), e(r.getByTestId("sectioned-content")).toBeInTheDocument(), e(r.getAllByTestId(/^section-/)).toHaveLength(3), e(r.getAllByTestId(/^header-/)).toHaveLength(3), e(r.getAllByTestId(/^content-/)).toHaveLength(3);
+    }), s("should pass correct structure to SectionedContent", () => {
+      c(/* @__PURE__ */ a(i, { castMember: n }));
+      const t = r.getAllByTestId(/^section-/);
+      e(t).toHaveLength(3), e(r.getByTestId("header-0")).toHaveTextContent("Actor Real Name"), e(r.getByTestId("header-1")).toHaveTextContent("Biography"), e(r.getByTestId("header-2")).toHaveTextContent("Follow");
+    });
+  });
+});