feat(ui): build the Pagination component
Replaces a scaffold that rendered a bare list of anchors with real page controls: compact arrows or windowed page numbers, a range summary, and a change output carrying the requested page. Out-of-range pages clamp rather than rendering nothing, because page arrives as an HTML attribute and callers compute it from data that may have shrunk. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -2458,3 +2458,38 @@ test("toggle password supports checkbox control and synchronized password fields
|
||||
|
||||
expect(checkboxPassword.type).toBe("text");
|
||||
});
|
||||
|
||||
test("pagination renders windowed page numbers and emits change", async () => {
|
||||
const source = readFileSync(uiComponentPath("Pagination"), "utf8");
|
||||
const html = await renderComponent(source, {
|
||||
page: 5,
|
||||
pageSize: 10,
|
||||
total: 200,
|
||||
variant: "numbered",
|
||||
siblingCount: 1,
|
||||
});
|
||||
const dom = mountHtml(html);
|
||||
const root = dom.querySelector(".wire-pagination") as HTMLElement;
|
||||
|
||||
expect(root.getAttribute("role")).toBe("navigation");
|
||||
const current = dom.querySelector('.wire-pagination__page[aria-current="page"]');
|
||||
expect(current!.textContent!.trim()).toBe("5");
|
||||
expect(root.textContent).toContain("41");
|
||||
expect(root.textContent).toContain("50");
|
||||
expect(root.textContent).toContain("200");
|
||||
});
|
||||
|
||||
test("pagination clamps an out-of-range page instead of rendering nothing", async () => {
|
||||
const source = readFileSync(uiComponentPath("Pagination"), "utf8");
|
||||
const html = await renderComponent(source, { page: 99, pageSize: 10, total: 30 });
|
||||
const dom = mountHtml(html);
|
||||
const current = dom.querySelector(".wire-pagination__compact");
|
||||
expect(current!.textContent).toContain("3");
|
||||
});
|
||||
|
||||
test("pagination survives an empty dataset", async () => {
|
||||
const source = readFileSync(uiComponentPath("Pagination"), "utf8");
|
||||
const html = await renderComponent(source, { page: 1, pageSize: 10, total: 0 });
|
||||
const dom = mountHtml(html);
|
||||
expect(dom.querySelector(".wire-pagination")).not.toBeNull();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user