@windstream/react-shared-components 0.1.93 → 0.1.95

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/radio-button/index.test.tsx

@@ -0,0 +1,151 @@
+import { RadioButton } from "./index";
+
+import { fireEvent, render, screen } from "@testing-library/react";
+
+describe("RadioButton", () => {
+  const defaultProps = {
+    name: "plan",
+    label: "Option A",
+  };
+
+  it("renders with label text", () => {
+    render(<RadioButton {...defaultProps} />);
+    expect(screen.getByText("Option A")).toBeInTheDocument();
+  });
+
+  it("renders a hidden radio input", () => {
+    const { container } = render(<RadioButton {...defaultProps} />);
+    const input = container.querySelector('input[type="radio"]');
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveClass("hidden");
+  });
+
+  it("sets name and value on the input", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} value="optA" />
+    );
+    const input = container.querySelector('input[type="radio"]');
+    expect(input).toHaveAttribute("name", "plan");
+    expect(input).toHaveAttribute("value", "optA");
+  });
+
+  it("calls onChange with value when clicked", () => {
+    const onChange = jest.fn();
+    render(<RadioButton {...defaultProps} value="optA" onChange={onChange} />);
+    const buttons = screen.getAllByRole("button");
+    fireEvent.click(buttons[0]);
+    expect(onChange).toHaveBeenCalledWith("optA");
+  });
+
+  it("calls onChange with name when no value is provided", () => {
+    const onChange = jest.fn();
+    render(<RadioButton {...defaultProps} onChange={onChange} />);
+    const buttons = screen.getAllByRole("button");
+    fireEvent.click(buttons[0]);
+    expect(onChange).toHaveBeenCalledWith("plan");
+  });
+
+  it("calls onChange when label button is clicked", () => {
+    const onChange = jest.fn();
+    render(<RadioButton {...defaultProps} value="optA" onChange={onChange} />);
+    const buttons = screen.getAllByRole("button");
+    fireEvent.click(buttons[1]);
+    expect(onChange).toHaveBeenCalledWith("optA");
+  });
+
+  it("does not throw when onChange is not provided", () => {
+    render(<RadioButton {...defaultProps} />);
+    const buttons = screen.getAllByRole("button");
+    expect(() => fireEvent.click(buttons[0])).not.toThrow();
+  });
+
+  it("shows checked indicator when checked", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} checked={true} />
+    );
+    const indicator = container.querySelector(".bg-bg-fill-brand");
+    expect(indicator).toBeInTheDocument();
+  });
+
+  it("does not show checked indicator when unchecked", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} checked={false} />
+    );
+    const indicator = container.querySelector(".bg-bg-fill-brand");
+    expect(indicator).not.toBeInTheDocument();
+  });
+
+  it("applies border-brand class to outer button when checked", () => {
+    render(<RadioButton {...defaultProps} checked={true} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0].className).toContain("border-border-brand");
+  });
+
+  it("renders subText", () => {
+    render(<RadioButton {...defaultProps} subText="Extra info" />);
+    expect(screen.getByText("Extra info")).toBeInTheDocument();
+  });
+
+  it("applies custom className to the label wrapper", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} className="custom-wrapper" />
+    );
+    const label = container.querySelector("label");
+    expect(label?.className).toContain("custom-wrapper");
+  });
+
+  it("applies custom labelClassName", () => {
+    render(<RadioButton {...defaultProps} labelClassName="text-bold" />);
+    const labelDiv = screen.getByText("Option A");
+    expect(labelDiv.className).toContain("text-bold");
+  });
+
+  it("passes data-cy to the label", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} data-cy="radio-cy" />
+    );
+    const label = container.querySelector('[data-cy="radio-cy"]');
+    expect(label).toBeInTheDocument();
+  });
+
+  it("passes labelProps to the label element", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} labelProps={{ id: "custom-label-id" }} />
+    );
+    const label = container.querySelector("#custom-label-id");
+    expect(label).toBeInTheDocument();
+  });
+
+  it("disables buttons and input when disabled", () => {
+    const { container } = render(
+      <RadioButton {...defaultProps} disabled={true} />
+    );
+    const input = container.querySelector('input[type="radio"]');
+    const buttons = screen.getAllByRole("button");
+    expect(input).toBeDisabled();
+    expect(buttons[0]).toBeDisabled();
+    expect(buttons[1]).toBeDisabled();
+  });
+
+  it("applies opacity-50 class when disabled", () => {
+    render(<RadioButton {...defaultProps} disabled={true} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0].className).toContain("opacity-50");
+  });
+
+  it("sets tabIndex -1 on label button when no label is provided", () => {
+    render(<RadioButton name="plan" />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[1]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("sets tabIndex 0 on label button when label is provided", () => {
+    render(<RadioButton {...defaultProps} />);
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[1]).toHaveAttribute("tabindex", "0");
+  });
+
+  it("has the correct displayName", () => {
+    expect(RadioButton.displayName).toBe("RadioButton");
+  });
+});