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

package/dist/components/ResponsiveImage/ResponsiveImage.test.js

@@ -0,0 +1,264 @@
+import { jsx as s } from "react/jsx-runtime";
+import { d as c, b as h, i as a, r, g as o, s as m, v as g } from "../../react.esm-DLSrfVwM.mjs";
+import { u as d } from "../../index-BUN4jQ3m.mjs";
+import { ResponsiveImage as l } from "./ResponsiveImage.js";
+c("ResponsiveImage", () => {
+  h(() => {
+    g.clearAllMocks();
+  }), c("Basic Rendering", () => {
+    a("should render picture element", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("picture");
+      o(t).toBeInTheDocument();
+    }), a("should render img element inside picture", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toBeInTheDocument();
+    }), a("should render img as child of picture", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("picture"), i = t == null ? void 0 : t.querySelector("img");
+      o(i).toBeInTheDocument();
+    });
+  }), c("FullSizeUrl Prop", () => {
+    a("should set src attribute on img element", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/test-image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("src", "/test-image.jpg");
+    }), a("should handle absolute URLs", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "https://example.com/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("src", "https://example.com/image.jpg");
+    }), a("should handle URLs with query parameters", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg?width=800&quality=90" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("src", "/image.jpg?width=800&quality=90");
+    }), a("should handle very long URLs", () => {
+      const e = "/path/to/very/long/directory/structure/image.jpg?param1=value1&param2=value2&param3=value3", { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: e })), i = t.querySelector("img");
+      o(i).toHaveAttribute("src", e);
+    });
+  }), c("Sources Array", () => {
+    a("should render default source element when sources not provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelectorAll("source");
+      o(t).toHaveLength(1);
+    }), a("should render source element for each item in sources array", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/large.jpg"] },
+        { media: "min-width: 480px", srcsets: ["/medium.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelectorAll("source");
+      o(i).toHaveLength(2);
+    }), a("should render single source element", () => {
+      const e = [
+        { media: "min-width: 1024px", srcsets: ["/desktop.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/mobile.jpg", sources: e })), i = t.querySelectorAll("source");
+      o(i).toHaveLength(1);
+    }), a("should render multiple source elements", () => {
+      const e = [
+        { media: "min-width: 1200px", srcsets: ["/xlarge.jpg"] },
+        { media: "min-width: 992px", srcsets: ["/large.jpg"] },
+        { media: "min-width: 768px", srcsets: ["/medium.jpg"] },
+        { media: "min-width: 576px", srcsets: ["/small.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/mobile.jpg", sources: e })), i = t.querySelectorAll("source");
+      o(i).toHaveLength(4);
+    }), a("should render sources in order", () => {
+      const e = [
+        { media: "min-width: 1024px", srcsets: ["/large.jpg"] },
+        { media: "min-width: 768px", srcsets: ["/medium.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelectorAll("source");
+      o(i[0]).toHaveAttribute("media", "(min-width: 1024px)"), o(i[1]).toHaveAttribute("media", "(min-width: 768px)");
+    });
+  }), c("Media Query Formatting", () => {
+    a("should wrap media query in parentheses", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/large.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("media", "(min-width: 768px)");
+    }), a("should handle empty media string", () => {
+      const e = [
+        { media: "", srcsets: ["/image.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/fallback.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("media", "()");
+    }), a("should handle complex media queries", () => {
+      const e = [
+        { media: "min-width: 768px and max-width: 1024px", srcsets: ["/tablet.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/mobile.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("media", "(min-width: 768px and max-width: 1024px)");
+    }), a("should handle orientation media queries", () => {
+      const e = [
+        { media: "orientation: landscape", srcsets: ["/landscape.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/portrait.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("media", "(orientation: landscape)");
+    });
+  }), c("Srcset Handling", () => {
+    a("should join multiple srcsets with comma and space", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/large.jpg 1x", "/large-2x.jpg 2x", "/large-3x.jpg 3x"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("srcset", "/large.jpg 1x, /large-2x.jpg 2x, /large-3x.jpg 3x");
+    }), a("should handle single srcset", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/large.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("srcset", "/large.jpg");
+    }), a("should handle empty srcset array", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: [] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("srcset", "");
+    }), a("should handle srcsets with width descriptors", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/small.jpg 480w", "/medium.jpg 768w", "/large.jpg 1200w"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/fallback.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("srcset", "/small.jpg 480w, /medium.jpg 768w, /large.jpg 1200w");
+    });
+  }), c("AltText Prop", () => {
+    a("should set alt attribute when altText provided", () => {
+      r(/* @__PURE__ */ s(l, { altText: "Test image description", fullSizeUrl: "/image.jpg" }));
+      const e = m.getByRole("img", { name: "Test image description" });
+      o(e).toBeInTheDocument();
+    }), a("should use empty alt when altText not provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("alt", "");
+    }), a("should handle empty string altText", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { altText: "", fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("alt", "");
+    }), a("should handle long altText", () => {
+      const e = "This is a very long image description that contains many words to describe the image in great detail for accessibility purposes";
+      r(/* @__PURE__ */ s(l, { altText: e, fullSizeUrl: "/image.jpg" }));
+      const t = m.getByRole("img", { name: e });
+      o(t).toBeInTheDocument();
+    }), a("should handle special characters in altText", () => {
+      r(/* @__PURE__ */ s(l, { altText: "Image with 'quotes' & ampersand", fullSizeUrl: "/image.jpg" }));
+      const e = m.getByRole("img", { name: "Image with 'quotes' & ampersand" });
+      o(e).toBeInTheDocument();
+    });
+  }), c("Classname Prop", () => {
+    a("should apply classname to picture element", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { classname: "responsive-image", fullSizeUrl: "/image.jpg" })), t = e.querySelector("picture");
+      o(t).toHaveClass("responsive-image");
+    }), a("should use empty classname when not provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("picture");
+      o(t).toHaveAttribute("class", "");
+    }), a("should handle multiple classes", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { classname: "image-wrapper featured-image", fullSizeUrl: "/image.jpg" })), t = e.querySelector("picture");
+      o(t).toHaveClass("image-wrapper", "featured-image");
+    }), a("should not apply classname to img element", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { classname: "picture-class", fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).not.toHaveClass("picture-class");
+    });
+  }), c("HandleClick Prop", () => {
+    a("should call handleClick when img is clicked", async () => {
+      const e = d.setup(), t = g.fn(), { container: i } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", handleClick: t })), n = i.querySelector("img");
+      n && await e.click(n), o(t).toHaveBeenCalledTimes(1);
+    }), a("should pass MouseEvent to handleClick", async () => {
+      const e = d.setup(), t = g.fn(), { container: i } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", handleClick: t })), n = i.querySelector("img");
+      n && await e.click(n), o(t).toHaveBeenCalledWith(o.any(Object)), o(t.mock.calls[0][0]).toHaveProperty("type", "click");
+    }), a("should use default handleClick when not provided", async () => {
+      const e = d.setup(), { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), i = t.querySelector("img");
+      i && await e.click(i), o(i).toBeInTheDocument();
+    }), a("should handle multiple clicks", async () => {
+      const e = d.setup(), t = g.fn(), { container: i } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", handleClick: t })), n = i.querySelector("img");
+      n && (await e.click(n), await e.click(n), await e.click(n)), o(t).toHaveBeenCalledTimes(3);
+    });
+  }), c("Loading Prop", () => {
+    a("should set loading to lazy by default", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("loading", "lazy");
+    }), a("should set loading to eager when provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", loading: "eager" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("loading", "eager");
+    }), a("should set loading to lazy when explicitly provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", loading: "lazy" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("loading", "lazy");
+    }), a("should handle undefined loading", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", loading: void 0 })), t = e.querySelector("img");
+      o(t).toHaveAttribute("loading", "lazy");
+    });
+  }), c("Decoding Prop", () => {
+    a("should set decoding to async by default", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("decoding", "async");
+    }), a("should set decoding to sync when provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { decoding: "sync", fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("decoding", "sync");
+    }), a("should set decoding to async when explicitly provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { decoding: "async", fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("decoding", "async");
+    }), a("should set decoding to auto when provided", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { decoding: "auto", fullSizeUrl: "/image.jpg" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("decoding", "auto");
+    });
+  }), c("Source Element Keys", () => {
+    a("should generate unique keys for source elements", () => {
+      const e = [
+        { media: "min-width: 1024px", srcsets: ["/large.jpg"] },
+        { media: "min-width: 768px", srcsets: ["/medium.jpg"] },
+        { media: "min-width: 480px", srcsets: ["/small.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/mobile.jpg", sources: e })), i = t.querySelectorAll("source");
+      o(i).toHaveLength(3), o(i[0]).toHaveAttribute("media", "(min-width: 1024px)"), o(i[1]).toHaveAttribute("media", "(min-width: 768px)"), o(i[2]).toHaveAttribute("media", "(min-width: 480px)");
+    });
+  }), c("Edge Cases", () => {
+    a("should handle source with very long media query", () => {
+      const e = [
+        { media: "min-width: 768px and max-width: 1024px and orientation: landscape and prefers-color-scheme: dark", srcsets: ["/image.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/fallback.jpg", sources: e })), i = t.querySelector("source");
+      o(i).toHaveAttribute("media", "(min-width: 768px and max-width: 1024px and orientation: landscape and prefers-color-scheme: dark)");
+    }), a("should handle many sources", () => {
+      const e = Array.from({ length: 10 }, (n, u) => ({
+        media: `min-width: ${u * 100}px`,
+        srcsets: [`/image-${u}.jpg`]
+      })), { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/fallback.jpg", sources: e })), i = t.querySelectorAll("source");
+      o(i).toHaveLength(10);
+    }), a("should handle special characters in URLs", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/images/photo%20(1).jpg?param=value&other=123" })), t = e.querySelector("img");
+      o(t).toHaveAttribute("src", "/images/photo%20(1).jpg?param=value&other=123");
+    }), a("should handle data URLs", () => {
+      const e = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==", { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: e })), i = t.querySelector("img");
+      o(i).toHaveAttribute("src", e);
+    });
+  }), c("Integration", () => {
+    a("should render complete responsive image with all props", () => {
+      const e = [
+        { media: "min-width: 1024px", srcsets: ["/large.jpg 1x", "/large-2x.jpg 2x"] },
+        { media: "min-width: 768px", srcsets: ["/medium.jpg 1x", "/medium-2x.jpg 2x"] }
+      ], t = g.fn(), { container: i } = r(
+        /* @__PURE__ */ s(
+          l,
+          {
+            altText: "Responsive test image",
+            classname: "featured-image",
+            decoding: "sync",
+            fullSizeUrl: "/small.jpg",
+            handleClick: t,
+            loading: "eager",
+            sources: e
+          }
+        )
+      ), n = i.querySelector("picture");
+      o(n).toHaveClass("featured-image");
+      const u = i.querySelectorAll("source");
+      o(u).toHaveLength(2), o(u[0]).toHaveAttribute("media", "(min-width: 1024px)"), o(u[0]).toHaveAttribute("srcset", "/large.jpg 1x, /large-2x.jpg 2x");
+      const p = m.getByRole("img", { name: "Responsive test image" });
+      o(p).toHaveAttribute("src", "/small.jpg"), o(p).toHaveAttribute("loading", "eager"), o(p).toHaveAttribute("decoding", "sync");
+    }), a("should render minimal responsive image", () => {
+      const { container: e } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg" })), t = e.querySelector("picture");
+      o(t).toBeInTheDocument();
+      const i = e.querySelector("img");
+      o(i).toHaveAttribute("src", "/image.jpg"), o(i).toHaveAttribute("alt", ""), o(i).toHaveAttribute("loading", "lazy"), o(i).toHaveAttribute("decoding", "async");
+    }), a("should properly nest source elements before img", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/large.jpg"] }
+      ], { container: t } = r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e })), i = t.querySelector("picture"), n = Array.from((i == null ? void 0 : i.children) || []);
+      o(n[0].tagName).toBe("SOURCE"), o(n[n.length - 1].tagName).toBe("IMG");
+    });
+  }), c("Type Safety", () => {
+    a("should accept valid sources array", () => {
+      const e = [
+        { media: "min-width: 768px", srcsets: ["/large.jpg"] }
+      ];
+      o(() => r(/* @__PURE__ */ s(l, { fullSizeUrl: "/small.jpg", sources: e }))).not.toThrow();
+    }), a("should accept valid loading values", () => {
+      o(() => r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", loading: "eager" }))).not.toThrow(), o(() => r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", loading: "lazy" }))).not.toThrow(), o(() => r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", loading: void 0 }))).not.toThrow();
+    }), a("should accept valid decoding values", () => {
+      o(() => r(/* @__PURE__ */ s(l, { decoding: "sync", fullSizeUrl: "/image.jpg" }))).not.toThrow(), o(() => r(/* @__PURE__ */ s(l, { decoding: "async", fullSizeUrl: "/image.jpg" }))).not.toThrow(), o(() => r(/* @__PURE__ */ s(l, { decoding: "auto", fullSizeUrl: "/image.jpg" }))).not.toThrow();
+    }), a("should accept handleClick function with correct signature", () => {
+      const e = (t) => {
+        console.warn("Clicked", t);
+      };
+      o(() => r(/* @__PURE__ */ s(l, { fullSizeUrl: "/image.jpg", handleClick: e }))).not.toThrow();
+    });
+  });
+});

package/dist/components/ResultsTable/ResultsTable.js

@@ -2,7 +2,7 @@ import { jsxs as o, jsx as t } from "react/jsx-runtime";
 import { classes as m } from "../../utils/helpers.js";
 import { ResultsTableBody as f } from "../ResultsTableBody/ResultsTableBody.js";
 import { ResultsTableHeader as i } from "../ResultsTableHeader/ResultsTableHeader.js";
-import { s as e } from "../../ResultsTable.module-1zxhXaem.mjs";
+import { s as e } from "../../ResultsTable.module-wcNUQEKe.mjs";
 function n({
   columns: s = [],
   results: l = [],
@@ -20,7 +20,14 @@ function n({
       ]),
       children: [
         /* @__PURE__ */ t(i, { columns: s }),
-        /* @__PURE__ */ t(f, { columns: s, noResultsMsg: a, results: l })
+        /* @__PURE__ */ t(
+          f,
+          {
+            columns: s,
+            noResultsMsg: a,
+            results: l
+          }
+        )
       ]
     }
   );