80 lines
2.5 KiB
TypeScript
80 lines
2.5 KiB
TypeScript
// 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");
|
||
});
|
||
});
|