test: e2e refactors [TESTENG-2] (#9549)

webui/react/src/e2e/fixtures/dev.fixture.ts

@@ -1,7 +1,7 @@
 import { expect, Page } from '@playwright/test';
 
-import { BaseComponent, CanBeParent } from 'e2e/models/BaseComponent';
-import { BasePage } from 'e2e/models/BasePage';
+import { BaseComponent, CanBeParent } from 'e2e/models/common/base/BaseComponent';
+import { BasePage } from 'e2e/models/common/base/BasePage';
 
 export class DevFixture {
   readonly #page: Page;

webui/react/src/e2e/models/ant/DatePicker.ts → webui/react/src/e2e/models/common/ant/DatePicker.ts

@@ -1,4 +1,4 @@
-import { NamedComponent } from 'e2e/models/BaseComponent';
+import { NamedComponent } from 'e2e/models/common/base/BaseComponent';
 
 /**
  * Represents the DatePicker component from antd/es/date-picker/index.d.ts

webui/react/src/e2e/models/common/ant/Dropdown.ts

@@ -0,0 +1,64 @@
+import { BaseComponent } from 'e2e/models/common/base/BaseComponent';
+import { BaseOverlay, OverlayArgs } from 'e2e/models/common/base/BaseOverlay';
+
+/**
+ * Represents the Dropdown component from antd/es/dropdown/index.js
+ * Until the dropdown component supports test ids, this model will match any open dropdown.
+ */
+export class Dropdown extends BaseOverlay {
+  constructor(args: OverlayArgs) {
+    super({
+      ...args,
+      selector: '.ant-dropdown ul.ant-dropdown-menu:visible',
+    });
+  }
+
+  /**
+   * Returns a MenuItem with the specified id
+   * @param {string} id - the id of the menu item
+   */
+  menuItem(id: string): MenuItem {
+    return new MenuItem({
+      parent: this,
+      selector: `li.ant-dropdown-menu-item[data-menu-id$="${id}"]`,
+    });
+  }
+
+  /**
+   * Selects a MenuItem with the specified id
+   * @param {string} id - id of the item to select
+   */
+  async selectMenuOption(id: string): Promise<void> {
+    await this.open();
+    await this.menuItem(id).pwLocator.click();
+    await this.pwLocator.waitFor({ state: 'hidden' });
+  }
+
+  /**
+   * Closes the dropdown.
+   */
+  async close(): Promise<void> {
+    await this.pwLocator.press('Escape', { timeout: 500 });
+  }
+}
+
+/**
+ * Represents a menu item from the Dropdown component
+ */
+class MenuItem extends BaseComponent {
+  override readonly _parent: Dropdown;
+  constructor({ parent, selector }: { parent: Dropdown; selector: string }) {
+    super({ parent, selector });
+    this._parent = parent;
+  }
+
+  /**
+   * Selects the menu item
+   * @param {object} clickArgs - arguments to pass to the click method
+   */
+  async select(clickArgs: object = {}): Promise<void> {
+    await this._parent.open();
+    await this.pwLocator.click(clickArgs);
+    await this._parent.pwLocator.waitFor({ state: 'hidden' });
+  }
+}

webui/react/src/e2e/models/ant/Modal.ts → webui/react/src/e2e/models/common/ant/Modal.ts

@@ -1,13 +1,28 @@
-import { BaseComponent, NamedComponent } from 'e2e/models/BaseComponent';
+import { BaseComponent } from 'e2e/models/common/base/BaseComponent';
+import { BaseOverlay, OverlayArgs } from 'e2e/models/common/base/BaseOverlay';
 
 /**
  * Represents the Modal component from antd/es/modal/index.d.ts
  */
-export class Modal extends NamedComponent {
-  readonly defaultSelector = '.ant-modal-content';
+export class Modal extends BaseOverlay {
+  constructor(args: OverlayArgs) {
+    super({
+      ...args,
+      selector: '.ant-modal-content',
+    });
+  }
   readonly header = new ModalHeader({ parent: this, selector: '.ant-modal-header' });
   readonly body = new BaseComponent({ parent: this, selector: '.ant-modal-body' });
   readonly footer = new ModalFooter({ parent: this, selector: '.ant-modal-footer' });
+
+  /**
+   * Closes the Modal.
+   */
+  async close(): Promise<void> {
+    // Popover has no close button and doesn't respect Escape key
+    await this.footer.cancel.pwLocator.click();
+    await this.pwLocator.waitFor({ state: 'hidden' });
+  }
 }
 
 /**

webui/react/src/e2e/models/ant/Notification.ts → webui/react/src/e2e/models/common/ant/Notification.ts

@@ -1,4 +1,4 @@
-import { BaseComponent, NamedComponent } from 'e2e/models/BaseComponent';
+import { BaseComponent, NamedComponent } from 'e2e/models/common/base/BaseComponent';
 
 /**
  * Represents the Notification component from antd/es/notification/index.js

webui/react/src/e2e/models/ant/Pagination.ts → webui/react/src/e2e/models/common/ant/Pagination.ts

@@ -1,7 +1,7 @@
 import { Locator } from '@playwright/test';
 
-import { BaseComponent, NamedComponent } from 'e2e/models/BaseComponent';
-import { Select } from 'e2e/models/hew/Select';
+import { BaseComponent, NamedComponent } from 'e2e/models/common/base/BaseComponent';
+import { Select } from 'e2e/models/common/hew/Select';
 
 /**
  * Represents the Pagination component from antd/es/pagination/index.d.ts
@@ -16,7 +16,7 @@ export class Pagination extends NamedComponent {
     parent: this,
     selector: 'li.ant-pagination-next',
   });
-  readonly #options: BaseComponent = new BaseComponent({
+  readonly #options = new BaseComponent({
     parent: this,
     selector: 'li.ant-pagination-options',
   });

webui/react/src/e2e/models/common/ant/Popover.ts

@@ -0,0 +1,24 @@
+import { BaseOverlay, OverlayArgs } from 'e2e/models/common/base/BaseOverlay';
+
+/**
+ * Represents the Popver component from antd/es/popover/index.js
+ */
+export class Popover extends BaseOverlay {
+  constructor(args: OverlayArgs) {
+    super({
+      ...args,
+      selector: '.ant-popover .ant-popover-content .ant-popover-inner-content:visible',
+    });
+  }
+
+  /**
+   * Closes the popover.
+   */
+  async close(): Promise<void> {
+    // [ET-284] Popover click handle doesn't work unless we wait
+    await this.root._page.waitForTimeout(500);
+    // Popover has no close button and doesn't respect Escape key
+    await this.root.nav.sidebar.header.pwLocator.click();
+    await this.pwLocator.waitFor({ state: 'hidden' });
+  }
+}