@elastic/eui-test-helpers 2.0.0 → 2.1.0-snapshot.1792553816977

package/README.md

@@ -59,6 +59,8 @@ 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) |
+| `EuiTableObject` | [src/components/table/README.md](src/components/table/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) |

package/lib/cjs/components/color_picker/selectors.d.ts

@@ -1,13 +1,17 @@
 /**
  * Stable selectors for
  * {@link https://eui.elastic.co/docs/components/forms/color-picker/|EuiColorPicker}.
- * `*_SELECTOR` values are CSS.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
  */
 export declare const EuiColorPickerSelectors: {
-    /** The default text-input anchor. A custom `button` prop has no class of its own. */
+    /** Token EUI adds to the anchor's `data-test-subj`, on the default input and on a custom `button` alike. */
+    ANCHOR_TEST_SUBJ: string;
+    /** The anchor, whether the default text input or a custom `button`. */
     ANCHOR_SELECTOR: string;
     /** The popover panel, rendered in a portal and only while open. */
     PANEL_SELECTOR: string;
     /** A swatch button inside the panel. */
     SWATCH_SELECTOR: string;
+    /** The hex input inside the panel. Present only when `secondaryInputDisplay` is `top` or `bottom`. */
+    SECONDARY_INPUT_SELECTOR: string;
 };

package/lib/cjs/components/color_picker/selectors.js

@@ -15,13 +15,17 @@ exports.EuiColorPickerSelectors = void 0;
 /**
  * Stable selectors for
  * {@link https://eui.elastic.co/docs/components/forms/color-picker/|EuiColorPicker}.
- * `*_SELECTOR` values are CSS.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
  */
 const EuiColorPickerSelectors = exports.EuiColorPickerSelectors = {
-  /** The default text-input anchor. A custom `button` prop has no class of its own. */
-  ANCHOR_SELECTOR: '.euiColorPicker__input',
+  /** Token EUI adds to the anchor's `data-test-subj`, on the default input and on a custom `button` alike. */
+  ANCHOR_TEST_SUBJ: 'euiColorPickerAnchor',
+  /** The anchor, whether the default text input or a custom `button`. */
+  ANCHOR_SELECTOR: '[data-test-subj~="euiColorPickerAnchor"]',
   /** The popover panel, rendered in a portal and only while open. */
   PANEL_SELECTOR: '[data-popover-panel].euiColorPicker__popoverPanel',
   /** A swatch button inside the panel. */
-  SWATCH_SELECTOR: '.euiColorPickerSwatch'
+  SWATCH_SELECTOR: '.euiColorPickerSwatch',
+  /** The hex input inside the panel. Present only when `secondaryInputDisplay` is `top` or `bottom`. */
+  SECONDARY_INPUT_SELECTOR: '[data-test-subj^="euiColorPickerInput_"]'
 };

package/lib/cjs/components/pagination/selectors.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/navigation/pagination/|EuiPagination}.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
+ */
+export declare const EuiPaginationSelectors: {
+    /** The `<nav>` root carrying the consumer's `data-test-subj`. */
+    ROOT_SELECTOR: string;
+    /** A numbered page button. Not rendered in the compressed variant. */
+    PAGE_BUTTON_SELECTOR: string;
+    /** The numbered page button of the active page. */
+    ACTIVE_PAGE_BUTTON_SELECTOR: string;
+    /** The "page of total" text of the compressed variant, with one `<span>` per number. */
+    COMPRESSED_TEXT_SELECTOR: string;
+    /** Prefix of a page button's test subj, followed by the 0-based page index. */
+    PAGE_BUTTON_TEST_SUBJ_PREFIX: string;
+    FIRST_BUTTON_TEST_SUBJ: string;
+    PREVIOUS_BUTTON_TEST_SUBJ: string;
+    NEXT_BUTTON_TEST_SUBJ: string;
+    LAST_BUTTON_TEST_SUBJ: string;
+};

