@elastic/eui-test-helpers 2.1.0 → 2.2.0

package/lib/esm/selectors.js

@@ -7,18 +7,24 @@
  */
 import { EuiAccordionSelectors } from './components/accordion/selectors';
 import { EuiBasicTableSelectors } from './components/basic_table/selectors';
+import { EuiCallOutSelectors } from './components/call_out/selectors';
 import { EuiColorPickerSelectors } from './components/color_picker/selectors';
 import { EuiComboBoxSelectors } from './components/combo_box/selectors';
 import { EuiContextMenuSelectors } from './components/context_menu/selectors';
 import { EuiDataGridSelectors } from './components/datagrid/selectors';
 import { EuiDraggableSelectors } from './components/drag_and_drop/selectors';
+import { EuiFieldSearchSelectors } from './components/form/field_search/selectors';
 import { EuiFilterButtonSelectors } from './components/filter_button/selectors';
 import { EuiFlyoutSelectors } from './components/flyout/selectors';
 import { EuiModalSelectors } from './components/modal/selectors';
+import { EuiPaginationSelectors } from './components/pagination/selectors';
 import { EuiPopoverSelectors } from './components/popover/selectors';
 import { EuiRangeSelectors } from './components/form/range/selectors';
+import { EuiSearchBarSelectors } from './components/search_bar/selectors';
 import { EuiSelectableSelectors } from './components/selectable/selectors';
+import { EuiSideNavSelectors } from './components/side_nav/selectors';
 import { EuiSuperSelectSelectors } from './components/form/super_select/selectors';
+import { EuiTableSelectors } from './components/table/selectors';
 import { EuiGlobalToastListSelectors } from './components/toast/selectors';
 import { EuiToolTipSelectors } from './components/tool_tip/selectors';
 import { EuiTreeViewSelectors } from './components/tree_view/selectors';
