fix(pagination) avoid ellipsis when no gap is present

vladimir-cucu · Sep 6, 2023 · a59967a · a59967a
1 parent 5808ca9
commit a59967a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 2 deletions.
diff --git a/src/components/Pagination/Pagination.test.tsx b/src/components/Pagination/Pagination.test.tsx
@@ -423,6 +423,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
   });
 
   it("renders all pages on page 2 without duplicating first or last page", async () => {
@@ -440,6 +441,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
   });
 
   it("renders all pages on page 3 without duplicating first or last page", async () => {
@@ -457,6 +459,7 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
   });
 
   it("renders all pages on page 4 without duplicating first or last page", async () => {
@@ -474,5 +477,27 @@ describe("<Pagination />", () => {
     expect(await screen.findAllByRole("button", { name: "2" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
     expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(screen.queryByText("…")).not.toBeInTheDocument();
+  });
+
+  it("renders all pages on page 4 without duplicating first or last page", async () => {
+    render(
+      <Pagination
+        itemsPerPage={2}
+        totalItems={20}
+        paginate={jest.fn()}
+        currentPage={4}
+        truncateThreshold={3}
+      />
+    );
+
+    expect(await screen.findAllByRole("button", { name: "1" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "3" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "4" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "5" })).toHaveLength(1);
+    expect(await screen.findAllByRole("button", { name: "10" })).toHaveLength(
+      1
+    );
+    expect(screen.queryAllByText("…")).toHaveLength(2);
   });
 });
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
@@ -55,7 +55,7 @@ const generatePaginationItems = (
         onClick={() => changePage(1)}
       />
     );
-    if (![1, 2, 3].includes(currentPage)) {
+    if (!visiblePages.includes(2)) {
       items.push(<PaginationItemSeparator key="sep1" />);
     }
   }
@@ -73,7 +73,7 @@ const generatePaginationItems = (
 
   if (truncated) {
     // render last in sequence
-    if (![lastPage, lastPage - 1, lastPage - 2].includes(currentPage)) {
+    if (!visiblePages.includes(lastPage - 1)) {
       items.push(<PaginationItemSeparator key="sep2" />);
     }
     items.push(