From e18aae7ce0456d1e6b71fb51947e279becb99e67 Mon Sep 17 00:00:00 2001 From: Hanan Malka Date: Thu, 9 Jan 2025 17:33:54 +0200 Subject: [PATCH] Change tree and add new components --- packages/testkit/__tests__/button.test.js | 2 +- .../testkit/__tests__/buttonGroup.test.js | 2 +- packages/testkit/__tests__/checkbox.test.js | 4 +- packages/testkit/__tests__/dropdown.test.js | 2 +- packages/testkit/__tests__/menuButton.test.js | 6 +- packages/testkit/__tests__/textArea.test.js | 6 +- packages/testkit/__tests__/textfield.test.js | 14 ++-- packages/testkit/buttons/index.ts | 5 -- .../testkit/{ => components}/BaseElement.ts | 0 .../testkit/{buttons => components}/Button.ts | 5 +- .../{buttons => components}/ButtonGroup.ts | 4 +- .../{inputs => components}/Checkbox.ts | 2 +- .../{pickers => components}/ColorPicker.ts | 4 +- packages/testkit/components/Combobox.ts | 33 ++++++++ .../testkit/{popover => components}/Dialog.ts | 13 ++- .../{inputs => components}/Dropdown.ts | 2 +- .../{buttons => components}/IconButton.ts | 19 +++-- .../{navigation => components}/List.ts | 2 +- .../{navigation => components}/ListItem.ts | 2 +- packages/testkit/components/Menu.ts | 79 +++++++++++++++++++ .../{buttons => components}/MenuButton.ts | 18 ++++- packages/testkit/components/MenuItem.ts | 28 +++++++ packages/testkit/components/Modal.ts | 32 ++++++++ packages/testkit/components/RadioButton.ts | 41 ++++++++++ packages/testkit/components/Search.ts | 50 ++++++++++++ .../{buttons => components}/SplitButton.ts | 0 .../testkit/{navigation => components}/Tab.ts | 2 +- .../{navigation => components}/TabList.ts | 2 +- packages/testkit/{text => components}/Text.ts | 2 +- .../{inputs => components}/TextArea.ts | 4 +- .../{inputs => components}/TextField.ts | 2 +- .../testkit/{inputs => components}/Toggle.ts | 2 +- packages/testkit/components/index.ts | 24 ++++++ packages/testkit/index.ts | 8 +- packages/testkit/inputs/Search.ts | 15 ---- packages/testkit/inputs/index.ts | 5 -- packages/testkit/navigation/index.ts | 3 - packages/testkit/pickers/index.ts | 1 - packages/testkit/popover/index.ts | 1 - packages/testkit/text/index.ts | 1 - 40 files changed, 358 insertions(+), 89 deletions(-) delete mode 100644 packages/testkit/buttons/index.ts rename packages/testkit/{ => components}/BaseElement.ts (100%) rename packages/testkit/{buttons => components}/Button.ts (86%) rename packages/testkit/{buttons => components}/ButtonGroup.ts (96%) rename packages/testkit/{inputs => components}/Checkbox.ts (96%) rename packages/testkit/{pickers => components}/ColorPicker.ts (94%) create mode 100644 packages/testkit/components/Combobox.ts rename packages/testkit/{popover => components}/Dialog.ts (75%) rename packages/testkit/{inputs => components}/Dropdown.ts (96%) rename packages/testkit/{buttons => components}/IconButton.ts (66%) rename packages/testkit/{navigation => components}/List.ts (98%) rename packages/testkit/{navigation => components}/ListItem.ts (94%) create mode 100644 packages/testkit/components/Menu.ts rename packages/testkit/{buttons => components}/MenuButton.ts (81%) create mode 100644 packages/testkit/components/MenuItem.ts create mode 100644 packages/testkit/components/Modal.ts create mode 100644 packages/testkit/components/RadioButton.ts create mode 100644 packages/testkit/components/Search.ts rename packages/testkit/{buttons => components}/SplitButton.ts (100%) rename packages/testkit/{navigation => components}/Tab.ts (94%) rename packages/testkit/{navigation => components}/TabList.ts (98%) rename packages/testkit/{text => components}/Text.ts (92%) rename packages/testkit/{inputs => components}/TextArea.ts (94%) rename packages/testkit/{inputs => components}/TextField.ts (96%) rename packages/testkit/{inputs => components}/Toggle.ts (96%) create mode 100644 packages/testkit/components/index.ts delete mode 100644 packages/testkit/inputs/Search.ts delete mode 100644 packages/testkit/inputs/index.ts delete mode 100644 packages/testkit/navigation/index.ts delete mode 100644 packages/testkit/pickers/index.ts delete mode 100644 packages/testkit/popover/index.ts delete mode 100644 packages/testkit/text/index.ts diff --git a/packages/testkit/__tests__/button.test.js b/packages/testkit/__tests__/button.test.js index 7f60935877..faca817fd5 100644 --- a/packages/testkit/__tests__/button.test.js +++ b/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 }) => { diff --git a/packages/testkit/__tests__/buttonGroup.test.js b/packages/testkit/__tests__/buttonGroup.test.js index ad6e4c62d5..e9a462fc41 100644 --- a/packages/testkit/__tests__/buttonGroup.test.js +++ b/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", () => { diff --git a/packages/testkit/__tests__/checkbox.test.js b/packages/testkit/__tests__/checkbox.test.js index d1286d7122..a02cd591d3 100644 --- a/packages/testkit/__tests__/checkbox.test.js +++ b/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); diff --git a/packages/testkit/__tests__/dropdown.test.js b/packages/testkit/__tests__/dropdown.test.js index 3723dfe173..d1f4668a7d 100644 --- a/packages/testkit/__tests__/dropdown.test.js +++ b/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", () => { diff --git a/packages/testkit/__tests__/menuButton.test.js b/packages/testkit/__tests__/menuButton.test.js index 1f45a6bb45..9fa4f74a30 100644 --- a/packages/testkit/__tests__/menuButton.test.js +++ b/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 }) => { diff --git a/packages/testkit/__tests__/textArea.test.js b/packages/testkit/__tests__/textArea.test.js index 75f4f4e4a8..b9fd677779 100644 --- a/packages/testkit/__tests__/textArea.test.js +++ b/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"); }); }); diff --git a/packages/testkit/__tests__/textfield.test.js b/packages/testkit/__tests__/textfield.test.js index 2418126b83..26bc71803c 100644 --- a/packages/testkit/__tests__/textfield.test.js +++ b/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"); }); }); diff --git a/packages/testkit/buttons/index.ts b/packages/testkit/buttons/index.ts deleted file mode 100644 index 8564d975ec..0000000000 --- a/packages/testkit/buttons/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { Button } from "./Button"; -export { MenuButton } from "./MenuButton"; -export { IconButton } from "./IconButton"; -export { SplitButton } from "./SplitButton"; -export { ButtonGroup } from "./ButtonGroup"; diff --git a/packages/testkit/BaseElement.ts b/packages/testkit/components/BaseElement.ts similarity index 100% rename from packages/testkit/BaseElement.ts rename to packages/testkit/components/BaseElement.ts diff --git a/packages/testkit/buttons/Button.ts b/packages/testkit/components/Button.ts similarity index 86% rename from packages/testkit/buttons/Button.ts rename to packages/testkit/components/Button.ts index bcf33bcba8..6a3ec61dca 100644 --- a/packages/testkit/buttons/Button.ts +++ b/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. diff --git a/packages/testkit/buttons/ButtonGroup.ts b/packages/testkit/components/ButtonGroup.ts similarity index 96% rename from packages/testkit/buttons/ButtonGroup.ts rename to packages/testkit/components/ButtonGroup.ts index 75da7dbf37..5d313bf530 100644 --- a/packages/testkit/buttons/ButtonGroup.ts +++ b/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"); } diff --git a/packages/testkit/inputs/Checkbox.ts b/packages/testkit/components/Checkbox.ts similarity index 96% rename from packages/testkit/inputs/Checkbox.ts rename to packages/testkit/components/Checkbox.ts index 0784c011d0..7b1c88e563 100644 --- a/packages/testkit/inputs/Checkbox.ts +++ b/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. diff --git a/packages/testkit/pickers/ColorPicker.ts b/packages/testkit/components/ColorPicker.ts similarity index 94% rename from packages/testkit/pickers/ColorPicker.ts rename to packages/testkit/components/ColorPicker.ts index 3abfbc4774..bc7ee4e5c7 100644 --- a/packages/testkit/pickers/ColorPicker.ts +++ b/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. diff --git a/packages/testkit/components/Combobox.ts b/packages/testkit/components/Combobox.ts new file mode 100644 index 0000000000..9d2efbb39e --- /dev/null +++ b/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} + */ + async selectItem(item: string): Promise { + 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(); + } +} diff --git a/packages/testkit/popover/Dialog.ts b/packages/testkit/components/Dialog.ts similarity index 75% rename from packages/testkit/popover/Dialog.ts rename to packages/testkit/components/Dialog.ts index e552b4d7c6..71d97c4233 100644 --- a/packages/testkit/popover/Dialog.ts +++ b/packages/testkit/components/Dialog.ts @@ -1,12 +1,15 @@ 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. @@ -14,7 +17,9 @@ export class Dialog extends BaseElement { * @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; } /** diff --git a/packages/testkit/inputs/Dropdown.ts b/packages/testkit/components/Dropdown.ts similarity index 96% rename from packages/testkit/inputs/Dropdown.ts rename to packages/testkit/components/Dropdown.ts index 29edabadb5..96fa0c6982 100644 --- a/packages/testkit/inputs/Dropdown.ts +++ b/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. diff --git a/packages/testkit/buttons/IconButton.ts b/packages/testkit/components/IconButton.ts similarity index 66% rename from packages/testkit/buttons/IconButton.ts rename to packages/testkit/components/IconButton.ts index 1546eb7aed..a246489707 100644 --- a/packages/testkit/buttons/IconButton.ts +++ b/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 } ); diff --git a/packages/testkit/navigation/List.ts b/packages/testkit/components/List.ts similarity index 98% rename from packages/testkit/navigation/List.ts rename to packages/testkit/components/List.ts index 531d95fb5d..5ea96fa9d8 100644 --- a/packages/testkit/navigation/List.ts +++ b/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. diff --git a/packages/testkit/navigation/ListItem.ts b/packages/testkit/components/ListItem.ts similarity index 94% rename from packages/testkit/navigation/ListItem.ts rename to packages/testkit/components/ListItem.ts index 19096db9e5..1a61208bc0 100644 --- a/packages/testkit/navigation/ListItem.ts +++ b/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. diff --git a/packages/testkit/components/Menu.ts b/packages/testkit/components/Menu.ts new file mode 100644 index 0000000000..ebee0284f8 --- /dev/null +++ b/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} + */ + async initializeItemsIfNeeded(): Promise { + 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} + */ + async initializeItems(): Promise { + 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} + */ + async selectItem(listItem: string): Promise { + 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(); + } +} diff --git a/packages/testkit/buttons/MenuButton.ts b/packages/testkit/components/MenuButton.ts similarity index 81% rename from packages/testkit/buttons/MenuButton.ts rename to packages/testkit/components/MenuButton.ts index 05b4f14942..4040770e23 100644 --- a/packages/testkit/buttons/MenuButton.ts +++ b/packages/testkit/components/MenuButton.ts @@ -1,5 +1,7 @@ import { Page, Locator } from "@playwright/test"; import { Button } from "./Button"; +import { Menu } from "./Menu"; +import { Dialog } from "./Dialog"; /** * Class representing a menu button that extends the Button class. @@ -9,8 +11,7 @@ export class MenuButton extends Button { override locator: Locator; override elementReportName: string; button: Button; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - menu: any; + menu: Dialog | Menu; /** * Create a MenuButton. @@ -19,8 +20,7 @@ export class MenuButton extends Button { * @param {string} elementReportName - The name for reporting purposes. * @param {any} menuType - The type of menu associated with the button. */ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - constructor(page: Page, locator: Locator, elementReportName: string, menuType: any) { + constructor(page: Page, locator: Locator, elementReportName: string, menuType: Dialog | Menu) { super(page, locator, elementReportName); this.page = page; this.locator = locator; @@ -29,6 +29,16 @@ export class MenuButton extends Button { this.menu = menuType; } + /** + * Select an item from the menu. + * @param {string} item - The item to select. + * @returns {Promise} + */ + async selectItem(item: string): Promise { + await this.openMenu(); + await this.menu.selectItem(item); + } + /** * Open the menu if it is not already expanded. * @returns {Promise} diff --git a/packages/testkit/components/MenuItem.ts b/packages/testkit/components/MenuItem.ts new file mode 100644 index 0000000000..eb121f6ddf --- /dev/null +++ b/packages/testkit/components/MenuItem.ts @@ -0,0 +1,28 @@ +import { Page, Locator, test } from "@playwright/test"; +import { BaseElement } from "./BaseElement"; + +/** + * Class representing a MenuItem element. + * Extends the BaseElement class. + */ +export class MenuItem extends BaseElement { + /** + * Create a MenuItem. + * @param {Page} page - The Playwright page object. + * @param {Locator} locator - The locator for the ListItem element. + * @param {string} elementReportName - The name for reporting purposes. + */ + constructor(page: Page, locator: Locator, elementReportName: string) { + super(page, locator, elementReportName); + } + + /** + * Click the MenuItem element. + * @returns {Promise} + */ + async click(): Promise { + await test.step(`Click ${this.elementReportName}`, async () => { + await this.locator.click(); + }); + } +} diff --git a/packages/testkit/components/Modal.ts b/packages/testkit/components/Modal.ts new file mode 100644 index 0000000000..437b0c651d --- /dev/null +++ b/packages/testkit/components/Modal.ts @@ -0,0 +1,32 @@ +import { Page, Locator } from "@playwright/test"; +import { IconButton } from "./buttons"; + +/** + * Class representing a Modal + */ +export class Modal { + page: Page; + locator: Locator; + elementReportName: string; + closeModalButton: IconButton; + + /** + * Create a Modal. + * @param {Page} page - The Playwright page object. + * @param {Locator} locator - The locator for the MenuButton element. + * @param {string} elementReportName - The name for reporting purposes. + */ + constructor(page: Page, locator: Locator, elementReportName: string) { + this.page = page; + this.locator = locator; + this.elementReportName = elementReportName; + this.closeModalButton = new IconButton(this.page, this.locator, elementReportName); + } + + /** + * Close the modal. + */ + async closeModal(): Promise { + await this.closeModalButton.click(); + } +} diff --git a/packages/testkit/components/RadioButton.ts b/packages/testkit/components/RadioButton.ts new file mode 100644 index 0000000000..2639c66e47 --- /dev/null +++ b/packages/testkit/components/RadioButton.ts @@ -0,0 +1,41 @@ +import { test, Locator, Page } from "@playwright/test"; +import { BaseElement } from "./BaseElement"; + +export class RadioButton extends BaseElement { + override page: Page; + override locator: Locator; + override elementReportName: string; + + /** + * Create a RadioButton. + * @param {Page} page - The Playwright page object. + * @param {Locator} locator - The locator for the RadioButton 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; + } + + /** + * Select the RadioButton element. + * @returns {Promise} + */ + async select(): Promise { + await test.step(`Select ${this.elementReportName}`, async () => { + await this.locator.check(); + }); + } + + /** + * Unselect the RadioButton element. + * @returns {Promise} + */ + async unselect(): Promise { + await test.step(`Unselect ${this.elementReportName}`, async () => { + await this.locator.uncheck(); + }); + } +} diff --git a/packages/testkit/components/Search.ts b/packages/testkit/components/Search.ts new file mode 100644 index 0000000000..591d44c05f --- /dev/null +++ b/packages/testkit/components/Search.ts @@ -0,0 +1,50 @@ +import { Page, Locator, test } from "@playwright/test"; +import { TextField } from "./TextField"; +import { Button, MenuButton } from "./buttons"; +import { Dialog } from "./popover"; +import { Menu } from "./Menu"; + +/** + * Class representing Search field element. + * Extends the BaseElement class. + */ +export class Search extends TextField { + private cleanSearchButton: Button; + private filterButton: Button | undefined; + private input: TextField; + + constructor(page: Page, locator: Locator, elementReportName: string, filterMenuType?: Menu | Dialog) { + super(page, locator, elementReportName); + this.page = page; + this.locator = locator; + this.elementReportName = elementReportName; + this.input = new TextField(this.page, this.locator.locator("[type='search']"), `${this.elementReportName} - Input`); + this.cleanSearchButton = new Button(this.page, this.locator.locator("[aria-label='Clear']"), "Clean Button"); + if (filterMenuType) { + this.filterButton = new MenuButton( + this.page, + this.locator.locator("[aria-label='Filters']").nth(1), + "Filter Button", + filterMenuType + ); + } + } + + /** + * Set the search field text. + * @param text + */ + async setText(text: string): Promise { + await test.step("Set text in search field", async () => { + await this.input.setText(text); + }); + } + + /** + * Clear the search field. + * @returns {Promise} + */ + async clear(): Promise { + await this.cleanSearchButton.click(); + } +} diff --git a/packages/testkit/buttons/SplitButton.ts b/packages/testkit/components/SplitButton.ts similarity index 100% rename from packages/testkit/buttons/SplitButton.ts rename to packages/testkit/components/SplitButton.ts diff --git a/packages/testkit/navigation/Tab.ts b/packages/testkit/components/Tab.ts similarity index 94% rename from packages/testkit/navigation/Tab.ts rename to packages/testkit/components/Tab.ts index e4d7e68a5a..74947e1e4c 100644 --- a/packages/testkit/navigation/Tab.ts +++ b/packages/testkit/components/Tab.ts @@ -1,5 +1,5 @@ import { Page, Locator, test } from "@playwright/test"; -import { BaseElement } from "../BaseElement"; +import { BaseElement } from "./BaseElement"; /** * Class representing a Tab element. diff --git a/packages/testkit/navigation/TabList.ts b/packages/testkit/components/TabList.ts similarity index 98% rename from packages/testkit/navigation/TabList.ts rename to packages/testkit/components/TabList.ts index 064465e707..3f7d0a4ea0 100644 --- a/packages/testkit/navigation/TabList.ts +++ b/packages/testkit/components/TabList.ts @@ -1,5 +1,5 @@ import { Page, Locator, test } from "@playwright/test"; -import { BaseElement } from "../BaseElement"; +import { BaseElement } from "./BaseElement"; import { Tab } from "./Tab"; /** diff --git a/packages/testkit/text/Text.ts b/packages/testkit/components/Text.ts similarity index 92% rename from packages/testkit/text/Text.ts rename to packages/testkit/components/Text.ts index 23455fc199..52f943e29e 100644 --- a/packages/testkit/text/Text.ts +++ b/packages/testkit/components/Text.ts @@ -1,5 +1,5 @@ import { Page, Locator } from "@playwright/test"; -import { BaseElement } from "../BaseElement"; +import { BaseElement } from "./BaseElement"; /** * Class representing a Text element. diff --git a/packages/testkit/inputs/TextArea.ts b/packages/testkit/components/TextArea.ts similarity index 94% rename from packages/testkit/inputs/TextArea.ts rename to packages/testkit/components/TextArea.ts index 03668fcf75..c9efd290da 100644 --- a/packages/testkit/inputs/TextArea.ts +++ b/packages/testkit/components/TextArea.ts @@ -1,7 +1,7 @@ import { Page, Locator, test } from "@playwright/test"; import { pressKey } from "../utils/common-actions"; -import { BaseElement } from "../BaseElement"; -import { Button } from "../buttons/Button"; +import { BaseElement } from "./BaseElement"; +import { Button } from "./Button"; import { TextField } from "./TextField"; /** diff --git a/packages/testkit/inputs/TextField.ts b/packages/testkit/components/TextField.ts similarity index 96% rename from packages/testkit/inputs/TextField.ts rename to packages/testkit/components/TextField.ts index 16bd8e7f44..adcea8fb13 100644 --- a/packages/testkit/inputs/TextField.ts +++ b/packages/testkit/components/TextField.ts @@ -1,6 +1,6 @@ import { Page, Locator, test } from "@playwright/test"; import { pressKey } from "../utils/common-actions"; -import { BaseElement } from "../BaseElement"; +import { BaseElement } from "./BaseElement"; /** * Class representing a TextField element. diff --git a/packages/testkit/inputs/Toggle.ts b/packages/testkit/components/Toggle.ts similarity index 96% rename from packages/testkit/inputs/Toggle.ts rename to packages/testkit/components/Toggle.ts index 585674ce1f..c9473c6a9b 100644 --- a/packages/testkit/inputs/Toggle.ts +++ b/packages/testkit/components/Toggle.ts @@ -1,5 +1,5 @@ import { Page, Locator, test } from "@playwright/test"; -import { BaseElement } from "../BaseElement"; +import { BaseElement } from "./BaseElement"; /** * Class representing a Toggle element. diff --git a/packages/testkit/components/index.ts b/packages/testkit/components/index.ts new file mode 100644 index 0000000000..a498ce35f6 --- /dev/null +++ b/packages/testkit/components/index.ts @@ -0,0 +1,24 @@ +export * from "./Button"; +export * from "./ButtonGroup"; +export * from "./Checkbox"; +export * from "./ColorPicker"; +export * from "./Combobox"; +export * from "./Dialog"; +export * from "./Dropdown"; +export * from "./List"; +export * from "./ListItem"; +export * from "./Menu"; +export * from "./MenuButton"; +export * from "./MenuItem"; +export * from "./Modal"; +export * from "./Dialog"; +export * from "./TextField"; +export * from "./TextArea"; +export * from "./Text"; +export * from "./TextField"; +export * from "./Toggle"; +export * from "./Search"; +export * from "./MenuButton"; +export * from "./RadioButton"; +export * from "./IconButton"; +export * from "./BaseElement"; diff --git a/packages/testkit/index.ts b/packages/testkit/index.ts index c74e1ef1eb..130d75ff2e 100644 --- a/packages/testkit/index.ts +++ b/packages/testkit/index.ts @@ -1,8 +1,2 @@ -export * from "./buttons"; -export * from "./inputs"; -export * from "./pickers"; -export * from "./navigation"; -export * from "./popover"; -export * from "./text"; +export * from "./components"; export * from "./utils/common-actions"; -export * from "./BaseElement"; diff --git a/packages/testkit/inputs/Search.ts b/packages/testkit/inputs/Search.ts deleted file mode 100644 index e5d9617a9d..0000000000 --- a/packages/testkit/inputs/Search.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { Page, Locator } from "@playwright/test"; -import { BaseElement } from "../BaseElement"; - -/** - * Class representing Search field element. - * Extends the BaseElement class. - */ -export class Search extends BaseElement { - constructor(page: Page, locator: Locator, elementReportName: string) { - super(page, locator, elementReportName); - this.page = page; - this.locator = locator; - this.elementReportName = elementReportName; - } -} diff --git a/packages/testkit/inputs/index.ts b/packages/testkit/inputs/index.ts deleted file mode 100644 index 5eba5bf100..0000000000 --- a/packages/testkit/inputs/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export { TextField } from "./TextField"; -export { Dropdown } from "./Dropdown"; -export { Checkbox } from "./Checkbox"; -export { TextArea } from "./TextArea"; -export { Toggle } from "./Toggle"; diff --git a/packages/testkit/navigation/index.ts b/packages/testkit/navigation/index.ts deleted file mode 100644 index ba3beb2d1b..0000000000 --- a/packages/testkit/navigation/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { TabList } from "./TabList"; -export { Tab } from "./Tab"; -export { List } from "./List"; diff --git a/packages/testkit/pickers/index.ts b/packages/testkit/pickers/index.ts deleted file mode 100644 index 94ee64c784..0000000000 --- a/packages/testkit/pickers/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { ColorPicker } from "./ColorPicker"; diff --git a/packages/testkit/popover/index.ts b/packages/testkit/popover/index.ts deleted file mode 100644 index 9a0f94da7e..0000000000 --- a/packages/testkit/popover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Dialog } from "./Dialog"; diff --git a/packages/testkit/text/index.ts b/packages/testkit/text/index.ts deleted file mode 100644 index 7afe56f372..0000000000 --- a/packages/testkit/text/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Text } from "./Text";