@agnos-ui/page-objects 0.6.0-next.1 → 0.6.0-next.2

package/package.json

@@ -1,63 +1,31 @@
 {
 	"name": "@agnos-ui/page-objects",
 	"description": "Page objects to be used when testing AgnosUI-based applications with Playwright.",
-	"version": "0.6.0-next.1",
+	"version": "0.6.0-next.2",
 	"keywords": [
 		"e2e",
 		"page-object",
 		"playwright",
-		"testing"
+		"testing",
+		"accordion",
+		"AgnosUI",
+		"alert",
+		"collapse",
+		"components",
+		"modal",
+		"pagination",
+		"progressbar",
+		"rating",
+		"slider",
+		"toast",
+		"widgets"
 	],
 	"type": "module",
-	"main": "./dist/index.cjs",
-	"module": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"scripts": {
-		"build": "wireit"
-	},
-	"wireit": {
-		"build:src": {
-			"command": "vite build && tsc -p tsconfig.build.json",
-			"dependencies": [
-				"../base-po:build"
-			],
-			"files": [
-				"lib/**",
-				"tsconfig.json",
-				"../tsconfig.json",
-				"vite.config.ts"
-			],
-			"output": [
-				"dist/**",
-				"!dist/package.json",
-				"!dist/README.md"
-			]
-		},
-		"build:pkg": {
-			"command": "node ../scripts/buildPackageJson.js . dist",
-			"dependencies": [
-				"build:src"
-			],
-			"files": [
-				"../scripts/buildPackageJson.js",
-				"../package.json",
-				"package.json",
-				"README.md"
-			],
-			"output": [
-				"dist/README.md",
-				"dist/package.json"
-			]
-		},
-		"build": {
-			"dependencies": [
-				"build:src",
-				"build:pkg"
-			]
-		}
-	},
+	"main": "./index.cjs",
+	"module": "./index.js",
+	"types": "./index.d.ts",
 	"dependencies": {
-		"@agnos-ui/base-po": "0.6.0-next.1"
+		"@agnos-ui/base-po": "0.6.0-next.2"
 	},
 	"peerDependencies": {
 		"@playwright/test": "^1.49.0"
@@ -68,5 +36,6 @@
 		"type": "git",
 		"url": "git+https://github.com/AmadeusITGroup/AgnosUI.git",
 		"directory": "page-objects"
-	}
-}
+	},
+	"homepage": "https://www.agnosui.dev/latest/"
+}

package/pagination.po.d.ts

@@ -0,0 +1,80 @@
+import type { Locator } from '@playwright/test';
+import { BasePO } from '@agnos-ui/base-po';
+/** Pagination navigation buttons hrefs */
+export interface HrefsNavigation {
+    first?: string;
+    previous?: string;
+    next?: string;
+    last?: string;
+}
+/** Pagination page object */
+export interface PaginationPOState {
+    rootClasses: string[];
+    disabled: string | null;
+    pages: string[];
+    hrefs: string[];
+    hrefsNavigation?: HrefsNavigation;
+    isFirstDisabled?: boolean;
+    isPreviousDisabled?: boolean;
+    isNextDisabled?: boolean;
+    isLastDisabled?: boolean;
+}
+export declare const paginationSelectors: {
+    rootComponent: string;
+    activePage: string;
+    previousPage: string;
+    nextPage: string;
+    firstPage: string;
+    lastPage: string;
+    pages: string;
+    ellipses: string;
+};
+export declare class PaginationPO extends BasePO {
+    selectors: {
+        rootComponent: string;
+        activePage: string;
+        previousPage: string;
+        nextPage: string;
+        firstPage: string;
+        lastPage: string;
+        pages: string;
+        ellipses: string;
+    };
+    getComponentSelector(): string;
+    /**
+     * Gets the locator of the button is the current page in the pagination component.
+     */
+    get locatorActivePage(): Locator;
+    /**
+     * Gets the locator of the button that once clicked moves to the previous page in the pagination component.
+     */
+    get locatorPreviousButton(): Locator;
+    /**
+     * Gets the locator of the button that once clicked moves to the next page in the pagination component.
+     */
+    get locatorNextButton(): Locator;
+    /**
+     * Gets the locator of the button that once clicked moves to the first page in the pagination component.
+     */
+    get locatorFirstButton(): Locator;
+    /**
+     * Gets the locator of the button that once clicked moves to the last page in the pagination component.
+     */
+    get locatorLastButton(): Locator;
+    /**
+     * Gets the locators of the pages
+     */
+    get locatorPages(): Locator;
+    /**
+     * Gets the locator of a page button in the pagination component given his position.
+     * @param pageNumber - The number of the page in the pagination object.
+     */
+    locatorNthPage(pageNumber: number): Locator;
+    /**
+     * Gets the locator of a page button in the pagination component given a string.
+     * @param pageString - The string of the page in the pagination object.
+     */
+    locatorPage(pageString: string): Locator;
+    get locatorEllipses(): Locator;
+    state(): Promise<PaginationPOState>;
+}

