fix: hotfix pagination tests and provider

nodejs · Oct 11, 2023 · 1fd66f8 · 1fd66f8
1 parent e7d6e09
commit 1fd66f8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 21 deletions.
diff --git a/components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs b/components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
 
 import PaginationListItem from '@/components/Common/Pagination/PaginationListItem';
+import { LocaleProvider } from '@/providers/LocaleProvider';
 
 function renderPaginationListItem({
   url,
@@ -10,14 +10,14 @@ function renderPaginationListItem({
   totalPages,
 }) {
   render(
-    <IntlProvider>
+    <LocaleProvider>
       <PaginationListItem
         url={url}
         pageNumber={pageNumber}
         currentPage={currentPage}
         totalPages={totalPages}
       />
-    </IntlProvider>
+    </LocaleProvider>
   );
 }
 

diff --git a/components/Common/Pagination/PaginationListItem/index.tsx b/components/Common/Pagination/PaginationListItem/index.tsx
@@ -24,7 +24,6 @@ const PaginationListItem: FC<PaginationListItemProps> = ({
   return (
     <li key={pageNumber} aria-setsize={totalPages} aria-posinset={pageNumber}>
       <LocalizedLink
-        prefetch={false}
         href={url}
         aria-label={intl.formatMessage(
           { id: 'components.common.pagination.pageLabel' },

diff --git a/components/Common/Pagination/__tests__/index.test.mjs b/components/Common/Pagination/__tests__/index.test.mjs
@@ -1,23 +1,25 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from 'react-intl';
 
 import Pagination from '@/components/Common/Pagination';
+import { LocaleProvider } from '@/providers/LocaleProvider';
 
 function renderPagination({
   currentPage = 1,
   pages,
   currentPageSiblingsCount,
 }) {
-  const parsedPages = new Array(pages).fill({ url: 'page' });
+  const parsedPages = new Array(pages)
+    .fill({ url: 'page' })
+    .map(item => ({ url: `${item.url}-${Math.random()}` }));
 
   render(
-    <IntlProvider>
+    <LocaleProvider>
       <Pagination
         currentPage={currentPage}
         pages={parsedPages}
         currentPageSiblingsCount={currentPageSiblingsCount}
       />
-    </IntlProvider>
+    </LocaleProvider>
   );
 
   return {

diff --git a/components/Common/Pagination/useGetPageElements.tsx b/components/Common/Pagination/useGetPageElements.tsx
@@ -68,28 +68,28 @@ export const useGetPageElements = (
     totalPages
   );
 
-  const firstPageIndex = 0;
-  const lastPageIndex = totalPages - 1;
+  const firstIndex = 0;
+  const lastIndex = totalPages - 1;
 
   // If there are at least two (2) elements between the far-left sibling of
   // the current page, and the first page, we should show left ellipsis
   // between them
-  const hasLeftEllipsis = leftSiblingsFirstIndex > firstPageIndex + 2;
+  const hasLeftEllipsis = leftSiblingsFirstIndex > firstIndex + 2;
 
   // If there are at least two (2) elements between the far-right sibling of
   // the current page, and the last page, we should show right ellipsis
   // between them
-  const hasRightEllipsis = rightSiblingsLastIndex < lastPageIndex - 1;
+  const hasRightEllipsis = rightSiblingsLastIndex < lastIndex - 1;
 
   if (!hasLeftEllipsis && hasRightEllipsis) {
     const leftPagesLastIndex = MINIMUM_AMOUNT_OF_ELEMENTS + totalSiblingsCount;
 
-    const leftPages = parsedPages.slice(firstPageIndex, leftPagesLastIndex);
+    const leftPages = parsedPages.slice(firstIndex, leftPagesLastIndex);
 
     return [
       ...createPaginationListItems(leftPages),
-      Ellipsis(),
-      ...createPaginationListItems(parsedPages.slice(lastPageIndex)),
+      <Ellipsis key="elipsis" />,
+      ...createPaginationListItems(parsedPages.slice(lastIndex)),
     ];
   }
 
@@ -101,9 +101,9 @@ export const useGetPageElements = (
 
     return [
       ...createPaginationListItems(
-        parsedPages.slice(firstPageIndex, firstPageIndex + 1)
+        parsedPages.slice(firstIndex, firstIndex + 1)
       ),
-      Ellipsis(),
+      <Ellipsis key="elipsis" />,
       ...createPaginationListItems(rightPages),
     ];
   }
@@ -116,12 +116,12 @@ export const useGetPageElements = (
 
     return [
       ...createPaginationListItems(
-        parsedPages.slice(firstPageIndex, firstPageIndex + 1)
+        parsedPages.slice(firstIndex, firstIndex + 1)
       ),
-      Ellipsis(),
+      <Ellipsis key="elipsis-1" />,
       ...createPaginationListItems(middlePages),
-      Ellipsis(),
-      ...createPaginationListItems(parsedPages.slice(lastPageIndex)),
+      <Ellipsis key="elipsis-2" />,
+      ...createPaginationListItems(parsedPages.slice(lastIndex)),
     ];
   }
 };