@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/image-promo-bar/youtube-embed.test.tsx

@@ -0,0 +1,104 @@
+import React from "react";
+import { YoutubeEmbed } from "./youtube-embed";
+
+import { render, screen } from "@testing-library/react";
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("YoutubeEmbed", () => {
+  it("renders iframe with extracted video id from watch URL", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    const iframe = screen.getByTitle("Embedded youtube");
+    expect(iframe.getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/dQw4w9WgXcQ"
+    );
+  });
+
+  it("extracts id from youtu.be short URL", () => {
+    render(<YoutubeEmbed link="https://youtu.be/dQw4w9WgXcQ" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
+      "/embed/dQw4w9WgXcQ"
+    );
+  });
+
+  it("extracts id from embed URL", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/embed/dQw4w9WgXcQ" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toContain(
+      "/embed/dQw4w9WgXcQ"
+    );
+  });
+
+  it("returns empty embedId for invalid URL", () => {
+    render(<YoutubeEmbed link="https://example.com/notavideo" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+
+  it("returns empty embedId when link is empty", () => {
+    render(<YoutubeEmbed link="" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+
+  it("returns empty embedId when link is undefined", () => {
+    render(<YoutubeEmbed link={undefined} />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+
+  it("appends autoplay param when autoplay is true", () => {
+    render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        autoplay={true}
+      />
+    );
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=1"
+    );
+  });
+
+  it("does not append autoplay param when autoplay is false", () => {
+    render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        autoplay={false}
+      />
+    );
+    expect(
+      screen.getByTitle("Embedded youtube").getAttribute("src")
+    ).not.toContain("autoplay");
+  });
+
+  it("applies containerClassName", () => {
+    const { container } = render(
+      <YoutubeEmbed
+        link="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+        containerClassName="extra"
+      />
+    );
+    expect(container.firstElementChild?.className).toContain("extra");
+  });
+
+  it("has correct iframe attributes", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=dQw4w9WgXcQ" />);
+    const iframe = screen.getByTitle("Embedded youtube");
+    expect(iframe).toHaveAttribute(
+      "allow",
+      "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+    );
+    expect(iframe).toHaveAttribute("allowFullScreen");
+  });
+
+  it("returns empty embedId when match length is not 11", () => {
+    render(<YoutubeEmbed link="https://www.youtube.com/watch?v=short" />);
+    expect(screen.getByTitle("Embedded youtube").getAttribute("src")).toBe(
+      "https://www.youtube.com/embed/"
+    );
+  });
+});

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

@@ -0,0 +1,209 @@
+import React from "react";
+import { Modal } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("framer-motion", () => ({
+  motion: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    div: ({ children, className, ...rest }: any) => (
+      <div className={className}>{children}</div>
+    ),
+  },
+}));
+
+jest.mock("@radix-ui/react-dialog", () => ({
+  Root: ({ open, onOpenChange, children }: any) => (
+    <div
+      data-testid="dialog-root"
+      data-open={open}
+      onClick={() => open && onOpenChange?.()}
+    >
+      {children}
+    </div>
+  ),
+  Portal: ({ children }: any) => (
+    <div data-testid="dialog-portal">{children}</div>
+  ),
+  Overlay: () => <div data-testid="dialog-overlay" />,
+  Content: ({ children, className, style, onOpenAutoFocus }: any) => {
+    // Call onOpenAutoFocus to cover that branch
+    if (onOpenAutoFocus) {
+      const mockEvent = { preventDefault: jest.fn() };
+      onOpenAutoFocus(mockEvent);
+    }
+    return (
+      <div data-testid="dialog-content" className={className} style={style}>
+        {children}
+      </div>
+    );
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Close: ({ children, asChild }: any) => (
+    <div data-testid="dialog-close">{children}</div>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name }: any) => (
+    <span data-testid="material-icon">{name}</span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  Button: ({ children, buttonClassName, showButtonAs }: any) => (
+    <button data-testid="close-button" className={buttonClassName}>
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("Modal", () => {
+  const defaultProps = { isOpen: true, onRequestClose: jest.fn() };
+
+  beforeEach(() => jest.clearAllMocks());
+
+  describe("Rendering", () => {
+    it("renders dialog root with open state", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("dialog-root")).toHaveAttribute(
+        "data-open",
+        "true"
+      );
+    });
+
+    it("renders close button with MaterialIcon", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("close-button")).toBeInTheDocument();
+      expect(screen.getByText("close")).toBeInTheDocument();
+    });
+
+    it("renders title as h2 when provided", () => {
+      render(<Modal {...defaultProps} title="My Title" />);
+      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
+        "My Title"
+      );
+    });
+
+    it("does not render title when not provided", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.queryByRole("heading")).not.toBeInTheDocument();
+    });
+
+    it("renders description when provided", () => {
+      render(<Modal {...defaultProps} description="Some desc" />);
+      expect(screen.getByText("Some desc")).toBeInTheDocument();
+    });
+
+    it("does not render description when not provided", () => {
+      const { container } = render(<Modal {...defaultProps} />);
+      expect(container.querySelector(".mb-8")).not.toBeInTheDocument();
+    });
+
+    it("renders content", () => {
+      render(
+        <Modal
+          {...defaultProps}
+          content={<div data-testid="content">Content</div>}
+        />
+      );
+      expect(screen.getByTestId("content")).toBeInTheDocument();
+    });
+
+    it("renders children", () => {
+      render(
+        <Modal {...defaultProps}>
+          <span data-testid="child">Child</span>
+        </Modal>
+      );
+      expect(screen.getByTestId("child")).toBeInTheDocument();
+    });
+
+    it("does not render children placeholder when not provided", () => {
+      const { container } = render(<Modal {...defaultProps} />);
+      expect(container.innerHTML).not.toContain("null");
+    });
+  });
+
+  describe("Size", () => {
+    it("applies lg maxWidth by default", () => {
+      render(<Modal {...defaultProps} />);
+      expect(screen.getByTestId("dialog-content").style.maxWidth).toBe(
+        "1024px"
+      );
+    });
+
+    it("applies sm maxWidth", () => {
+      render(<Modal {...defaultProps} size="sm" />);
+      expect(screen.getByTestId("dialog-content").style.maxWidth).toBe("640px");
+    });
+
+    it("applies xl maxWidth", () => {
+      render(<Modal {...defaultProps} size="xl" />);
+      expect(screen.getByTestId("dialog-content").style.maxWidth).toBe(
+        "1280px"
+      );
+    });
+  });
+
+  describe("Props", () => {
+    it("applies bodyClassName to content", () => {
+      render(<Modal {...defaultProps} bodyClassName="custom-body" />);
+      expect(screen.getByTestId("dialog-content").className).toContain(
+        "custom-body"
+      );
+    });
+
+    it("applies type and index as data attributes", () => {
+      render(<Modal {...defaultProps} type="tabmodal" index={2} />);
+      const section = screen
+        .getByTestId("dialog-content")
+        .querySelector("[data-section-type]");
+      expect(section).toHaveAttribute("data-section-type", "tabmodal");
+      expect(section).toHaveAttribute("data-section-index", "2");
+    });
+
+    it("defaults type to modal and index to 0", () => {
+      render(<Modal {...defaultProps} />);
+      const section = screen
+        .getByTestId("dialog-content")
+        .querySelector("[data-section-type]");
+      expect(section).toHaveAttribute("data-section-type", "modal");
+      expect(section).toHaveAttribute("data-section-index", "0");
+    });
+  });
+
+  describe("Close behavior", () => {
+    it("calls onRequestClose when dialog onOpenChange triggers while open", () => {
+      render(<Modal {...defaultProps} />);
+      fireEvent.click(screen.getByTestId("dialog-root"));
+      expect(defaultProps.onRequestClose).toHaveBeenCalled();
+    });
+
+    it("does not call onRequestClose when isOpen is false", () => {
+      render(
+        <Modal isOpen={false} onRequestClose={defaultProps.onRequestClose} />
+      );
+      fireEvent.click(screen.getByTestId("dialog-root"));
+      expect(defaultProps.onRequestClose).not.toHaveBeenCalled();
+    });
+
+    it("handles missing onRequestClose gracefully", () => {
+      expect(() => {
+        render(<Modal isOpen={true} />);
+        fireEvent.click(screen.getByTestId("dialog-root"));
+      }).not.toThrow();
+    });
+  });
+});

package/src/contentful/blocks/navigation/desktop-link-groups.tsx/index.test.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { DesktopLinkGroups } from "./index";
+
+import { act, fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, className }: any) => (
+    <span data-testid={`icon-${name}`} className={className}>
+      {name}
+    </span>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/button", () => ({
+  Button: ({
+    children,
+    buttonClassName,
+    onClick,
+    linkClassName,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    showButtonAs,
+    ...rest
+  }: any) => (
+    <button
+      data-testid="button"
+      className={buttonClassName || linkClassName}
+      onClick={onClick}
+      aria-expanded={rest["aria-expanded"]}
+    >
+      {children || rest.buttonLabel}
+    </button>
+  ),
+}));
+
+let outsideClickCallback: (() => void) | null = null;
+jest.mock("@shared/hooks/use-outside-click", () => ({
+  useOutsideClick: (_ref: any, cb: () => void) => {
+    outsideClickCallback = cb;
+  },
+}));
+
+jest.mock("@shared/utils", () => ({
+  cx: (...args: any[]) => args.filter(Boolean).join(" "),
+}));
+
+describe("DesktopLinkGroups", () => {
+  it("renders nothing when link is undefined", () => {
+    const { container } = render(
+      <DesktopLinkGroups anchorName="test" link={undefined} />
+    );
+    expect(container.innerHTML).toBe("");
+  });
+
+  it("renders single Button when link is a button (has href)", () => {
+    const link = {
+      href: "/products",
+      buttonLabel: "Products",
+      anchorId: "prod",
+    };
+    render(<DesktopLinkGroups anchorName="nav-0" link={link as any} />);
+    expect(screen.getByTestId("button")).toHaveTextContent("Products");
+  });
+
+  describe("Group rendering", () => {
+    const groupLink = {
+      anchorId: "group-1",
+      title: "My Account",
+      items: {
+        items: [
+          { buttonLabel: "Profile", href: "/profile", anchorId: "p1" },
+          { buttonLabel: "Settings", href: "/settings", anchorId: "p2" },
+        ],
+      },
+    };
+
+    it("renders group title button", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      expect(screen.getByText("My Account")).toBeInTheDocument();
+    });
+
+    it("renders dropdown arrow icon (down when closed)", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      expect(
+        screen.getByTestId("icon-keyboard_arrow_down")
+      ).toBeInTheDocument();
+    });
+
+    it("toggles open state and shows up arrow when open", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      expect(screen.getByTestId("icon-keyboard_arrow_up")).toBeInTheDocument();
+    });
+
+    it("renders submenu items when open", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      expect(screen.getByText("Profile")).toBeInTheDocument();
+      expect(screen.getByText("Settings")).toBeInTheDocument();
+    });
+
+    it("closes when toggled again", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      fireEvent.click(toggleBtn);
+      expect(
+        screen.getByTestId("icon-keyboard_arrow_down")
+      ).toBeInTheDocument();
+    });
+
+    it("renders null title when title is missing", () => {
+      const noTitleLink = { ...groupLink, title: null };
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={noTitleLink as any} />
+      );
+      // Should still render without error
+      expect(screen.getAllByTestId("button")[0]).toBeInTheDocument();
+    });
+
+    it("handles empty items array", () => {
+      const emptyItems = { ...groupLink, items: { items: [] } };
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={emptyItems as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      // No submenu links rendered
+      expect(screen.getAllByTestId("button")).toHaveLength(1);
+    });
+
+    it("handles null items", () => {
+      const nullItems = { ...groupLink, items: null };
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={nullItems as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      expect(screen.getAllByTestId("button")).toHaveLength(1);
+    });
+
+    it("closes when a submenu anchor link is clicked", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      // Simulate clicking an anchor within the submenu ul
+      const submenuList = screen.getByRole("list");
+      const anchor = document.createElement("a");
+      anchor.href = "/profile";
+      submenuList.appendChild(anchor);
+      fireEvent.click(anchor);
+      // After click, arrow should be down (closed)
+      expect(
+        screen.getByTestId("icon-keyboard_arrow_down")
+      ).toBeInTheDocument();
+    });
+
+    it("does not close when non-anchor element is clicked in submenu", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      const submenuList = screen.getByRole("list");
+      // Click on a non-anchor element
+      fireEvent.click(submenuList);
+      // Should still be open
+      expect(screen.getByTestId("icon-keyboard_arrow_up")).toBeInTheDocument();
+    });
+
+    it("closes when outside click is triggered", () => {
+      render(
+        <DesktopLinkGroups anchorName="account-0" link={groupLink as any} />
+      );
+      const toggleBtn = screen.getAllByTestId("button")[0];
+      fireEvent.click(toggleBtn);
+      // Should be open
+      expect(screen.getByTestId("icon-keyboard_arrow_up")).toBeInTheDocument();
+      // Trigger outside click callback
+      act(() => {
+        outsideClickCallback!();
+      });
+      // Should close
+      expect(
+        screen.getByTestId("icon-keyboard_arrow_down")
+      ).toBeInTheDocument();
+    });
+  });
+});