package/progressbar.po.d.ts

@@ -0,0 +1,29 @@
+import { BasePO } from '@agnos-ui/base-po';
+import type { Locator } from '@playwright/test';
+export declare const progressbarSelectors: {
+    rootComponent: string;
+    outerBar: string;
+    innerBar: string;
+};
+export interface State {
+    ariaLabel: string | null;
+    ariaValueNow: string | null;
+    ariaValueMin: string | null;
+    ariaValueMax: string | null;
+    ariaValueText: string | null;
+    label: string | null | undefined;
+    innerClasses: string[];
+    outerHeight: string | undefined;
+    innerWidth: string | undefined;
+}
+export declare class ProgressbarPO extends BasePO {
+    selectors: {
+        rootComponent: string;
+        outerBar: string;
+        innerBar: string;
+    };
+    getComponentSelector(): string;
+    get locatorOuterBar(): Locator;
+    get locatorInnerBar(): Locator;
+    state(): Promise<State>;
+}

package/rating.po.d.ts

@@ -0,0 +1,27 @@
+import { BasePO } from '@agnos-ui/base-po';
+export declare const ratingSelectors: {
+    rootComponent: string;
+    star: string;
+};
+export declare class RatingPO extends BasePO {
+    selectors: {
+        rootComponent: string;
+        star: string;
+    };
+    getComponentSelector(): string;
+    /**
+     * Get the main title locator of the feature page
+     */
+    locatorStar(index: number): import("playwright-core").Locator;
+    state(): Promise<{
+        rootClasses: string[];
+        value: string | null;
+        min: string | null;
+        max: string | null;
+        text: string | null;
+        disabled: string | null;
+        readonly: string | null;
+        stars: string[];
+        classes: string[][];
+    }>;
+}

package/select.po.d.ts

@@ -0,0 +1,41 @@
+import { BasePO } from '@agnos-ui/base-po';
+export declare const selectSelectors: {
+    rootComponent: string;
+};
+export declare class SelectPO extends BasePO {
+    selectors: {
+        rootComponent: string;
+    };
+    getComponentSelector(): string;
+    /**
+     * Get the main title locator of the feature page
+     */
+    get locatorInput(): import("playwright-core").Locator;
+    /**
+     * Menu container
+     */
+    get locatorMenu(): import("playwright-core").Locator;
+    /**
+     * Return the first menu item locator including the text
+     */
+    get locatorMenuItems(): import("playwright-core").Locator;
+    /**
+     * Return the first menu item locator including the text
+     */
+    locatorMenuItem(text: string): import("playwright-core").Locator;
+    /**
+     * Bages container
+     */
+    get locatorBadges(): import("playwright-core").Locator;
+    /**
+     * Return the first badge locator including the text
+     */
+    locatorBadgeItem(text: string): import("playwright-core").Locator;
+    state(): Promise<{
+        text: string;
+        badges: (string | undefined)[];
+        isOpen: boolean;
+        list: (string | undefined)[];
+        checked: (string | undefined)[];
+    }>;
+}

package/slider.po.d.ts

@@ -0,0 +1,45 @@
+import { BasePO } from '@agnos-ui/base-po';
+import type { Locator } from '@playwright/test';
+export declare const sliderSelectors: {
+    rootComponent: string;
+    clickableArea: string;
+    handle: string;
+    minLabelHorizontal: string;
+    maxLabelHorizontal: string;
+    minLabelVertical: string;
+    maxLabelVertical: string;
+    valueLabel: string;
+    progress: string;
+};
+export declare class SliderPO extends BasePO {
+    selectors: {
+        rootComponent: string;
+        clickableArea: string;
+        handle: string;
+        minLabelHorizontal: string;
+        maxLabelHorizontal: string;
+        minLabelVertical: string;
+        maxLabelVertical: string;
+        valueLabel: string;
+        progress: string;
+    };
+    getComponentSelector(): string;
+    get locatorHandle(): Locator;
+    get locatorMinLabelHorizontal(): Locator;
+    get locatorMaxLabelHorizontal(): Locator;
+    get locatorMinLabelVertical(): Locator;
+    get locatorMaxLabelVertical(): Locator;
+    get locatorProgress(): Locator;
+    get locatorValueLabel(): Locator;
+    sliderHandleState(): Promise<{
+        style: string | null;
+        value: string | null;
+        min: string | null;
+        max: string | null;
+        disabled: string | null;
+        readonly: string | null;
+        ariaLabel: string | null;
+        ariaValueText: string | null;
+    }[]>;
+    sliderProgressState(): Promise<(string | null)[]>;
+}