package/lib/cjs/components/pagination/selectors.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiPaginationSelectors = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/navigation/pagination/|EuiPagination}.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
+ */
+const EuiPaginationSelectors = exports.EuiPaginationSelectors = {
+  /** The `<nav>` root carrying the consumer's `data-test-subj`. */
+  ROOT_SELECTOR: '.euiPagination',
+  /** A numbered page button. Not rendered in the compressed variant. */
+  PAGE_BUTTON_SELECTOR: '.euiPaginationButton',
+  /** The numbered page button of the active page. */
+  ACTIVE_PAGE_BUTTON_SELECTOR: '.euiPaginationButton[aria-current="page"]',
+  /** The "page of total" text of the compressed variant, with one `<span>` per number. */
+  COMPRESSED_TEXT_SELECTOR: '.euiPagination__compressedText',
+  /** Prefix of a page button's test subj, followed by the 0-based page index. */
+  PAGE_BUTTON_TEST_SUBJ_PREFIX: 'pagination-button-',
+  FIRST_BUTTON_TEST_SUBJ: 'pagination-button-first',
+  PREVIOUS_BUTTON_TEST_SUBJ: 'pagination-button-previous',
+  NEXT_BUTTON_TEST_SUBJ: 'pagination-button-next',
+  LAST_BUTTON_TEST_SUBJ: 'pagination-button-last'
+};

package/lib/cjs/components/table/selectors.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/tabular-content/tables/|EuiTable}.
+ * `*_SELECTOR` values are CSS.
+ */
+export declare const EuiTableSelectors: {
+    /** The `<table>` element carrying the consumer's `data-test-subj`. */
+    ROOT_SELECTOR: string;
+    /** A body row. Also matches EUI's own empty/error message row, callers must exclude those. */
+    ROW_SELECTOR: string;
+    /** A body cell. */
+    ROW_CELL_SELECTOR: string;
+    /** A header cell, including the selection checkbox cell which has its own class. */
+    HEADER_CELL_SELECTOR: string;
+};

package/lib/cjs/components/table/selectors.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiTableSelectors = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/tabular-content/tables/|EuiTable}.
+ * `*_SELECTOR` values are CSS.
+ */
+const EuiTableSelectors = exports.EuiTableSelectors = {
+  /** The `<table>` element carrying the consumer's `data-test-subj`. */
+  ROOT_SELECTOR: '.euiTable',
+  /** A body row. Also matches EUI's own empty/error message row, callers must exclude those. */
+  ROW_SELECTOR: '.euiTableRow',
+  /** A body cell. */
+  ROW_CELL_SELECTOR: '.euiTableRowCell',
+  /** A header cell, including the selection checkbox cell which has its own class. */
+  HEADER_CELL_SELECTOR: 'thead > tr > :is(th, td)'
+};

package/lib/cjs/index.d.ts

@@ -12,6 +12,8 @@ export { EuiFlyoutObject } from './playwright/components/flyout/object';
 export { EuiAccordionObject } from './playwright/components/accordion/object';
 export { EuiContextMenuObject } from './playwright/components/context_menu/object';
 export { EuiModalObject } from './playwright/components/modal/object';
+export { EuiTableObject } from './playwright/components/table/object';
+export { EuiPaginationObject } from './playwright/components/pagination/object';
 export { EuiBasicTableObject } from './playwright/components/basic_table/object';
 export { EuiColorPickerObject } from './playwright/components/color_picker/object';
 export { EuiTreeViewObject } from './playwright/components/tree_view/object';

package/lib/cjs/index.js

