siftlode/frontend/src/components/ui/Pager.dom.test.tsx

// @vitest-environment jsdom
import { useLayoutEffect } from "react";
import { describe, it, expect, vi, afterEach } from "vitest";
import { render, screen, fireEvent, cleanup } from "@testing-library/react";

vi.mock("react-i18next", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));

import Pager from "./Pager";

afterEach(cleanup);

// Rows per page is a short fixed set, so it is the house's segmented control (debt burn 2026-09),
// not a native <select>: one named group, the current size pressed, "All" as size 0.
describe("Pager · rows per page", () => {
  it("offers each size and All as one named group, and reports the pick", () => {
    const onSizeChange = vi.fn();
    render(
      <Pager
        page={0}
        size={25}
        total={120}
        pageSizeOptions={[10, 25, 50, 100]}
        onPageChange={() => {}}
        onSizeChange={onSizeChange}
        sizeLabel="Rows per page"
      />,
    );
    const group = screen.getByRole("group", { name: "Rows per page" });
    expect(group.querySelector('[aria-pressed="true"]')?.textContent).toBe("25");

    fireEvent.click(screen.getByRole("button", { name: "50" }));
    fireEvent.click(screen.getByRole("button", { name: "datatable.all" }));
    expect(onSizeChange.mock.calls).toEqual([[50], [0]]);
  });
});

// The page box DERIVES the current page (E27 S2): it holds a draft only while being edited, so the
// parent moving the page needs no re-sync effect. The layout-phase probe is what proves "derived"
// rather than "re-synced after paint" — a passive effect could not have run yet when it reads.
describe("Pager · the page box follows the page without an effect", () => {
  function Probe({ page, painted }: { page: number; painted: string[] }) {
    useLayoutEffect(() => {
      painted.push(
        (document.querySelector('input[type="number"]') as HTMLInputElement | null)?.value ?? "",
      );
    });
    return (
      <Pager
        page={page}
        size={10}
        total={100}
        pageSizeOptions={[10, 25]}
        onPageChange={() => {}}
        onSizeChange={() => {}}
        sizeLabel="Rows per page"
      />
    );
  }

  it("shows the new page in the first frame after the parent moves it", () => {
    const painted: string[] = [];
    const { rerender } = render(<Probe page={0} painted={painted} />);
    expect(screen.getByLabelText("datatable.pager.pageLabel")).toHaveProperty("value", "1");

    painted.length = 0;
    rerender(<Probe page={4} painted={painted} />);
    expect(painted[0]).toBe("5");
  });

  it("keeps what you type until you commit it, then follows the page again", () => {
    const onPageChange = vi.fn();
    render(
      <Pager
        page={0}
        size={10}
        total={100}
        pageSizeOptions={[10, 25]}
        onPageChange={onPageChange}
        onSizeChange={() => {}}
        sizeLabel="Rows per page"
      />,
    );
    const box = screen.getByLabelText("datatable.pager.pageLabel");
    fireEvent.change(box, { target: { value: "7" } });
    expect(box).toHaveProperty("value", "7");
    fireEvent.keyDown(box, { key: "Enter" });
    expect(onPageChange).toHaveBeenCalledWith(6);
    // The parent in this test never moves, so dropping the draft must put page 1 back — proof the
    // box stopped holding its own copy rather than merely being overwritten.
    expect(box).toHaveProperty("value", "1");
  });

  it("discards an unparseable entry instead of committing it", () => {
    const onPageChange = vi.fn();
    render(
      <Pager
        page={2}
        size={10}
        total={100}
        pageSizeOptions={[10, 25]}
        onPageChange={onPageChange}
        onSizeChange={() => {}}
        sizeLabel="Rows per page"
      />,
    );
    const box = screen.getByLabelText("datatable.pager.pageLabel");
    fireEvent.change(box, { target: { value: "abc" } });
    fireEvent.blur(box);
    expect(onPageChange).not.toHaveBeenCalled();
    expect(box).toHaveProperty("value", "3");
  });
});