package/toast.po.d.ts

@@ -0,0 +1,24 @@
+import type { Locator } from '@playwright/test';
+import { BasePO } from '@agnos-ui/base-po';
+export declare const toastSelectors: {
+    rootComponent: string;
+    closeButton: string;
+    header: string;
+    body: string;
+};
+export declare class ToastPO extends BasePO {
+    selectors: {
+        rootComponent: string;
+        closeButton: string;
+        header: string;
+        body: string;
+    };
+    getComponentSelector(): string;
+    get locatorCloseButton(): Locator;
+    state(): Promise<{
+        rootClasses: string[];
+        body: string | undefined;
+        header: string | undefined;
+        closeButton: string | null | undefined;
+    }>;
+}

package/tree.po.d.ts

@@ -0,0 +1,26 @@
+import { BasePO } from '@agnos-ui/base-po';
+import type { Locator } from '@playwright/test';
+export declare const treeSelectors: {
+    rootComponent: string;
+    itemContainer: string;
+    itemToggle: string;
+    itemContents: string;
+};
+export declare class TreePO extends BasePO {
+    selectors: {
+        rootComponent: string;
+        itemContainer: string;
+        itemToggle: string;
+        itemContents: string;
+    };
+    getComponentSelector(): string;
+    get locatorItemToggle(): Locator;
+    get locatorItemContainer(): Locator;
+    itemContainerState(): Promise<{
+        ariaSelected: string | null;
+        ariaExpanded: string | null;
+    }[]>;
+    itemToggleState(): Promise<{
+        ariaLabel: string | null;
+    }[]>;
+}

package/lib/accordion.po.ts

@@ -1,93 +0,0 @@
-import type {Locator} from '@playwright/test';
-import {BasePO} from '@agnos-ui/base-po';
-
-export class AccordionPO extends BasePO {
-	private readonly selectors = {
-		item: '.accordion-item',
-		bodyContainer: '.accordion-collapse',
-		body: '.accordion-body',
-		header: '.accordion-header',
-		buttons: '.accordion-button',
-	};
-	override getComponentSelector(): string {
-		return '.au-accordion';
-	}
-
-	/**
-	 * Gets the locators of the items containing the header and the body-container inside
-	 * the accordion
-	 */
-	get locatorAccordionItems(): Locator {
-		return this.locatorRoot.locator(this.selectors.item);
-	}
-
-	/**
-	 * Gets the locators of the item specified by the itemIndex containing the header and the body-container inside
-	 * the accordion
-	 */
-	locatorAccordionItem(itemIndex: number): Locator {
-		return this.locatorRoot.locator(this.selectors.item).nth(itemIndex);
-	}
-
-	get locatorAccordionCBodyContainers(): Locator {
-		return this.locatorAccordionItems.locator(this.selectors.bodyContainer);
-	}
-
-	locatorAccordionBodyContainer(bodyContainerIndex: number): Locator {
-		return this.locatorAccordionItem(bodyContainerIndex).locator(this.selectors.bodyContainer);
-	}
-
-	/**
-	 * Gets the locator of the bodies of the accordion.
-	 */
-	get locatorAccordionBodies(): Locator {
-		return this.locatorAccordionCBodyContainers.locator(this.selectors.body);
-	}
-
-	locatorAccordionBody(bodyIndex: number): Locator {
-		return this.locatorAccordionBodyContainer(bodyIndex).locator(this.selectors.body);
-	}
-
-	get locatorAccordionHeaders(): Locator {
-		return this.locatorAccordionItems.locator(this.selectors.header);
-	}
-
-	locatorAccordionHeader(headerIndex: number): Locator {
-		return this.locatorAccordionItem(headerIndex).locator(this.selectors.header);
-	}
-
-	/**
-	 * Gets the locators of the buttons that handle the accordion, present in the accordion header.
-	 * It does not get the locators of the buttons present in the body, added by the developer.
-	 */
-	get locatorAccordionButtons(): Locator {
-		return this.locatorAccordionHeaders.locator(this.selectors.buttons);
-	}
-
-	locatorAccordionButton(buttonIndex: number): Locator {
-		return this.locatorAccordionHeader(buttonIndex).locator(this.selectors.buttons);
-	}
-
-	async state() {
-		return await this.locatorRoot.evaluate((rootNode: HTMLElement) => {
-			const itemsElements = [...rootNode.querySelectorAll('.accordion-item')] as HTMLDivElement[];
-			const items = [];
-			for (const item of itemsElements) {
-				const bodyContainer = item.querySelector('.accordion-collapse');
-				const button = item.querySelector('.accordion-button');
-				items.push({
-					classes: item.className.trim().split(' '),
-					id: item.id,
-					isInDOM: bodyContainer !== null ? true : false,
-					bodyContainerId: bodyContainer?.id,
-					buttonId: button?.id,
-					expanded: button?.getAttribute('aria-expanded'),
-					disabled: button?.getAttribute('aria-disabled'),
-					labeledBy: bodyContainer?.getAttribute('aria-labelledby'),
-					buttonControls: button?.getAttribute('aria-controls'),
-				});
-			}
-			return {rootClasses: rootNode.className.trim().split(' '), items: items};
-		});
-	}
-}

