Merge pull request #50 from david-roper/client-table-pages

Client table pages functionality tests

Author: joshunrau

src/components/ClientTable/ClientTable.spec.tsx

@@ -1,5 +1,6 @@
 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';
 
@@ -8,7 +9,7 @@ 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_TEST_ID = 'page-numbers';
 describe('ClientTable', () => {
   it('should render', () => {
     render(<ClientTable columns={[]} data={[]} minRows={10} />);
@@ -22,4 +23,65 @@ 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();
+    const handleClientTableDropdownClick = vi.fn();
+    render(
+      <ClientTable
+        columnDropdownOptions={[
+          {
+            label: 'delete',
+            onSelection: handleClientTableDropdownClick
+          }
+        ]}
+        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_TEST_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_TEST_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_TEST_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_TEST_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_TEST_ID).textContent).toBe('1 - 1 / 2');
+
+    await userEvent.click(await screen.findByText('Field 1'));
+    await userEvent.click(screen.getByTestId('delete-test-id'));
+    expect(handleClientTableDropdownClick).toBeCalled();
+  });
 });

src/components/ClientTable/ClientTable.tsx

@@ -104,6 +104,7 @@ export const ClientTable = <T extends ClientTableEntry>({
                             const Icon = option.icon;
                             return (
                               <DropdownMenu.Item
+                                data-testid={option.label + '-test-id'}
                                 key={option.label}
                                 onClick={() => {
                                   option.onSelection(column);

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