diff --git a/packages/eui/src/components/pagination/pagination.stories.tsx b/packages/eui/src/components/pagination/pagination.stories.tsx index 2fad2e25a1ee..46e78e81d2ce 100644 --- a/packages/eui/src/components/pagination/pagination.stories.tsx +++ b/packages/eui/src/components/pagination/pagination.stories.tsx @@ -6,6 +6,7 @@ * Side Public License, v 1. */ +import React, { FunctionComponent, useEffect, useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react-vite'; import { enableFunctionToggleControls } from '../../../.storybook/utils'; @@ -31,4 +32,28 @@ export const Playground: Story = { activePage: 5, pageCount: 10, }, + render: (args) => , +}; + +const StatefulPagination: FunctionComponent = ({ + activePage: _activePage, + onPageClick, + ...args +}) => { + const [activePage, setActivePage] = useState(_activePage); + + useEffect(() => { + setActivePage(_activePage); + }, [_activePage]); + + return ( + { + setActivePage(page); + onPageClick?.(page); + }} + /> + ); }; diff --git a/packages/test-helpers/README.md b/packages/test-helpers/README.md index 3e86431ea015..56f044016924 100644 --- a/packages/test-helpers/README.md +++ b/packages/test-helpers/README.md @@ -59,6 +59,7 @@ their own version at runtime. | `EuiAccordionObject` | [src/components/accordion/README.md](src/components/accordion/README.md) | | `EuiContextMenuObject` | [src/components/context_menu/README.md](src/components/context_menu/README.md) | | `EuiModalObject` | [src/components/modal/README.md](src/components/modal/README.md) | +| `EuiPaginationObject` | [src/components/pagination/README.md](src/components/pagination/README.md) | | `EuiBasicTableObject` | [src/components/basic_table/README.md](src/components/basic_table/README.md) | | `EuiColorPickerObject` | [src/components/color_picker/README.md](src/components/color_picker/README.md) | | `EuiTreeViewObject` | [src/components/tree_view/README.md](src/components/tree_view/README.md) | diff --git a/packages/test-helpers/changelogs/upcoming/10214.md b/packages/test-helpers/changelogs/upcoming/10214.md new file mode 100644 index 000000000000..3617b2d9af05 --- /dev/null +++ b/packages/test-helpers/changelogs/upcoming/10214.md @@ -0,0 +1 @@ +- Added `EuiPaginationObject` with `getActivePage()`, `getPageCount()`, `goToPage(index)`, `next()` and `previous()` diff --git a/packages/test-helpers/src/components/pagination/README.md b/packages/test-helpers/src/components/pagination/README.md new file mode 100644 index 000000000000..d5d80fb41999 --- /dev/null +++ b/packages/test-helpers/src/components/pagination/README.md @@ -0,0 +1,31 @@ +# EuiPaginationObject + +Playwright Component Object for [EuiPagination](https://eui.elastic.co/docs/components/navigation/pagination/). Covers the numbered and the compressed variant. + +## Usage + +```ts +import { EuiPaginationObject } from '@elastic/eui-test-helpers'; + +const pagination = new EuiPaginationObject(page, 'myPagination'); +await pagination.goToPage(2); +expect(await pagination.getActivePage()).toBe(2); +``` + +Set `data-test-subj` on ``. EUI spreads it onto the `