@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/AnchorTag/AnchorTag.test.js

@@ -0,0 +1,463 @@
+import { jsx as a } from "react/jsx-runtime";
+import { d as c, i as n, r as i, g as t, s, v as g } from "../../react.esm-DLSrfVwM.mjs";
+import { u as m } from "../../index-BUN4jQ3m.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { AnchorTag as o } from "./AnchorTag.js";
+c("AnchorTag", () => {
+  c("Basic Rendering", () => {
+    n("should render with label text", () => {
+      i(/* @__PURE__ */ a(o, { label: "Click Here" })), t(s.getByText("Click Here")).toBeInTheDocument();
+    }), n("should render with href attribute", () => {
+      i(/* @__PURE__ */ a(o, { href: "https://example.com", label: "Link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveAttribute("href", "https://example.com");
+    }), n("should render with empty href by default", () => {
+      const { container: l } = i(/* @__PURE__ */ a(o, { label: "Link" })), e = l.querySelector("a");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("href", "");
+    }), n("should render with custom className", () => {
+      i(/* @__PURE__ */ a(o, { classname: "custom-class", href: "/test", label: "Link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveClass("custom-class");
+    });
+  }), c("Link Type: internal-link (default)", () => {
+    n("should use internal-link as default type", () => {
+      i(/* @__PURE__ */ a(o, { href: "/page", label: "Internal Link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveAttribute("target", "_self"), t(l).not.toHaveAttribute("rel");
+    }), n("should set target to _self for internal links", () => {
+      i(/* @__PURE__ */ a(o, { href: "/page", label: "Internal Link", type: "internal-link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveAttribute("target", "_self");
+    }), n("should not have rel attribute for internal links", () => {
+      i(/* @__PURE__ */ a(o, { href: "/page", label: "Internal Link", type: "internal-link" }));
+      const l = s.getByRole("link");
+      t(l).not.toHaveAttribute("rel");
+    });
+  }), c("Link Type: external-link", () => {
+    n("should set target to _blank for external links", () => {
+      i(/* @__PURE__ */ a(o, { href: "https://example.com", label: "External Link", type: "external-link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveAttribute("target", "_blank");
+    }), n("should set rel to noreferrer for external links", () => {
+      i(/* @__PURE__ */ a(o, { href: "https://example.com", label: "External Link", type: "external-link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveAttribute("rel", "noreferrer");
+    });
+  }), c("Click Handler", () => {
+    n("should call clickHandler when clicked on internal hash link", async () => {
+      const l = m.setup(), e = g.fn();
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "#section",
+          label: "Jump Link",
+          type: "internal-link"
+        }
+      ));
+      const r = s.getByRole("link");
+      await l.click(r), t(e).toHaveBeenCalledTimes(1);
+    }), n("should not call clickHandler for non-hash internal links", async () => {
+      const l = m.setup(), e = g.fn((k) => k.preventDefault()), { container: r } = i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "",
+          label: "Page Link",
+          type: "internal-link"
+        }
+      )), h = r.querySelector("a");
+      h && await l.click(h), t(e).not.toHaveBeenCalled();
+    }), n("should not call clickHandler for external links", async () => {
+      const l = m.setup(), e = g.fn();
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "https://example.com#section",
+          label: "External",
+          type: "external-link"
+        }
+      ));
+      const r = s.getByRole("link");
+      await l.click(r), t(e).not.toHaveBeenCalled();
+    }), n("should pass the event to clickHandler", async () => {
+      const l = m.setup(), e = g.fn();
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "#section",
+          label: "Jump",
+          type: "internal-link"
+        }
+      ));
+      const r = s.getByRole("link");
+      await l.click(r), t(e).toHaveBeenCalledWith(t.any(Object));
+    }), n("should not have onClick when clickHandler is null", () => {
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: null,
+          href: "#section",
+          label: "Link",
+          type: "internal-link"
+        }
+      ));
+      const l = s.getByRole("link");
+      t(l.onclick).toBeNull();
+    });
+  }), c("Image Rendering", () => {
+    const l = {
+      url: "https://example.com/image.jpg",
+      altText: "Test Image",
+      aspectRatio: 1.5,
+      width: 300,
+      height: 200
+    };
+    n("should render image when image prop is provided", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Image Link" }));
+      const e = s.getByRole("img");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("src", "https://example.com/image.jpg");
+    }), n("should use label as alt text for image", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Test Label" }));
+      const e = s.getByRole("img");
+      t(e).toHaveAttribute("alt", "Test Label");
+    }), n("should render label in sr-only span when image is present", () => {
+      const { container: e } = i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Screen Reader Text" })), r = e.querySelector(".sr-only");
+      t(r).toBeInTheDocument(), t(r == null ? void 0 : r.textContent).toBe("Screen Reader Text");
+    }), n("should apply image-specific classes when image is present", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Image Link" }));
+      const e = s.getByRole("link");
+      t(e).toHaveClass("anchor-tag--image");
+    }), n("should include custom classname along with image classes", () => {
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          classname: "custom",
+          href: "/",
+          image: l,
+          label: "Image Link"
+        }
+      ));
+      const e = s.getByRole("link");
+      t(e).toHaveClass("custom"), t(e).toHaveClass("anchor-tag--image");
+    }), n("should set aspect ratio CSS variable when width and height are provided", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: l, label: "Image Link" }));
+      const e = s.getByRole("link");
+      t(e).toHaveStyle({ "--anchor-tag-image-ratio": "1.5" });
+    }), n("should default aspect ratio to 1 when width or height is missing", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5
+      }, label: "Image Link" }));
+      const r = s.getByRole("link");
+      t(r).toHaveStyle({ "--anchor-tag-image-ratio": "1" });
+    }), n("should handle image with only width provided", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 300
+      }, label: "Image Link" }));
+      const r = s.getByRole("link");
+      t(r).toHaveStyle({ "--anchor-tag-image-ratio": "1" });
+    }), n("should handle image with only height provided", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        height: 200
+      }, label: "Image Link" }));
+      const r = s.getByRole("link");
+      t(r).toHaveStyle({ "--anchor-tag-image-ratio": "1" });
+    }), n("should not render image when image is null", () => {
+      i(/* @__PURE__ */ a(o, { image: null, label: "No Image" }));
+      const e = s.queryByRole("img");
+      t(e).not.toBeInTheDocument();
+    }), n("should render text label when image is null", () => {
+      i(/* @__PURE__ */ a(o, { image: null, label: "Text Only" })), t(s.getByText("Text Only")).toBeInTheDocument();
+      const e = s.queryByText("Text Only");
+      t(e).not.toHaveClass("sr-only");
+    });
+  }), c("Image with Link Types", () => {
+    const l = {
+      url: "https://example.com/image.jpg",
+      altText: "Test",
+      aspectRatio: 1.5,
+      width: 300,
+      height: 200
+    };
+    n("should set internal link attributes with image", () => {
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          href: "/page",
+          image: l,
+          label: "Internal",
+          type: "internal-link"
+        }
+      ));
+      const e = s.getByRole("link");
+      t(e).toHaveAttribute("target", "_self"), t(e).not.toHaveAttribute("rel");
+    }), n("should set external link attributes with image", () => {
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          href: "https://example.com",
+          image: l,
+          label: "External",
+          type: "external-link"
+        }
+      ));
+      const e = s.getByRole("link");
+      t(e).toHaveAttribute("target", "_blank"), t(e).toHaveAttribute("rel", "noreferrer");
+    });
+  }), c("Image with Click Handler", () => {
+    const l = {
+      url: "https://example.com/image.jpg",
+      altText: "Test",
+      aspectRatio: 1.5,
+      width: 300,
+      height: 200
+    };
+    n("should call clickHandler on internal hash link with image", async () => {
+      const e = m.setup(), r = g.fn();
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: r,
+          href: "#section",
+          image: l,
+          label: "Jump",
+          type: "internal-link"
+        }
+      ));
+      const h = s.getByRole("link");
+      await e.click(h), t(r).toHaveBeenCalledTimes(1);
+    }), n("should not call clickHandler on non-hash link with image", async () => {
+      const e = m.setup(), r = g.fn(), { container: h } = i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: r,
+          href: "",
+          image: l,
+          label: "Page",
+          type: "internal-link"
+        }
+      )), k = h.querySelector("a");
+      k && await e.click(k), t(r).not.toHaveBeenCalled();
+    }), n("should not call clickHandler on external link with image", async () => {
+      const e = m.setup(), r = g.fn();
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: r,
+          href: "https://example.com#section",
+          image: l,
+          label: "External",
+          type: "external-link"
+        }
+      ));
+      const h = s.getByRole("link");
+      await e.click(h), t(r).not.toHaveBeenCalled();
+    });
+  }), c("Default Props", () => {
+    n("should render with all default props", () => {
+      const { container: l } = i(/* @__PURE__ */ a(o, {})), e = l.querySelector("a");
+      t(e).toBeInTheDocument(), t(e).toHaveAttribute("href", ""), t(e).toHaveAttribute("target", "_self"), t(e).not.toHaveAttribute("rel"), t(e == null ? void 0 : e.textContent).toBe("");
+    }), n("should have empty className by default", () => {
+      const { container: l } = i(/* @__PURE__ */ a(o, { label: "Test" })), e = l.querySelector("a");
+      t(e == null ? void 0 : e.className).toBe("");
+    });
+  }), c("Hash Link Detection", () => {
+    n("should detect hash in href for click handler", async () => {
+      const l = m.setup(), e = g.fn();
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "#top",
+          label: "Top",
+          type: "internal-link"
+        }
+      )), await l.click(s.getByRole("link")), t(e).toHaveBeenCalled();
+    }), n("should detect hash in middle of href", async () => {
+      const l = m.setup(), e = g.fn((r) => r.preventDefault());
+      i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "#section",
+          label: "Section",
+          type: "internal-link"
+        }
+      )), await l.click(s.getByRole("link")), t(e).toHaveBeenCalled();
+    }), n("should not trigger handler without hash", async () => {
+      const l = m.setup(), e = g.fn(), { container: r } = i(/* @__PURE__ */ a(
+        o,
+        {
+          clickHandler: e,
+          href: "",
+          label: "Page",
+          type: "internal-link"
+        }
+      )), h = r.querySelector("a");
+      h && await l.click(h), t(e).not.toHaveBeenCalled();
+    });
+  }), c("Edge Cases", () => {
+    n("should handle empty label", () => {
+      i(/* @__PURE__ */ a(o, { href: "/page", label: "" }));
+      const l = s.getByRole("link");
+      t(l).toBeInTheDocument(), t(l.textContent).toBe("");
+    }), n("should handle label with special characters", () => {
+      i(/* @__PURE__ */ a(o, { label: "<Click> & 'Go'" })), t(s.getByText("<Click> & 'Go'")).toBeInTheDocument();
+    }), n("should handle very long href", () => {
+      const l = "https://example.com/" + "a".repeat(1e3);
+      i(/* @__PURE__ */ a(o, { href: l, label: "Long URL" }));
+      const e = s.getByRole("link");
+      t(e).toHaveAttribute("href", l);
+    }), n("should handle image with zero width and height", () => {
+      i(/* @__PURE__ */ a(o, { href: "/", image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 0,
+        height: 0
+      }, label: "Zero Dimensions" }));
+      const e = s.getByRole("link");
+      t(e).toBeInTheDocument();
+    }), n("should handle multiple classes in classname prop", () => {
+      i(/* @__PURE__ */ a(o, { classname: "class1 class2 class3", href: "/test", label: "Multi Class" }));
+      const l = s.getByRole("link");
+      t(l).toHaveClass("class1"), t(l).toHaveClass("class2"), t(l).toHaveClass("class3");
+    });
+  }), c("Accessibility", () => {
+    n("should be keyboard accessible", () => {
+      i(/* @__PURE__ */ a(o, { href: "/page", label: "Link" }));
+      const l = s.getByRole("link");
+      l.focus(), t(l).toHaveFocus();
+    }), n("should have proper role", () => {
+      i(/* @__PURE__ */ a(o, { href: "/page", label: "Link" })), t(s.getByRole("link")).toBeInTheDocument();
+    }), n("should provide screen reader text when image is used", () => {
+      const l = {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 300,
+        height: 200
+      }, { container: e } = i(/* @__PURE__ */ a(o, { image: l, label: "Accessible Text" })), r = e.querySelector(".sr-only");
+      t(r).toHaveTextContent("Accessible Text");
+    }), n("should have proper alt text on image", () => {
+      i(/* @__PURE__ */ a(o, { image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 300,
+        height: 200
+      }, label: "Alt Text Here" }));
+      const e = s.getByRole("img");
+      t(e).toHaveAttribute("alt", "Alt Text Here");
+    }), n("should properly indicate external links with rel noreferrer", () => {
+      i(/* @__PURE__ */ a(o, { href: "https://example.com", label: "External", type: "external-link" }));
+      const l = s.getByRole("link");
+      t(l).toHaveAttribute("rel", "noreferrer"), t(l).toHaveAttribute("target", "_blank");
+    });
+  }), c("Complex Image Objects", () => {
+    n("should handle image with sources", () => {
+      i(/* @__PURE__ */ a(o, { image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 300,
+        height: 200,
+        sources: [
+          {
+            media: "(min-width: 768px)",
+            srcsets: ["image-large.jpg"]
+          }
+        ]
+      }, label: "Image with Sources" }));
+      const e = s.getByRole("img");
+      t(e).toHaveAttribute("src", "https://example.com/image.jpg");
+    }), n("should handle image with caption", () => {
+      i(/* @__PURE__ */ a(o, { image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 300,
+        height: 200,
+        caption: "This is a caption"
+      }, label: "Captioned Image" }));
+      const e = s.getByRole("img");
+      t(e).toBeInTheDocument();
+    }), n("should handle image with text property", () => {
+      i(/* @__PURE__ */ a(o, { image: {
+        url: "https://example.com/image.jpg",
+        altText: "Test",
+        aspectRatio: 1.5,
+        width: 300,
+        height: 200,
+        text: "Additional text"
+      }, label: "Image with Text" }));
+      const e = s.getByRole("img");
+      t(e).toBeInTheDocument();
+    });
+  }), c("Integration Tests", () => {
+    n("should render complete internal link with all props", () => {
+      const l = g.fn();
+      i(
+        /* @__PURE__ */ a(
+          o,
+          {
+            classname: "nav-link",
+            clickHandler: l,
+            href: "/about#team",
+            label: "About Us",
+            type: "internal-link"
+          }
+        )
+      );
+      const e = s.getByRole("link");
+      t(e).toHaveClass("nav-link"), t(e).toHaveAttribute("href", "/about#team"), t(e).toHaveAttribute("target", "_self"), t(e).not.toHaveAttribute("rel"), t(s.getByText("About Us")).toBeInTheDocument();
+    }), n("should render complete external link with all props", () => {
+      i(
+        /* @__PURE__ */ a(
+          o,
+          {
+            classname: "external-link",
+            href: "https://example.com",
+            label: "Visit Example",
+            type: "external-link"
+          }
+        )
+      );
+      const l = s.getByRole("link");
+      t(l).toHaveClass("external-link"), t(l).toHaveAttribute("href", "https://example.com"), t(l).toHaveAttribute("target", "_blank"), t(l).toHaveAttribute("rel", "noreferrer"), t(s.getByText("Visit Example")).toBeInTheDocument();
+    }), n("should render complete image link with all props", () => {
+      i(
+        /* @__PURE__ */ a(
+          o,
+          {
+            classname: "logo-link",
+            href: "/",
+            image: {
+              url: "https://example.com/logo.png",
+              altText: "Logo",
+              aspectRatio: 2,
+              width: 400,
+              height: 200
+            },
+            label: "Home",
+            type: "internal-link"
+          }
+        )
+      );
+      const e = s.getByRole("link");
+      t(e).toHaveClass("logo-link"), t(e).toHaveClass("anchor-tag--image"), t(e).toHaveAttribute("href", "/"), t(e).toHaveAttribute("target", "_self"), t(e).toHaveStyle({ "--anchor-tag-image-ratio": "2" });
+      const r = s.getByRole("img");
+      t(r).toHaveAttribute("src", "https://example.com/logo.png"), t(r).toHaveAttribute("alt", "Home");
+    });
+  });
+});