@windstream/react-shared-components 0.1.94 → 0.1.95

package/src/contentful/blocks/breadcrumbs/index.test.tsx

@@ -1,281 +1,281 @@
-import "@testing-library/jest-dom";
-
-import React from "react";
-import { BreadcrumbNavigation } from "./index";
-
-import { render, screen } from "@testing-library/react";
-
-jest.mock("@shared/components/material-icon", () => ({
-  MaterialIcon: ({ name, className }: any) => (
-    <span data-testid="material-icon" className={className}>
-      {name}
-    </span>
-  ),
-}));
-
-jest.mock("@shared/components/text", () => ({
-  Text: ({ as: Tag = "span", children, className }: any) => (
-    <Tag className={className}>{children}</Tag>
-  ),
-}));
-
-const baseLinks = [
-  { buttonLabel: "Home", href: "/" },
-  { buttonLabel: "Blog", href: "/blog" },
-  { buttonLabel: "Current Page" },
-];
-
-describe("BreadcrumbNavigation", () => {
-  it("renders nothing when links is empty", () => {
-    const { container } = render(<BreadcrumbNavigation links={[]} />);
-    expect(container.querySelector("nav")).not.toBeInTheDocument();
-  });
-
-  it("renders nothing when links is undefined", () => {
-    const { container } = render(<BreadcrumbNavigation />);
-    expect(container.querySelector("nav")).not.toBeInTheDocument();
-  });
-
-  it("renders nav with aria-label", () => {
-    render(<BreadcrumbNavigation links={baseLinks} />);
-    expect(screen.getByLabelText("Breadcrumb")).toBeInTheDocument();
-  });
-
-  it("renders non-last links as anchor elements with chevron", () => {
-    const { container } = render(<BreadcrumbNavigation links={baseLinks} />);
-    const anchors = container.querySelectorAll("a");
-    expect(anchors).toHaveLength(2);
-    expect(anchors[0]).toHaveAttribute("href", "/");
-    expect(anchors[0]).toHaveTextContent("Home");
-    expect(anchors[1]).toHaveAttribute("href", "/blog");
-    const icons = screen.getAllByTestId("material-icon");
-    expect(icons).toHaveLength(2);
-    icons.forEach(icon => {
-      expect(icon).toHaveTextContent("chevron_right");
-    });
-  });
-
-  it("renders last link as Text span", () => {
-    render(<BreadcrumbNavigation links={baseLinks} />);
-    expect(screen.getByText("Current Page")).toBeInTheDocument();
-  });
-
-  describe("textColor", () => {
-    it("applies dark text color by default", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} textColor="dark" />
-      );
-      const anchor = container.querySelector("a");
-      expect(anchor?.className).toContain("text-text");
-    });
-
-    it("applies light text color", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} textColor="light" />
-      );
-      const anchor = container.querySelector("a");
-      expect(anchor?.className).toContain("text-white");
-    });
-
-    it("applies mobileTextColor override", () => {
-      const { container } = render(
-        <BreadcrumbNavigation
-          links={baseLinks}
-          textColor="dark"
-          mobileTextColor="light"
-        />
-      );
-      const anchor = container.querySelector("a");
-      expect(anchor?.className).toContain("text-white");
-    });
-
-    it("applies desktopTextColor override", () => {
-      const { container } = render(
-        <BreadcrumbNavigation
-          links={baseLinks}
-          textColor="dark"
-          desktopTextColor="light"
-        />
-      );
-      const anchor = container.querySelector("a");
-      expect(anchor?.className).toContain("xl:text-white");
-    });
-  });
-
-  describe("float prop", () => {
-    it("applies absolute class when float is always", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} float="always" />
-      );
-      const ol = container.querySelector("ol");
-      expect(ol?.className).toContain("absolute");
-    });
-
-    it("applies relative xl:absolute class when float is desktop (default)", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} float="desktop" />
-      );
-      const ol = container.querySelector("ol");
-      expect(ol?.className).toContain("relative xl:absolute");
-    });
-
-    it("applies absolute xl:relative class when float is mobile", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} float="mobile" />
-      );
-      const ol = container.querySelector("ol");
-      expect(ol?.className).toContain("absolute xl:relative");
-    });
-
-    it("applies relative class when float is none", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} float="none" />
-      );
-      const ol = container.querySelector("ol");
-      expect(ol?.className).toContain("relative");
-      expect(ol?.className).not.toContain("absolute");
-    });
-
-    it("applies px-7 when float is always", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} float="always" />
-      );
-      const ol = container.querySelector("ol");
-      expect(ol?.className).toContain("px-7");
-    });
-  });
-
-  describe("maxWidth", () => {
-    it("applies max-w-120 class when maxWidth is true", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} maxWidth={true} />
-      );
-      expect(container.querySelector("nav")?.className).toContain("max-w-120");
-    });
-
-    it("applies mx-auto without max-w-120 when maxWidth is false", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} maxWidth={false} />
-      );
-      const nav = container.querySelector("nav");
-      expect(nav?.className).toContain("mx-auto");
-      expect(nav?.className).not.toContain("max-w-120");
-    });
-
-    it("applies mx-5 when maxWidth is true and float is none", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} maxWidth={true} float="none" />
-      );
-      const nav = container.querySelector("nav");
-      expect(nav?.className).toContain("mx-5");
-    });
-
-    it("does not apply mx-5 when float is not none", () => {
-      const { container } = render(
-        <BreadcrumbNavigation
-          links={baseLinks}
-          maxWidth={true}
-          float="always"
-        />
-      );
-      const nav = container.querySelector("nav");
-      expect(nav?.className).not.toContain("mx-5");
-    });
-  });
-
-  describe("Image handling", () => {
-    it("renders image with https prefix for protocol-relative URLs", () => {
-      const links = [
-        {
-          buttonLabel: "Home",
-          href: "/",
-          image: { url: "//cdn.test/img.png", alt: "Logo" },
-        },
-        { buttonLabel: "Current" },
-      ];
-      render(<BreadcrumbNavigation links={links} />);
-      const img = screen.getAllByRole("img")[0];
-      expect(img).toHaveAttribute("src", "https://cdn.test/img.png");
-      expect(img).toHaveAttribute("alt", "Logo");
-    });
-
-    it("renders image with original URL when it does not start with //", () => {
-      const links = [
-        {
-          buttonLabel: "Home",
-          href: "/",
-          image: { url: "https://cdn.test/img.png", alt: "Logo" },
-        },
-        { buttonLabel: "Current" },
-      ];
-      render(<BreadcrumbNavigation links={links} />);
-      expect(screen.getAllByRole("img")[0]).toHaveAttribute(
-        "src",
-        "https://cdn.test/img.png"
-      );
-    });
-
-    it("does not render image when url is missing", () => {
-      const links = [
-        { buttonLabel: "Home", href: "/", image: {} },
-        { buttonLabel: "Current" },
-      ];
-      render(<BreadcrumbNavigation links={links} />);
-      expect(screen.queryByRole("img")).not.toBeInTheDocument();
-    });
-
-    it("renders image on last breadcrumb item", () => {
-      const links = [
-        { buttonLabel: "Home", href: "/" },
-        {
-          buttonLabel: "Current",
-          image: { url: "https://cdn.test/last.png", alt: "Last" },
-        },
-      ];
-      render(<BreadcrumbNavigation links={links} />);
-      expect(screen.getByRole("img")).toHaveAttribute(
-        "src",
-        "https://cdn.test/last.png"
-      );
-    });
-
-    it("uses empty alt when image alt is not provided", () => {
-      const links = [
-        {
-          buttonLabel: "Home",
-          href: "/",
-          image: { url: "https://cdn.test/img.png" },
-        },
-        { buttonLabel: "Current" },
-      ];
-      const { container } = render(<BreadcrumbNavigation links={links} />);
-      const img = container.querySelector("img");
-      expect(img).toHaveAttribute("alt", "");
-    });
-  });
-
-  describe("default float behavior", () => {
-    it("defaults float to desktop", () => {
-      const { container } = render(<BreadcrumbNavigation links={baseLinks} />);
-      const ol = container.querySelector("ol");
-      expect(ol?.className).toContain("relative xl:absolute");
-    });
-
-    it("default textColor derives mobileTextColor as dark when float is desktop", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} textColor="light" />
-      );
-      // When float=desktop, resolvedMobile = "dark" (always)
-      const anchor = container.querySelector("a");
-      expect(anchor?.className).toContain("text-text");
-    });
-
-    it("default textColor derives desktopTextColor from textColor when float is desktop", () => {
-      const { container } = render(
-        <BreadcrumbNavigation links={baseLinks} textColor="light" />
-      );
-      const anchor = container.querySelector("a");
-      expect(anchor?.className).toContain("xl:text-white");
-    });
-  });
-});
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { BreadcrumbNavigation } from "./index";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid="material-icon" className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+const baseLinks = [
+  { buttonLabel: "Home", href: "/" },
+  { buttonLabel: "Blog", href: "/blog" },
+  { buttonLabel: "Current Page" },
+];
+
+describe("BreadcrumbNavigation", () => {
+  it("renders nothing when links is empty", () => {
+    const { container } = render(<BreadcrumbNavigation links={[]} />);
+    expect(container.querySelector("nav")).not.toBeInTheDocument();
+  });
+
+  it("renders nothing when links is undefined", () => {
+    const { container } = render(<BreadcrumbNavigation />);
+    expect(container.querySelector("nav")).not.toBeInTheDocument();
+  });
+
+  it("renders nav with aria-label", () => {
+    render(<BreadcrumbNavigation links={baseLinks} />);
+    expect(screen.getByLabelText("Breadcrumb")).toBeInTheDocument();
+  });
+
+  it("renders non-last links as anchor elements with chevron", () => {
+    const { container } = render(<BreadcrumbNavigation links={baseLinks} />);
+    const anchors = container.querySelectorAll("a");
+    expect(anchors).toHaveLength(2);
+    expect(anchors[0]).toHaveAttribute("href", "/");
+    expect(anchors[0]).toHaveTextContent("Home");
+    expect(anchors[1]).toHaveAttribute("href", "/blog");
+    const icons = screen.getAllByTestId("material-icon");
+    expect(icons).toHaveLength(2);
+    icons.forEach(icon => {
+      expect(icon).toHaveTextContent("chevron_right");
+    });
+  });
+
+  it("renders last link as Text span", () => {
+    render(<BreadcrumbNavigation links={baseLinks} />);
+    expect(screen.getByText("Current Page")).toBeInTheDocument();
+  });
+
+  describe("textColor", () => {
+    it("applies dark text color by default", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="dark" />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-text");
+    });
+
+    it("applies light text color", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="light" />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-white");
+    });
+
+    it("applies mobileTextColor override", () => {
+      const { container } = render(
+        <BreadcrumbNavigation
+          links={baseLinks}
+          textColor="dark"
+          mobileTextColor="light"
+        />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-white");
+    });
+
+    it("applies desktopTextColor override", () => {
+      const { container } = render(
+        <BreadcrumbNavigation
+          links={baseLinks}
+          textColor="dark"
+          desktopTextColor="light"
+        />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("xl:text-white");
+    });
+  });
+
+  describe("float prop", () => {
+    it("applies absolute class when float is always", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="always" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("absolute");
+    });
+
+    it("applies relative xl:absolute class when float is desktop (default)", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="desktop" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("relative xl:absolute");
+    });
+
+    it("applies absolute xl:relative class when float is mobile", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="mobile" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("absolute xl:relative");
+    });
+
+    it("applies relative class when float is none", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="none" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("relative");
+      expect(ol?.className).not.toContain("absolute");
+    });
+
+    it("applies px-7 when float is always", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} float="always" />
+      );
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("px-7");
+    });
+  });
+
+  describe("maxWidth", () => {
+    it("applies max-w-120 class when maxWidth is true", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} maxWidth={true} />
+      );
+      expect(container.querySelector("nav")?.className).toContain("max-w-120");
+    });
+
+    it("applies mx-auto without max-w-120 when maxWidth is false", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} maxWidth={false} />
+      );
+      const nav = container.querySelector("nav");
+      expect(nav?.className).toContain("mx-auto");
+      expect(nav?.className).not.toContain("max-w-120");
+    });
+
+    it("applies mx-5 when maxWidth is true and float is none", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} maxWidth={true} float="none" />
+      );
+      const nav = container.querySelector("nav");
+      expect(nav?.className).toContain("mx-5");
+    });
+
+    it("does not apply mx-5 when float is not none", () => {
+      const { container } = render(
+        <BreadcrumbNavigation
+          links={baseLinks}
+          maxWidth={true}
+          float="always"
+        />
+      );
+      const nav = container.querySelector("nav");
+      expect(nav?.className).not.toContain("mx-5");
+    });
+  });
+
+  describe("Image handling", () => {
+    it("renders image with https prefix for protocol-relative URLs", () => {
+      const links = [
+        {
+          buttonLabel: "Home",
+          href: "/",
+          image: { url: "//cdn.test/img.png", alt: "Logo" },
+        },
+        { buttonLabel: "Current" },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      const img = screen.getAllByRole("img")[0];
+      expect(img).toHaveAttribute("src", "https://cdn.test/img.png");
+      expect(img).toHaveAttribute("alt", "Logo");
+    });
+
+    it("renders image with original URL when it does not start with //", () => {
+      const links = [
+        {
+          buttonLabel: "Home",
+          href: "/",
+          image: { url: "https://cdn.test/img.png", alt: "Logo" },
+        },
+        { buttonLabel: "Current" },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      expect(screen.getAllByRole("img")[0]).toHaveAttribute(
+        "src",
+        "https://cdn.test/img.png"
+      );
+    });
+
+    it("does not render image when url is missing", () => {
+      const links = [
+        { buttonLabel: "Home", href: "/", image: {} },
+        { buttonLabel: "Current" },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      expect(screen.queryByRole("img")).not.toBeInTheDocument();
+    });
+
+    it("renders image on last breadcrumb item", () => {
+      const links = [
+        { buttonLabel: "Home", href: "/" },
+        {
+          buttonLabel: "Current",
+          image: { url: "https://cdn.test/last.png", alt: "Last" },
+        },
+      ];
+      render(<BreadcrumbNavigation links={links} />);
+      expect(screen.getByRole("img")).toHaveAttribute(
+        "src",
+        "https://cdn.test/last.png"
+      );
+    });
+
+    it("uses empty alt when image alt is not provided", () => {
+      const links = [
+        {
+          buttonLabel: "Home",
+          href: "/",
+          image: { url: "https://cdn.test/img.png" },
+        },
+        { buttonLabel: "Current" },
+      ];
+      const { container } = render(<BreadcrumbNavigation links={links} />);
+      const img = container.querySelector("img");
+      expect(img).toHaveAttribute("alt", "");
+    });
+  });
+
+  describe("default float behavior", () => {
+    it("defaults float to desktop", () => {
+      const { container } = render(<BreadcrumbNavigation links={baseLinks} />);
+      const ol = container.querySelector("ol");
+      expect(ol?.className).toContain("relative xl:absolute");
+    });
+
+    it("default textColor derives mobileTextColor as dark when float is desktop", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="light" />
+      );
+      // When float=desktop, resolvedMobile = "dark" (always)
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("text-text");
+    });
+
+    it("default textColor derives desktopTextColor from textColor when float is desktop", () => {
+      const { container } = render(
+        <BreadcrumbNavigation links={baseLinks} textColor="light" />
+      );
+      const anchor = container.querySelector("a");
+      expect(anchor?.className).toContain("xl:text-white");
+    });
+  });
+});