@@ -31,18 +37,24 @@ import { EuiTreeViewSelectors } from './components/tree_view/selectors';
 export const selectors = {
     accordion: EuiAccordionSelectors,
     basicTable: EuiBasicTableSelectors,
+    callOut: EuiCallOutSelectors,
     colorPicker: EuiColorPickerSelectors,
     comboBox: EuiComboBoxSelectors,
     contextMenu: EuiContextMenuSelectors,
     dataGrid: EuiDataGridSelectors,
     draggable: EuiDraggableSelectors,
+    fieldSearch: EuiFieldSearchSelectors,
     filterButton: EuiFilterButtonSelectors,
     flyout: EuiFlyoutSelectors,
     modal: EuiModalSelectors,
+    pagination: EuiPaginationSelectors,
     popover: EuiPopoverSelectors,
     range: EuiRangeSelectors,
+    searchBar: EuiSearchBarSelectors,
     selectable: EuiSelectableSelectors,
+    sideNav: EuiSideNavSelectors,
     superSelect: EuiSuperSelectSelectors,
+    table: EuiTableSelectors,
     globalToastList: EuiGlobalToastListSelectors,
     toolTip: EuiToolTipSelectors,
     treeView: EuiTreeViewSelectors,

package/lib/esm/selectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../src/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,SAAS,EAAE,qBAAqB;IAChC,UAAU,EAAE,sBAAsB;IAClC,WAAW,EAAE,uBAAuB;IACpC,QAAQ,EAAE,oBAAoB;IAC9B,WAAW,EAAE,uBAAuB;IACpC,QAAQ,EAAE,oBAAoB;IAC9B,SAAS,EAAE,qBAAqB;IAChC,YAAY,EAAE,wBAAwB;IACtC,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE,iBAAiB;IACxB,OAAO,EAAE,mBAAmB;IAC5B,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE,sBAAsB;IAClC,WAAW,EAAE,uBAAuB;IACpC,eAAe,EAAE,2BAA2B;IAC5C,OAAO,EAAE,mBAAmB;IAC5B,QAAQ,EAAE,oBAAoB;CACtB,CAAC"}
+{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../src/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,qBAAqB,EAAE,MAAM,kCAAkC,CAAC;AACzE,OAAO,EAAE,sBAAsB,EAAE,MAAM,oCAAoC,CAAC;AAC5E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,MAAM,mCAAmC,CAAC;AACtE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mCAAmC,CAAC;AAC1E,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,SAAS,EAAE,qBAAqB;IAChC,UAAU,EAAE,sBAAsB;IAClC,OAAO,EAAE,mBAAmB;IAC5B,WAAW,EAAE,uBAAuB;IACpC,QAAQ,EAAE,oBAAoB;IAC9B,WAAW,EAAE,uBAAuB;IACpC,QAAQ,EAAE,oBAAoB;IAC9B,SAAS,EAAE,qBAAqB;IAChC,WAAW,EAAE,uBAAuB;IACpC,YAAY,EAAE,wBAAwB;IACtC,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE,sBAAsB;IAClC,OAAO,EAAE,mBAAmB;IAC5B,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,qBAAqB;IAChC,UAAU,EAAE,sBAAsB;IAClC,OAAO,EAAE,mBAAmB;IAC5B,WAAW,EAAE,uBAAuB;IACpC,KAAK,EAAE,iBAAiB;IACxB,eAAe,EAAE,2BAA2B;IAC5C,OAAO,EAAE,mBAAmB;IAC5B,QAAQ,EAAE,oBAAoB;CACtB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-test-helpers",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A library of EUI test helpers for RTL, Cypress and Scout",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": {

package/src/components/basic_table/README.md

@@ -20,6 +20,7 @@ Set `data-test-subj` on the `<EuiBasicTable>`/`<EuiInMemoryTable>` (EUI spreads
 |---|---|
 | `rows` | `Locator` for the table's data rows, excluding EUI's own "no items found"/error-message row. |
 | `cells(field)` | `Locator` for a field-data column's cells across all rows, resolved from EUI's own header `data-test-subj`. |
+| `headerCells`, `column(index)`, `cell(row, column)` | Inherited from [EuiTableObject](../table/README.md), positional access when no `field` is available. |
 
 `rows` excludes EUI's empty/error message row by filtering out any row whose cell carries a `colspan` — real data rows don't set one, EUI's own placeholder row always does (it spans every column).
 

package/src/components/call_out/README.md

@@ -0,0 +1,29 @@
+# EuiCallOutObject
+
+Playwright Component Object for [EuiCallOut](https://eui.elastic.co/docs/components/display/callout/).
+
+## Usage
+
+```ts
+import { EuiCallOutObject } from '@elastic/eui-test-helpers';
+
+const callOut = new EuiCallOutObject(page, 'myCallOut');
+expect(await callOut.getColor()).toBe('warning');
+expect(await callOut.getTitle()).toBe('Index is read only');
+```
+
+Set `data-test-subj` on `<EuiCallOut>`. EUI puts it on the panel root and derives `<subj>__message`, `<subj>__content` and `<subj>__actions` for the inner blocks. The root lookup matches whole tokens, so those derived values are not mistaken for the root.
+
+## API
+
+| Member | Description |
+|---|---|
+| `getTitle()` | The title text, or an empty string without a `title`. |
+| `getText()` | The `text` block, or an empty string without a `text`. |
+| `getColor()` | The color variant read from the root class: `primary`, `success`, `warning` or `danger`. |
+| `dismissButton` | `Locator` for the dismiss button, found by its test subj or its cross icon so a `dismissButtonProps` test subj override still works. Zero elements without `onDismiss`. |
+| `dismiss()` | Click the dismiss button. What follows is the consumer's `onDismiss`, nothing is asserted. |
+
+## Deliberately excluded
+
+Custom `children` and `actions` are consumer content, use `locator` to reach them. The `announceOnMount` live region renders a second, off-screen copy of the content under `role="status"`, it is outside the root and does not affect this object.

package/src/components/form/field_search/README.md

@@ -0,0 +1,29 @@
+# EuiFieldSearchObject
+
+Playwright Component Object for [EuiFieldSearch](https://eui.elastic.co/docs/components/forms/search-and-filter/search/).
+
+## Usage
+
+```ts
+import { EuiFieldSearchObject } from '@elastic/eui-test-helpers';
+
+const search = new EuiFieldSearchObject(page, 'mySearch');
+await search.setQuery('logs');
+expect(await search.getQuery()).toBe('logs');
+```
+
+Set `data-test-subj` on `<EuiFieldSearch>`. EUI spreads it onto the `<input type="search">`, which the component-type guard verifies.
+
+## API
+
+| Member | Description |
+|---|---|
+| `setQuery(text)` | Replace the text and submit it with Enter. Triggers `onSearch` for both the incremental and the plain variant. |
+| `getQuery()` | The current text of the input. |
+| `clear()` | Empty the input and submit, so `onSearch` receives an empty query. |
+
+`clear()` does not use the clear button since it only renders with `isClearable` and a value. Submitting an empty query has the same effect.
+
+## Deliberately excluded
+
+Per keystroke `onSearch` of the incremental variant. `setQuery` fills the text in one go and submits once. Use `locator.pressSequentially()` if a test needs every keystroke.

package/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 `<EuiPagination>`. EUI spreads it onto the `<nav>`, which the component-type guard verifies. Page indexes are 0-based, matching EUI's `activePage` prop and the `pagination-button-<index>` test subjs.
+
+## API
+
+| Member | Description |
+|---|---|
+| `getActivePage()` | The 0-based index of the active page. |
+| `getPageCount()` | The total number of pages. |
+| `goToPage(index)` | Go to a page and wait for it to become active. Clicks the page button when rendered, otherwise steps through next or previous. No-op if already active, throws if out of range. |
+| `next()` | Click the next arrow and wait for the page to advance. |
+| `previous()` | Click the previous arrow and wait for the page to go back. |
+
+The numbered variant is read from the `aria-current="page"` button and the last page button. The compressed variant is read from its "page of total" text.
+
+## Deliberately excluded
+
+`pageCount={0}` (unknown total, "page X of collection") is not covered, `getPageCount` and `goToPage` have nothing to read there. The first and last arrows exist only in the compressed variant, `goToPage(0)` and `goToPage(count - 1)` cover the same need.

package/src/components/search_bar/README.md

@@ -0,0 +1,18 @@
+# EuiSearchBarObject
+
+Playwright Component Object for [EuiSearchBar](https://eui.elastic.co/docs/components/forms/search-and-filter/search-bar/).
+
+## Usage
+
+```ts
+import { EuiSearchBarObject } from '@elastic/eui-test-helpers';
+
+const searchBar = new EuiSearchBarObject(page, 'mySearchBar');
+await searchBar.setQuery('type:dashboard');
+```
+
+The search bar has no root of its own. Pass the subj through the `box` prop, `box={{ 'data-test-subj': 'mySearchBar' }}`, EUI puts it on the search input. This object is [EuiFieldSearchObject](../form/field_search/README.md) under the search bar's own name, same API: `setQuery(text)`, `getQuery()`, `clear()`.
+
+## Deliberately excluded
+
+The filter buttons next to the box are `EuiFilterButton`, use `EuiFilterButtonObject`. Query parsing and the error tooltip are consumer facing results of `onChange`, assert on them in the test.

package/src/components/side_nav/README.md

@@ -0,0 +1,31 @@
+# EuiSideNavObject
+
+Playwright Component Object for [EuiSideNav](https://eui.elastic.co/docs/components/navigation/side-nav/).
+
+## Usage
+
+```ts
+import { EuiSideNavObject } from '@elastic/eui-test-helpers';
+
+const sideNav = new EuiSideNavObject(page, 'mySideNav');
+await sideNav.expand('Data');
+await sideNav.select('Index Management');
+```
+
+Set `data-test-subj` on `<EuiSideNav>`. EUI spreads it onto the `<nav>`, which the component-type guard verifies. Items are addressed by their exact label.
+
+## API
+
+| Member | Description |
+|---|---|
+| `getItems()` | The labels of every rendered item, in document order. |
+| `item(label)` | `Locator` for the clickable element of the item with exactly this label. |
+| `select(label)` | Click the item. Selection is owned by the consumer, usually a route change, so nothing is asserted afterwards. |
+| `getSelected()` | The label of the selected item, or `null`. |
+| `expand(label)` | Expand an accordion item (children, no link or click handler) and wait for its children. No-op if already open. |
+
+Closed branches are not in the DOM at all, so `item()` and `getItems()` only see what is rendered. Expand the parent first.
+
+## Deliberately excluded
+
+The mobile toggle (`isOpenOnMobile`), the responsive variant is a Kibana layout concern. Custom `renderItem` output is supported only as far as it keeps EUI's item classes.

package/src/components/table/README.md

@@ -0,0 +1,31 @@
+# EuiTableObject
+
+Playwright Component Object for [EuiTable](https://eui.elastic.co/docs/components/tabular-content/tables/), the low level table built from `EuiTableHeader`, `EuiTableRow` and `EuiTableRowCell`. `EuiBasicTableObject` extends it for `EuiBasicTable` and `EuiInMemoryTable`, use that one when the table has field based columns.
+
+## Usage
+
+```ts
+import { EuiTableObject } from '@elastic/eui-test-helpers';
+
+const table = new EuiTableObject(page, 'myTable');
+await expect(table.rows).toHaveCount(3);
+await expect(table.column(1)).toHaveText(['Running', 'Finished', 'Archived']);
+await expect(table.cell(0, 1)).toHaveText('Running');
+```
+
+Set `data-test-subj` on `<EuiTable>`. EUI spreads it onto the `<table>`, which the component-type guard verifies.
+
+## API
+
+| Member | Description |
+|---|---|
+| `rows` | `Locator` for the body rows. |
+| `headerCells` | `Locator` for the header cells, in column order, including a selection checkbox cell. |
+| `column(index)` | `Locator` for one column's cells across all body rows, by 0-based position. |
+| `cell(row, column)` | `Locator` for one body cell, by 0-based row and column position. |
+
+Columns are addressed by position because a plain `EuiTable` has no field names. `column` and `cell` match direct children of a row only, both `<td>` and `<th>` since EUI renders a row header cell as `<th scope="row">`.
+
+## Deliberately excluded
+
+Sorting, selection and pagination are not covered. Sorting and selection are consumer wiring on a plain table, and pagination is a separate component.