package/lib/alert.po.ts

@@ -1,34 +0,0 @@
-import {BasePO} from '@agnos-ui/base-po';
-import type {Locator} from '@playwright/test';
-
-export const alertSelectors = {
-	rootComponent: '.alert',
-	body: '.alert-body',
-	closeButton: '.btn-close',
-};
-
-export class AlertPO extends BasePO {
-	selectors = structuredClone(alertSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	get locatorCloseButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.closeButton);
-	}
-
-	async state() {
-		return this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
-			// normalize body content to remove non-printable characters such as line breaks
-			// as different browsers represent innerText in their own manner
-			const body = rootNode.querySelector<HTMLDivElement>(selectors.body)?.innerText?.replace(/[^\x20-\x7E]/g, '');
-			const closeButton = rootNode.querySelector<HTMLButtonElement>(selectors.closeButton)?.getAttribute('aria-label');
-			return {
-				rootClasses: rootNode.className.trim().split(' ').sort(),
-				body,
-				closeButton,
-			};
-		}, this.selectors);
-	}
-}

package/lib/modal.po.ts

@@ -1,63 +0,0 @@
-import type {Locator} from '@playwright/test';
-import {BasePO} from '@agnos-ui/base-po';
-
-export const modalSelectors = {
-	// TODO: should we use bootstrap-independent classes starting with au- ?
-	rootComponent: '.modal',
-	closeButton: '.btn-close',
-	backdrop: "xpath=./preceding-sibling::div[contains(@class,'modal-backdrop')]",
-	header: '.modal-header',
-	title: '.modal-title',
-	body: '.modal-body',
-	footer: '.modal-footer',
-};
-
-export class ModalPO extends BasePO {
-	selectors = structuredClone(modalSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	get locatorHeader(): Locator {
-		return this.locatorRoot.locator(this.selectors.header);
-	}
-
-	get locatorTitle(): Locator {
-		return this.locatorHeader.locator(this.selectors.title);
-	}
-
-	get locatorBody(): Locator {
-		return this.locatorRoot.locator(this.selectors.body);
-	}
-
-	get locatorFooter(): Locator {
-		return this.locatorRoot.locator(this.selectors.footer);
-	}
-
-	get locatorCloseButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.closeButton);
-	}
-
-	get locatorBackdrop(): Locator {
-		return this.locatorRoot.locator(this.selectors.backdrop);
-	}
-
-	async state() {
-		return this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
-			const closeButton = rootNode.querySelector<HTMLButtonElement>(selectors.closeButton)?.getAttribute('aria-label');
-			const header = rootNode.querySelector<HTMLDivElement>(selectors.header)?.innerText?.trim();
-			const title = rootNode.querySelector<HTMLDivElement>(selectors.title)?.innerText?.trim();
-			const body = rootNode.querySelector<HTMLDivElement>(selectors.body)?.innerText?.trim();
-			const footer = rootNode.querySelector<HTMLDivElement>(selectors.footer)?.innerText?.trim();
-			return {
-				rootClasses: rootNode.className.trim().split(' ').sort(),
-				header,
-				title,
-				body,
-				footer,
-				closeButton,
-			};
-		}, this.selectors);
-	}
-}