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

package/lib/pagination.po.ts

@@ -1,165 +0,0 @@
-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 const paginationSelectors = {
-	rootComponent: '.au-pagination',
-	activePage: '.active',
-	previousPage: '.au-previous',
-	nextPage: '.au-next',
-	firstPage: '.au-first',
-	lastPage: '.au-last',
-	pages: '.au-page',
-	ellipses: '.au-ellipsis',
-};
-
-export class PaginationPO extends BasePO {
-	selectors = structuredClone(paginationSelectors);
-
-	// TODO should we add this in the list of selector ?
-	// Depend on the setSelectors usage...
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	/**
-	 * Gets the locator of the button is the current page in the pagination component.
-	 */
-	get locatorActivePage(): Locator {
-		return this.locatorRoot.locator(this.selectors.activePage);
-	}
-
-	/**
-	 * Gets the locator of the button that once clicked moves to the previous page in the pagination component.
-	 */
-	get locatorPreviousButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.previousPage);
-	}
-
-	/**
-	 * Gets the locator of the button that once clicked moves to the next page in the pagination component.
-	 */
-	get locatorNextButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.nextPage);
-	}
-
-	/**
-	 * Gets the locator of the button that once clicked moves to the first page in the pagination component.
-	 */
-	get locatorFirstButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.firstPage);
-	}
-
-	/**
-	 * Gets the locator of the button that once clicked moves to the last page in the pagination component.
-	 */
-	get locatorLastButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.lastPage);
-	}
-
-	/**
-	 * Gets the locators of the pages
-	 */
-	get locatorPages(): Locator {
-		return this.locatorRoot.locator(this.selectors.pages);
-	}
-
-	/**
-	 * 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 {
-		return this.locatorRoot.locator(this.selectors.pages).nth(pageNumber - 1);
-	}
-
-	/**
-	 * 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 {
-		return this.locatorRoot.locator(this.selectors.pages, {hasText: pageString});
-	}
-
-	get locatorEllipses(): Locator {
-		return this.locatorRoot.locator(this.selectors.ellipses);
-	}
-
-	async state() {
-		return this.locatorRoot.evaluate((rootNode: HTMLElement) => {
-			const returnState: PaginationPOState = {rootClasses: [], disabled: null, pages: [], hrefs: []};
-			const pagesElements = [...rootNode.querySelectorAll('.au-page')] as HTMLLinkElement[];
-			const pages = [];
-			const hrefs = [];
-			const hrefsNavigation: HrefsNavigation = {};
-			const getHref = (elem: Element | null) => elem?.getAttribute('href');
-			const firstElem = rootNode.querySelector('a.au-first');
-			const previousElem = rootNode.querySelector('a.au-previous');
-			const nextElem = rootNode.querySelector('a.au-next');
-			const lastElem = rootNode.querySelector('a.au-last');
-			if (firstElem) {
-				hrefsNavigation.first = getHref(firstElem)!;
-			}
-			if (previousElem) {
-				hrefsNavigation.previous = getHref(previousElem)!;
-			}
-			if (nextElem) {
-				hrefsNavigation.next = getHref(nextElem)!;
-			}
-			if (lastElem) {
-				hrefsNavigation.last = getHref(lastElem)!;
-			}
-
-			for (const element of pagesElements) {
-				hrefs.push(element.getAttribute('href') || '');
-				pages.push((element.textContent || '').trim());
-			}
-			const pagesDisabledElements = [...rootNode.querySelectorAll('a.au-page[aria-disabled]')] as HTMLLinkElement[];
-			returnState['pages'] = pages;
-			returnState['hrefs'] = hrefs;
-			returnState['hrefsNavigation'] = hrefsNavigation;
-			returnState['rootClasses'] = rootNode.className.trim().split(' ');
-			returnState['disabled'] = pagesDisabledElements.length === pagesElements.length ? 'true' : null;
-			if (rootNode.querySelector('a.au-previous[aria-disabled]')) {
-				returnState['isPreviousDisabled'] = true;
-			} else if (previousElem) {
-				returnState['isPreviousDisabled'] = false;
-			}
-			if (rootNode.querySelector('a.au-next[aria-disabled]')) {
-				returnState['isNextDisabled'] = true;
-			} else if (nextElem) {
-				returnState['isNextDisabled'] = false;
-			}
-			if (rootNode.querySelector('a.au-first[aria-disabled]')) {
-				returnState['isFirstDisabled'] = true;
-			} else if (firstElem) {
-				returnState['isFirstDisabled'] = false;
-			}
-			if (rootNode.querySelector('a.au-last[aria-disabled]')) {
-				returnState['isLastDisabled'] = true;
-			} else if (lastElem) {
-				returnState['isLastDisabled'] = false;
-			}
-			return returnState;
-		});
-	}
-}

package/lib/progressbar.po.ts

@@ -1,53 +0,0 @@
-import {BasePO} from '@agnos-ui/base-po';
-import type {Locator} from '@playwright/test';
-
-export const progressbarSelectors = {
-	rootComponent: '[role="progressbar"]',
-	outerBar: '.progress',
-	innerBar: '.progress-bar',
-};
-
-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 class ProgressbarPO extends BasePO {
-	selectors = structuredClone(progressbarSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	get locatorOuterBar(): Locator {
-		return this.locatorRoot.locator(this.selectors.outerBar);
-	}
-	get locatorInnerBar(): Locator {
-		return this.locatorRoot.locator(this.selectors.innerBar);
-	}
-
-	async state(): Promise<State> {
-		return this.locatorRoot.evaluate((rootNode: HTMLElement) => {
-			const innerBar = rootNode.querySelector('.progress-bar');
-			const outerBar = rootNode.querySelector('.progress');
-			return {
-				ariaLabel: rootNode.getAttribute('aria-label'),
-				ariaValueNow: rootNode.getAttribute('aria-valuenow'),
-				ariaValueMin: rootNode.getAttribute('aria-valuemin'),
-				ariaValueMax: rootNode.getAttribute('aria-valuemax'),
-				ariaValueText: rootNode.getAttribute('aria-valuetext'),
-				label: innerBar?.textContent?.trim(),
-				innerClasses: innerBar?.className?.trim()?.split(' ')?.sort() ?? [],
-				outerHeight: (outerBar as HTMLElement | undefined)?.style?.height,
-				innerWidth: (innerBar as HTMLElement | undefined)?.style?.width,
-			};
-		});
-	}
-}

package/lib/rating.po.ts

@@ -1,46 +0,0 @@
-import {BasePO} from '@agnos-ui/base-po';
-
-export const ratingSelectors = {
-	rootComponent: '.au-rating',
-	star: '.au-rating-star',
-};
-
-// TODO add selector list
-export class RatingPO extends BasePO {
-	selectors = structuredClone(ratingSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	/**
-	 * Get the main title locator of the feature page
-	 */
-	locatorStar(index: number) {
-		return this.locatorRoot.locator(this.selectors.star).nth(index);
-	}
-
-	async state() {
-		return await this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
-			const starsElements = [...rootNode.querySelectorAll(selectors.star)] as HTMLSpanElement[];
-			const stars = [];
-			const classes = [];
-			for (const element of starsElements) {
-				stars.push((element.textContent || '').trim());
-				classes.push(element.className.split(' '));
-			}
-
-			return {
-				rootClasses: rootNode.className.trim().split(' ').sort(),
-				value: rootNode.getAttribute('aria-valuenow'),
-				min: rootNode.getAttribute('aria-valuemin'),
-				max: rootNode.getAttribute('aria-valuemax'),
-				text: rootNode.getAttribute('aria-valuetext'),
-				disabled: rootNode.getAttribute('aria-disabled'),
-				readonly: rootNode.getAttribute('aria-readonly'),
-				stars,
-				classes,
-			};
-		}, this.selectors);
-	}
-}

