Client table pages functionality tests

src/components/ClientTable/ClientTable.spec.tsx

@@ -1,14 +1,14 @@
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
 
 import { ClientTable } from './ClientTable';
-
 const TEST_ID = 'ClientTable';
 const FIRST_BUTTON_ID = 'first-page-button';
 const PREVIOUS_BUTTON_ID = 'previous-page-button';
 const NEXT_BUTTON_ID = 'next-page-button';
 const LAST_BUTTON_ID = 'last-page-button';
-
+const PAGE_NUMBER_ID = 'page-numbers';
 describe('ClientTable', () => {
   it('should render', () => {
     render(<ClientTable columns={[]} data={[]} minRows={10} />);
@@ -22,4 +22,54 @@ describe('ClientTable', () => {
     render(<ClientTable className="foo" columns={[]} data={[]} minRows={10} />);
     expect(screen.getByTestId(TEST_ID)).toHaveClass('foo');
   });
+  it('should function correctly', async () => {
+    const handleClientTableItemClick = vi.fn();
+    render(
+      <ClientTable
+        columns={[
+          {
+            field: 'f1',
+            label: 'Field 1'
+          },
+          {
+            field: 'f2',
+            label: 'Field 2'
+          }
+        ]}
+        data={[
+          {
+            f1: 1,
+            f2: 2
+          },
+          {
+            f1: 23,
+            f2: 24
+          }
+        ]}
+        entriesPerPage={1}
+        minRows={3}
+        onEntryClick={handleClientTableItemClick}
+      />
+    );
+    expect(screen.getByTestId(PAGE_NUMBER_ID)).toBeInTheDocument();
+    await userEvent.click(screen.getByTestId(NEXT_BUTTON_ID));
+    await userEvent.click(await screen.findByText('23.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+
+    expect(screen.getByTestId(PAGE_NUMBER_ID).textContent).toBe('2 - 2 / 2');
+    await userEvent.click(screen.getByTestId(PREVIOUS_BUTTON_ID));
+    await userEvent.click(await screen.findByText('1.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+
+    expect(screen.getByTestId(PAGE_NUMBER_ID).textContent).toBe('1 - 1 / 2');
+    await userEvent.click(screen.getByTestId(LAST_BUTTON_ID));
+    await userEvent.click(await screen.findByText('23.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+
+    expect(screen.getByTestId(PAGE_NUMBER_ID).textContent).toBe('2 - 2 / 2');
+    await userEvent.click(screen.getByTestId(FIRST_BUTTON_ID));
+    await userEvent.click(await screen.findByText('1.00'));
+    expect(handleClientTableItemClick).toBeCalled();
+    expect(screen.getByTestId(PAGE_NUMBER_ID).textContent).toBe('1 - 1 / 2');
+  });
 });

src/components/ClientTable/ClientTablePagination.tsx

@@ -23,7 +23,10 @@ export const ClientTablePagination = ({
   return (
     <div className="flex items-center justify-between py-3">
       <div className="hidden sm:block">
-        <p className="text-sm font-medium text-muted-foreground">{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
+        <p
+          className="text-sm font-medium text-muted-foreground"
+          data-testid="page-numbers"
+        >{`${firstEntry} - ${lastEntry} / ${totalEntries}`}</p>
       </div>
       <div className="flex flex-1 justify-between gap-3 sm:justify-end">
         <Button