@windstream/react-shared-components 0.1.93 → 0.1.94

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/blogs-grid-base/index.tsx

@@ -1,119 +1,119 @@
-import { BlogCategoryOption, BlogGridBaseProps } from "./types";
-
-import { Pagination } from "@shared/components/pagination";
-import { Select } from "@shared/components/select";
-import { Text } from "@shared/components/text";
-import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
-
-export function BlogGridBase({
-  title = "recent articles",
-  paginatedArticles,
-  totalArticles,
-  currentPage,
-  totalPages,
-  selectedCategory,
-  categoryOptions,
-  onCategoryChange,
-  onPageChange,
-  imageComponent,
-}: BlogGridBaseProps) {
-  function handleCategoryChange(value: unknown) {
-    if (!value || Array.isArray(value)) return;
-    const cat = value as BlogCategoryOption;
-    onCategoryChange?.(cat);
-  }
-
-  function handlePageChange(page: number) {
-    onPageChange?.(page);
-  }
-
-  return (
-    <section
-      aria-label="Blog articles"
-      data-section-type={"blogs-grid"}
-      data-section-index={"0"}
-    >
-      {/* Controls bar */}
-      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
-        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
-          {title}
-        </Text>
-
-        {categoryOptions.length > 0 && (
-          <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
-            {/* Showing count */}
-            <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
-              <Text as="span" className="hidden md:block">
-                showing
-              </Text>
-              <strong className="block text-nowrap font-bold text-text-info">
-                <Text as="span" className="md:hidden">
-                  showing{" "}
-                </Text>
-                {paginatedArticles.length} of {totalArticles} articles
-              </strong>
-            </Text>
-
-            {/* Filter dropdown */}
-            <Select
-              options={categoryOptions}
-              value={selectedCategory}
-              onChange={handleCategoryChange}
-              className="w-full md:w-[280px]"
-            />
-          </div>
-        )}
-      </div>
-
-      {/* Articles grid */}
-      {paginatedArticles.length > 0 ? (
-        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
-          {paginatedArticles.map((article, index) => {
-            const href = article.slug.startsWith("/")
-              ? article.slug
-              : `/${article.slug}`;
-            const coverImage = article?.cover?.url
-              ? {
-                  src: article?.cover?.url,
-                  alt:
-                    article?.cover?.title ||
-                    article?.title ||
-                    "Blog article image",
-                  width: article?.cover?.width || 600,
-                  height: article?.cover?.height || 338,
-                }
-              : undefined;
-
-            return (
-              <BlogCard
-                key={article.slug}
-                href={href}
-                title={article.title}
-                description={article.shortDescription}
-                date={article.blogCreationDate}
-                category={article.category}
-                image={coverImage}
-                imageComponent={imageComponent}
-                index={index}
-              />
-            );
-          })}
-        </div>
-      ) : (
-        <Text className="px-6 py-12 text-center text-text-info">
-          No articles found.
-        </Text>
-      )}
-
-      {/* Pagination */}
-      {totalPages > 1 && (
-        <Pagination
-          currentPage={currentPage}
-          totalPages={totalPages}
-          onPageChange={handlePageChange}
-          ariaLabel="Blog article pagination"
-        />
-      )}
-    </section>
-  );
-}
+import { BlogCategoryOption, BlogGridBaseProps } from "./types";
+
+import { Pagination } from "@shared/components/pagination";
+import { Select } from "@shared/components/select";
+import { Text } from "@shared/components/text";
+import { BlogCard } from "@shared/contentful/blocks/cards/blog-card";
+
+export function BlogGridBase({
+  title = "recent articles",
+  paginatedArticles,
+  totalArticles,
+  currentPage,
+  totalPages,
+  selectedCategory,
+  categoryOptions,
+  onCategoryChange,
+  onPageChange,
+  imageComponent,
+}: BlogGridBaseProps) {
+  function handleCategoryChange(value: unknown) {
+    if (!value || Array.isArray(value)) return;
+    const cat = value as BlogCategoryOption;
+    onCategoryChange?.(cat);
+  }
+
+  function handlePageChange(page: number) {
+    onPageChange?.(page);
+  }
+
+  return (
+    <section
+      aria-label="Blog articles"
+      data-section-type={"blogs-grid"}
+      data-section-index={"0"}
+    >
+      {/* Controls bar */}
+      <div className="mx-auto flex max-w-[1200px] flex-wrap items-center justify-between gap-3 px-6 pb-6">
+        <Text className="w-full text-center text-heading5 font-black lowercase text-text-secondary md:w-auto md:text-left">
+          {title}
+        </Text>
+
+        {categoryOptions.length > 0 && (
+          <div className="flex w-full flex-col-reverse gap-3 md:w-auto md:flex-row md:items-center md:gap-6">
+            {/* Showing count */}
+            <Text className="whitespace-nowrap text-center text-label3 font-bold text-text-info md:text-right md:text-label2">
+              <Text as="span" className="hidden md:block">
+                showing
+              </Text>
+              <strong className="block text-nowrap font-bold text-text-info">
+                <Text as="span" className="md:hidden">
+                  showing{" "}
+                </Text>
+                {paginatedArticles.length} of {totalArticles} articles
+              </strong>
+            </Text>
+
+            {/* Filter dropdown */}
+            <Select
+              options={categoryOptions}
+              value={selectedCategory}
+              onChange={handleCategoryChange}
+              className="w-full md:w-[280px]"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Articles grid */}
+      {paginatedArticles.length > 0 ? (
+        <div className="mx-auto grid max-w-[1200px] grid-cols-1 gap-6 px-5 pb-16 sm:grid-cols-2 lg:grid-cols-3">
+          {paginatedArticles.map((article, index) => {
+            const href = article.slug.startsWith("/")
+              ? article.slug
+              : `/${article.slug}`;
+            const coverImage = article?.cover?.url
+              ? {
+                  src: article?.cover?.url,
+                  alt:
+                    article?.cover?.title ||
+                    article?.title ||
+                    "Blog article image",
+                  width: article?.cover?.width || 600,
+                  height: article?.cover?.height || 338,
+                }
+              : undefined;
+
+            return (
+              <BlogCard
+                key={article.slug}
+                href={href}
+                title={article.title}
+                description={article.shortDescription}
+                date={article.blogCreationDate}
+                category={article.category}
+                image={coverImage}
+                imageComponent={imageComponent}
+                index={index}
+              />
+            );
+          })}
+        </div>
+      ) : (
+        <Text className="px-6 py-12 text-center text-text-info">
+          No articles found.
+        </Text>
+      )}
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <Pagination
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onPageChange={handlePageChange}
+          ariaLabel="Blog article pagination"
+        />
+      )}
+    </section>
+  );
+}

