test: experiment list page models and sample test [INFENG-451] (#9139)

webui/react/src/components/TableActionBar.tsx

@@ -394,7 +394,7 @@ const TableActionBar: React.FC<Props> = ({
   const handleAction = useCallback((key: string) => handleBatchAction(key), [handleBatchAction]);
 
   return (
-    <div className={css.base}>
+    <div className={css.base} data-test-component="tableActionBar">
       <Row>
         <Column>
           <Row>

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

@@ -1,6 +1,6 @@
 import { expect, Page } from '@playwright/test';
 
-import { BaseComponent, parentTypes } from 'e2e/models/BaseComponent';
+import { BaseComponent, CanBeParent } from 'e2e/models/BaseComponent';
 import { BasePage } from 'e2e/models/BasePage';
 
 export class DevFixture {
@@ -23,8 +23,8 @@ export class DevFixture {
    * @param {BaseComponent} component - The component to debug
    */
   debugComponentVisible(component: BaseComponent): void {
-    const componentTree: parentTypes[] = [];
-    let root: parentTypes = component;
+    const componentTree: CanBeParent[] = [];
+    let root: CanBeParent = component;
     while (!(root instanceof BasePage)) {
       componentTree.unshift(root);
       root = root._parent;

webui/react/src/e2e/models/BaseComponent.ts

@@ -1,23 +1,27 @@
 import { type Locator } from '@playwright/test';
 
-import { BasePage } from './BasePage';
+import { BasePage, ModelBasics } from './BasePage';
 
-// BasePage is the root of any tree, use `instanceof BasePage` when climbing.
-export type parentTypes = BasePage | BaseComponent | BaseReactFragment;
+export type CanBeParent = ComponentBasics | BasePage;
 
-interface ComponentBasics {
-  parent: parentTypes;
+export interface ComponentBasics extends ModelBasics {
+  _parent: CanBeParent;
+  get root(): BasePage;
 }
 
-interface NamedComponentWithDefaultSelector extends ComponentBasics {
+interface ComponentArgBasics {
+  parent: CanBeParent;
+}
+
+interface NamedComponentWithDefaultSelector extends ComponentArgBasics {
   attachment?: never;
   sleector?: never;
 }
-interface NamedComponentWithAttachment extends ComponentBasics {
+interface NamedComponentWithAttachment extends ComponentArgBasics {
   attachment: string;
   sleector?: never;
 }
-export interface BaseComponentArgs extends ComponentBasics {
+export interface BaseComponentArgs extends ComponentArgBasics {
   attachment?: never;
   selector: string;
 }
@@ -31,12 +35,12 @@ export type NamedComponentArgs =
  * Returns the representation of a Component.
  * This constructor is a base class for any component in src/components/.
  * @param {object} obj
- * @param {parentTypes} obj.parent - The parent used to locate this BaseComponent
+ * @param {CanBeParent} obj.parent - The parent used to locate this BaseComponent
  * @param {string} obj.selector - Used as a selector uesd to locate this object
  */
-export class BaseComponent {
+export class BaseComponent implements ModelBasics {
   protected _selector: string;
-  readonly _parent: parentTypes;
+  readonly _parent: CanBeParent;
   protected _locator: Locator | undefined;
 
   constructor({ parent, selector }: BaseComponentArgs) {
@@ -63,7 +67,7 @@ export class BaseComponent {
    * Returns the root of the component tree
    */
   get root(): BasePage {
-    let root: parentTypes = this._parent;
+    let root: CanBeParent = this._parent;
     while (!(root instanceof BasePage)) {
       root = root._parent;
     }
@@ -76,12 +80,12 @@ export class BaseComponent {
  * React Fragment Components are special in that they group elements, but not under a dir.
  * Fragments cannot have selectors
  * @param {object} obj
- * @param {parentTypes} obj.parent - The parent used to locate this BaseComponent
+ * @param {CanBeParent} obj.parent - The parent used to locate this BaseComponent
  */
-export class BaseReactFragment {
-  readonly _parent: parentTypes;
+export class BaseReactFragment implements ModelBasics {
+  readonly _parent: CanBeParent;
 
-  constructor({ parent }: ComponentBasics) {
+  constructor({ parent }: ComponentArgBasics) {
     this._parent = parent;
   }
 
@@ -97,7 +101,7 @@ export class BaseReactFragment {
    * Returns the root of the component tree
    */
   get root(): BasePage {
-    let root: parentTypes = this._parent;
+    let root: CanBeParent = this._parent;
     while (!(root instanceof BasePage)) {
       root = root._parent;
     }
@@ -108,7 +112,7 @@ export class BaseReactFragment {
 /**
  * Returns a representation of a named component. These components need a defaultSelector.
  * @param {object} obj
- * @param {parentTypes} obj.parent - The parent used to locate this NamedComponent
+ * @param {CanBeParent} obj.parent - The parent used to locate this NamedComponent
  * @param {string} obj.selector - Used as a selector uesd to locate this object
  */
 export abstract class NamedComponent extends BaseComponent {

webui/react/src/e2e/models/BasePage.ts

@@ -1,17 +1,21 @@
-import { Locator, type Page } from '@playwright/test';
+import { expect, Locator, type Page } from '@playwright/test';
 
 import { Navigation } from 'e2e/models/components/Navigation';
 
+export interface ModelBasics {
+  get pwLocator(): Locator;
+}
+
 /**
  * Returns the representation of a Page.
  * This constructor is a base class for any component in src/pages/.
  * @param {Page} page - The '@playwright/test' Page being used by a test
  */
-export abstract class BasePage {
+export abstract class BasePage implements ModelBasics {
   readonly _page: Page;
   readonly nav: Navigation = new Navigation({ parent: this });
-  abstract readonly url: string;
-  abstract readonly title: string;
+  abstract readonly url: string | RegExp;
+  abstract readonly title: string | RegExp;
 
   constructor(page: Page) {
     this._page = page;
@@ -25,14 +29,22 @@ export abstract class BasePage {
   }
 
   /**
-   * Returns this so we can chain.
-   * ie. await expect(thePage.goto().theElement.loc()).toBeVisible()
-   * @param {Page} [waitForURL] - Whether for the URL to change
+   * Returns this so we can chain. Visits the page.
+   * ie. await expect(thePage.goto().theElement.pwLocator()).toBeVisible()
+   * @param {{}} [args] - obj
+   * @param {string} args.url - A URL to visit. It can be different from the URL to verify
+   * @param {boolean} [args.verify] - Whether for the URL to change
    */
-  async goto(waitForURL: boolean = true): Promise<BasePage> {
-    await this._page.goto(this.url);
-    if (waitForURL) {
+  async goto(
+    { url, verify = true }: { url: string | RegExp; verify?: boolean } = this,
+  ): Promise<BasePage> {
+    if (url instanceof RegExp) {
+      throw new Error(`${typeof this}.url is a regular expression. Please provide a url to visit.`);
+    }
+    await this._page.goto(url);
+    if (verify) {
       await this._page.waitForURL(this.url);
+      await expect(this._page).toHaveTitle(this.title);
     }
     return this;
   }

webui/react/src/e2e/models/components/AddUsersToGroupsModal.ts

@@ -5,7 +5,7 @@ import { Modal } from 'e2e/models/hew/Modal';
  * Returns a representation of the AddUsersToGroupsModal component.
  * This constructor represents the contents in src/components/AddUsersToGroupsModal.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this AddUsersToGroupsModal
+ * @param {CanBeParent} obj.parent - The parent used to locate this AddUsersToGroupsModal
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 export class AddUsersToGroupsModal extends Modal {

webui/react/src/e2e/models/components/ChangeUserStatusModal.ts

@@ -5,7 +5,7 @@ import { Modal } from 'e2e/models/hew/Modal';
  * Returns a representation of the ChangeUserStatusModal component.
  * This constructor represents the contents in src/components/ChangeUserStatusModal.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this ChangeUserStatusModal
+ * @param {CanBeParent} obj.parent - The parent used to locate this ChangeUserStatusModal
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 export class ChangeUserStatusModal extends Modal {

webui/react/src/e2e/models/components/ComparisonView.ts

@@ -0,0 +1,12 @@
+import { SplitPane } from 'e2e/models/hew/SplitPane';
+
+/**
+ * Returns a representation of the ComparisonView component.
+ * This constructor represents the contents in src/components/ComparisonView.tsx.
+ * @param {object} obj
+ * @param {CanBeParent} obj.parent - The parent used to locate this ComparisonView
+ * @param {string} [obj.selector] - Used instead of `defaultSelector`
+ */
+export class ComparisonView extends SplitPane {
+  // TODO everything in here
+}

webui/react/src/e2e/models/components/CreateUserModal.ts

@@ -5,7 +5,7 @@ import { Modal } from 'e2e/models/hew/Modal';
  * Returns a representation of the CreateUserModal component.
  * This constructor represents the contents in src/components/CreateUserModal.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this CreateUserModal
+ * @param {CanBeParent} obj.parent - The parent used to locate this CreateUserModal
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 export class CreateUserModal extends Modal {

webui/react/src/e2e/models/components/DeterminedAuth.ts

@@ -5,7 +5,7 @@ import { ErrorComponent } from 'e2e/models/utils/error';
  * Returns a representation of the DeterminedAuth component.
  * This constructor represents the contents in src/components/DeterminedAuth.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this DeterminedAuth
+ * @param {CanBeParent} obj.parent - The parent used to locate this DeterminedAuth
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 

webui/react/src/e2e/models/components/DynamicTabs.ts

@@ -0,0 +1,12 @@
+import { BaseReactFragment } from 'e2e/models/BaseComponent';
+import { Pivot } from 'e2e/models/hew/Pivot';
+
+/**
+ * Returns a representation of the DynamicTabs component.
+ * This constructor represents the contents in src/components/DynamicTabs.tsx.
+ * @param {object} obj
+ * @param {CanBeParent} obj.parent - The parent used to locate this DynamicTabs
+ */
+export class DynamicTabs extends BaseReactFragment {
+  readonly pivot = new Pivot({ parent: this });
+}

webui/react/src/e2e/models/components/ExperimentActionDropdown.ts

@@ -0,0 +1,13 @@
+import { Dropdown } from 'e2e/models/hew/Dropdown';
+
+/**
+ * Returns the representation of the ActionDropdown menu defined by the User Admin page.
+ * This constructor represents the InteractiveTable in src/components/ExperimentActionDropdown.tsx.
+ * @param {object} obj
+ * @param {CanBeParent} obj.parent - The parent used to locate this ExperimentActionDropdown
+ * @param {string} obj.selector - Used as a selector uesd to locate this object
+ */
+export class ExperimentActionDropdown extends Dropdown {
+  // TODO where is this thing? <Button icon={<Icon name="overflow-vertical" size="small" title="Action menu" />} />
+  // TODO I'm assuming it's new tab, new window, copy value, etc
+}

webui/react/src/e2e/models/components/F_ExperiementList.ts

@@ -0,0 +1,39 @@
+import { BaseReactFragment } from 'e2e/models/BaseComponent';
+import { ComparisonView } from 'e2e/models/components/ComparisonView';
+import { ExperimentActionDropdown } from 'e2e/models/components/ExperimentActionDropdown';
+import { TableActionBar } from 'e2e/models/components/TableActionBar';
+import { DataGrid, HeadRow, Row, RowArgs } from 'e2e/models/hew/DataGrid';
+import { Pagination } from 'e2e/models/hew/Pagination';
+
+/**
+ * Returns a representation of the F_ExperiementList component.
+ * This constructor represents the contents in src/components/F_ExperiementList.tsx.
+ * @param {object} obj
+ * @param {CanBeParent} obj.parent - The parent used to locate this F_ExperiementList
+ */
+export class F_ExperiementList extends BaseReactFragment {
+  readonly tableActionBar: TableActionBar = new TableActionBar({ parent: this });
+  // TODO no experiments
+  // TODO no filtered experiments
+  // TODO error
+  readonly comparisonView: ComparisonView = new ComparisonView({ parent: this });
+  readonly dataGrid: DataGrid<ExperimentRow, ExperimentHeadRow> = new DataGrid({
+    headRowType: ExperimentHeadRow,
+    parent: this.comparisonView.initial,
+    rowType: ExperimentRow,
+  });
+  // There is no button which activates this dropdown. To display it, right-click the grid
+  readonly experimentActionDropdown: ExperimentActionDropdown = new ExperimentActionDropdown({
+    parent: this.root,
+    selector: '',
+  });
+  readonly pagination: Pagination = new Pagination({ parent: this });
+}
+
+class ExperimentHeadRow extends HeadRow {}
+class ExperimentRow extends Row<ExperimentRow, ExperimentHeadRow> {
+  constructor(args: RowArgs<ExperimentRow, ExperimentHeadRow>) {
+    super(args);
+    this.columnPositions.set('ID', 50);
+  }
+}

webui/react/src/e2e/models/components/Navigation.ts

@@ -5,7 +5,7 @@ import { NavigationSideBar } from 'e2e/models/components/NavigationSideBar';
  * Returns a representation of the Navigation component.
  * This constructor represents the contents in src/components/Navigation.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this Navigation
+ * @param {CanBeParent} obj.parent - The parent used to locate this Navigation
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 export class Navigation extends NamedComponent {

webui/react/src/e2e/models/components/NavigationSideBar.ts

@@ -5,8 +5,7 @@ import { Dropdown } from 'e2e/models/hew/Dropdown';
  * Returns a representation of the NavigationSideBar component.
  * This constructor represents the contents in src/components/NavigationSideBar.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this NavigationSideBar
- * @param {string} [obj.selector] - Used instead of `defaultSelector`
+ * @param {CanBeParent} obj.parent - The parent used to locate this NavigationSideBar
  */
 export class NavigationSideBar extends BaseReactFragment {
   readonly #nav: BaseComponent = new BaseComponent({

webui/react/src/e2e/models/components/Page.ts

@@ -4,8 +4,7 @@ import { BaseReactFragment } from 'e2e/models/BaseComponent';
  * Returns a representation of the Page component.
  * This constructor represents the contents in src/components/Page.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this Page
- * @param {string} [obj.selector] - Used instead of `defaultSelector`
+ * @param {CanBeParent} obj.parent - The parent used to locate this Page
  */
 export class PageComponent extends BaseReactFragment {
   // TODO define things like Spinners that are unique to Pagecomponent

webui/react/src/e2e/models/components/SetUserRolesModal.ts

@@ -5,7 +5,7 @@ import { Modal } from 'e2e/models/hew/Modal';
  * Returns a representation of the CreateUserModal component.
  * This constructor represents the contents in src/components/CreateUserModal.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this CreateUserModal
+ * @param {CanBeParent} obj.parent - The parent used to locate this CreateUserModal
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 export class SetUserRolesModal extends Modal {

webui/react/src/e2e/models/components/SkeletonSection.ts

@@ -4,7 +4,7 @@ import { BaseComponent, NamedComponent } from 'e2e/models/BaseComponent';
  * Returns a representation of the SkeletonSection component.
  * This constructor represents the contents in src/components/SkeletonSection.tsx.
  * @param {object} obj
- * @param {implementsGetLocator} obj.parent - The parent used to locate this SkeletonSection
+ * @param {CanBeParent} obj.parent - The parent used to locate this SkeletonSection
  * @param {string} [obj.selector] - Used instead of `defaultSelector`
  */
 export class SkeletonSection extends NamedComponent {