diff --git a/tests/Pagination.test.svelte b/tests/Pagination.test.svelte
deleted file mode 100644
index 7c26b9e5..00000000
--- a/tests/Pagination.test.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-
-
- {
- console.log(e.detail); // { pageSize?: number, page?: number }
- }}
- on:update={(e) => {
- console.log(e.detail); // { pageSize: number; page: number; }
- }}
-/>
-
-
-
-
-
-
-
-
-
-
diff --git a/tests/Pagination/Pagination.test.svelte b/tests/Pagination/Pagination.test.svelte
new file mode 100644
index 00000000..63b4005e
--- /dev/null
+++ b/tests/Pagination/Pagination.test.svelte
@@ -0,0 +1,41 @@
+
+
+ {
+ console.log("change", e.detail);
+ }}
+ on:click:button--previous={(e) => {
+ console.log("previous", e.detail);
+ }}
+ on:click:button--next={(e) => {
+ console.log("next", e.detail);
+ }}
+ on:update={(e) => {
+ console.log("update", e.detail);
+ }}
+/>
diff --git a/tests/Pagination/Pagination.test.ts b/tests/Pagination/Pagination.test.ts
new file mode 100644
index 00000000..027647d2
--- /dev/null
+++ b/tests/Pagination/Pagination.test.ts
@@ -0,0 +1,199 @@
+import { render, screen, within } from "@testing-library/svelte";
+import { user } from "../setup-tests";
+import Pagination from "./Pagination.test.svelte";
+
+describe("Pagination", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ it("should render with default props", () => {
+ render(Pagination);
+
+ expect(screen.getByText("Items per page:")).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: "Next page" }),
+ ).toBeInTheDocument();
+ expect(
+ screen.getByRole("button", { name: "Previous page" }),
+ ).toBeInTheDocument();
+ });
+
+ it("should render with custom total items", () => {
+ render(Pagination, {
+ props: { totalItems: 102 },
+ });
+
+ expect(screen.getByText("1–10 of 102 items")).toBeInTheDocument();
+ });
+
+ it("should handle custom page sizes", () => {
+ render(Pagination, {
+ props: {
+ totalItems: 102,
+ pageSizes: [10, 15, 20],
+ pageSize: 15,
+ },
+ });
+
+ const select = screen.getByRole("combobox", { name: "Items per page:" });
+ expect(select).toHaveValue("15");
+
+ const options = within(select).getAllByRole("option");
+ expect(options).toHaveLength(3);
+ expect(options[0]).toHaveTextContent("10");
+ expect(options[1]).toHaveTextContent("15");
+ expect(options[2]).toHaveTextContent("20");
+ });
+
+ it("should handle page navigation", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(Pagination, {
+ props: { totalItems: 102, page: 1 },
+ });
+
+ const nextButton = screen.getByRole("button", { name: "Next page" });
+ await user.click(nextButton);
+ expect(consoleLog).toHaveBeenCalledWith("next", { page: 2 });
+ expect(consoleLog).toHaveBeenCalledWith("change", { page: 2 });
+
+ const prevButton = screen.getByRole("button", { name: "Previous page" });
+ await user.click(prevButton);
+ expect(consoleLog).toHaveBeenCalledWith("previous", { page: 1 });
+ expect(consoleLog).toHaveBeenCalledWith("change", { page: 1 });
+ });
+
+ it("should handle page size changes", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(Pagination, {
+ props: {
+ totalItems: 102,
+ pageSizes: [10, 15, 20],
+ },
+ });
+
+ const select = screen.getByRole("combobox", { name: "Items per page:" });
+ await user.selectOptions(select, "15");
+
+ expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+ expect(consoleLog).toHaveBeenCalledWith("update", {
+ pageSize: 15,
+ page: 1,
+ });
+ });
+
+ it("should handle page selection", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(Pagination, {
+ props: { totalItems: 102, pageSizes: [5, 10, 15] },
+ });
+
+ const pageSelect = screen.getAllByRole("combobox");
+ await user.selectOptions(pageSelect[0], "5");
+
+ expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+ expect(consoleLog).toHaveBeenCalledWith("update", { pageSize: 5, page: 1 });
+ });
+
+ it("should disable navigation buttons when disabled", () => {
+ render(Pagination, {
+ props: { disabled: true },
+ });
+
+ const prevButton = screen.getByRole("button", { name: "Previous page" });
+ const nextButton = screen.getByRole("button", { name: "Next page" });
+
+ expect(prevButton).toBeDisabled();
+ expect(nextButton).toBeDisabled();
+ });
+
+ it("should handle custom button text", () => {
+ render(Pagination, {
+ props: {
+ forwardText: "Next",
+ backwardText: "Previous",
+ },
+ });
+
+ expect(
+ screen.getByRole("button", { name: "Previous" }),
+ ).toBeInTheDocument();
+ expect(screen.getByRole("button", { name: "Next" })).toBeInTheDocument();
+ });
+
+ it("should handle custom items per page text", () => {
+ render(Pagination, {
+ props: {
+ itemsPerPageText: "Show:",
+ },
+ });
+
+ expect(screen.getByText("Show:")).toBeInTheDocument();
+ });
+
+ it("should handle disabled page input", () => {
+ render(Pagination, {
+ props: { pageInputDisabled: true },
+ });
+
+ expect(
+ screen.queryByRole("combobox", { name: "Page number" }),
+ ).not.toBeInTheDocument();
+ });
+
+ it("should handle disabled page size input", () => {
+ render(Pagination, {
+ props: { pageSizeInputDisabled: true },
+ });
+
+ expect(
+ screen.queryByRole("combobox", { name: "Items per page:" }),
+ ).not.toBeInTheDocument();
+ });
+
+ it("should handle unknown pages", () => {
+ render(Pagination, {
+ props: { pagesUnknown: true },
+ });
+
+ expect(screen.getByText("1–10 items")).toBeInTheDocument();
+ expect(screen.getByText("page 1")).toBeInTheDocument();
+ });
+
+ it("should update when page or pageSize changes", async () => {
+ const consoleLog = vi.spyOn(console, "log");
+ render(Pagination, {
+ props: { totalItems: 102, pageSizes: [5, 10, 15] },
+ });
+
+ // Change page size
+ const pageSizeSelect = screen.getAllByRole("combobox");
+ await user.selectOptions(pageSizeSelect[0], "15");
+ expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+ expect(consoleLog).toHaveBeenCalledWith("update", {
+ pageSize: 15,
+ page: 1,
+ });
+
+ // Change page
+ const pageSelect = screen.getAllByRole("combobox");
+ await user.selectOptions(pageSelect[1], "2");
+ expect(consoleLog).toHaveBeenCalledWith("change", { pageSize: 10 });
+ expect(consoleLog).toHaveBeenCalledWith("update", {
+ pageSize: 15,
+ page: 2,
+ });
+ });
+
+ it("should handle edge cases", () => {
+ render(Pagination, {
+ props: {
+ totalItems: 0,
+ page: 1,
+ pageSize: 10,
+ },
+ });
+
+ expect(screen.getByText("0–0 of 0 items")).toBeInTheDocument();
+ });
+});