package/lib/select.po.ts

@@ -1,94 +0,0 @@
-import {BasePO} from '@agnos-ui/base-po';
-
-export const selectSelectors = {
-	rootComponent: '.au-select',
-	// TODO add selector list
-};
-
-export class SelectPO extends BasePO {
-	selectors = structuredClone(selectSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	/**
-	 * Get the main title locator of the feature page
-	 */
-	get locatorInput() {
-		return this.locatorRoot.locator('input[type="text"]').nth(0);
-	}
-
-	/**
-	 * Menu container
-	 */
-	get locatorMenu() {
-		return this.locatorRoot.locator('.dropdown-menu');
-	}
-
-	/**
-	 * Return the first menu item locator including the text
-	 */
-	get locatorMenuItems() {
-		return this.locatorMenu.locator('.au-select-item');
-	}
-
-	/**
-	 * Return the first menu item locator including the text
-	 */
-	locatorMenuItem(text: string) {
-		return this.locatorMenu.getByText(text).nth(0);
-	}
-
-	/**
-	 * Bages container
-	 */
-	get locatorBadges() {
-		return this.locatorRoot.locator('div.au-select-badge');
-	}
-
-	/**
-	 * Return the first badge locator including the text
-	 */
-	locatorBadgeItem(text: string) {
-		return this.locatorBadges.filter({hasText: text}).nth(0);
-	}
-
-	async state() {
-		return await this.locatorRoot.evaluate((rootNode: HTMLElement) => {
-			const badgesContainer = rootNode.querySelector('div[role="combobox"]');
-			const input: HTMLInputElement = rootNode.querySelector('input[type="text"]')!;
-
-			const badges = [];
-			if (badgesContainer) {
-				const badgeElements = badgesContainer.querySelectorAll('div.au-select-badge');
-				for (const badgeElement of badgeElements) {
-					badges.push(badgeElement?.textContent?.trim());
-				}
-			}
-
-			const menuElement = rootNode.querySelector('ul.dropdown-menu');
-			const isOpen = menuElement != null;
-			const list: Array<string | undefined> = [];
-			const checked: Array<string | undefined> = [];
-			if (menuElement != null) {
-				const lis = menuElement.querySelectorAll('li.dropdown-item');
-				for (const li of lis) {
-					const text = li.textContent?.trim();
-					list.push(text);
-					if (li.classList.contains('selected')) {
-						checked.push(text);
-					}
-				}
-			}
-
-			return {
-				text: input.value,
-				badges,
-				isOpen,
-				list,
-				checked,
-			};
-		});
-	}
-}

package/lib/slider.po.ts

@@ -1,73 +0,0 @@
-import {BasePO} from '@agnos-ui/base-po';
-import type {Locator} from '@playwright/test';
-
-export const sliderSelectors = {
-	rootComponent: '.au-slider',
-	clickableArea: '.au-slider-clickable-area',
-	handle: '.au-slider-handle',
-	minLabelHorizontal: '.au-slider-label-min',
-	maxLabelHorizontal: '.au-slider-label-max',
-	minLabelVertical: '.au-slider-label-vertical-min',
-	maxLabelVertical: '.au-slider-label-vertical-max',
-	valueLabel: '.au-slider-label-now',
-	progress: '.au-slider-progress',
-};
-
-export class SliderPO extends BasePO {
-	selectors = structuredClone(sliderSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	get locatorHandle(): Locator {
-		return this.locatorRoot.locator(this.selectors.handle);
-	}
-
-	get locatorMinLabelHorizontal(): Locator {
-		return this.locatorRoot.locator(this.selectors.minLabelHorizontal);
-	}
-
-	get locatorMaxLabelHorizontal(): Locator {
-		return this.locatorRoot.locator(this.selectors.maxLabelHorizontal);
-	}
-
-	get locatorMinLabelVertical(): Locator {
-		return this.locatorRoot.locator(this.selectors.minLabelVertical);
-	}
-
-	get locatorMaxLabelVertical(): Locator {
-		return this.locatorRoot.locator(this.selectors.maxLabelVertical);
-	}
-
-	get locatorProgress(): Locator {
-		return this.locatorRoot.locator(this.selectors.progress);
-	}
-
-	get locatorValueLabel(): Locator {
-		return this.locatorRoot.locator(this.selectors.valueLabel);
-	}
-
-	async sliderHandleState() {
-		return this.locatorRoot.locator(this.selectors.handle).evaluateAll((rootNode: HTMLElement[]) => {
-			return rootNode.map((rn) => {
-				return {
-					style: rn.getAttribute('style'),
-					value: rn.getAttribute('aria-valuenow'),
-					min: rn.getAttribute('aria-valuemin'),
-					max: rn.getAttribute('aria-valuemax'),
-					disabled: rn.getAttribute('aria-disabled'),
-					readonly: rn.getAttribute('aria-readonly'),
-					ariaLabel: rn.getAttribute('aria-label'),
-					ariaValueText: rn.getAttribute('aria-valuetext'),
-				};
-			});
-		});
-	}
-
-	async sliderProgressState() {
-		return this.locatorRoot.locator(this.selectors.progress).evaluateAll((rootNode: HTMLElement[]) => {
-			return rootNode.map((rn) => rn.getAttribute('style'));
-		});
-	}
-}

package/lib/toast.po.ts

@@ -1,35 +0,0 @@
-import type {Locator} from '@playwright/test';
-import {BasePO} from '@agnos-ui/base-po';
-
-export const toastSelectors = {
-	rootComponent: '.toast',
-	closeButton: '.btn-close',
-	header: '.toast-header',
-	body: '.toast-body',
-};
-
-export class ToastPO extends BasePO {
-	selectors = structuredClone(toastSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	get locatorCloseButton(): Locator {
-		return this.locatorRoot.locator(this.selectors.closeButton);
-	}
-
-	async state() {
-		return await this.locatorRoot.evaluate((rootNode: HTMLElement, selectors) => {
-			const body = rootNode.querySelector<HTMLDivElement>(selectors.body)?.innerText;
-			const header = rootNode.querySelector<HTMLDivElement>(selectors.header)?.innerText;
-			const closeButton = rootNode.querySelector<HTMLButtonElement>(selectors.closeButton)?.getAttribute('aria-label');
-			return {
-				rootClasses: rootNode.className.trim().split(' ').sort(),
-				body,
-				header,
-				closeButton,
-			};
-		}, this.selectors);
-	}
-}

package/lib/tree.po.ts

@@ -1,46 +0,0 @@
-import {BasePO} from '@agnos-ui/base-po';
-import type {Locator} from '@playwright/test';
-
-export const treeSelectors = {
-	rootComponent: '[role="tree"]',
-	itemContainer: '[role="treeitem"]',
-	itemToggle: '.au-tree-expand-icon',
-	itemContents: '.au-tree-item',
-};
-
-export class TreePO extends BasePO {
-	selectors = structuredClone(treeSelectors);
-
-	override getComponentSelector(): string {
-		return this.selectors.rootComponent;
-	}
-
-	get locatorItemToggle(): Locator {
-		return this.locatorRoot.locator(this.selectors.itemToggle);
-	}
-
-	get locatorItemContainer(): Locator {
-		return this.locatorRoot.locator(this.selectors.itemContents);
-	}
-
-	async itemContainerState() {
-		return this.locatorRoot.locator(this.selectors.itemContainer).evaluateAll((rootNode: HTMLElement[]) => {
-			return rootNode.map((rn) => {
-				return {
-					ariaSelected: rn.getAttribute('aria-selected'),
-					ariaExpanded: rn.getAttribute('aria-expanded'),
-				};
-			});
-		});
-	}
-
-	async itemToggleState() {
-		return this.locatorRoot.locator(this.selectors.itemToggle).evaluateAll((rootNode: HTMLElement[]) => {
-			return rootNode.map((rn) => {
-				return {
-					ariaLabel: rn.getAttribute('aria-label'),
-				};
-			});
-		});
-	}
-}

package/tsconfig.build.json

@@ -1,10 +0,0 @@
-{
-	"extends": "../tsconfig.json",
-	"compilerOptions": {
-		"noEmit": false,
-		"emitDeclarationOnly": true,
-		"outDir": "dist",
-		"declaration": true
-	},
-	"include": ["lib"]
-}

package/tsconfig.json

@@ -1,9 +0,0 @@
-{
-	"extends": "./tsconfig.build.json",
-	"compilerOptions": {
-		"paths": {
-			"@agnos-ui/base-po": ["./base-po/lib"]
-		}
-	},
-	"files": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,17 +0,0 @@
-import {peerDependencies, dependencies} from './package.json';
-import {defineConfig} from 'vite';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-	build: {
-		lib: {
-			entry: 'lib/index',
-			fileName: 'index',
-			formats: ['es', 'cjs'],
-		},
-		rollupOptions: {
-			external: [...Object.keys(peerDependencies), ...Object.keys(dependencies)],
-		},
-		emptyOutDir: true,
-	},
-});