add first and last page button

trento-project · Sep 16, 2024 · 87aade7 · 87aade7
1 parent 7af909e
commit 87aade7
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 9 deletions.
diff --git a/assets/js/common/Pagination/Pagination.jsx b/assets/js/common/Pagination/Pagination.jsx
@@ -5,8 +5,10 @@ import ReactPaginate from 'react-paginate';
 
 import Select from '@common/Select';
 
+const FIRST_LABEL = '<<';
 const PREV_LABEL = '<';
 const NEXT_LABEL = '>';
+const LAST_LABEL = '>>';
 
 const boxClassNames = classNames(
   'tn-page-item',
@@ -85,6 +87,18 @@ function PaginationPrevNext({
               leftBoxClassNames,
               hasPrev || disabledLinkClassNames
             )}
+            onClick={() => hasPrev && onSelect('first')}
+          >
+            {FIRST_LABEL}
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            className={classNames(
+              boxClassNames,
+              hasPrev || disabledLinkClassNames
+            )}
             onClick={() => hasPrev && onSelect('prev')}
           >
             {PREV_LABEL}
@@ -94,14 +108,26 @@ function PaginationPrevNext({
           <button
             type="button"
             className={classNames(
-              rightBoxClassNames,
+              boxClassNames,
               hasNext || disabledLinkClassNames
             )}
             onClick={() => hasNext && onSelect('next')}
           >
             {NEXT_LABEL}
           </button>
         </li>
+        <li>
+          <button
+            type="button"
+            className={classNames(
+              rightBoxClassNames,
+              hasNext || disabledLinkClassNames
+            )}
+            onClick={() => hasNext && onSelect('last')}
+          >
+            {LAST_LABEL}
+          </button>
+        </li>
       </ul>
     </div>
   );

diff --git a/assets/js/common/Pagination/Pagination.test.jsx b/assets/js/common/Pagination/Pagination.test.jsx
@@ -5,6 +5,11 @@ import '@testing-library/jest-dom';
 import { noop } from 'lodash';
 import Pagination, { PaginationPrevNext } from '.';
 
+const NEXT = /^>$/;
+const PREV = /^<$/;
+const FIRST = /^<<$/;
+const LAST = /^>>$/;
+
 describe('Pagination component', () => {
   it('should render', () => {
     render(
@@ -310,8 +315,10 @@ describe('PaginationPrevNext component', () => {
   it('should render', () => {
     render(<PaginationPrevNext hasNext onSelect={noop} />);
 
-    expect(screen.getByText('<')).toBeInTheDocument();
-    expect(screen.getByText('>')).toBeInTheDocument();
+    expect(screen.getByText(PREV)).toBeInTheDocument();
+    expect(screen.getByText(NEXT)).toBeInTheDocument();
+    expect(screen.getByText(LAST)).toBeInTheDocument();
+    expect(screen.getByText(FIRST)).toBeInTheDocument();
   });
 
   it('should call onSelect', async () => {
@@ -320,14 +327,24 @@ describe('PaginationPrevNext component', () => {
 
     render(<PaginationPrevNext onSelect={onSelect} />);
 
-    await act(() => user.click(screen.getByText('<')));
+    await act(() => user.click(screen.getByText(PREV)));
     expect(onSelect).toHaveBeenCalledWith('prev');
     expect(onSelect).toHaveBeenCalledTimes(1);
     onSelect.mockClear();
 
-    await act(() => user.click(screen.getByText('>')));
+    await act(() => user.click(screen.getByText(NEXT)));
     expect(onSelect).toHaveBeenCalledWith('next');
     expect(onSelect).toHaveBeenCalledTimes(1);
+    onSelect.mockClear();
+
+    await act(() => user.click(screen.getByText(FIRST)));
+    expect(onSelect).toHaveBeenCalledWith('first');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    onSelect.mockClear();
+
+    await act(() => user.click(screen.getByText(LAST)));
+    expect(onSelect).toHaveBeenCalledWith('last');
+    expect(onSelect).toHaveBeenCalledTimes(1);
   });
 
   it('should disable prev button', async () => {
@@ -336,10 +353,10 @@ describe('PaginationPrevNext component', () => {
 
     render(<PaginationPrevNext hasPrev={false} onSelect={onSelect} />);
 
-    await act(() => user.click(screen.getByText('<')));
+    await act(() => user.click(screen.getByText(PREV)));
     expect(onSelect).not.toHaveBeenCalled();
 
-    await act(() => user.click(screen.getByText('>')));
+    await act(() => user.click(screen.getByText(NEXT)));
     expect(onSelect).toHaveBeenCalledWith('next');
     expect(onSelect).toHaveBeenCalledTimes(1);
     onSelect.mockClear();
@@ -351,12 +368,41 @@ describe('PaginationPrevNext component', () => {
 
     render(<PaginationPrevNext hasNext={false} onSelect={onSelect} />);
 
-    await act(() => user.click(screen.getByText('>')));
+    await act(() => user.click(screen.getByText(NEXT)));
     expect(onSelect).not.toHaveBeenCalled();
     onSelect.mockClear();
 
-    await act(() => user.click(screen.getByText('<')));
+    await act(() => user.click(screen.getByText(PREV)));
     expect(onSelect).toHaveBeenCalledWith('prev');
     expect(onSelect).toHaveBeenCalledTimes(1);
   });
+
+  it('should disable first button', async () => {
+    const onSelect = jest.fn();
+    const user = userEvent.setup();
+
+    render(<PaginationPrevNext hasPrev={false} onSelect={onSelect} />);
+
+    await act(() => user.click(screen.getByText(FIRST)));
+    expect(onSelect).not.toHaveBeenCalled();
+
+    await act(() => user.click(screen.getByText(LAST)));
+    expect(onSelect).toHaveBeenCalledWith('last');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    onSelect.mockClear();
+  });
+
+  it('should disable last button', async () => {
+    const onSelect = jest.fn();
+    const user = userEvent.setup();
+
+    render(<PaginationPrevNext hasNext={false} onSelect={onSelect} />);
+
+    await act(() => user.click(screen.getByText(LAST)));
+    expect(onSelect).not.toHaveBeenCalled();
+
+    await act(() => user.click(screen.getByText(FIRST)));
+    expect(onSelect).toHaveBeenCalledWith('first');
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
 });