Feat: add PaginationListItem unit tests, and minor refactors to impro…

…ve code consistency

__mocks__/nextJsRouter.mjs

@@ -2,7 +2,7 @@ jest.mock('next/router', () => ({
   useRouter() {
     return {
       isReady: true,
-      asPath: '/link',
+      asPath: '/',
     };
   },
 }));

components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs

@@ -0,0 +1,56 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+
+import PaginationListItem from '@/components/Common/Pagination/PaginationListItem';
+
+function renderPaginationListItem({
+  url,
+  pageNumber,
+  currentPage,
+  totalPages,
+}) {
+  render(
+    <IntlProvider>
+      <PaginationListItem
+        url={url}
+        pageNumber={pageNumber}
+        currentPage={currentPage}
+        totalPages={totalPages}
+      />
+    </IntlProvider>
+  );
+}
+
+describe('PaginationListItem', () => {
+  it('Renders the list item correctly, including the corresponding ARIA attributes', () => {
+    const pageNumber = 1;
+    const totalPages = 10;
+    const url = 'http://';
+
+    renderPaginationListItem({
+      url,
+      currentPage: 1,
+      pageNumber,
+      totalPages,
+    });
+
+    const listItem = screen.getByRole('listitem');
+
+    expect(listItem).toBeVisible();
+    expect(listItem).toHaveAttribute('aria-posinset', String(pageNumber));
+    expect(listItem).toHaveAttribute('aria-setsize', String(totalPages));
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', url);
+  });
+
+  it('Assigns aria-current="page" attribute to the link when the current page is equal to the page number', () => {
+    renderPaginationListItem({
+      url: 'http://',
+      currentPage: 1,
+      pageNumber: 1,
+      totalPages: 10,
+    });
+
+    expect(screen.getByRole('link')).toHaveAttribute('aria-current', 'page');
+  });
+});

components/Common/Pagination/PaginationListItem/index.module.css

@@ -1,16 +1,18 @@
-.listItem {
+.listItem,
+.listItem:link,
+.listItem:active {
   @apply flex
-  h-10
+    h-10
     w-10
     items-center
     justify-center
     rounded
     px-3
     py-2.5
-    !text-neutral-800
+    text-neutral-800
     hover:bg-neutral-100
     aria-current:bg-green-600
-    aria-current:!text-white
-    dark:!text-neutral-200
+    aria-current:text-white
+    dark:text-neutral-200
     hover:dark:bg-neutral-900;
 }

components/Common/Pagination/PaginationListItem/index.tsx

@@ -8,9 +8,7 @@ import styles from './index.module.css';
 export type PaginationListItemProps = {
   url: string;
   pageNumber: number;
-  /**
-   * One-based number of the current page
-   */
+  // One-based number of the current page
   currentPage: number;
   totalPages: number;
 };
@@ -29,12 +27,8 @@ const PaginationListItem: FC<PaginationListItemProps> = ({
         prefetch={false}
         href={url}
         aria-label={intl.formatMessage(
-          {
-            id: 'components.common.pagination.pageLabel',
-          },
-          {
-            pageNumber,
-          }
+          { id: 'components.common.pagination.pageLabel' },
+          { pageNumber }
         )}
         className={styles.listItem}
         {...(pageNumber === currentPage && { 'aria-current': 'page' })}

components/Common/Pagination/index.tsx

@@ -3,24 +3,18 @@ import type { FC } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import Button from '@/components/Common/Button';
+import { useGetPageElements } from '@/components/Common/Pagination/useGetPageElements';
 
 import styles from './index.module.css';
-import { useGetPageElements } from './useGetPageElements';
 
-type Page = {
-  url: string;
-};
+type Page = { url: string };
 
 export type PaginationProps = {
-  /**
-   * One-based number of the current page
-   */
+  // One-based number of the current page
   currentPage: number;
   pages: Page[];
-  /**
-   * The number of page buttons on each side of the current page button
-   * @default 1
-   */
+  // The number of page buttons on each side of the current page button
+  // @default 1
   currentPageSiblingsCount?: number;
 };
 

components/Common/Pagination/useGetPageElements.tsx

@@ -29,6 +29,9 @@ const MINIMUM_AMOUNT_OF_ELEMENTS = 3;
 // Not more than two ellipses will be shown at the same time
 const MAXIMUM_AMOUNT_OF_ELLIPSES = 2;
 
+// The logic of this custom hook has taken the internal logic of
+// React MUI's Pagination component as reference. More info here:
+// https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js
 export const useGetPageElements = (
   currentPage: PaginationProps['currentPage'],
   pages: PaginationProps['pages'],