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

package/dist/components/UpcomingList/UpcomingList.test.js

@@ -0,0 +1,471 @@
+import { jsx as a } from "react/jsx-runtime";
+import { v as i, d as h, b as f, i as l, r, g as s, s as C } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { UpcomingList as c } from "./UpcomingList.js";
+const p = i.fn(), m = i.fn(), u = i.fn();
+i.mock("../../utils/helpers", () => ({
+  getMinutesFromStr: (t) => p(t),
+  classes: (t) => u(t)
+}));
+i.mock("../../utils/date-helpers", () => ({
+  determineIfShowIsOnNow: (t, o) => m(t, o)
+}));
+i.mock("../Concat", () => ({
+  default: ({ list: t }) => /* @__PURE__ */ a("div", { "data-component": "Concat", "data-list": JSON.stringify(t), children: "Concat Component" })
+}));
+i.mock("../StringList", () => ({
+  default: ({ list: t, separatorType: o }) => /* @__PURE__ */ a(
+    "div",
+    {
+      "data-component": "StringList",
+      "data-list": JSON.stringify(t),
+      "data-separator": o,
+      children: "StringList Component"
+    }
+  )
+}));
+i.mock("../AirDateFormatter", () => ({
+  default: ({ airdateStr: t, separatorType: o }) => /* @__PURE__ */ a(
+    "div",
+    {
+      "data-airdate": t,
+      "data-component": "AirDateFormatter",
+      "data-separator": o,
+      children: "AirDateFormatter Component"
+    }
+  )
+}));
+i.mock("../ImageCard", () => ({
+  default: (t) => {
+    const { handleClicks: o, content: e, ...d } = t;
+    return /* @__PURE__ */ a(
+      "div",
+      {
+        "data-component": "ImageCard",
+        "data-has-content": e !== void 0 ? "true" : "false",
+        "data-has-handleclicks": o !== void 0 ? "true" : "false",
+        "data-props": JSON.stringify(d),
+        children: "ImageCard Component"
+      }
+    );
+  }
+}));
+const n = (t) => ({
+  id: 123,
+  airdate: "2023-02-02 06:00:00",
+  title: {
+    synopsis: "Test synopsis",
+    image: {
+      url: "https://example.com/image.jpg",
+      aspect_ratio: 16 / 9
+    },
+    video: {
+      brightcove_id: "video123"
+    },
+    episode_number: "301",
+    name: "Episode Name",
+    rating: "TV-14",
+    element_length: "01:00"
+  },
+  program: {
+    title: "Program Title"
+  },
+  ...t
+});
+h("UpcomingList", () => {
+  f(() => {
+    i.clearAllMocks(), u.mockImplementation((t) => t.filter(Boolean).join(" ")), p.mockReturnValue("60 min"), m.mockReturnValue(!1);
+  }), h("Basic Rendering", () => {
+    l("should render ul element with correct class", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector("ul");
+      s(e).toBeInTheDocument();
+    }), l("should render empty ul when list is empty", () => {
+      const { container: t } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: [] })), o = t.querySelector("ul");
+      s(o).toBeInTheDocument(), s(o == null ? void 0 : o.children).toHaveLength(0);
+    }), l("should render list items for each item in list", () => {
+      const t = [
+        n({ id: 1 }),
+        n({ id: 2 }),
+        n({ id: 3 })
+      ], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelectorAll("li");
+      s(e).toHaveLength(3);
+    }), l("should not render list items when list is empty", () => {
+      const { container: t } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: [] })), o = t.querySelectorAll("li");
+      s(o).toHaveLength(0);
+    });
+  }), h("List Item Structure", () => {
+    l("should render list item with correct key", () => {
+      const t = [n({ id: 456 })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector("li");
+      s(e).toBeInTheDocument();
+    }), l("should render airdate section in each list item", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="AirDateFormatter"]');
+      s(e).toBeInTheDocument();
+    }), l("should render ImageCard in each list item", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]');
+      s(e).toBeInTheDocument();
+    }), l("should apply classes helper to list item", () => {
+      const t = [n()];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(u).toHaveBeenCalled();
+    });
+  }), h("AirDateFormatter Integration", () => {
+    l("should pass airdate to AirDateFormatter", () => {
+      const t = [n({ airdate: "2024-01-15 19:00:00" })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="AirDateFormatter"]');
+      s(e).toHaveAttribute("data-airdate", "2024-01-15 19:00:00");
+    }), l("should use line-break separator for AirDateFormatter", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="AirDateFormatter"]');
+      s(e).toHaveAttribute("data-separator", "line-break");
+    });
+  }), h("On Now Indicator", () => {
+    l('should render "On Now" when show is currently airing', () => {
+      m.mockReturnValue(!0);
+      const t = [n({
+        airdate: "2024-01-15 19:00:00",
+        title: {
+          ...n().title,
+          element_length: "01:00"
+        }
+      })];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(C.getByText("On Now")).toBeInTheDocument();
+    }), l('should not render "On Now" when show is not currently airing', () => {
+      m.mockReturnValue(!1);
+      const t = [n()];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(C.queryByText("On Now")).not.toBeInTheDocument();
+    }), l("should call determineIfShowIsOnNow with airdate and element_length", () => {
+      const t = [n({
+        airdate: "2024-01-15 19:00:00",
+        title: {
+          ...n().title,
+          element_length: "02:30"
+        }
+      })];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(m).toHaveBeenCalledWith("2024-01-15 19:00:00", "02:30");
+    }), l('should not render "On Now" when element_length is missing', () => {
+      m.mockReturnValue(!0);
+      const t = [n({
+        title: {
+          ...n().title,
+          element_length: void 0
+        }
+      })];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(C.queryByText("On Now")).not.toBeInTheDocument();
+    }), l('should have correct class on "On Now" div', () => {
+      m.mockReturnValue(!0);
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector(".upcoming-list__on-now");
+      s(e).toBeInTheDocument();
+    });
+  }), h("ImageCard Props Construction", () => {
+    l("should pass displayInline true to ImageCard", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.displayInline).toBe(!0);
+    }), l("should pass clampContentLines false to ImageCard", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.clampContentLines).toBe(!1);
+    }), l("should pass handleClicks to ImageCard", () => {
+      const t = i.fn(), o = [n()], { container: e } = r(/* @__PURE__ */ a(c, { handleClicks: t, list: o })), d = e.querySelector('[data-component="ImageCard"]');
+      s(d).toHaveAttribute("data-has-handleclicks", "true");
+    }), l("should pass item id to ImageCard", () => {
+      const t = [n({ id: 789 })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.id).toBe(789);
+    }), l("should pass empty title to ImageCard", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.title).toBe("");
+    }), l("should construct image object with correct properties", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          image: {
+            url: "https://example.com/custom.jpg",
+            aspect_ratio: 2.5
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.image.url).toBe("https://example.com/custom.jpg"), s(d.image.altText).toBe(""), s(d.image.aspectRatio).toBe(330 / 185);
+    });
+  }), h("CTA with Brightcove Video", () => {
+    l('should create "Watch Episode" CTA when brightcove_id exists', () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          video: {
+            brightcove_id: "video456"
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.cta.label).toBe("Watch Episode"), s(d.cta.type).toBe("play-video");
+    }), l("should set relatedResourceId to brightcove_id", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          video: {
+            brightcove_id: "bc123"
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.cta.relatedResourceId).toBe("bc123");
+    }), l("should set CTA position to inline", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          video: {
+            brightcove_id: "video789"
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.cta.position).toBe("inline");
+    }), l("should set CTA href to empty string", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.cta.href).toBe("");
+    });
+  }), h("CTA without Brightcove Video", () => {
+    l("should create empty CTA when brightcove_id is missing", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          video: {
+            brightcove_id: ""
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.cta.label).toBe(""), s(d.cta.type).toBe(""), s(d.cta.href).toBe("");
+    }), l("should create empty CTA when brightcove_id is empty string", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          video: {
+            brightcove_id: ""
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.cta.label).toBe("");
+    });
+  }), h("Concat Content", () => {
+    l("should render Concat component in ImageCard content", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]');
+      s(e).toHaveAttribute("data-has-content", "true");
+    }), l("should include episode HTML in Concat list", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          episode_number: "405",
+          name: "Test Episode",
+          synopsis: "Test synopsis content"
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]');
+      s(e).toHaveAttribute("data-has-content", "true");
+    });
+  }), h("StringList Integration", () => {
+    l("should render StringList with runtime and rating when no video", () => {
+      p.mockReturnValue("45 min");
+      const t = [n({
+        title: {
+          ...n().title,
+          element_length: "00:45",
+          rating: "PG-13",
+          video: {
+            brightcove_id: ""
+          }
+        }
+      })];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(p).toHaveBeenCalledWith("00:45");
+    }), l("should include nbsp when brightcove_id exists", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          video: {
+            brightcove_id: "video123"
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]');
+      s(e).toHaveAttribute("data-has-content", "true");
+    }), l("should use pipe separator for StringList", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]');
+      s(e).toHaveAttribute("data-has-content", "true");
+    }), l("should call getMinutesFromStr with element_length", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          element_length: "02:15"
+        }
+      })];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(p).toHaveBeenCalledWith("02:15");
+    });
+  }), h("CSS Classes", () => {
+    l("should apply classes helper to list item", () => {
+      const t = [n()];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(u).toHaveBeenCalled();
+    }), l("should apply classes helper to airdate div", () => {
+      const t = [n()];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(u).toHaveBeenCalledWith(
+        s.arrayContaining([
+          s.anything(),
+          "upcoming-list__airdate"
+        ])
+      );
+    }), l("should apply classes helper to airdate-bg div", () => {
+      const t = [n()];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(u).toHaveBeenCalledWith(
+        s.arrayContaining([
+          s.anything(),
+          "upcoming-list__airdate-bg"
+        ])
+      );
+    });
+  }), h("Default Props", () => {
+    l("should use default handleClicks when not provided", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: () => !0, list: t }));
+      s(o.querySelector("ul")).toBeInTheDocument();
+    });
+  }), h("Multiple Items", () => {
+    l("should render all items in list", () => {
+      const t = [
+        n({ id: 1 }),
+        n({ id: 2 }),
+        n({ id: 3 }),
+        n({ id: 4 }),
+        n({ id: 5 })
+      ], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelectorAll("li");
+      s(e).toHaveLength(5);
+    }), l("should call getMinutesFromStr for each item", () => {
+      const t = [
+        n({ id: 1 }),
+        n({ id: 2 }),
+        n({ id: 3 })
+      ];
+      r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), s(p).toHaveBeenCalledTimes(3);
+    }), l("should generate unique keys for each list item", () => {
+      const t = [
+        n({ id: 100 }),
+        n({ id: 200 }),
+        n({ id: 300 })
+      ], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelectorAll("li");
+      s(e).toHaveLength(3);
+    });
+  }), h("Edge Cases", () => {
+    l("should handle item with missing episode_number", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          episode_number: void 0
+        }
+      })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should handle item with empty string episode_number", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          episode_number: ""
+        }
+      })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should handle item with missing element_length", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          element_length: void 0
+        }
+      })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should handle item with empty synopsis", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          synopsis: ""
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]');
+      s(e).toHaveAttribute("data-has-content", "true");
+    }), l("should handle item with very long synopsis", () => {
+      const t = "Lorem ipsum ".repeat(100), o = [n({
+        title: {
+          ...n().title,
+          synopsis: t
+        }
+      })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: o }))).not.toThrow();
+    }), l("should handle item with special characters in name", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          name: "Episode & Special <Characters>"
+        }
+      })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should handle item with empty image url", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          image: {
+            url: "",
+            aspect_ratio: 1.7777777777777777
+          }
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.image.url).toBe("");
+    }), l("should handle item with zero aspect ratio", () => {
+      const t = [n({
+        title: {
+          ...n().title,
+          image: {
+            url: "https://example.com/image.jpg",
+            aspect_ratio: 0
+          }
+        }
+      })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should handle item with negative id", () => {
+      const t = [n({ id: -1 })];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should handle large list of items", () => {
+      const t = Array.from(
+        { length: 50 },
+        (d, g) => n({ id: g })
+      ), { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelectorAll("li");
+      s(e).toHaveLength(50);
+    });
+  }), h("Type Safety", () => {
+    l("should accept valid UpcomingItem list", () => {
+      const t = [n()];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }))).not.toThrow();
+    }), l("should accept valid handleClicks function", () => {
+      const t = (e) => (s(e).toBeDefined(), !0), o = [n()];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: t, list: o }))).not.toThrow();
+    }), l("should accept handleClicks that returns void", () => {
+      const t = (e) => {
+        s(e).toBeDefined();
+      }, o = [n()];
+      s(() => r(/* @__PURE__ */ a(c, { handleClicks: t, list: o }))).not.toThrow();
+    });
+  }), h("Integration Tests", () => {
+    l("should render complete upcoming list structure", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t }));
+      s(o.querySelector("ul")).toBeInTheDocument(), s(o.querySelector("li")).toBeInTheDocument(), s(o.querySelector('[data-component="AirDateFormatter"]')).toBeInTheDocument(), s(o.querySelector('[data-component="ImageCard"]')).toBeInTheDocument();
+    }), l("should pass all required props to child components", () => {
+      const t = [n()], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="ImageCard"]'), d = JSON.parse((e == null ? void 0 : e.getAttribute("data-props")) || "{}");
+      s(d.displayInline).toBeDefined(), s(d.clampContentLines).toBeDefined(), s(e).toHaveAttribute("data-has-content", "true"), s(d.cta).toBeDefined(), s(e).toHaveAttribute("data-has-handleclicks", "true"), s(d.id).toBeDefined(), s(d.image).toBeDefined(), s(d.title).toBeDefined();
+    }), l("should coordinate all components for complete item rendering", () => {
+      const t = [n({
+        id: 999,
+        airdate: "2024-01-15 20:00:00",
+        title: {
+          synopsis: "Integration test synopsis",
+          image: {
+            url: "https://example.com/int-test.jpg",
+            aspect_ratio: 1.5
+          },
+          video: {
+            brightcove_id: "video999"
+          },
+          episode_number: "101",
+          name: "Integration Test",
+          rating: "TV-PG",
+          element_length: "01:30"
+        },
+        program: {
+          title: "Test Program"
+        }
+      })], { container: o } = r(/* @__PURE__ */ a(c, { handleClicks: i.fn(), list: t })), e = o.querySelector('[data-component="AirDateFormatter"]');
+      s(e).toHaveAttribute("data-airdate", "2024-01-15 20:00:00");
+      const d = o.querySelector('[data-component="ImageCard"]'), g = JSON.parse((d == null ? void 0 : d.getAttribute("data-props")) || "{}");
+      s(g.id).toBe(999), s(g.cta.relatedResourceId).toBe("video999");
+    });
+  });
+});

package/dist/{index-VjANCDXC.mjs → index-06PEPfBQ.mjs}

@@ -1,4 +1,4 @@
-import { g as Re } from "./_commonjsHelpers-C6fGbg64.mjs";
+import { g as Re } from "./_commonjsHelpers-DaMA6jEr.mjs";
 import me from "react";
 var F = {}, L = {}, z = {}, I = {}, x = {}, W = {}, K;
 function ve() {