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

package/dist/components/ChannelSearch/ChannelSearch.test.js

@@ -0,0 +1,565 @@
+import { jsx as a, jsxs as w } from "react/jsx-runtime";
+import { v as y, d as k, b as B, a as T, i as r, r as i, g as c, s as e, f as l, w as h } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { ChannelSearch as u } from "./ChannelSearch.js";
+y.mock("../Input", () => ({
+  default: ({ name: o, placeholder: s }) => /* @__PURE__ */ a("input", { "data-testid": `input-${o}`, name: o, placeholder: s })
+}));
+y.mock("../CustomDataList", () => ({
+  default: ({ name: o, placeholder: s, options: p }) => /* @__PURE__ */ w("select", { "data-testid": `datalist-${o}`, name: o, title: "{ name }", children: [
+    /* @__PURE__ */ a("option", { value: "", children: s }),
+    p.map(
+      (d) => /* @__PURE__ */ a("option", { value: d.id, children: d.label }, d.id)
+    )
+  ] })
+}));
+y.mock("../ActionButton", () => ({
+  default: ({ label: o, onClick: s, classname: p }) => /* @__PURE__ */ a("button", { className: p, "data-testid": "action-button", onClick: s, children: o })
+}));
+y.mock("../ResultsTable", () => ({
+  default: ({ columns: o, results: s, noResultsMsg: p, compactLayout: d }) => /* @__PURE__ */ a("div", { "data-compact": d, "data-testid": "results-table", children: s.length === 0 ? /* @__PURE__ */ a("div", { "data-testid": "no-results", children: p }) : /* @__PURE__ */ w("table", { children: [
+    /* @__PURE__ */ a("thead", { children: /* @__PURE__ */ a("tr", { children: o.map(
+      (b) => /* @__PURE__ */ a("th", { children: b.title }, b.resultKey)
+    ) }) }),
+    /* @__PURE__ */ a("tbody", { children: s.map(
+      (b, t) => /* @__PURE__ */ a("tr", { "data-testid": "result-row", children: o.map(
+        (n) => /* @__PURE__ */ a("td", { children: b[n.resultKey] }, n.resultKey)
+      ) }, t)
+    ) })
+  ] }) })
+}));
+y.mock("../AdBlock", () => ({
+  default: ({ ad: o, image: s, theme: p }) => /* @__PURE__ */ w("div", { "data-testid": "ad-block", "data-theme": p, children: [
+    /* @__PURE__ */ a("div", { "data-testid": "ad-header", children: o.header }),
+    /* @__PURE__ */ a("div", { "data-testid": "ad-description", children: o.description }),
+    /* @__PURE__ */ a("a", { "data-testid": "ad-link", href: o.href, children: o.linkText }),
+    /* @__PURE__ */ a("img", { alt: s.altText, "data-testid": "ad-image", src: s.url })
+  ] })
+}));
+y.mock("../../utils/helpers", () => ({
+  classes: (o) => o.filter(Boolean).join(" ")
+}));
+y.mock("../../utils/events", () => ({
+  publish: y.fn()
+}));
+y.mock("../../data-resources/FakeDataResource.js", () => ({
+  statesForCustomList: [
+    { id: 1, label: "California", value: "CA" },
+    { id: 2, label: "New York", value: "NY" },
+    { id: 3, label: "Texas", value: "TX" }
+  ]
+}));
+k("ChannelSearch", () => {
+  const o = {
+    brand_name: "Test Network",
+    slug: "test-network"
+  }, s = "https://api.example.com/channels", p = [
+    {
+      city: "Los Angeles",
+      state: "ca",
+      call_letters: "KABC",
+      ota: "7.1",
+      cable: "7",
+      satellite: "7",
+      provider: ""
+    },
+    {
+      city: "San Francisco",
+      state: "ca",
+      call_letters: "KGO",
+      ota: "7.1",
+      cable: "7",
+      satellite: "",
+      provider: ""
+    }
+  ];
+  let d, b;
+  B(() => {
+    y.clearAllMocks(), d = y.fn(), global.fetch = d, b = y.fn(), window.scroll = b, window.pageYOffset = 0, Element.prototype.getBoundingClientRect = y.fn(() => ({
+      y: 500,
+      x: 0,
+      width: 0,
+      height: 0,
+      top: 500,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      toJSON: () => {
+      }
+    }));
+  }), T(() => {
+    y.restoreAllMocks();
+  }), k("Basic Rendering", () => {
+    r("should render with required props", () => {
+      i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o })), c(e.getByText(/Test Network Channel Search:/)).toBeInTheDocument();
+    }), r("should render form element", () => {
+      const { container: t } = i(
+        /* @__PURE__ */ a(u, { baseApiUrl: s, network: o })
+      ), n = t.querySelector("#channel-search");
+      c(n).toBeInTheDocument();
+    }), r("should render submit button", () => {
+      i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("action-button");
+      c(t).toBeInTheDocument(), c(t).toHaveTextContent("Submit");
+    });
+  }), k("Search Options Rendering", () => {
+    r("should render zipcode input when allowZipcodeSearch is true", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowZipcodeSearch: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      ), c(e.getByTestId("input-zipcode")).toBeInTheDocument();
+    }), r("should not render zipcode input when allowZipcodeSearch is false", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowZipcodeSearch: !1,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      ), c(e.queryByTestId("input-zipcode")).not.toBeInTheDocument();
+    }), r("should render state select when allowStateSearch is true", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowStateSearch: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      ), c(e.getByTestId("datalist-state")).toBeInTheDocument();
+    }), r("should not render state select when allowStateSearch is false", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowStateSearch: !1,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      ), c(e.queryByTestId("datalist-state")).not.toBeInTheDocument();
+    }), r('should render "or" text when both search options are enabled', () => {
+      const { container: t } = i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowStateSearch: !0,
+            allowZipcodeSearch: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      c(t.textContent).toContain("or");
+    }), r('should not render "or" text when only zipcode search is enabled', () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowZipcodeSearch: !0,
+            allowStateSearch: !1,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = document.querySelector("#channel-search");
+      c(t == null ? void 0 : t.textContent).not.toMatch(/\bor\b/);
+    }), r('should not render "or" text when only state search is enabled', () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowStateSearch: !0,
+            allowZipcodeSearch: !1,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = document.querySelector("#channel-search");
+      c(t == null ? void 0 : t.textContent).not.toMatch(/\bor\b/);
+    });
+  }), k("Zipcode Search", () => {
+    r("should fetch results when submitting with zipcode", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(d).toHaveBeenCalledWith(
+          "https://api.example.com/channels/test-network?zip=90210"
+        );
+      });
+    }), r("should display results after successful zipcode search", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByTestId("results-table")).toBeInTheDocument();
+      }), c(e.getAllByTestId("result-row")).toHaveLength(2);
+    }), r("should format city and state correctly in results", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByText("Los Angeles, CA")).toBeInTheDocument();
+      });
+    }), r("should handle empty zipcode search results", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => []
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "00000" } }), l.click(n), await h(() => {
+        c(e.getByTestId("no-results")).toBeInTheDocument();
+      });
+    });
+  }), k("State Search", () => {
+    r("should fetch results when submitting with state", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("datalist-state"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "1" } }), l.click(n), await h(() => {
+        c(d).toHaveBeenCalledWith(
+          "https://api.example.com/channels/test-network?state=CA"
+        );
+      });
+    }), r("should display results after successful state search", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("datalist-state"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "2" } }), l.click(n), await h(() => {
+        c(e.getByTestId("results-table")).toBeInTheDocument();
+      });
+    }), r("should display state name in results header when only state search is enabled", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowStateSearch: !0,
+            allowZipcodeSearch: !1,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = e.getByTestId("datalist-state"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "1" } }), l.click(n), await h(() => {
+        c(e.getByText(/California Test Network Channels/)).toBeInTheDocument();
+      });
+    });
+  }), k("Error Handling", () => {
+    r("should handle fetch error gracefully", async () => {
+      const t = y.spyOn(console, "error").mockImplementation(() => {
+      });
+      d.mockRejectedValueOnce(new Error("Network error")), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const n = e.getByTestId("input-zipcode"), m = e.getByTestId("action-button");
+      l.change(n, { target: { value: "90210" } }), l.click(m), await h(() => {
+        c(e.getByTestId("no-results")).toBeInTheDocument();
+      }), t.mockRestore();
+    }), r("should handle non-OK response", async () => {
+      const t = y.spyOn(console, "log").mockImplementation(() => {
+      }), n = y.spyOn(console, "error").mockImplementation(() => {
+      });
+      d.mockResolvedValueOnce({
+        ok: !1,
+        json: async () => ({})
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const m = e.getByTestId("input-zipcode"), g = e.getByTestId("action-button");
+      l.change(m, { target: { value: "90210" } }), l.click(g), await h(() => {
+        c(e.getByTestId("no-results")).toBeInTheDocument();
+      }), t.mockRestore(), n.mockRestore();
+    });
+  }), k("Provider Field", () => {
+    r("should use cable when available", async () => {
+      const t = [
+        {
+          city: "Test City",
+          state: "ca",
+          call_letters: "TEST",
+          ota: "7.1",
+          cable: "Comcast 123",
+          satellite: "DirectTV 456",
+          provider: ""
+        }
+      ];
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => t
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const n = e.getByTestId("input-zipcode"), m = e.getByTestId("action-button");
+      l.change(n, { target: { value: "90210" } }), l.click(m), await h(() => {
+        c(e.getByText("Comcast 123")).toBeInTheDocument();
+      });
+    }), r("should use satellite when cable is null", async () => {
+      const t = [
+        {
+          city: "Test City",
+          state: "ca",
+          call_letters: "TEST",
+          ota: "7.1",
+          cable: null,
+          satellite: "DirectTV 456",
+          provider: ""
+        }
+      ];
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => t
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const n = e.getByTestId("input-zipcode"), m = e.getByTestId("action-button");
+      l.change(n, { target: { value: "90210" } }), l.click(m), await h(() => {
+        c(e.getByText("DirectTV 456")).toBeInTheDocument();
+      });
+    }), r("should use satellite when cable is empty string", async () => {
+      const t = [
+        {
+          city: "Test City",
+          state: "ca",
+          call_letters: "TEST",
+          ota: "7.1",
+          cable: "",
+          satellite: "DirectTV 456",
+          provider: ""
+        }
+      ];
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => t
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const n = e.getByTestId("input-zipcode"), m = e.getByTestId("action-button");
+      l.change(n, { target: { value: "90210" } }), l.click(m), await h(() => {
+        c(e.getByText("DirectTV 456")).toBeInTheDocument();
+      });
+    });
+  }), k("Auto-scroll Behavior", () => {
+    r("should scroll to results when allowAutoScroll is true", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowAutoScroll: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByTestId("results-table")).toBeInTheDocument();
+      }), await h(() => {
+        c(b).toHaveBeenCalledWith({
+          left: 0,
+          top: 475,
+          // 500 - 25 (default offset)
+          behavior: "smooth"
+        });
+      });
+    }), r("should not scroll when allowAutoScroll is false", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowAutoScroll: !1,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByTestId("results-table")).toBeInTheDocument();
+      }), await new Promise((m) => setTimeout(m, 150)), c(b).not.toHaveBeenCalled();
+    }), r("should use custom autoScrollOffset", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            allowAutoScroll: !0,
+            autoScrollOffset: 100,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByTestId("results-table")).toBeInTheDocument();
+      }), await h(() => {
+        c(b).toHaveBeenCalledWith({
+          left: 0,
+          top: 400,
+          // 500 - 100 (custom offset)
+          behavior: "smooth"
+        });
+      });
+    });
+  }), k("Event Publishing", () => {
+    r("should publish scripps:action:completed event after search", async () => {
+      const { publish: t } = await import("../../utils/events.js");
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const n = e.getByTestId("input-zipcode"), m = e.getByTestId("action-button");
+      l.change(n, { target: { value: "90210" } }), l.click(m), await h(() => {
+        c(t).toHaveBeenCalledWith("scripps:action:completed");
+      }, { timeout: 1e3 });
+    });
+  }), k("AdBlock Display", () => {
+    r("should render AdBlock when compactLayout is false", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            baseApiUrl: s,
+            compactLayout: !1,
+            network: o
+          }
+        )
+      ), c(e.getByTestId("ad-block")).toBeInTheDocument();
+    }), r("should not render AdBlock when compactLayout is true", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            compactLayout: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      ), c(e.queryByTestId("ad-block")).not.toBeInTheDocument();
+    }), r("should render AdBlock with correct props", () => {
+      i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            ad: {
+              campaign: "test-campaign",
+              source: "test-source",
+              medium: "test-medium",
+              content: "test-content"
+            },
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const n = e.getByTestId("ad-block");
+      c(n).toHaveAttribute("data-theme", "tablotv"), c(e.getByTestId("ad-header")).toHaveTextContent(
+        "Fall in love with subscription-free TV."
+      );
+    });
+  }), k("Results Header", () => {
+    r('should display plural "Channels" when multiple results', async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByText(/Your Test Network Channels/)).toBeInTheDocument();
+      });
+    }), r('should display singular "Channel" when single result', async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => [p[0]]
+      }), i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        c(e.getByText(/Your Test Network Channel$/)).toBeInTheDocument();
+      });
+    });
+  }), k("Compact Layout", () => {
+    r("should pass compactLayout prop to ResultsTable", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      }), i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            compactLayout: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      );
+      const t = e.getByTestId("input-zipcode"), n = e.getByTestId("action-button");
+      l.change(t, { target: { value: "90210" } }), l.click(n), await h(() => {
+        const m = e.getByTestId("results-table");
+        c(m).toHaveAttribute("data-compact", "true");
+      });
+    }), r("should apply compact class to results header", async () => {
+      d.mockResolvedValueOnce({
+        ok: !0,
+        json: async () => p
+      });
+      const { container: t } = i(
+        /* @__PURE__ */ a(
+          u,
+          {
+            compactLayout: !0,
+            baseApiUrl: s,
+            network: o
+          }
+        )
+      ), n = e.getByTestId("input-zipcode"), m = e.getByTestId("action-button");
+      l.change(n, { target: { value: "90210" } }), l.click(m), await h(() => {
+        const g = t.querySelector(".results-table__header--compact");
+        c(g).toBeInTheDocument();
+      });
+    });
+  }), k("Edge Cases", () => {
+    r("should not show results when submitting empty form", async () => {
+      i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: o }));
+      const t = e.getByTestId("action-button");
+      l.click(t), await h(() => {
+        c(e.queryByTestId("results-table")).not.toBeInTheDocument();
+      });
+    }), r("should handle special characters in network name", () => {
+      i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: {
+        brand_name: "Test & Network's Channel",
+        slug: "test-network"
+      } })), c(e.getByText(/Test & Network's Channel Channel Search:/)).toBeInTheDocument();
+    }), r("should handle network with long name", () => {
+      i(/* @__PURE__ */ a(u, { baseApiUrl: s, network: {
+        brand_name: "Very Long Network Name That Might Wrap",
+        slug: "long-network"
+      } })), c(
+        e.getByText(/Very Long Network Name That Might Wrap Channel Search:/)
+      ).toBeInTheDocument();
+    });
+  });
+});