diff --git a/src/components/ClientTable/ClientTable.spec.tsx b/src/components/ClientTable/ClientTable.spec.tsx index f2605aec..e02687aa 100644 --- a/src/components/ClientTable/ClientTable.spec.tsx +++ b/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(); @@ -22,4 +23,65 @@ describe('ClientTable', () => { render(); expect(screen.getByTestId(TEST_ID)).toHaveClass('foo'); }); + it('should function correctly', async () => { + const handleClientTableItemClick = vi.fn(); + const handleClientTableDropdownClick = vi.fn(); + render( + + ); + 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(); + }); }); diff --git a/src/components/ClientTable/ClientTable.tsx b/src/components/ClientTable/ClientTable.tsx index 83878e0f..3aa5d494 100644 --- a/src/components/ClientTable/ClientTable.tsx +++ b/src/components/ClientTable/ClientTable.tsx @@ -104,6 +104,7 @@ export const ClientTable = ({ const Icon = option.icon; return ( { option.onSelection(column); diff --git a/src/components/ClientTable/ClientTablePagination.tsx b/src/components/ClientTable/ClientTablePagination.tsx index 395c8323..d4428c80 100644 --- a/src/components/ClientTable/ClientTablePagination.tsx +++ b/src/components/ClientTable/ClientTablePagination.tsx @@ -23,7 +23,10 @@ export const ClientTablePagination = ({ return (
-

{`${firstEntry} - ${lastEntry} / ${totalEntries}`}

+

{`${firstEntry} - ${lastEntry} / ${totalEntries}`}