Change tree and add new components

packages/testkit/__tests__/button.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { Button } from "../buttons/Button";
+import { Button } from "../components";
 import { buttonStory } from "./utils/url-helper";
 
 test("should fire a click event and log to console", async ({ page }) => {

packages/testkit/__tests__/buttonGroup.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { ButtonGroup } from "../buttons/ButtonGroup";
+import { ButtonGroup } from "../components";
 import { buttonGroupStory } from "./utils/url-helper";
 
 test.describe("ButtonGroup Class with Storybook", () => {

packages/testkit/__tests__/checkbox.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { Checkbox } from "../inputs/Checkbox";
+import { Checkbox } from "../components";
 import { checkboxStory } from "./utils/url-helper";
 
 test.describe("menuButton Class with Storybook", () => {
@@ -13,7 +13,7 @@ test.describe("menuButton Class with Storybook", () => {
   });
 
   // eslint-disable-next-line no-unused-vars
-  test("set checkbox", async ({ page }) => {
+  test("set checkbox", async () => {
     // eslint-disable-next-line playwright/no-conditional-in-test
     if (await checkbox.isChecked()) {
       await checkbox.setChecked(false);

packages/testkit/__tests__/dropdown.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { Dropdown } from "../inputs/Dropdown";
+import { Dropdown } from "../components";
 import { dropdownStory } from "./utils/url-helper";
 
 test.describe("dropdown Class with Storybook", () => {

packages/testkit/__tests__/menuButton.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { MenuButton } from "../buttons/MenuButton";
+import { MenuButton } from "../components";
 import { menuButtonStory } from "./utils/url-helper";
 
 test.describe("menuButton Class with Storybook", () => {
@@ -8,8 +8,8 @@ test.describe("menuButton Class with Storybook", () => {
   test.beforeEach(async ({ page }) => {
     await page.goto(menuButtonStory);
     const frame = page.frameLocator("[id='storybook-preview-iframe']");
-    const menubuttonLocator = frame.locator('[data-testid="menu-button"]');
-    menuButton = new MenuButton(page, menubuttonLocator, "Test menu button");
+    const menuButtonLocator = frame.locator('[data-testid="menu-button"]');
+    menuButton = new MenuButton(page, menuButtonLocator, "Test menu button");
   });
 
   test("should open and close menu", async ({ page }) => {

packages/testkit/__tests__/textArea.test.js

@@ -1,5 +1,5 @@
 import { test, expect } from "@playwright/test";
-import { TextArea } from "../inputs/TextArea";
+import { TextArea } from "../components";
 import { textAreaStory } from "./utils/url-helper";
 
 test.describe("textArea Class with Storybook", () => {
@@ -14,9 +14,9 @@ test.describe("textArea Class with Storybook", () => {
   });
 
   // eslint-disable-next-line no-unused-vars
-  test("set text in textarea", async ({ page }) => {
+  test("set text in textarea", async () => {
     await textArea.setText("Test Text");
     // eslint-disable-next-line playwright/missing-playwright-await
-    expect(textArea.textAreaInput.locator).toHaveValue("Test Text");
+    await expect(textArea.textAreaInput.locator).toHaveValue("Test Text");
   });
 });

packages/testkit/__tests__/textfield.test.js

@@ -1,23 +1,21 @@
 import { test, expect } from "@playwright/test";
-import { TextField } from "../inputs/TextField";
+import { TextField } from "../components";
 import { textfieldStory } from "./utils/url-helper";
 
 test.describe("textArea Class with Storybook", () => {
   let textField;
-  let textfieldLocator;
+  let textFieldLocator;
 
   test.beforeEach(async ({ page }) => {
     await page.goto(textfieldStory);
     const frame = page.frameLocator("[id='storybook-preview-iframe']");
-    textfieldLocator = frame.locator('[data-testid="text-field_input"]');
-    textField = new TextField(page, textfieldLocator, "Test text field");
+    textFieldLocator = frame.locator('[data-testid="text-field_input"]');
+    textField = new TextField(page, textFieldLocator, "Test text field");
   });
 
-  // eslint-disable-next-line no-unused-vars
-  test("set text in text field", async ({ page }) => {
+  test("set text in text field", async () => {
     await textField.setText("Test Text");
     await textField.exitEditMode();
-    // eslint-disable-next-line playwright/missing-playwright-await
-    expect(textField.locator).toHaveValue("Test Text");
+    await expect(textField.locator).toHaveValue("Test Text");
   });
 });

packages/testkit/buttons/Button.ts → packages/testkit/components/Button.ts

@@ -1,6 +1,5 @@
-import { test } from "@playwright/test";
-import { Locator, Page } from "@playwright/test";
-import { BaseElement } from "../BaseElement";
+import { test, Locator, Page } from "@playwright/test";
+import { BaseElement } from "./BaseElement";
 
 /**
  * Class representing a Button element.

packages/testkit/buttons/ButtonGroup.ts → packages/testkit/components/ButtonGroup.ts

@@ -1,5 +1,5 @@
 import { test, Page, Locator } from "@playwright/test";
-import { BaseElement } from "../BaseElement";
+import { BaseElement } from "./BaseElement";
 import { Button } from "./Button";
 
 /**
@@ -58,7 +58,7 @@ export class ButtonGroup extends BaseElement {
    * @returns {Button} The button with the specified name.
    */
   getButtonByName(buttonName: string): Button | undefined {
-    if (!buttonName || typeof buttonName !== "string") {
+    if (!buttonName) {
       throw new Error("Invalid button name provided");
     }
 

packages/testkit/inputs/Checkbox.ts → packages/testkit/components/Checkbox.ts

@@ -1,5 +1,5 @@
 import { Page, Locator } from "@playwright/test";
-import { BaseElement } from "../BaseElement";
+import { BaseElement } from "./BaseElement";
 
 /**
  * Class representing a Checkbox element.

packages/testkit/pickers/ColorPicker.ts → packages/testkit/components/ColorPicker.ts

@@ -1,6 +1,6 @@
 import { Page, Locator } from "@playwright/test";
-import { BaseElement } from "../BaseElement";
-import { Button } from "../buttons/Button";
+import { BaseElement } from "./BaseElement";
+import { Button } from "./Button";
 
 /**
  * Class representing a ColorPicker element.

packages/testkit/components/Combobox.ts

@@ -0,0 +1,33 @@
+import { Locator, Page } from "@playwright/test";
+import { BaseElement } from "./BaseElement";
+import { Search } from "./Search";
+import { ListItem } from "./ListItem";
+
+export class Combobox extends BaseElement {
+  private searchInput: Search;
+  /**
+   * Create a Combobox.
+   * @param {Page} page - The Playwright page object.
+   * @param {Locator} locator - The locator for the Combobox element.
+   * @param {string} elementReportName - The name for reporting purposes.
+   */
+  constructor(page: Page, locator: Locator, elementReportName: string) {
+    super(page, locator, elementReportName);
+    this.searchInput = new Search(page, this.locator.locator("[role='search']"), `${elementReportName} Search Input`);
+  }
+
+  /**
+   * Select an item from the combobox.
+   * @param {string} item - The name of the item to select.
+   * @returns {Promise<void>}
+   */
+  async selectItem(item: string): Promise<void> {
+    await this.searchInput.setText(item);
+    const comboBoxItem = new ListItem(
+      this.page,
+      this.locator.locator(`[role='listbox']:has-text("${item}")`),
+      `Select Combobox Item: ${item}`
+    );
+    await comboBoxItem.click();
+  }
+}

packages/testkit/popover/Dialog.ts → packages/testkit/components/Dialog.ts

@@ -1,20 +1,25 @@
 import { Page, Locator } from "@playwright/test";
-import { BaseElement } from "../BaseElement";
-import { Button } from "../buttons/Button";
+import { Button } from "./buttons";
 
 /**
  * Class representing a Dialog element.
  * Extends the BaseElement class.
  */
-export class Dialog extends BaseElement {
+export class Dialog {
+  private readonly page: Page;
+  private locator: Locator;
+  private elementReportName: string;
+
   /**
    * Create a Dialog.
    * @param {Page} page - The Playwright page object.
    * @param {Locator} locator - The locator for the Dialog element.
    * @param {string} elementReportName - The name for reporting purposes.
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
-    super(page, locator, elementReportName);
+    this.page = page;
+    this.locator = locator;
+    this.elementReportName = elementReportName;
   }
 
   /**

packages/testkit/inputs/Dropdown.ts → packages/testkit/components/Dropdown.ts

@@ -1,6 +1,6 @@
 import { Page, Locator, test } from "@playwright/test";
 import { TextField } from "./TextField";
-import { BaseElement } from "../BaseElement";
+import { BaseElement } from "./BaseElement";
 
 /**
  * Class representing a DropDown element.

packages/testkit/buttons/IconButton.ts → packages/testkit/components/IconButton.ts

@@ -1,6 +1,7 @@
-import { test, Page, Locator } from "@playwright/test";
+import { Locator, Page, test } from "@playwright/test";
 import { Button } from "./Button";
-import { Dialog } from "../popover/Dialog";
+import { Dialog } from "./popover";
+import { Menu } from "./Menu";
 
 /**
  * Class representing an icon button that extends the Button class.
@@ -9,18 +10,23 @@ export class IconButton extends Button {
   override page: Page;
   override locator: Locator;
   override elementReportName: string;
+  icon: Button;
+  menu: Dialog | Menu | undefined;
 
   /**
    * Create an IconButton.
    * @param {Page} page - The Playwright page object.
    * @param {Locator} locator - The locator for the IconButton element.
    * @param {string} elementReportName - The name for reporting purposes.
+   * @param menuType - The type of menu associated with the button.
    */
-  constructor(page: Page, locator: Locator, elementReportName: string) {
+  constructor(page: Page, locator: Locator, elementReportName: string, menuType?: Dialog | Menu) {
     super(page, locator, elementReportName);
     this.page = page;
     this.locator = locator;
     this.elementReportName = elementReportName;
+    this.icon = new Button(this.page, this.locator, `${this.elementReportName} - Icon`);
+    this.menu = menuType;
   }
 
   /**
@@ -32,9 +38,10 @@ export class IconButton extends Button {
     await test.step(
       `Select ${item} from ${this.elementReportName}`,
       async () => {
-        await this.locator.click();
-        const dialog = new Dialog(this.page, this.page.getByRole("dialog"), `${this.elementReportName} - Menu`);
-        await dialog.selectItem(item);
+        await this.icon.click();
+        if (this.menu) {
+          await this.menu.selectItem(item);
+        }
       },
       { box: false }
     );

packages/testkit/navigation/List.ts → packages/testkit/components/List.ts

@@ -1,6 +1,6 @@
 import { test, Page, Locator } from "@playwright/test";
 import { ListItem } from "./ListItem";
-import { BaseElement } from "../BaseElement";
+import { BaseElement } from "./BaseElement";
 
 /**
  * Class representing a List element.

packages/testkit/navigation/ListItem.ts → packages/testkit/components/ListItem.ts

@@ -1,5 +1,5 @@
 import { Page, Locator, test } from "@playwright/test";
-import { BaseElement } from "../BaseElement";
+import { BaseElement } from "./BaseElement";
 
 /**
  * Class representing a ListItem element.

packages/testkit/components/Menu.ts

@@ -0,0 +1,79 @@
+import { test, Page, Locator } from "@playwright/test";
+import { MenuItem } from "./MenuItem";
+import { BaseElement } from "./BaseElement";
+
+/**
+ * Class representing a List element.
+ * Extends the BaseElement class.
+ */
+export class Menu extends BaseElement {
+  private items: MenuItem[];
+  private itemsInitialized: boolean;
+
+  /**
+   * Create a Menu.
+   * @param {Page} page - The Playwright page object.
+   * @param {Locator} locator - The locator for the List element.
+   * @param {string} elementReportName - The name for reporting purposes.
+   */
+  constructor(page: Page, locator: Locator, elementReportName: string) {
+    super(page, locator, elementReportName);
+    this.items = [];
+    this.itemsInitialized = false;
+  }
+
+  /**
+   * Initialize list items if they are not already initialized.
+   * @returns {Promise<void>}
+   */
+  async initializeItemsIfNeeded(): Promise<void> {
+    await test.step(`Initialize ${this.elementReportName} if needed`, async () => {
+      if (!this.itemsInitialized) {
+        await this.initializeItems();
+        this.itemsInitialized = true;
+      }
+    });
+  }
+
+  /**
+   * Initialize the list items by locating all list elements.
+   * @returns {Promise<void>}
+   */
+  async initializeItems(): Promise<void> {
+    await test.step(`Initialize ${this.elementReportName}`, async () => {
+      await this.waitForElementsGroup(this.locator.locator("[role='menuitem']"), this.elementReportName);
+      const listElements = await this.locator.locator("[role='menuitem']").all();
+      this.items = await Promise.all(
+        listElements.map(async locator => {
+          const itemName = await locator.innerText();
+          return new MenuItem(this.page, locator, `Menu Item: ${itemName}`);
+        })
+      );
+    });
+  }
+
+  /**
+   * Get a menu item by its name.
+   * @param {string} itemName - The name of the item to retrieve.
+   * @returns {ListItem | undefined} The list item with the specified name or undefined if not found.
+   */
+  getItemByName(itemName: string): MenuItem | undefined {
+    return this.items.find(item => item.elementReportName.includes(itemName));
+  }
+
+  /**
+   * Select a menu item.
+   * @param {string} listItem - The name of the item to select.
+   * @returns {Promise<void>}
+   */
+  async selectItem(listItem: string): Promise<void> {
+    await this.initializeItemsIfNeeded();
+    let menuItem = this.getItemByName(listItem);
+    if (!menuItem) {
+      // If the item is not in the initialized list, create it dynamically
+      menuItem = new MenuItem(this.page, this.locator.getByText(`${listItem}`), `Menu Item: ${listItem}`);
+    }
+    await menuItem.scrollIntoView();
+    await menuItem.click();
+  }
+}