@@ -18,13 +18,13 @@ Object.defineProperty(exports, "EuiAccordionObject", {
 Object.defineProperty(exports, "EuiBasicTableObject", {
   enumerable: true,
   get: function () {
-    return _object14.EuiBasicTableObject;
+    return _object16.EuiBasicTableObject;
   }
 });
 Object.defineProperty(exports, "EuiColorPickerObject", {
   enumerable: true,
   get: function () {
-    return _object15.EuiColorPickerObject;
+    return _object17.EuiColorPickerObject;
   }
 });
 Object.defineProperty(exports, "EuiComboBoxObject", {
@@ -75,6 +75,12 @@ Object.defineProperty(exports, "EuiModalObject", {
     return _object13.EuiModalObject;
   }
 });
+Object.defineProperty(exports, "EuiPaginationObject", {
+  enumerable: true,
+  get: function () {
+    return _object15.EuiPaginationObject;
+  }
+});
 Object.defineProperty(exports, "EuiPopoverObject", {
   enumerable: true,
   get: function () {
@@ -99,16 +105,22 @@ Object.defineProperty(exports, "EuiSuperSelectObject", {
     return _object3.EuiSuperSelectObject;
   }
 });
+Object.defineProperty(exports, "EuiTableObject", {
+  enumerable: true,
+  get: function () {
+    return _object14.EuiTableObject;
+  }
+});
 Object.defineProperty(exports, "EuiToolTipObject", {
   enumerable: true,
   get: function () {
-    return _object17.EuiToolTipObject;
+    return _object19.EuiToolTipObject;
   }
 });
 Object.defineProperty(exports, "EuiTreeViewObject", {
   enumerable: true,
   get: function () {
-    return _object16.EuiTreeViewObject;
+    return _object18.EuiTreeViewObject;
   }
 });
 Object.defineProperty(exports, "selectors", {
@@ -131,8 +143,10 @@ var _object10 = require("./playwright/components/flyout/object");
 var _object11 = require("./playwright/components/accordion/object");
 var _object12 = require("./playwright/components/context_menu/object");
 var _object13 = require("./playwright/components/modal/object");
-var _object14 = require("./playwright/components/basic_table/object");
-var _object15 = require("./playwright/components/color_picker/object");
-var _object16 = require("./playwright/components/tree_view/object");
-var _object17 = require("./playwright/components/tool_tip/object");
+var _object14 = require("./playwright/components/table/object");
+var _object15 = require("./playwright/components/pagination/object");
+var _object16 = require("./playwright/components/basic_table/object");
+var _object17 = require("./playwright/components/color_picker/object");
+var _object18 = require("./playwright/components/tree_view/object");
+var _object19 = require("./playwright/components/tool_tip/object");
 var _selectors = require("./selectors");

package/lib/cjs/playwright/base_object.js

@@ -13,11 +13,13 @@ exports.BaseObject = void 0;
  */
 
 /**
- * Matches one space-separated token in `data-test-subj`, not the whole
- * attribute value. `getByTestId` does an exact match and misses components
- * like `EuiColorPicker` that add their own token to the consumer's subj.
+ * Matches space-separated tokens in `data-test-subj`, not the whole attribute
+ * value. `getByTestId` does an exact match and misses components like
+ * `EuiColorPicker` that add their own token to the consumer's subj. A
+ * `testSubj` with spaces (`colorEditorColorPicker 0`, a Kibana convention) is
+ * split so every token must be present, in any order.
  */
-const testSubjSelector = testSubj => `[data-test-subj~="${testSubj.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`;
+const testSubjSelector = testSubj => testSubj.trim().split(/\s+/).map(token => `[data-test-subj~="${token.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`).join('');
 
 /**
  * Base class for Playwright Component Objects — semantic wrappers around a

package/lib/cjs/playwright/components/basic_table/object.d.ts

@@ -1,5 +1,6 @@
 import type { Locator } from '@playwright/test';
-import { BaseObject, type ObjectScope } from '../../base_object';
+import type { ObjectScope } from '../../base_object';
+import { EuiTableObject } from '../table/object';
 /**
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/tabular-content/tables/ EuiBasicTable}
@@ -8,20 +9,14 @@ import { BaseObject, type ObjectScope } from '../../base_object';
  *
  * `testSubj` must match the `data-test-subj` set by the consumer on the
  * `<EuiBasicTable>`/`<EuiInMemoryTable>` (EUI spreads it onto the `.euiBasicTable`
- * root). See the package README for what's deliberately excluded from v1.
+ * root). Extends `EuiTableObject`, so `rows`, `headerCells`, `column` and `cell`
+ * are available too. See the package README for what's deliberately excluded.
  */
-export declare class EuiBasicTableObject extends BaseObject {
+export declare class EuiBasicTableObject extends EuiTableObject {
     constructor(scope: ObjectScope, testSubj: string);
     /**
-     * The table's data rows, as a `Locator` so callers keep Playwright auto-retry
-     * for count and content assertions (e.g. `expect(table.rows).toHaveCount(3)`).
-     *
-     * Excludes EUI's own "no items found" (and error-message) row: when the table
-     * is empty, EUI still renders a single `.euiTableRow` whose one cell spans
-     * every column (`colSpan` on `EuiTableRowCell`, the `td[colspan]` HTML
-     * attribute). Real data rows don't set `colspan` on their cells, so filtering
-     * it out is what keeps `toHaveCount(0)` correct on an empty table instead of
-     * reading `1`.
+     * The data rows. Excludes EUI's own "no items found" row, whose single cell
+     * spans every column with `colspan`. Basic table data rows never set it.
      */
     get rows(): Locator;
     /**

package/lib/cjs/playwright/components/basic_table/object.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiBasicTableObject = void 0;
-var _base_object = require("../../base_object");
+var _object = require("../table/object");
 var _selectors = require("../../../components/basic_table/selectors");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -22,26 +22,20 @@ var _selectors = require("../../../components/basic_table/selectors");
  *
  * `testSubj` must match the `data-test-subj` set by the consumer on the
  * `<EuiBasicTable>`/`<EuiInMemoryTable>` (EUI spreads it onto the `.euiBasicTable`
- * root). See the package README for what's deliberately excluded from v1.
+ * root). Extends `EuiTableObject`, so `rows`, `headerCells`, `column` and `cell`
+ * are available too. See the package README for what's deliberately excluded.
  */
-class EuiBasicTableObject extends _base_object.BaseObject {
+class EuiBasicTableObject extends _object.EuiTableObject {
   constructor(scope, testSubj) {
     super(scope, testSubj, _selectors.EuiBasicTableSelectors.ROOT_SELECTOR);
   }
 
   /**
-   * The table's data rows, as a `Locator` so callers keep Playwright auto-retry
-   * for count and content assertions (e.g. `expect(table.rows).toHaveCount(3)`).
-   *
-   * Excludes EUI's own "no items found" (and error-message) row: when the table
-   * is empty, EUI still renders a single `.euiTableRow` whose one cell spans
-   * every column (`colSpan` on `EuiTableRowCell`, the `td[colspan]` HTML
-   * attribute). Real data rows don't set `colspan` on their cells, so filtering
-   * it out is what keeps `toHaveCount(0)` correct on an empty table instead of
-   * reading `1`.
+   * The data rows. Excludes EUI's own "no items found" row, whose single cell
+   * spans every column with `colspan`. Basic table data rows never set it.
    */
   get rows() {
-    return this.root.locator(_selectors.EuiBasicTableSelectors.ROW_SELECTOR).filter({
+    return super.rows.filter({
       hasNot: this.root.page().locator('td[colspan]')
     });
   }

package/lib/cjs/playwright/components/color_picker/object.d.ts

@@ -1,12 +1,12 @@
-import type { Locator } from '@playwright/test';
+import { type Locator } from '@playwright/test';
 import { BaseObject, type ObjectScope } from '../../base_object';
 /**
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/forms/color-picker/ EuiColorPicker}.
  *
- * `testSubj` must be set on `EuiColorPicker` itself. Covers only the default
- * text-input anchor, not a custom `button` prop. See the package README for
- * what this does not cover.
+ * `testSubj` must be set on `EuiColorPicker` itself. `locator` is the anchor:
+ * the default text input, or the element passed as the `button` prop. See the
+ * package README for what this does not cover.
  */
 export declare class EuiColorPickerObject extends BaseObject {
     constructor(scope: ObjectScope, testSubj: string);
@@ -17,4 +17,25 @@ export declare class EuiColorPickerObject extends BaseObject {
     get panel(): Locator;
     /** The swatch buttons inside {@link panel}. */
     get swatches(): Locator;
+    /**
+     * Type `color` into the hex input and verify it was accepted. With the
+     * default anchor that input is the anchor itself. With a custom `button`
+     * the input lives inside the panel, so the picker is opened, filled and
+     * closed again. Throws if the panel has no input
+     * (`secondaryInputDisplay="none"`).
+     */
+    setColor(color: string): Promise<void>;
+    /**
+     * The color shown in the hex input, uppercased. With a custom `button` the
+     * picker is opened to read it and closed again.
+     */
+    getColor(): Promise<string>;
+    private isInputAnchor;
+    /**
+     * Click a custom `button` anchor, which toggles the panel, and wait for the
+     * panel to follow. Only used with a custom `button`: the default input
+     * anchor opens on click but does not close on a second one.
+     */
+    private toggle;
+    private secondaryInput;
 }

package/lib/cjs/playwright/components/color_picker/object.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiColorPickerObject = void 0;
+var _test = require("@playwright/test");
 var _base_object = require("../../base_object");
 var _selectors = require("../../../components/color_picker/selectors");
 /*
@@ -18,9 +19,9 @@ var _selectors = require("../../../components/color_picker/selectors");
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/forms/color-picker/ EuiColorPicker}.
  *
- * `testSubj` must be set on `EuiColorPicker` itself. Covers only the default
- * text-input anchor, not a custom `button` prop. See the package README for
- * what this does not cover.
+ * `testSubj` must be set on `EuiColorPicker` itself. `locator` is the anchor:
+ * the default text input, or the element passed as the `button` prop. See the
+ * package README for what this does not cover.
  */
 class EuiColorPickerObject extends _base_object.BaseObject {
   constructor(scope, testSubj) {
@@ -39,5 +40,69 @@ class EuiColorPickerObject extends _base_object.BaseObject {
   get swatches() {
     return this.panel.locator(_selectors.EuiColorPickerSelectors.SWATCH_SELECTOR);
   }
+
+  /**
+   * Type `color` into the hex input and verify it was accepted. With the
+   * default anchor that input is the anchor itself. With a custom `button`
+   * the input lives inside the panel, so the picker is opened, filled and
+   * closed again. Throws if the panel has no input
+   * (`secondaryInputDisplay="none"`).
+   */
+  async setColor(color) {
+    // EUI echoes the value back uppercased.
+    const expected = color.toUpperCase();
+    if (await this.isInputAnchor()) {
+      await this.root.fill(color);
+      await (0, _test.expect)(this.root).toHaveValue(expected);
+      await this.root.blur();
+      return;
+    }
+    await this.toggle();
+    const input = await this.secondaryInput();
+    await input.fill(color);
+    await (0, _test.expect)(input).toHaveValue(expected);
+    await this.toggle();
+  }
+
+  /**
+   * The color shown in the hex input, uppercased. With a custom `button` the
+   * picker is opened to read it and closed again.
+   */
+  async getColor() {
+    if (await this.isInputAnchor()) {
+      return this.root.inputValue();
+    }
+    await this.toggle();
+    const value = await (await this.secondaryInput()).inputValue();
+    await this.toggle();
+    return value;
+  }
+  async isInputAnchor() {
+    return this.root.evaluate(el => el.tagName === 'INPUT');
+  }
+
+  /**
+   * Click a custom `button` anchor, which toggles the panel, and wait for the
+   * panel to follow. Only used with a custom `button`: the default input
+   * anchor opens on click but does not close on a second one.
+   */
+  async toggle() {
+    const wasOpen = (await this.panel.count()) > 0;
+    await this.root.click();
+    if (wasOpen) {
+      await this.panel.waitFor({
+        state: 'detached'
+      });
+    } else {
+      await (0, _test.expect)(this.panel).toHaveAttribute('data-popover-open', 'true');
+    }
+  }
+  async secondaryInput() {
+    const input = this.panel.locator(_selectors.EuiColorPickerSelectors.SECONDARY_INPUT_SELECTOR);
+    if ((await input.count()) === 0) {
+      throw new Error(`EuiColorPicker "${this.testSubj}" uses a custom button and its panel has no hex input. ` + `Set secondaryInputDisplay to "top" or "bottom" to read or set its color.`);
+    }
+    return input;
+  }
 }
 exports.EuiColorPickerObject = EuiColorPickerObject;

package/lib/cjs/playwright/components/pagination/object.d.ts

@@ -0,0 +1,37 @@
+import { BaseObject, type ObjectScope } from '../../base_object';
+/**
+ * Playwright Component Object for {@link
+ * https://eui.elastic.co/docs/components/navigation/pagination/ EuiPagination}.
+ *
+ * `testSubj` must be set on `EuiPagination` itself, EUI spreads it onto the
+ * `<nav>`. Page indexes are 0-based, matching EUI's `activePage` and the
+ * `pagination-button-<index>` test subjs. Covers the numbered and the
+ * compressed variant.
+ */
+export declare class EuiPaginationObject extends BaseObject {
+    constructor(scope: ObjectScope, testSubj: string);
+    /** The 0-based index of the active page. */
+    getActivePage(): Promise<number>;
+    /** The total number of pages. */
+    getPageCount(): Promise<number>;
+    /**
+     * Go to the page at the 0-based `index` and wait for it to become active.
+     * Clicks the page button when EUI renders it, otherwise steps through
+     * next or previous until it does. A no-op if already active. Throws if
+     * `index` is not a page, or the page never becomes active.
+     */
+    goToPage(index: number): Promise<void>;
+    /** Click the next arrow and wait for the active page to advance. */
+    next(): Promise<void>;
+    /** Click the previous arrow and wait for the active page to go back. */
+    previous(): Promise<void>;
+    private pageButton;
+    private arrow;
+    private isCompressed;
+    /**
+     * The compressed "page of total" numbers as [page, total]. Translations may
+     * order the two the other way round, and the page is never above the total,
+     * so the smaller one is the page.
+     */
+    private compressedNumbers;
+}

package/lib/cjs/playwright/components/pagination/object.js

@@ -0,0 +1,121 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiPaginationObject = void 0;
+var _test = require("@playwright/test");
+var _base_object = require("../../base_object");
+var _selectors = require("../../../components/pagination/selectors");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Playwright Component Object for {@link
+ * https://eui.elastic.co/docs/components/navigation/pagination/ EuiPagination}.
+ *
+ * `testSubj` must be set on `EuiPagination` itself, EUI spreads it onto the
+ * `<nav>`. Page indexes are 0-based, matching EUI's `activePage` and the
+ * `pagination-button-<index>` test subjs. Covers the numbered and the
+ * compressed variant.
+ */
+class EuiPaginationObject extends _base_object.BaseObject {
+  constructor(scope, testSubj) {
+    super(scope, testSubj, _selectors.EuiPaginationSelectors.ROOT_SELECTOR);
+  }
+
+  /** The 0-based index of the active page. */
+  async getActivePage() {
+    if (await this.isCompressed()) {
+      const [page] = await this.compressedNumbers();
+      return page - 1;
+    }
+    const text = await this.root.locator(_selectors.EuiPaginationSelectors.ACTIVE_PAGE_BUTTON_SELECTOR).innerText();
+    return Number(text) - 1;
+  }
+
+  /** The total number of pages. */
+  async getPageCount() {
+    if (await this.isCompressed()) {
+      const [, total] = await this.compressedNumbers();
+      return total;
+    }
+    // EUI always renders the last page's button, so its label is the count.
+    return Number(await this.root.locator(_selectors.EuiPaginationSelectors.PAGE_BUTTON_SELECTOR).last().innerText());
+  }
+
+  /**
+   * Go to the page at the 0-based `index` and wait for it to become active.
+   * Clicks the page button when EUI renders it, otherwise steps through
+   * next or previous until it does. A no-op if already active. Throws if
+   * `index` is not a page, or the page never becomes active.
+   */
+  async goToPage(index) {
+    const pageCount = await this.getPageCount();
+    if (!Number.isInteger(index) || index < 0 || index >= pageCount) {
+      throw new Error(`EuiPagination "${this.testSubj}" has ${pageCount} pages, page index ${index} is out of range.`);
+    }
+    for (let step = 0; step < pageCount; step++) {
+      const active = await this.getActivePage();
+      if (active === index) {
+        return;
+      }
+      const button = this.pageButton(index);
+      if ((await button.count()) > 0) {
+        await button.click();
+      } else if (index > active) {
+        await this.arrow(_selectors.EuiPaginationSelectors.NEXT_BUTTON_TEST_SUBJ).click();
+      } else {
+        await this.arrow(_selectors.EuiPaginationSelectors.PREVIOUS_BUTTON_TEST_SUBJ).click();
+      }
+      await _test.expect.poll(() => this.getActivePage()).not.toBe(active);
+    }
+    if ((await this.getActivePage()) !== index) {
+      throw new Error(`EuiPagination "${this.testSubj}" did not reach page index ${index} after ${pageCount} steps.`);
+    }
+  }
+
+  /** Click the next arrow and wait for the active page to advance. */
+  async next() {
+    const active = await this.getActivePage();
+    await this.arrow(_selectors.EuiPaginationSelectors.NEXT_BUTTON_TEST_SUBJ).click();
+    await _test.expect.poll(() => this.getActivePage()).toBe(active + 1);
+  }
+
+  /** Click the previous arrow and wait for the active page to go back. */
+  async previous() {
+    const active = await this.getActivePage();
+    await this.arrow(_selectors.EuiPaginationSelectors.PREVIOUS_BUTTON_TEST_SUBJ).click();
+    await _test.expect.poll(() => this.getActivePage()).toBe(active - 1);
+  }
+  pageButton(index) {
+    return this.root.getByTestId(`${_selectors.EuiPaginationSelectors.PAGE_BUTTON_TEST_SUBJ_PREFIX}${index}`);
+  }
+  arrow(testSubj) {
+    return this.root.getByTestId(testSubj);
+  }
+  async isCompressed() {
+    // count() does not wait, so make sure the nav has rendered first.
+    await this.root.waitFor({
+      state: 'visible'
+    });
+    return (await this.root.locator(_selectors.EuiPaginationSelectors.COMPRESSED_TEXT_SELECTOR).count()) > 0;
+  }
+
+  /**
+   * The compressed "page of total" numbers as [page, total]. Translations may
+   * order the two the other way round, and the page is never above the total,
+   * so the smaller one is the page.
+   */
+  async compressedNumbers() {
+    const texts = await this.root.locator(_selectors.EuiPaginationSelectors.COMPRESSED_TEXT_SELECTOR).locator('span').allInnerTexts();
+    const numbers = texts.map(Number);
+    return [Math.min(...numbers), Math.max(...numbers)];
+  }
+}
+exports.EuiPaginationObject = EuiPaginationObject;