test corrections.

bcgov · Nov 1, 2023 · 22f7814 · 22f7814
1 parent 46d9bd1
commit 22f7814
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 7 deletions.
diff --git a/source/frontend/src/components/Table/PageSizeSelector.tsx b/source/frontend/src/components/Table/PageSizeSelector.tsx
@@ -45,6 +45,7 @@ export const TablePageSizeSelector: React.FC<React.PropsWithChildren<IProps>> =
           value={`${selected}`}
           type="number"
           style={{ width: 50, marginLeft: 10, marginRight: 10, backgroundColor: 'white' }}
+          disabled
         />
         <StyledText>Entries</StyledText>
       </div>

diff --git a/source/frontend/src/components/Table/Table.test.tsx b/source/frontend/src/components/Table/Table.test.tsx
@@ -1,4 +1,4 @@
-import { act, render, RenderOptions, userEvent } from '@/utils/test-utils';
+import { act, render, RenderOptions, userEvent, waitFor } from '@/utils/test-utils';
 
 import { ColumnWithProps, Table, TableProps } from '.';
 import { IIdentifiedObject } from './Table';
@@ -172,6 +172,23 @@ describe('Generic table component', () => {
       });
       expect(onPageSizeChange).toHaveBeenCalledWith(5);
     });
+
+    it('page size displays a second page as expected', async () => {
+      const { getByLabelText, container } = setup({
+        props: {
+          pageSize: 5,
+          manualPagination: false,
+        },
+      });
+
+      await act(async () => {
+        userEvent.click(getByLabelText('Page 2'));
+      });
+      await waitFor(async () => {
+        const tableRows = container.querySelectorAll('.table .tbody .tr-wrapper');
+        expect(tableRows).toHaveLength(1);
+      });
+    });
   });
 
   it('can select only one row at a time when single select prop set', async () => {

diff --git a/source/frontend/src/components/Table/Table.tsx b/source/frontend/src/components/Table/Table.tsx
@@ -260,7 +260,9 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
   const filterFormRef = useRef<FormikProps<any>>();
 
   const [expandedRows, setExpandedRows] = React.useState<T[]>([]);
-  const [internalPageSize, setInternalPageSize] = React.useState<number>(DEFAULT_PAGE_SIZE);
+  const [internalPageSize, setInternalPageSize] = React.useState<number>(
+    props.pageSize ?? DEFAULT_PAGE_SIZE,
+  );
   const defaultColumn = React.useMemo(
     () => ({
       // When using the useFlexLayout:
@@ -289,13 +291,10 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
     externalSort,
     isSingleSelect,
     disableSelection,
-    lockPageSize,
   } = props;
   const manualSortBy = !!externalSort || props.manualSortBy;
   const totalItems = externalTotalItems ?? data?.length;
-  const pageCount =
-    externalPageCount ??
-    Math.ceil(totalItems / (!!lockPageSize ? pageSizeProp ?? internalPageSize : internalPageSize));
+  const pageCount = externalPageCount ?? Math.ceil(totalItems / internalPageSize);
   const selectedRowsRef = React.useRef<T[]>(externalSelectedRows ?? []); // used as a global var for providing up to date list of selected rows to code within the table (that is arrow function scoped).
 
   // manually update the contents of the global ref of selected rows if the list of external selected rows changes.
@@ -333,7 +332,7 @@ export const Table = <T extends IIdentifiedObject, TFilter extends object = {}>(
         ? {
             sortBy,
             pageIndex: pageIndexProp ?? 0,
-            pageSize: lockPageSize ? pageSizeProp : internalPageSize,
+            pageSize: pageSizeProp ?? internalPageSize,
           }
         : { sortBy, pageIndex: pageIndexProp ?? 0 },
       manualPagination: (props.hideToolbar || manualPagination) ?? true, // Tell the usePagination hook