chore: revamp Page Utility tests

Parkreiner · Parkreiner · commit ffb44ffb94ad · 2023-11-07T17:18:34.000Z
diff --git a/site/src/components/PaginationWidget/utils.test.ts b/site/src/components/PaginationWidget/utils.test.ts
@@ -1,29 +1,58 @@
 import { buildPagedList, getOffset } from "./utils";
 
 describe("buildPagedList", () => {
-  it.each<{
-    numPages: number;
-    activePage: number;
-    expected: (string | number)[];
-  }>([
-    { numPages: 7, activePage: 1, expected: [1, 2, 3, 4, 5, 6, 7] },
-    { numPages: 17, activePage: 1, expected: [1, 2, 3, 4, 5, "right", 17] },
-    {
-      numPages: 17,
-      activePage: 9,
-      expected: [1, "left", 8, 9, 10, "right", 17],
-    },
-    {
-      numPages: 17,
-      activePage: 17,
-      expected: [1, "left", 13, 14, 15, 16, 17],
-    },
-  ])(
-    `buildPagedList($numPages, $activePage)`,
-    ({ numPages, activePage, expected }) => {
-      expect(buildPagedList(numPages, activePage)).toEqual(expected);
-    },
-  );
+  it("has no placeholder entries when there are seven or fewer pages", () => {
+    for (let i = 1; i <= 7; i++) {
+      const expectedResult: number[] = [];
+      for (let j = 1; j <= i; j++) {
+        expectedResult.push(j);
+      }
+
+      expect(buildPagedList(i, i)).toEqual(expectedResult);
+    }
+  });
+
+  it("has 'right' placeholder for long lists when active page is near beginning", () => {
+    expect(buildPagedList(17, 1)).toEqual([1, 2, 3, 4, 5, "right", 17]);
+  });
+
+  it("has 'left' placeholder for long lists when active page is near end", () => {
+    expect(buildPagedList(17, 17)).toEqual([1, "left", 13, 14, 15, 16, 17]);
+  });
+
+  it("has both placeholders for long lists when active page is in the middle", () => {
+    expect(buildPagedList(17, 9)).toEqual([1, "left", 8, 9, 10, "right", 17]);
+  });
+
+  it("produces an empty array when there are no pages", () => {
+    expect(buildPagedList(0, 0)).toEqual([]);
+  });
+
+  it("makes sure all values are unique (for React rendering keys)", () => {
+    type TestEntry = [numPages: number, activePage: number];
+    const testData: TestEntry[] = [
+      [0, 0],
+      [1, 1],
+      [2, 2],
+      [3, 3],
+      [4, 4],
+      [5, 5],
+      [6, 6],
+      [7, 7],
+
+      [10, 3],
+      [7, 1],
+      [17, 1],
+      [17, 9],
+    ];
+
+    for (const [numPages, activePage] of testData) {
+      const result = buildPagedList(numPages, activePage);
+      const uniqueCount = new Set(result).size;
+
+      expect(uniqueCount).toEqual(result.length);
+    }
+  });
 });
 
 describe("getOffset", () => {
@@ -32,9 +61,18 @@ describe("getOffset", () => {
     const limit = 10;
     expect(getOffset(page, limit)).toEqual(0);
   });
-  it("returns the limit on page 2", () => {
-    const page = 2;
-    const limit = 10;
-    expect(getOffset(page, limit)).toEqual(limit);
+
+  it("Returns the results for page 1 when input is invalid", () => {
+    const inputs = [0, -1, -Infinity, NaN, Infinity, 3.6, 7.4545435];
+
+    for (const input of inputs) {
+      expect(getOffset(input, 10)).toEqual(0);
+    }
+  });
+
+  it("Returns offset based on the current page for all pages after 1", () => {
+    expect(getOffset(2, 10)).toEqual(10);
+    expect(getOffset(3, 10)).toEqual(20);
+    expect(getOffset(4, 45)).toEqual(135);
   });
 });
diff --git a/site/src/components/PaginationWidget/utils.ts b/site/src/components/PaginationWidget/utils.ts
@@ -57,8 +57,12 @@ export const buildPagedList = (
 };
 
 // pages count from 1
-export const getOffset = (page: number, limit: number): number =>
-  (page - 1) * limit;
+export const getOffset = (page: number, limit: number): number => {
+  const pageIsValid = Number.isInteger(page) && page >= 1;
+  const pageToUse = pageIsValid ? page : 1;
+
+  return (pageToUse - 1) * limit;
+};
 
 export const nonInitialPage = (searchParams: URLSearchParams): boolean => {
   const page = searchParams.get("page");
