PettyUI/packages/core/tests/components/pagination/pagination.test.tsx

// packages/core/tests/components/pagination/pagination.test.tsx
import { fireEvent, render, screen } from "@solidjs/testing-library";
import { describe, expect, it, vi } from "vitest";
import { Pagination } from "../../../src/components/pagination/index";

describe("Pagination – navigation and buttons", () => {
  it("renders with role=navigation", () => {
    render(() => (
      <Pagination page={1} totalPages={5} onPageChange={() => {}}>
        <Pagination.Previous />
        <Pagination.Next />
      </Pagination>
    ));
    expect(screen.getByRole("navigation")).toBeTruthy();
  });

  it("previous button is disabled on first page", () => {
    render(() => (
      <Pagination page={1} totalPages={5} onPageChange={() => {}}>
        <Pagination.Previous />
      </Pagination>
    ));
    expect(screen.getByRole("button")).toBeDisabled();
  });

  it("next button is disabled on last page", () => {
    render(() => (
      <Pagination page={5} totalPages={5} onPageChange={() => {}}>
        <Pagination.Next />
      </Pagination>
    ));
    expect(screen.getByRole("button")).toBeDisabled();
  });
});

describe("Pagination – page change callbacks", () => {
  it("clicking previous calls onPageChange with page-1", () => {
    const onChange = vi.fn();
    render(() => (
      <Pagination page={3} totalPages={5} onPageChange={onChange}>
        <Pagination.Previous />
      </Pagination>
    ));
    fireEvent.click(screen.getByRole("button"));
    expect(onChange).toHaveBeenCalledWith(2);
  });

  it("clicking next calls onPageChange with page+1", () => {
    const onChange = vi.fn();
    render(() => (
      <Pagination page={3} totalPages={5} onPageChange={onChange}>
        <Pagination.Next />
      </Pagination>
    ));
    fireEvent.click(screen.getByRole("button"));
    expect(onChange).toHaveBeenCalledWith(4);
  });

  it("Items renders page buttons via render prop", () => {
    render(() => (
      <Pagination page={2} totalPages={3} onPageChange={() => {}}>
        <Pagination.Items>
          {(item) =>
            item.type === "page" ? (
              <button type="button" aria-current={item.isActive ? "page" : undefined}>
                {item.page}
              </button>
            ) : (
              <span>…</span>
            )
          }
        </Pagination.Items>
      </Pagination>
    ));
    const buttons = screen.getAllByRole("button");
    const activePage = buttons.find((b) => b.getAttribute("aria-current") === "page");
    expect(activePage?.textContent).toBe("2");
  });
});