fix: 🐛 [Table] Fixed page out of range in MUITablePagination

✅ Closes: 208
melfore · Sep 15, 2021 · a16c4b6 · a16c4b6
1 parent 81415e3
commit a16c4b6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 3 deletions.
diff --git a/src/components/Table/components/Pagination/index.tsx b/src/components/Table/components/Pagination/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import {
   TablePagination as MUITablePagination,
   TablePaginationProps as MUITablePaginationProps,
@@ -24,11 +24,15 @@ const TablePagination: FC<ITablePagination> = ({
     [dataCy, subpart]
   );
 
+  const safeCount = useMemo(() => rowsTotal || 0, [rowsTotal]);
+
+  const safePage = useMemo(() => (!safeCount ? 0 : page), [page, safeCount]);
+
   return (
     <MUITablePagination
       ActionsComponent={paginationActions}
       component="div"
-      count={rowsTotal || 0}
+      count={safeCount}
       onPageChange={(event, page) => {
         suppressEvent(event);
         onPageChange && onPageChange(page);
@@ -37,7 +41,7 @@ const TablePagination: FC<ITablePagination> = ({
         const pageSize = parseInt(event.target.value, 10);
         onPageSizeChange && onPageSizeChange(0, pageSize);
       }}
-      page={page}
+      page={safePage}
       rowsPerPage={pageSize}
       rowsPerPageOptions={pageSizeOptions}
       style={style}

diff --git a/src/components/Table/index.test.tsx b/src/components/Table/index.test.tsx
@@ -242,6 +242,35 @@ describe("Table test suite:", () => {
     expect(onPageChange).toHaveBeenCalledWith(9);
   });
 
+  it("pagination - safe", () => {
+    const onPageChange = jest.fn();
+
+    const { wrapper } = getTableTestable({
+      props: {
+        onPageChange,
+        page: 3,
+        rows: [],
+        rowsTotal: 0,
+      },
+    });
+
+    const firstPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "first");
+    const firstPageButton = wrapper.find(`button[data-cy='${firstPageButtonDataCy}']`);
+    expect(firstPageButton.prop("disabled")).toBeTruthy();
+
+    const prevPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "prev");
+    const prevPageButton = wrapper.find(`button[data-cy='${prevPageButtonDataCy}']`);
+    expect(prevPageButton.prop("disabled")).toBeTruthy();
+
+    const nextPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "next");
+    const nextPageButton = wrapper.find(`button[data-cy='${nextPageButtonDataCy}']`);
+    expect(nextPageButton.prop("disabled")).toBeTruthy();
+
+    const lastPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "last");
+    const lastPageButton = wrapper.find(`button[data-cy='${lastPageButtonDataCy}']`);
+    expect(lastPageButton.prop("disabled")).toBeTruthy();
+  });
+
   it("pre-selection", () => {
     const { element } = getTableTestable({ props: { selectionFilter: (d) => d.name.startsWith("P") } });