@windstream/react-shared-components 0.1.93 → 0.1.94

package/src/components/pagination/index.test.tsx

@@ -0,0 +1,521 @@
+import React from "react";
+import { Pagination } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+// Mock dependencies
+jest.mock("@shared/components/button", () => ({
+  Button: ({ children, onClick, disabled, className, ...rest }: any) => (
+    <button
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+      {...rest}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+jest.mock("@shared/components/material-icon", () => ({
+  MaterialIcon: ({ name, ...rest }: any) => (
+    <span data-testid={`icon-${name}`} {...rest}>
+      {name}
+    </span>
+  ),
+}));
+
+describe("Pagination", () => {
+  const mockOnPageChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnPageChange.mockClear();
+  });
+
+  describe("Rendering", () => {
+    it("renders the pagination nav with default aria-label", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(screen.getByRole("navigation")).toHaveAttribute(
+        "aria-label",
+        "Pagination"
+      );
+    });
+
+    it("renders with custom aria-label", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+          ariaLabel="Blog pages"
+        />
+      );
+      expect(screen.getByRole("navigation")).toHaveAttribute(
+        "aria-label",
+        "Blog pages"
+      );
+    });
+
+    it("renders previous and next navigation buttons", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to previous page" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to next page" })
+      ).toBeInTheDocument();
+    });
+
+    it("renders chevron icons in nav buttons", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(screen.getByTestId("icon-chevron_left")).toBeInTheDocument();
+      expect(screen.getByTestId("icon-chevron_right")).toBeInTheDocument();
+    });
+  });
+
+  describe("Button states", () => {
+    it("disables previous button on first page", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to previous page" })
+      ).toBeDisabled();
+    });
+
+    it("enables previous button when not on first page", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to previous page" })
+      ).not.toBeDisabled();
+    });
+
+    it("disables next button on last page", () => {
+      render(
+        <Pagination
+          currentPage={5}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to next page" })
+      ).toBeDisabled();
+    });
+
+    it("enables next button when not on last page", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to next page" })
+      ).not.toBeDisabled();
+    });
+
+    it("marks current page with aria-current='page'", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 3" })
+      ).toHaveAttribute("aria-current", "page");
+    });
+
+    it("does not set aria-current on non-current pages", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).not.toHaveAttribute("aria-current");
+    });
+
+    it("applies active class to current page button", () => {
+      render(
+        <Pagination
+          currentPage={2}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      const activeBtn = screen.getByRole("button", { name: "Go to page 2" });
+      expect(activeBtn.className).toContain("bg-bg-surface-active");
+      expect(activeBtn.className).toContain("font-bold");
+    });
+
+    it("does not apply active class to non-current page buttons", () => {
+      render(
+        <Pagination
+          currentPage={2}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      const inactiveBtn = screen.getByRole("button", {
+        name: "Go to page 1",
+      });
+      expect(inactiveBtn.className).not.toContain("bg-bg-surface-active");
+    });
+  });
+
+  describe("Page navigation clicks", () => {
+    it("calls onPageChange with previous page when previous button clicked", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      fireEvent.click(
+        screen.getByRole("button", { name: "Go to previous page" })
+      );
+      expect(mockOnPageChange).toHaveBeenCalledWith(2);
+    });
+
+    it("calls onPageChange with next page when next button clicked", () => {
+      render(
+        <Pagination
+          currentPage={3}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      fireEvent.click(screen.getByRole("button", { name: "Go to next page" }));
+      expect(mockOnPageChange).toHaveBeenCalledWith(4);
+    });
+
+    it("calls onPageChange with clicked page number", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      fireEvent.click(screen.getByRole("button", { name: "Go to page 4" }));
+      expect(mockOnPageChange).toHaveBeenCalledWith(4);
+    });
+
+    it("does not call onPageChange when disabled previous button is clicked", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      fireEvent.click(
+        screen.getByRole("button", { name: "Go to previous page" })
+      );
+      expect(mockOnPageChange).not.toHaveBeenCalled();
+    });
+
+    it("does not call onPageChange when disabled next button is clicked", () => {
+      render(
+        <Pagination
+          currentPage={5}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      fireEvent.click(screen.getByRole("button", { name: "Go to next page" }));
+      expect(mockOnPageChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("buildPageItems algorithm — total pages <= 7", () => {
+    it("renders all pages for totalPages=1", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={1}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).toBeInTheDocument();
+      expect(screen.queryByText("…")).not.toBeInTheDocument();
+    });
+
+    it("renders all pages for totalPages=5", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={5}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      for (let i = 1; i <= 5; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+      expect(screen.queryByText("…")).not.toBeInTheDocument();
+    });
+
+    it("renders all pages for totalPages=7", () => {
+      render(
+        <Pagination
+          currentPage={4}
+          totalPages={7}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      for (let i = 1; i <= 7; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+      expect(screen.queryByText("…")).not.toBeInTheDocument();
+    });
+  });
+
+  describe("buildPageItems algorithm — current near start (current <= 4)", () => {
+    it("shows pages 1-5 and ellipsis then last page when on page 1", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      for (let i = 1; i <= 5; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+      expect(screen.getByText("…")).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 10" })
+      ).toBeInTheDocument();
+      expect(
+        screen.queryByRole("button", { name: "Go to page 6" })
+      ).not.toBeInTheDocument();
+    });
+
+    it("shows pages 1-5, ellipsis, last for page 4 of 10", () => {
+      render(
+        <Pagination
+          currentPage={4}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      for (let i = 1; i <= 5; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+      expect(screen.getByText("…")).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 10" })
+      ).toBeInTheDocument();
+    });
+  });
+
+  describe("buildPageItems algorithm — current near end (current >= total - 3)", () => {
+    it("shows first page, ellipsis, last 5 pages when on last page", () => {
+      render(
+        <Pagination
+          currentPage={10}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).toBeInTheDocument();
+      expect(screen.getByText("…")).toBeInTheDocument();
+      for (let i = 6; i <= 10; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+    });
+
+    it("shows first, ellipsis, last 5 for page 7 of 10", () => {
+      render(
+        <Pagination
+          currentPage={7}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).toBeInTheDocument();
+      expect(screen.getByText("…")).toBeInTheDocument();
+      for (let i = 6; i <= 10; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+    });
+  });
+
+  describe("buildPageItems algorithm — current in middle", () => {
+    it("shows first, ellipsis, current-1/current/current+1, ellipsis, last", () => {
+      render(
+        <Pagination
+          currentPage={5}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 4" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 5" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 6" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 10" })
+      ).toBeInTheDocument();
+      const ellipses = screen.getAllByText("…");
+      expect(ellipses).toHaveLength(2);
+    });
+
+    it("renders ellipsis as non-interactive with aria-hidden", () => {
+      render(
+        <Pagination
+          currentPage={5}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      const ellipses = screen.getAllByText("…");
+      ellipses.forEach(el => {
+        expect(el).toHaveAttribute("aria-hidden", "true");
+        expect(el.tagName).toBe("SPAN");
+      });
+    });
+
+    it("shows correct pages for page 6 of 10", () => {
+      render(
+        <Pagination
+          currentPage={6}
+          totalPages={10}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 5" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 6" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 7" })
+      ).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Go to page 10" })
+      ).toBeInTheDocument();
+      expect(screen.getAllByText("…")).toHaveLength(2);
+    });
+  });
+
+  describe("Edge cases", () => {
+    it("handles single page (both nav buttons disabled)", () => {
+      render(
+        <Pagination
+          currentPage={1}
+          totalPages={1}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to previous page" })
+      ).toBeDisabled();
+      expect(
+        screen.getByRole("button", { name: "Go to next page" })
+      ).toBeDisabled();
+    });
+
+    it("handles totalPages=8 with current=4 (near-start boundary)", () => {
+      render(
+        <Pagination
+          currentPage={4}
+          totalPages={8}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      for (let i = 1; i <= 5; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+      expect(
+        screen.getByRole("button", { name: "Go to page 8" })
+      ).toBeInTheDocument();
+    });
+
+    it("handles totalPages=8 with current=5 (near-end boundary)", () => {
+      render(
+        <Pagination
+          currentPage={5}
+          totalPages={8}
+          onPageChange={mockOnPageChange}
+        />
+      );
+      expect(
+        screen.getByRole("button", { name: "Go to page 1" })
+      ).toBeInTheDocument();
+      for (let i = 4; i <= 8; i++) {
+        expect(
+          screen.getByRole("button", { name: `Go to page ${i}` })
+        ).toBeInTheDocument();
+      }
+    });
+  });
+});

package/src/components/pagination/index.tsx

@@ -1,91 +1,91 @@
-"use client";
-
-import React from "react";
-import { PaginationProps } from "./types";
-
-import { Button } from "@shared/components/button";
-import { MaterialIcon } from "@shared/components/material-icon";
-
-export const Pagination: React.FC<PaginationProps> = ({
-  currentPage,
-  totalPages,
-  onPageChange,
-  ariaLabel = "Pagination",
-}: PaginationProps) => {
-  const pageItems = buildPageItems(currentPage, totalPages);
-
-  const navBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
-
-  const pageBtnBase =
-    "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
-
-  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
-
-  return (
-    <nav
-      className="flex items-center justify-center gap-1 px-6 pb-12"
-      aria-label={ariaLabel}
-    >
-      {/* Previous */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage - 1)}
-        disabled={currentPage === 1}
-        aria-label="Go to previous page"
-      >
-        <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
-      </Button>
-
-      {/* Page numbers */}
-      {pageItems.map((item, idx) =>
-        item === "..." ? (
-          <span
-            key={`ellipsis-${idx}`}
-            className="inline-flex h-9 w-9 cursor-default items-center justify-center text-body2 text-gray-500"
-            aria-hidden="true"
-          >
-            …
-          </span>
-        ) : (
-          <Button
-            key={item}
-            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
-            onClick={() => onPageChange(item)}
-            aria-label={`Go to page ${item}`}
-            aria-current={item === currentPage ? "page" : undefined}
-          >
-            {item}
-          </Button>
-        )
-      )}
-
-      {/* Next */}
-      <Button
-        className={navBtnBase}
-        onClick={() => onPageChange(currentPage + 1)}
-        disabled={currentPage === totalPages}
-        aria-label="Go to next page"
-      >
-        <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
-      </Button>
-    </nav>
-  );
-};
-
-/** Returns an array of page numbers and ellipsis to render. */
-function buildPageItems(current: number, total: number): (number | "...")[] {
-  if (total <= 7) {
-    return Array.from({ length: total }, (_, i) => i + 1);
-  }
-
-  if (current <= 4) {
-    return [1, 2, 3, 4, 5, "...", total];
-  }
-
-  if (current >= total - 3) {
-    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
-  }
-
-  return [1, "...", current - 1, current, current + 1, "...", total];
-}
+"use client";
+
+import React from "react";
+import { PaginationProps } from "./types";
+
+import { Button } from "@shared/components/button";
+import { MaterialIcon } from "@shared/components/material-icon";
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  ariaLabel = "Pagination",
+}: PaginationProps) => {
+  const pageItems = buildPageItems(currentPage, totalPages);
+
+  const navBtnBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent cursor-pointer transition-colors duration-150 hover:border-text-brand hover:text-text-brand disabled:opacity-40 disabled:cursor-not-allowed";
+
+  const pageBtnBase =
+    "inline-flex items-center justify-center w-9 h-9 rounded-lg text-body2 text-gray-700 bg-transparent border-none cursor-pointer transition-colors duration-150 hover:bg-gray-100 hover:text-gray-900";
+
+  const pageBtnActive = "bg-bg-surface-active font-bold hover:bg-bg-gray-300";
+
+  return (
+    <nav
+      className="flex items-center justify-center gap-1 px-6 pb-12"
+      aria-label={ariaLabel}
+    >
+      {/* Previous */}
+      <Button
+        className={navBtnBase}
+        onClick={() => onPageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+        aria-label="Go to previous page"
+      >
+        <MaterialIcon name="chevron_left" size={32} aria-hidden="true" />
+      </Button>
+
+      {/* Page numbers */}
+      {pageItems.map((item, idx) =>
+        item === "..." ? (
+          <span
+            key={`ellipsis-${idx}`}
+            className="inline-flex h-9 w-9 cursor-default items-center justify-center text-body2 text-gray-500"
+            aria-hidden="true"
+          >
+            …
+          </span>
+        ) : (
+          <Button
+            key={item}
+            className={`${pageBtnBase} ${item === currentPage ? pageBtnActive : ""}`}
+            onClick={() => onPageChange(item)}
+            aria-label={`Go to page ${item}`}
+            aria-current={item === currentPage ? "page" : undefined}
+          >
+            {item}
+          </Button>
+        )
+      )}
+
+      {/* Next */}
+      <Button
+        className={navBtnBase}
+        onClick={() => onPageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+        aria-label="Go to next page"
+      >
+        <MaterialIcon name="chevron_right" size={32} aria-hidden="true" />
+      </Button>
+    </nav>
+  );
+};
+
+/** Returns an array of page numbers and ellipsis to render. */
+function buildPageItems(current: number, total: number): (number | "...")[] {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  if (current <= 4) {
+    return [1, 2, 3, 4, 5, "...", total];
+  }
+
+  if (current >= total - 3) {
+    return [1, "...", total - 4, total - 3, total - 2, total - 1, total];
+  }
+
+  return [1, "...", current - 1, current, current + 1, "...", total];
+}