package/src/contentful/blocks/blogs-grid-base/types.ts

@@ -1,36 +1,36 @@
-import React from "react";
-
-import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
-
-export interface BlogCardProps {
-  slug: string;
-  title?: string;
-  shortDescription?: string;
-  blogCreationDate?: string;
-  category?: string;
-  cover?: {
-    url: string;
-    width?: number;
-    height?: number;
-    title?: string;
-  };
-}
-
-export interface BlogGridBaseProps {
-  title?: string;
-  paginatedArticles: BlogCardProps[];
-  totalArticles: number;
-  currentPage: number;
-  totalPages: number;
-  selectedCategory: BlogCategoryOption;
-  categoryOptions: BlogCategoryOption[];
-  onCategoryChange?: (category: BlogCategoryOption) => void;
-  onPageChange?: (page: number) => void;
-  /** Pass next/image's Image component here to enable image optimization */
-  imageComponent?: React.ComponentType<BlogCardImageProps>;
-}
-
-export interface BlogCategoryOption {
-  value: string;
-  label: string;
-}
+import React from "react";
+
+import { BlogCardImageProps } from "@shared/contentful/blocks/cards/blog-card/types";
+
+export interface BlogCardProps {
+  slug: string;
+  title?: string;
+  shortDescription?: string;
+  blogCreationDate?: string;
+  category?: string;
+  cover?: {
+    url: string;
+    width?: number;
+    height?: number;
+    title?: string;
+  };
+}
+
+export interface BlogGridBaseProps {
+  title?: string;
+  paginatedArticles: BlogCardProps[];
+  totalArticles: number;
+  currentPage: number;
+  totalPages: number;
+  selectedCategory: BlogCategoryOption;
+  categoryOptions: BlogCategoryOption[];
+  onCategoryChange?: (category: BlogCategoryOption) => void;
+  onPageChange?: (page: number) => void;
+  /** Pass next/image's Image component here to enable image optimization */
+  imageComponent?: React.ComponentType<BlogCardImageProps>;
+}
+
+export interface BlogCategoryOption {
+  value: string;
+  label: string;
+}