sts-sponsors team mailing list archive

[Peter Makowski <mp+442000@xxxxxxxxxxxxxxxxxx>]

Peter Makowski has proposed merging ~petermakowski/maas-site-manager:pagination-e2e-test into maas-site-manager:main.

Commit message:
fix pagination input index
- add e2e test for pagination
- add playwright yarn scripts


Requested reviews:
  MAAS Committers (maas-committers)

For more details, see:
https://code.launchpad.net/~petermakowski/maas-site-manager/+git/site-manager/+merge/442000
-- 
Your team MAAS Committers is requested to review the proposed merge of ~petermakowski/maas-site-manager:pagination-e2e-test into maas-site-manager:main.

diff --git a/frontend/package.json b/frontend/package.json
index 123987d..d2d5dd1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,8 @@
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "preview": "vite preview",
+    "playwright-test": "playwright test",
+    "playwright-ui": "playwright test --ui",
     "lint": "npmPkgJsonLint . && tsc && eslint . --ext .ts,.tsx",
     "lint-fix": "eslint . --ext .ts,.tsx --fix",
     "upgrade-all": "yarn-upgrade-all -E"
diff --git a/frontend/src/components/base/TablePagination/TablePagination.tsx b/frontend/src/components/base/TablePagination/TablePagination.tsx
index c716638..070f187 100644
--- a/frontend/src/components/base/TablePagination/TablePagination.tsx
+++ b/frontend/src/components/base/TablePagination/TablePagination.tsx
@@ -34,10 +34,9 @@ const TablePagination = ({
         setError(`${valueAsNumber} is not a valid page`);
       } else {
         setError("");
-        setCurrentPage(valueAsNumber - 1);
+        setCurrentPage(valueAsNumber);
       }
     } else {
-      setPageNumber(undefined);
       setError("Enter a page number.");
     }
   };
diff --git a/frontend/tests/components/pagination.spec.ts b/frontend/tests/components/pagination.spec.ts
new file mode 100644
index 0000000..5d9c045
--- /dev/null
+++ b/frontend/tests/components/pagination.spec.ts
@@ -0,0 +1,29 @@
+import { test, expect } from "@playwright/test";
+
+import { adminAuthFile } from "../constants";
+import { routesConfig } from "@/base/routesConfig";
+
+test.use({ storageState: adminAuthFile });
+
+const pagesWithPagination = [routesConfig.tokens, routesConfig.requests];
+
+for (const pageWithTable of pagesWithPagination) {
+  test.describe("navigates to the correct page on user input", () => {
+    test(`${pageWithTable.title} page`, async ({ page }) => {
+      await page.goto(pageWithTable.path);
+
+      const currentPage = await page.getByRole("spinbutton", { name: /current page/i });
+      const nextPage = await page.getByRole("button", { name: /next page/i });
+      const previousPage = await page.getByRole("button", { name: /previous page/i });
+
+      await expect(currentPage).toHaveValue("1");
+      await nextPage.click();
+      await nextPage.click();
+      await expect(currentPage).toHaveValue("3");
+      await previousPage.click();
+      await expect(currentPage).toHaveValue("2");
+      await currentPage.fill("1");
+      await expect(currentPage).toHaveValue("1");
+    });
+  });
+}