add tests for pagination changes

stilt0n · Jan 21, 2025 · 6368d1e · 6368d1e
1 parent 66c0c23
commit 6368d1e
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 13 deletions.
diff --git a/components/recipe-gallery/__tests__/gallery-pagination.test.tsx b/components/recipe-gallery/__tests__/gallery-pagination.test.tsx
@@ -9,15 +9,15 @@ describe('Given Gallery Pagination component', () => {
     render(<GalleryPagination pageCount={1} />);
     const pagination = screen.getByRole('navigation');
     const { getAllByRole } = within(pagination);
-    expect(getAllByRole('listitem')).toHaveLength(3);
+    expect(getAllByRole('listitem')).toHaveLength(5);
   });
 
   it('should render no more than seven list items', () => {
     withMockNavigation();
     render(<GalleryPagination pageCount={10} />);
     const pagination = screen.getByRole('navigation');
     const { getAllByRole } = within(pagination);
-    expect(getAllByRole('listitem')).toHaveLength(7);
+    expect(getAllByRole('listitem')).toHaveLength(9);
   });
 
   it('should set aria current based on search params', () => {
@@ -27,10 +27,21 @@ describe('Given Gallery Pagination component', () => {
     expect(current).toHaveTextContent('4');
   });
 
-  it('should disable previous button when on first page', () => {
-    withMockNavigation();
+  it('should disable previous and first button when on first page', () => {
+    withMockNavigation({ searchParams: { page: '1' } });
+    render(<GalleryPagination pageCount={7} />);
+    const prev = document.querySelectorAll('[aria-disabled]');
+    expect(prev).toHaveLength(2);
+    expect(prev[0]).toHaveTextContent(/first/i);
+    expect(prev[1]).toHaveTextContent(/previous/i);
+  });
+
+  it('should disable last and next button when on last page', () => {
+    withMockNavigation({ searchParams: { page: '7' } });
     render(<GalleryPagination pageCount={7} />);
-    const prev = document.querySelector('[aria-disabled]');
-    expect(prev).toHaveTextContent(/previous/i);
+    const next = document.querySelectorAll('[aria-disabled]');
+    expect(next).toHaveLength(2);
+    expect(next[0]).toHaveTextContent(/next/i);
+    expect(next[1]).toHaveTextContent(/last/i);
   });
 });
diff --git a/components/recipe-gallery/gallery-pagination.client.tsx b/components/recipe-gallery/gallery-pagination.client.tsx
@@ -33,18 +33,19 @@ export const GalleryPagination = (props: GalleryPaginationProps) => {
     );
     return `${pathname}?${newSearchParams.toString()}`;
   };
+
+  const firstDisabled = currentPage === 1 || !currentPage ? true : undefined;
+  const lastDisabled =
+    currentPage === props.pageCount || props.pageCount <= 1 ? true : undefined;
   return (
     <Pagination>
       <PaginationContent>
         <PaginationItem>
-          <PaginationFirst
-            aria-disabled={currentPage === 1 || !currentPage}
-            href={page(1)}
-          />
+          <PaginationFirst aria-disabled={firstDisabled} href={page(1)} />
         </PaginationItem>
         <PaginationItem>
           <PaginationPrevious
-            aria-disabled={currentPage === 1 || !currentPage}
+            aria-disabled={firstDisabled}
             href={page(currentPage - 1)}
           />
         </PaginationItem>
@@ -60,13 +61,13 @@ export const GalleryPagination = (props: GalleryPaginationProps) => {
         ))}
         <PaginationItem>
           <PaginationNext
-            aria-disabled={currentPage === props.pageCount}
+            aria-disabled={lastDisabled}
             href={page(currentPage + 1)}
           />
         </PaginationItem>
         <PaginationItem>
           <PaginationLast
-            aria-disabled={currentPage === props.pageCount || !currentPage}
+            aria-disabled={lastDisabled}
             href={page(props.pageCount)}
           />
         </PaginationItem>