@windstream/react-shared-components 0.1.93 → 0.1.95

package/src/contentful/blocks/blogs-grid-base/index.test.tsx

@@ -0,0 +1,274 @@
+import React from "react";
+import { BlogGridBase } from "./index";
+import { BlogCategoryOption, BlogGridBaseProps } from "./types";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+jest.mock("@shared/components/pagination", () => ({
+  Pagination: ({ currentPage, totalPages, onPageChange, ariaLabel }: any) => (
+    <nav aria-label={ariaLabel} data-testid="pagination">
+      <span>
+        Page {currentPage} of {totalPages}
+      </span>
+      <button data-testid="page-next" onClick={() => onPageChange(2)}>
+        Next
+      </button>
+      <button data-testid="page-first" onClick={() => onPageChange(1)}>
+        First
+      </button>
+    </nav>
+  ),
+}));
+
+jest.mock("@shared/components/select", () => ({
+  Select: ({ options, value, onChange, className }: any) => (
+    <select
+      data-testid="category-select"
+      className={className}
+      value={value?.value}
+      onChange={e => {
+        const opt = options.find((o: any) => o.value === e.target.value);
+        onChange(opt);
+      }}
+    >
+      {options.map((o: any) => (
+        <option key={o.value} value={o.value}>
+          {o.label}
+        </option>
+      ))}
+    </select>
+  ),
+}));
+
+jest.mock("@shared/components/text", () => ({
+  Text: ({ as: Tag = "span", children, className }: any) => (
+    <Tag className={className}>{children}</Tag>
+  ),
+}));
+
+jest.mock("@shared/contentful/blocks/cards/blog-card", () => ({
+  BlogCard: ({ href, title, category, image, imageComponent, index }: any) => (
+    <a
+      href={href}
+      data-testid={`blog-card-${index}`}
+      data-has-image={!!image}
+      data-has-image-component={!!imageComponent}
+    >
+      {title} - {category}
+    </a>
+  ),
+}));
+
+const categoryOptions: BlogCategoryOption[] = [
+  { value: "all", label: "All Categories" },
+  { value: "tech", label: "Technology" },
+  { value: "news", label: "News" },
+];
+
+const mockArticles = [
+  {
+    slug: "/article-1",
+    title: "Article One",
+    shortDescription: "Desc 1",
+    blogCreationDate: "2024-01-01",
+    category: "tech",
+    cover: {
+      url: "https://img.test/1.jpg",
+      width: 600,
+      height: 338,
+      title: "Cover 1",
+    },
+  },
+  {
+    slug: "article-2",
+    title: "Article Two",
+    shortDescription: "Desc 2",
+    blogCreationDate: "2024-02-01",
+    category: "news",
+    cover: { url: "https://img.test/2.jpg" },
+  },
+  {
+    slug: "article-3",
+    title: "Article Three",
+    shortDescription: "Desc 3",
+    blogCreationDate: "2024-03-01",
+    category: "tech",
+  },
+];
+
+const defaultProps: BlogGridBaseProps = {
+  paginatedArticles: mockArticles,
+  totalArticles: 10,
+  currentPage: 1,
+  totalPages: 3,
+  selectedCategory: categoryOptions[0],
+  categoryOptions,
+  onCategoryChange: jest.fn(),
+  onPageChange: jest.fn(),
+};
+
+describe("BlogGridBase", () => {
+  beforeEach(() => jest.clearAllMocks());
+
+  describe("Rendering", () => {
+    it("renders section with correct attributes", () => {
+      const { container } = render(<BlogGridBase {...defaultProps} />);
+      const section = container.querySelector("section");
+      expect(section).toHaveAttribute("aria-label", "Blog articles");
+      expect(section).toHaveAttribute("data-section-type", "blogs-grid");
+      expect(section).toHaveAttribute("data-section-index", "0");
+    });
+
+    it("renders default title", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByText("recent articles")).toBeInTheDocument();
+    });
+
+    it("renders custom title", () => {
+      render(<BlogGridBase {...defaultProps} title="custom title" />);
+      expect(screen.getByText("custom title")).toBeInTheDocument();
+    });
+
+    it("renders article count", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByText("3 of 10 articles")).toBeInTheDocument();
+    });
+
+    it("renders all blog cards", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("blog-card-0")).toBeInTheDocument();
+      expect(screen.getByTestId("blog-card-1")).toBeInTheDocument();
+      expect(screen.getByTestId("blog-card-2")).toBeInTheDocument();
+    });
+
+    it("renders empty state when no articles", () => {
+      render(<BlogGridBase {...defaultProps} paginatedArticles={[]} />);
+      expect(screen.getByText("No articles found.")).toBeInTheDocument();
+    });
+
+    it("hides category controls when categoryOptions is empty", () => {
+      render(<BlogGridBase {...defaultProps} categoryOptions={[]} />);
+      expect(screen.queryByTestId("category-select")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("Slug handling", () => {
+    it("keeps href unchanged when slug starts with /", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("blog-card-0")).toHaveAttribute(
+        "href",
+        "/article-1"
+      );
+    });
+
+    it("prepends / to slug when it does not start with /", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("blog-card-1")).toHaveAttribute(
+        "href",
+        "/article-2"
+      );
+    });
+  });
+
+  describe("Category filter", () => {
+    it("calls onCategoryChange with selected category", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      fireEvent.change(screen.getByTestId("category-select"), {
+        target: { value: "tech" },
+      });
+      expect(defaultProps.onCategoryChange).toHaveBeenCalledWith({
+        value: "tech",
+        label: "Technology",
+      });
+    });
+
+    it("does nothing when value is falsy", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      fireEvent.change(screen.getByTestId("category-select"), {
+        target: { value: "nonexistent" },
+      });
+      expect(defaultProps.onCategoryChange).not.toHaveBeenCalled();
+    });
+
+    it("works without onCategoryChange callback", () => {
+      render(<BlogGridBase {...defaultProps} onCategoryChange={undefined} />);
+      expect(() => {
+        fireEvent.change(screen.getByTestId("category-select"), {
+          target: { value: "tech" },
+        });
+      }).not.toThrow();
+    });
+  });
+
+  describe("Pagination", () => {
+    it("renders pagination when totalPages > 1", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("pagination")).toBeInTheDocument();
+    });
+
+    it("does not render pagination when totalPages is 1", () => {
+      render(<BlogGridBase {...defaultProps} totalPages={1} />);
+      expect(screen.queryByTestId("pagination")).not.toBeInTheDocument();
+    });
+
+    it("calls onPageChange with page number", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      fireEvent.click(screen.getByTestId("page-next"));
+      expect(defaultProps.onPageChange).toHaveBeenCalledWith(2);
+    });
+
+    it("works without onPageChange callback", () => {
+      render(<BlogGridBase {...defaultProps} onPageChange={undefined} />);
+      expect(() => {
+        fireEvent.click(screen.getByTestId("page-next"));
+      }).not.toThrow();
+    });
+  });
+
+  describe("Cover image handling", () => {
+    it("passes image data when cover has url", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("blog-card-0")).toHaveAttribute(
+        "data-has-image",
+        "true"
+      );
+    });
+
+    it("passes undefined image when no cover", () => {
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("blog-card-2")).toHaveAttribute(
+        "data-has-image",
+        "false"
+      );
+    });
+
+    it("uses default width/height when not provided", () => {
+      // article-2 has cover with url but no width/height
+      render(<BlogGridBase {...defaultProps} />);
+      expect(screen.getByTestId("blog-card-1")).toHaveAttribute(
+        "data-has-image",
+        "true"
+      );
+    });
+
+    it("uses fallback alt when cover title and article title are missing", () => {
+      const articles = [
+        { slug: "no-title", cover: { url: "https://img.test/x.jpg" } },
+      ];
+      render(<BlogGridBase {...defaultProps} paginatedArticles={articles} />);
+      expect(screen.getByTestId("blog-card-0")).toHaveAttribute(
+        "data-has-image",
+        "true"
+      );
+    });
+
+    it("passes imageComponent to BlogCard", () => {
+      const MockImage = (props: any) => <img {...props} />;
+      render(<BlogGridBase {...defaultProps} imageComponent={MockImage} />);
+      expect(screen.getByTestId("blog-card-0")).toHaveAttribute(
+        "data-has-image-component",
+        "true"
+      );
+    });
+  });
+});

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

@@ -0,0 +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");
+    });
+  });
+});