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

package/dist/components/table/pagination/Pagination.test.js

@@ -0,0 +1,616 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+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 { 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) => {
+        const mockListeners = {
+            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, callback) => {
+                if (!mockListeners[event]) {
+                    mockListeners[event] = [];
+                }
+                mockListeners[event].push(callback);
+            }),
+            removeEventListener: vi.fn(),
+            dispatchEvent: (evtName) => {
+                mockListeners[evtName]?.forEach((callback) => {
+                    callback();
+                });
+            },
+            ...overrides,
+        };
+        return result;
+    };
+    describe('PaginationControls', () => {
+        const renderWithContext = (component, gridApi = null) => {
+            return render(_jsx(GridApiContext.Provider, { value: gridApi, children: component }));
+        };
+        test('renders pagination controls container', () => {
+            const { container } = renderWithContext(_jsx(PaginationControls, { totalPages: 5 }));
+            expect(container.querySelector('.ds-table__pagination-controls')).toBeInTheDocument();
+        });
+        test('renders all navigation buttons', () => {
+            renderWithContext(_jsx(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(_jsx(PaginationControls, { totalPages: 5 }));
+            const numberInput = screen.getByLabelText('Current page');
+            expect(numberInput).toBeInTheDocument();
+            expect(numberInput).toHaveValue('1');
+        });
+        test('uses totalPages prop when provided', () => {
+            renderWithContext(_jsx(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(_jsx(PaginationControls, {}), mockGridApi);
+            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(_jsx(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(_jsx(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(_jsx(PaginationControls, { totalPages: 5 }), mockGridApi);
+            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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(PaginationControls, { totalPages: 15 }), mockGridApi);
+            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(_jsx(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, gridApi = null) => {
+            return render(_jsx(GridApiContext.Provider, { value: gridApi, children: component }));
+        };
+        beforeEach(() => {
+            vi.clearAllMocks();
+        });
+        test('renders no message when no gridApi is provided', () => {
+            renderWithContext(_jsx(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(_jsx(RowCountInfo, { totalRows: 100 }), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            await waitFor(() => {
+                expect(screen.getByText('Showing 10 of 20 results')).toBeInTheDocument();
+            });
+            // Update the mock to return different values
+            mockGridApi.getDisplayedRowCount.mockReturnValue(5);
+            mockGridApi.paginationGetCurrentPage.mockReturnValue(1);
+            // Trigger paginationChanged event
+            const evtName = 'paginationChanged';
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            await waitFor(() => {
+                expect(screen.getByText('Showing 10 results')).toBeInTheDocument();
+            });
+            // Update the mock to return different values
+            mockGridApi.getDisplayedRowCount.mockReturnValue(3);
+            // Trigger filterChanged event
+            const evtName = 'filterChanged';
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            await waitFor(() => {
+                expect(screen.getByText('Showing 10 results')).toBeInTheDocument();
+            });
+            // Update the mock to return different values
+            mockGridApi.getDisplayedRowCount.mockReturnValue(8);
+            // Trigger rowDataUpdated event
+            const evtName = 'rowDataUpdated';
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            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(_jsx(RowCountInfo, {}), mockGridApi);
+            await waitFor(() => {
+                expect(screen.getByText('Showing 5 results')).toBeInTheDocument();
+                expect(screen.queryByText(/of \d+ results/)).not.toBeInTheDocument();
+            });
+        });
+    });
+    describe('PageSizeSelector', () => {
+        const renderWithContext = (component, gridApi = null) => {
+            return render(_jsx(GridApiContext.Provider, { value: gridApi, children: component }));
+        };
+        beforeEach(() => {
+            vi.clearAllMocks();
+        });
+        test('renders with default page size of 100', () => {
+            renderWithContext(_jsx(PageSizeSelector, {}));
+            expect(screen.getByText('100')).toBeInTheDocument();
+        });
+        test('renders with initialPageSize prop', () => {
+            renderWithContext(_jsx(PageSizeSelector, { initialPageSize: 50 }));
+            expect(screen.getByText('50')).toBeInTheDocument();
+        });
+        test('renders with initialPageSize of "All"', () => {
+            renderWithContext(_jsx(PageSizeSelector, { initialPageSize: "All" }));
+            expect(screen.getByText('All')).toBeInTheDocument();
+        });
+        test('opens dropdown when trigger is clicked', async () => {
+            renderWithContext(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(PageSizeSelector, {}), mockGridApi);
+            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(_jsx(PageSizeSelector, {}), mockGridApi);
+            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(_jsx(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(_jsx(PageSizeSelector, { initialPageSize: 25 }), mockGridApi);
+            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(_jsx(PageSizeSelector, { initialPageSize: "All" }), mockGridApi);
+            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(_jsx(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(_jsx(PageSizeSelector, {}), mockGridApi);
+            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(_jsx(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, 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(_jsx(GridApiContext.Provider, { value: gridApi, children: component }));
+        };
+        beforeEach(() => {
+            vi.clearAllMocks();
+        });
+        test('renders correctly', () => {
+            const { container } = renderWithContext(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(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);
+        });
+    });
+});
+//# sourceMappingURL=Pagination.test.js.map