@arbor-education/design-system.components 0.1.0 → 0.1.2

package/src/components/table/pagination/Pagination.test.tsx

@@ -0,0 +1,846 @@
+import { describe, expect, test, vi, beforeEach } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom/vitest';
+import userEvent from '@testing-library/user-event';
+import type { AgEvent, GridApi } from 'ag-grid-enterprise';
+import { PaginationControls } from './PaginationControls';
+import { RowCountInfo } from './RowCountInfo';
+import { PageSizeSelector } from './PageSizeSelector';
+import { PaginationPanel } from './PaginationPanel';
+import { GridApiContext } from '../GridApiContext';
+
+describe('Table Pagination', () => {
+  const createMockGridApi = (overrides?: Partial<GridApi>): Partial<GridApi> => {
+    const mockListeners: Record<string, Array<() => void>> = {
+      paginationChanged: [],
+      filterChanged: [],
+      rowDataUpdated: [],
+    };
+
+    const result = {
+      getDisplayedRowCount: vi.fn(() => 10),
+      paginationGetPageSize: vi.fn(() => 10),
+      paginationGetCurrentPage: vi.fn(() => 0),
+      paginationGetTotalPages: vi.fn(() => 1),
+      paginationGetRowCount: vi.fn(() => 10),
+      paginationGoToPage: vi.fn(),
+      addEventListener: vi.fn((event: string, callback: () => void) => {
+        if (!mockListeners[event]) {
+          mockListeners[event] = [];
+        }
+        mockListeners[event].push(callback);
+      }),
+      removeEventListener: vi.fn(),
+      dispatchEvent: (evtName: string) => {
+        mockListeners[evtName]?.forEach((callback) => {
+          callback();
+        });
+      },
+      ...overrides,
+    } as Partial<GridApi> & {
+      mockListeners: typeof mockListeners;
+    };
+
+    return result;
+  };
+  describe('PaginationControls', () => {
+    const renderWithContext = (
+      component: React.ReactElement,
+      gridApi: Partial<GridApi> | null = null,
+    ) => {
+      return render(
+        <GridApiContext.Provider value={gridApi as GridApi | null}>
+          {component}
+        </GridApiContext.Provider>,
+      );
+    };
+
+    test('renders pagination controls container', () => {
+      const { container } = renderWithContext(<PaginationControls totalPages={5} />);
+      expect(container.querySelector('.ds-table__pagination-controls')).toBeInTheDocument();
+    });
+
+    test('renders all navigation buttons', () => {
+      renderWithContext(<PaginationControls totalPages={5} />);
+      expect(screen.getByText('Go to first page')).toBeInTheDocument();
+      expect(screen.getByText('Go to previous page')).toBeInTheDocument();
+      expect(screen.getByText('Go to next page')).toBeInTheDocument();
+      expect(screen.getByText('Go to last page')).toBeInTheDocument();
+    });
+
+    test('renders number input for page navigation', () => {
+      renderWithContext(<PaginationControls totalPages={5} />);
+      const numberInput = screen.getByLabelText('Current page');
+      expect(numberInput).toBeInTheDocument();
+      expect(numberInput).toHaveValue('1');
+    });
+
+    test('uses totalPages prop when provided', () => {
+      renderWithContext(<PaginationControls totalPages={20} />);
+      const numberInput = screen.getByLabelText('Current page');
+      expect(numberInput).toHaveAttribute('max', '20');
+    });
+
+    test('uses gridApi paginationGetTotalPages when totalPages prop is not provided', () => {
+      const mockGridApi = createMockGridApi({
+        paginationGetTotalPages: vi.fn(() => 10),
+      });
+      renderWithContext(<PaginationControls />, mockGridApi as GridApi);
+      const numberInput = screen.getByLabelText('Current page');
+      expect(numberInput).toHaveAttribute('max', '10');
+      expect(mockGridApi.paginationGetTotalPages).toHaveBeenCalled();
+    });
+
+    test('defaults to 0 total pages when neither prop nor gridApi is provided', () => {
+      renderWithContext(<PaginationControls />, null);
+      const numberInput = screen.getByLabelText('Current page');
+      expect(numberInput).toHaveAttribute('max', '1');
+    });
+
+    test('calls onPageChange when provided and first page button is clicked', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+
+      // navigate to second page
+      const nextButton = screen.getByText('Go to next page');
+      await userEvent.click(nextButton);
+      onPageChange.mockClear();
+
+      const firstPageButton = screen.getByText('Go to first page');
+      await userEvent.click(firstPageButton);
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(0); // page is zero-indexed
+    });
+
+    test('calls gridApi.paginationGoToPage when onPageChange is not provided', async () => {
+      const mockGridApi = createMockGridApi();
+      renderWithContext(<PaginationControls totalPages={5} />, mockGridApi as GridApi);
+      const nextPageButton = screen.getByText('Go to next page');
+      await userEvent.click(nextPageButton);
+      expect(mockGridApi.paginationGoToPage).toHaveBeenCalledExactlyOnceWith(1); // page 2 (1-indexed) becomes 1 (0-indexed)
+    });
+
+    test('navigates to next or previous page when next or previous button is clicked', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const nextPageButton = screen.getByText('Go to next page');
+      await userEvent.click(nextPageButton);
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(1);
+
+      onPageChange.mockClear();
+
+      const prevPageButton = screen.getByText('Go to previous page');
+      await userEvent.click(prevPageButton);
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(0);
+    });
+
+    test('navigates to next page when next button is clicked', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const nextPageButton = screen.getByText('Go to next page');
+      await userEvent.click(nextPageButton);
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(1);
+    });
+
+    test('navigates to last page when last page button is clicked', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const lastPageButton = screen.getByText('Go to last page');
+      await userEvent.click(lastPageButton);
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(4); // page 5 (1-indexed) becomes 4 (0-indexed)
+    });
+
+    test('updates input value when navigating via buttons', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const numberInput = screen.getByLabelText('Current page');
+      const nextPageButton = screen.getByText('Go to next page');
+
+      expect(numberInput).toHaveValue('1');
+      await userEvent.click(nextPageButton);
+      expect(numberInput).toHaveValue('2');
+    });
+
+    test('navigates to page when number input value changes', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const numberInput = screen.getByLabelText('Current page');
+
+      await userEvent.clear(numberInput);
+      await userEvent.type(numberInput, '3');
+      await userEvent.tab(); // Trigger onChange
+
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(2); // page 3 (1-indexed) becomes 2 (0-indexed)
+      expect(numberInput).toHaveValue('3');
+    });
+
+    // TODO sort this out when we decide how number input handles inputs outside its min/max range
+    test.skip('does not navigate when number input value is 0 or negative', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const numberInput = screen.getByLabelText('Current page');
+
+      await userEvent.clear(numberInput);
+      await userEvent.type(numberInput, '0');
+      await userEvent.tab();
+
+      // Should not call onPageChange for invalid values
+      expect(onPageChange).not.toHaveBeenCalled();
+    });
+
+    test('disables first and previous buttons on page 1', () => {
+      renderWithContext(<PaginationControls totalPages={5} />);
+      const firstPageButton = screen.getByText('Go to first page');
+      const prevPageButton = screen.getByText('Go to previous page');
+
+      expect(firstPageButton.parentElement).toBeDisabled();
+      expect(prevPageButton.parentElement).toBeDisabled();
+    });
+
+    test('disables next and last buttons on last page', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const lastPageButton = screen.getByText('Go to last page');
+      const nextPageButton = screen.getByText('Go to next page');
+
+      // Navigate to last page
+      await userEvent.click(lastPageButton);
+
+      expect(nextPageButton.parentElement).toBeDisabled();
+      expect(lastPageButton.parentElement).toBeDisabled();
+    });
+
+    test('enables all buttons on middle pages', async () => {
+      const onPageChange = vi.fn();
+      renderWithContext(
+        <PaginationControls totalPages={5} onPageChange={onPageChange} />,
+      );
+      const numberInput = screen.getByLabelText('Current page');
+
+      // Navigate to page 3
+      await userEvent.clear(numberInput);
+      await userEvent.type(numberInput, '3');
+      await userEvent.tab();
+
+      const firstPageButton = screen.getByText('Go to first page');
+      const prevPageButton = screen.getByText('Go to previous page');
+      const nextPageButton = screen.getByText('Go to next page');
+      const lastPageButton = screen.getByText('Go to last page');
+
+      expect(firstPageButton).not.toBeDisabled();
+      expect(prevPageButton).not.toBeDisabled();
+      expect(nextPageButton).not.toBeDisabled();
+      expect(lastPageButton).not.toBeDisabled();
+    });
+
+    test('prefers totalPages prop over gridApi when both are provided', () => {
+      const mockGridApi = createMockGridApi();
+      renderWithContext(
+        <PaginationControls totalPages={15} />,
+        mockGridApi as GridApi,
+      );
+      const numberInput = screen.getByLabelText('Current page');
+      expect(numberInput).toHaveAttribute('max', '15');
+      // gridApi.paginationGetTotalPages should not be called when prop is provided
+      expect(mockGridApi.paginationGetTotalPages).not.toHaveBeenCalled();
+    });
+
+    test('handles single page scenario correctly', () => {
+      renderWithContext(<PaginationControls totalPages={1} />);
+      const firstPageButton = screen.getByText('Go to first page');
+      const prevPageButton = screen.getByText('Go to previous page');
+      const nextPageButton = screen.getByText('Go to next page');
+      const lastPageButton = screen.getByText('Go to last page');
+
+      expect(screen.getByLabelText('Current page')).toHaveValue('1');
+
+      expect(firstPageButton.parentElement).toBeDisabled();
+      expect(prevPageButton.parentElement).toBeDisabled();
+      expect(nextPageButton.parentElement).toBeDisabled();
+      expect(lastPageButton.parentElement).toBeDisabled();
+    });
+  });
+
+  describe('RowCountInfo', () => {
+    const renderWithContext = (
+      component: React.ReactElement,
+      gridApi: Partial<GridApi> | null = null,
+    ) => {
+      return render(
+        <GridApiContext.Provider value={gridApi as GridApi | null}>
+          {component}
+        </GridApiContext.Provider>,
+      );
+    };
+
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    test('renders no message when no gridApi is provided', () => {
+      renderWithContext(<RowCountInfo />, null);
+      expect(screen.queryByText(/Showing \d+ results/)).not.toBeInTheDocument();
+    });
+
+    test('renders message with displayed count and totalRows when totalRows prop is provided', async () => {
+      const mockGridApi = createMockGridApi({
+        paginationGetTotalPages: vi.fn(() => 5),
+        paginationGetRowCount: vi.fn(() => 50),
+      });
+
+      renderWithContext(<RowCountInfo totalRows={100} />, mockGridApi as GridApi);
+      await waitFor(() => {
+        expect(screen.getByText(/Showing \d+ of 100 results/)).toBeInTheDocument();
+      });
+    });
+
+    test('displays correct count when gridApi is ready with single page', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 5),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 1),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 5 results')).toBeInTheDocument();
+      });
+    });
+
+    test('displays correct count when gridApi is ready with multiple pages', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 10),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 5),
+        paginationGetRowCount: vi.fn(() => 50),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 10 of 50 results')).toBeInTheDocument();
+      });
+    });
+
+    test('displays correct count on last page with remainder', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 7),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 4), // page 5 (0-indexed)
+        paginationGetTotalPages: vi.fn(() => 5),
+        paginationGetRowCount: vi.fn(() => 47),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 7 of 47 results')).toBeInTheDocument();
+      });
+    });
+
+    test('displays correct count on last page when displayed count equals page size', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 10),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 4), // page 5 (0-indexed)
+        paginationGetTotalPages: vi.fn(() => 5),
+        paginationGetRowCount: vi.fn(() => 50),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 10 of 50 results')).toBeInTheDocument();
+      });
+    });
+
+    test('displays correct count when displayed count is less than page size on non-last page', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 5),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 3),
+        paginationGetRowCount: vi.fn(() => 25),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 5 of 25 results')).toBeInTheDocument();
+      });
+    });
+
+    test('registers event listeners for paginationChanged, filterChanged, and rowDataUpdated', async () => {
+      const mockGridApi = createMockGridApi();
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(mockGridApi.addEventListener).toHaveBeenCalledWith('paginationChanged', expect.any(Function));
+        expect(mockGridApi.addEventListener).toHaveBeenCalledWith('filterChanged', expect.any(Function));
+        expect(mockGridApi.addEventListener).toHaveBeenCalledWith('rowDataUpdated', expect.any(Function));
+      });
+    });
+
+    test('updates displayed count when paginationChanged event is triggered', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 10),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 2),
+        paginationGetRowCount: vi.fn(() => 20),
+      });
+
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 10 of 20 results')).toBeInTheDocument();
+      });
+
+      // Update the mock to return different values
+      (mockGridApi.getDisplayedRowCount as ReturnType<typeof vi.fn>).mockReturnValue(5);
+      (mockGridApi.paginationGetCurrentPage as ReturnType<typeof vi.fn>).mockReturnValue(1);
+
+      // Trigger paginationChanged event
+      const evtName = 'paginationChanged' as unknown as AgEvent<string>;
+      mockGridApi?.dispatchEvent?.(evtName);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 5 of 20 results')).toBeInTheDocument();
+      });
+    });
+
+    test('updates displayed count when filterChanged event is triggered', async () => {
+      const mockGridApi = createMockGridApi();
+
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 10 results')).toBeInTheDocument();
+      });
+
+      // Update the mock to return different values
+      (mockGridApi.getDisplayedRowCount as ReturnType<typeof vi.fn>).mockReturnValue(3);
+
+      // Trigger filterChanged event
+      const evtName = 'filterChanged' as unknown as AgEvent<string>;
+      mockGridApi?.dispatchEvent?.(evtName);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 3 results')).toBeInTheDocument();
+      });
+    });
+
+    test('updates displayed count when rowDataUpdated event is triggered', async () => {
+      const mockGridApi = createMockGridApi();
+
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 10 results')).toBeInTheDocument();
+      });
+
+      // Update the mock to return different values
+      (mockGridApi.getDisplayedRowCount as ReturnType<typeof vi.fn>).mockReturnValue(8);
+      // Trigger rowDataUpdated event
+      const evtName = 'rowDataUpdated' as unknown as AgEvent<string>;
+      mockGridApi?.dispatchEvent?.(evtName);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 8 results')).toBeInTheDocument();
+      });
+    });
+
+    test('handles case when displayedRowCount is undefined', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 0),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 1),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        // Should show a message, but the count might be -Infinity or NaN
+        expect(screen.getByText(/Showing .* results/)).toBeInTheDocument();
+      });
+    });
+
+    test('handles case when pageSize is undefined', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 10),
+        paginationGetPageSize: vi.fn(() => 0),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 1),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText(/Showing .* results/)).toBeInTheDocument();
+      });
+    });
+
+    test('does not show totalRows when pagination has only one page and totalRows prop is not provided', async () => {
+      const mockGridApi = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 5),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 1),
+        paginationGetRowCount: vi.fn(() => 5),
+      });
+      renderWithContext(<RowCountInfo />, mockGridApi as GridApi);
+
+      await waitFor(() => {
+        expect(screen.getByText('Showing 5 results')).toBeInTheDocument();
+        expect(screen.queryByText(/of \d+ results/)).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('PageSizeSelector', () => {
+    const renderWithContext = (
+      component: React.ReactElement,
+      gridApi: Partial<GridApi> | null = null,
+    ) => {
+      return render(
+        <GridApiContext.Provider value={gridApi as GridApi | null}>
+          {component}
+        </GridApiContext.Provider>,
+      );
+    };
+
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    test('renders with default page size of 100', () => {
+      renderWithContext(<PageSizeSelector />);
+      expect(screen.getByText('100')).toBeInTheDocument();
+    });
+
+    test('renders with initialPageSize prop', () => {
+      renderWithContext(<PageSizeSelector initialPageSize={50} />);
+      expect(screen.getByText('50')).toBeInTheDocument();
+    });
+
+    test('renders with initialPageSize of "All"', () => {
+      renderWithContext(<PageSizeSelector initialPageSize="All" />);
+      expect(screen.getByText('All')).toBeInTheDocument();
+    });
+
+    test('opens dropdown when trigger is clicked', async () => {
+      renderWithContext(<PageSizeSelector />);
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+      expect(await screen.findByText('10')).toBeInTheDocument();
+      expect(screen.getByText('20')).toBeInTheDocument();
+    });
+
+    test('renders all default page sizes in dropdown', async () => {
+      renderWithContext(<PageSizeSelector />);
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      expect(await screen.findByText('10')).toBeInTheDocument();
+      expect(screen.getByText('20')).toBeInTheDocument();
+      expect(screen.getByText('30')).toBeInTheDocument();
+      expect(screen.getByText('50')).toBeInTheDocument();
+      expect(screen.getAllByText('100').length).toBe(2);
+      expect(screen.getByText('200')).toBeInTheDocument();
+      expect(screen.getByText('300')).toBeInTheDocument();
+      expect(screen.getByText('500')).toBeInTheDocument();
+      expect(screen.getByText('1000')).toBeInTheDocument();
+      expect(screen.getByText('All')).toBeInTheDocument();
+    });
+
+    test('renders custom availableSizes', async () => {
+      renderWithContext(
+        <PageSizeSelector availableSizes={[5, 10, 25]} />,
+      );
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      expect(await screen.findByText('5')).toBeInTheDocument();
+      expect(screen.getByText('10')).toBeInTheDocument();
+      expect(screen.getByText('25')).toBeInTheDocument();
+      expect(screen.queryByText('20')).not.toBeInTheDocument();
+    });
+
+    test('calls onPageSizeChange when page size is selected', async () => {
+      const onPageSizeChange = vi.fn();
+      renderWithContext(
+        <PageSizeSelector onPageSizeChange={onPageSizeChange} />,
+      );
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('50');
+      await userEvent.click(item);
+
+      expect(onPageSizeChange).toHaveBeenCalledExactlyOnceWith(50);
+    });
+
+    test('updates displayed page size when selection changes', async () => {
+      renderWithContext(<PageSizeSelector />);
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('20');
+      await userEvent.click(item);
+
+      await waitFor(() => {
+        expect(screen.getByText('20')).toBeInTheDocument();
+      });
+    });
+
+    test('calls gridApi.setGridOption with pagination true and paginationPageSize when number is selected', async () => {
+      const mockGridApi = createMockGridApi({
+        setGridOption: vi.fn(),
+      });
+      renderWithContext(<PageSizeSelector />, mockGridApi as GridApi);
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('50');
+      await userEvent.click(item);
+
+      await waitFor(() => {
+        expect(mockGridApi.setGridOption).toHaveBeenCalledWith('pagination', true);
+        expect(mockGridApi.setGridOption).toHaveBeenCalledWith('paginationPageSize', 50);
+      });
+    });
+
+    test('calls gridApi.setGridOption with pagination false when "All" is selected', async () => {
+      const mockGridApi = createMockGridApi({
+        setGridOption: vi.fn(),
+      });
+      renderWithContext(<PageSizeSelector />, mockGridApi as GridApi);
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('All');
+      await userEvent.click(item);
+
+      await waitFor(() => {
+        expect(mockGridApi.setGridOption).toHaveBeenCalledWith('pagination', false);
+      });
+    });
+
+    test('handles "All" option in onPageSizeChange callback', async () => {
+      const onPageSizeChange = vi.fn();
+      renderWithContext(
+        <PageSizeSelector onPageSizeChange={onPageSizeChange} />,
+      );
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('All');
+      await userEvent.click(item);
+
+      expect(onPageSizeChange).toHaveBeenCalledExactlyOnceWith('All');
+    });
+
+    test('updates page size when initialPageSize is provided and gridApi is ready', async () => {
+      const mockGridApi = createMockGridApi({
+        setGridOption: vi.fn(),
+      });
+      renderWithContext(
+        <PageSizeSelector initialPageSize={25} />,
+        mockGridApi as GridApi,
+      );
+
+      await waitFor(() => {
+        expect(mockGridApi.setGridOption).toHaveBeenCalledWith('pagination', true);
+        expect(mockGridApi.setGridOption).toHaveBeenCalledWith('paginationPageSize', 25);
+      });
+    });
+
+    test('does not update gridApi when initialPageSize is "All" and gridApi is ready', async () => {
+      const mockGridApi = createMockGridApi({
+        setGridOption: vi.fn(),
+      });
+      renderWithContext(
+        <PageSizeSelector initialPageSize="All" />,
+        mockGridApi as GridApi,
+      );
+
+      await waitFor(() => {
+        expect(mockGridApi.setGridOption).toHaveBeenCalledWith('pagination', false);
+      });
+    });
+
+    test('does not call gridApi methods when gridApi is not available', async () => {
+      const onPageSizeChange = vi.fn();
+      renderWithContext(
+        <PageSizeSelector onPageSizeChange={onPageSizeChange} />,
+        null,
+      );
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      const item = await screen.findByText('50');
+      await userEvent.click(item);
+
+      expect(onPageSizeChange).toHaveBeenCalledExactlyOnceWith(50);
+    });
+
+    test('normalizes string numbers to numbers when updating page size', async () => {
+      const mockGridApi = createMockGridApi({
+        setGridOption: vi.fn(),
+      });
+      renderWithContext(
+        <PageSizeSelector />,
+        mockGridApi as GridApi,
+      );
+
+      const trigger = screen.getByLabelText('Select page size');
+      await userEvent.click(trigger);
+
+      // Click on a numeric option - it should be normalized to a number
+      const item = await screen.findByText('10');
+      await userEvent.click(item);
+
+      expect(mockGridApi.setGridOption).toHaveBeenCalledWith('paginationPageSize', 10);
+    });
+
+    test('handles custom availableSizes with "All" option', async () => {
+      const onPageSizeChange = vi.fn();
+      renderWithContext(
+        <PageSizeSelector
+          availableSizes={[15, 30, 'All']}
+          onPageSizeChange={onPageSizeChange}
+        />,
+      );
+
+      const trigger = screen.getByText('100');
+      await userEvent.click(trigger);
+
+      expect(await screen.findByText('15')).toBeInTheDocument();
+      expect(screen.getByText('30')).toBeInTheDocument();
+      expect(screen.getByText('All')).toBeInTheDocument();
+
+      const allItem = screen.getByText('All');
+      await userEvent.click(allItem);
+
+      expect(onPageSizeChange).toHaveBeenCalledExactlyOnceWith('All');
+    });
+  });
+
+  describe('PaginationPanel', () => {
+    const renderWithContext = (
+      component: React.ReactElement,
+      gridApi: Partial<GridApi> = createMockGridApi({
+        getDisplayedRowCount: vi.fn(() => 10),
+        paginationGetPageSize: vi.fn(() => 10),
+        paginationGetCurrentPage: vi.fn(() => 0),
+        paginationGetTotalPages: vi.fn(() => 5),
+        paginationGetRowCount: vi.fn(() => 50),
+        setGridOption: vi.fn(),
+      }),
+    ) => {
+      return render(
+        <GridApiContext.Provider value={gridApi as GridApi | null}>
+          {component}
+        </GridApiContext.Provider>,
+      );
+    };
+
+    beforeEach(() => {
+      vi.clearAllMocks();
+    });
+
+    test('renders correctly', () => {
+      const { container } = renderWithContext(
+        <PaginationPanel />,
+      );
+      const nav = container.querySelector('nav[aria-label="Pagination"]');
+      expect(nav).toBeInTheDocument();
+      expect(nav).toHaveClass('ds-table__pagination-panel');
+    });
+
+    test('renders the pagination components', async () => {
+      renderWithContext(
+        <PaginationPanel />,
+      );
+      await waitFor(() => {
+        expect(screen.getByText(/Showing \d+ of \d+ results/)).toBeInTheDocument();
+
+        expect(screen.getByText('Go to first page')).toBeInTheDocument();
+        expect(screen.getByText('Go to previous page')).toBeInTheDocument();
+        expect(screen.getByText('Go to next page')).toBeInTheDocument();
+        expect(screen.getByText('Go to last page')).toBeInTheDocument();
+
+        expect(screen.getByLabelText('Select page size')).toBeInTheDocument();
+      });
+    });
+
+    test('passes props to RowCountInfo', async () => {
+      renderWithContext(
+        <PaginationPanel
+          totalRows={100}
+        />,
+      );
+      await waitFor(() => {
+        expect(screen.getByText(/Showing \d+ of 100 results/)).toBeInTheDocument();
+      });
+    });
+
+    test('passes props to PaginationControls', async () => {
+      const onPageChange = vi.fn();
+
+      renderWithContext(
+        <PaginationPanel
+          totalPages={20}
+          onPageChange={onPageChange}
+        />,
+      );
+      const numberInput = screen.getByLabelText('Current page');
+      expect(numberInput).toHaveAttribute('max', '20');
+      const nextPageButton = screen.getByText('Go to next page');
+      await userEvent.click(nextPageButton);
+      expect(onPageChange).toHaveBeenCalledExactlyOnceWith(1);
+    });
+
+    test('passes props to PageSizeSelector', async () => {
+      const onPageSizeChange = vi.fn();
+
+      renderWithContext(
+        <PaginationPanel
+          availableSizes={[5, 15, 25]}
+          initialPageSize={5}
+          onPageSizeChange={onPageSizeChange}
+        />,
+      );
+
+      const trigger = screen.getByLabelText('Select page size');
+      expect(trigger.textContent).toContain('5');
+      await userEvent.click(trigger);
+      expect(await screen.findByText('15')).toBeInTheDocument();
+      expect(screen.getAllByText('5').length).toBe(2);
+      expect(screen.getByText('15')).toBeInTheDocument();
+      const item = await screen.findByText('25');
+      expect(item).toBeInTheDocument();
+      await userEvent.click(item);
+      expect(onPageSizeChange).toHaveBeenLastCalledWith(25);
+    });
+  });
+});