Pw/chen

.gitignore

@@ -53,3 +53,5 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+/fusion-e2e/dist

projects/fusion-e2e/.gitignore

@@ -4,3 +4,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+dist

projects/fusion-e2e/entities/behavior/behavior-class/base-element.ts

@@ -0,0 +1,204 @@
+import {Locator, Page, test} from '@playwright/test';
+import {getTestId, getTestIdSelector} from '../../global/utils';
+
+export class BaseElement {
+    readonly page: Page;
+    readonly selector: string;
+    locator: Locator;
+
+    constructor(page: Page, selector: string) {
+        this.page = page;
+        this.selector = selector;
+        this.locator = this.page.locator(selector);
+    }
+
+    async click(): Promise<void> {
+        await test.step(`Click on:  ${this.selector}`, async () => {
+            await this.page.click(this.selector);
+        });
+    }
+
+    async count(): Promise<number> {
+        let count: number;
+
+        await test.step(`Count: ${this.selector}`, async () => {
+            count = await this.page.locator(this.selector).count();
+        });
+
+        return count;
+    }
+
+    async hover(): Promise<void> {
+        await test.step(`Hover on: ${this.selector}`, async () => {
+            await this.page.hover(this.selector);
+        });
+    }
+
+    async isVisible(): Promise<boolean> {
+        let isVisible: boolean;
+
+        await test.step(`Is visible: ${this.selector}`, async () => {
+            isVisible = await this.page.isVisible(this.selector);
+        });
+
+        return isVisible;
+    }
+
+    async isHidden(): Promise<boolean> {
+        let isHidden: boolean;
+
+        await test.step(`Is hidden: ${this.selector}`, async () => {
+            isHidden = await this.page.isHidden(this.selector);
+        });
+
+        return isHidden;
+    }
+
+    async isDisabled(): Promise<boolean> {
+        let isDisabled: boolean;
+
+        await test.step(`Is disabled: ${this.selector}`, async () => {
+            isDisabled = await this.page.isDisabled(this.selector);
+        });
+
+        return isDisabled;
+    }
+
+    async isEnabled(): Promise<boolean> {
+        let isEnabled: boolean;
+
+        await test.step(`Is enabled: ${this.selector}`, async () => {
+            isEnabled = await this.page.isEnabled(this.selector);
+        });
+
+        return isEnabled;
+    }
+
+    async isAttached(): Promise<any> {
+        let isAttached: any;
+
+        await test.step(`Is attached: ${this.selector}`, async () => {
+            isAttached = await this.page.waitForSelector(this.selector, {state: `attached`});
+        });
+
+        return isAttached;
+    }
+
+    async getSelector(): Promise<string> {
+        let selector: string;
+
+        await test.step(`Get selector`, async () => {
+            selector = this.selector;
+        });
+
+        return selector;
+    }
+
+    async getLocator(selector: string): Promise<Locator> {
+        let locator: Locator;
+
+        await test.step(`Get locator of: ${this.selector}`, async () => {
+            locator = this.page.locator(selector);
+        });
+
+        return locator;
+    }
+
+    async getAttribute(attributeName: string): Promise<string | null> {
+        let attribute: string | null;
+
+        await test.step(`Get attribute of: ${attributeName}`, async () => {
+            attribute = await this.page.getAttribute(this.selector, attributeName);
+        });
+        return attribute;
+    }
+
+    async keyPress(key: string, count: number = 1): Promise<void> {
+        await test.step(`Press key: ${key}, ${count} times`, async () => {
+            for (let i = 0; i < count; i++) {
+                await this.page.keyboard.press(key);
+            }
+        });
+    }
+
+    async waitForElementToBeAttached(): Promise<void> {
+        await test.step(`Wait for element to be attached: ${this.selector}`, async () => {
+            await this.locator.waitFor({state: `attached`});
+        });
+    }
+
+    async waitForTimeout(timeout: number): Promise<void> {
+        await test.step(`Wait for timeout`, async () => {
+            await this.page.waitForTimeout(timeout);
+        });
+    }
+
+    async waitForURL(url: string): Promise<void> {
+        await test.step(`Wait for URL: ${url}`, async () => {
+            await this.page.waitForURL(url);
+        });
+    }
+
+    async waitForLoadState(state: `load` | `domcontentloaded` | `networkidle` = `load`) {
+        await test.step(`Wait for load state: ${state}`, async () => {
+            await this.page.waitForLoadState(state);
+        });
+    }
+
+    async waitForSelector(selectorName: string): Promise<void> {
+        await test.step(`Wait for selector: ${selectorName}`, async () => {
+            await this.page.waitForSelector(selectorName);
+        });
+    }
+
+    async waitForComponent(modifiers?: string) {
+        let loadedPageSelector: string;
+        if (!modifiers) {
+            loadedPageSelector = getTestIdSelector(this.selector);
+        } else {
+            loadedPageSelector = getTestIdSelector(getTestId(this.selector, modifiers));
+        }
+        await this.waitForSelector(loadedPageSelector);
+    }
+
+    async selectorText(locator: Locator): Promise<string> {
+        let text: string;
+
+        await test.step(`Get text of: ${this.selector}`, async () => {
+            text = await locator.textContent();
+        });
+
+        return text;
+    }
+
+    async textContent(): Promise<string> {
+        let text: string;
+
+        await test.step(`Get text content of: ${this.selector}`, async () => {
+            text = await this.locator.textContent();
+        });
+
+        return text;
+    }
+
+    async reload(): Promise<void> {
+        await test.step(`Reload page`, async () => {
+            await this.page.reload();
+        });
+    }
+
+    async getByTestId(testId: string): Promise<Locator> {
+        return test.step(`Get element by test id: ${testId}`, async () => {
+            return this.page.getByTestId(testId);
+        });
+    }
+
+    async waitForEvent(event: any): Promise<any> {
+        let eventResponse: any;
+        await test.step(`Wait for event ${event}`, async () => {
+            eventResponse = this.page.waitForEvent(event);
+        });
+
+        return eventResponse;
+    }
+}

projects/fusion-e2e/entities/behavior/behavior-class/checkable.ts

@@ -0,0 +1,35 @@
+import {Page, test} from '@playwright/test';
+import {BaseElement} from './base-element';
+
+export class Checkable extends BaseElement {
+    constructor(page: Page, selector: string) {
+        super(page, selector);
+    }
+
+    async check(): Promise<void> {
+        await test.step(`Check`, async () => {
+            await this.page.check(this.selector);
+            if (!(await this.isChecked())) {
+                throw new Error(`Couldn't check the Check box ${this.selector}`);
+            }
+        });
+    }
+    async uncheck(): Promise<void> {
+        await test.step(`UnCheck`, async () => {
+            await this.page.uncheck(this.selector);
+            if (await this.isChecked()) {
+                throw new Error(`Couldn't uncheck the Check box ${this.selector}`);
+            }
+        });
+    }
+
+    async isChecked(): Promise<boolean> {
+        let isChecked: boolean;
+
+        await test.step(`isChecked`, async () => {
+            isChecked = await this.locator.isChecked();
+        });
+
+        return isChecked;
+    }
+}

projects/fusion-e2e/entities/behavior/behavior-class/clickable.ts

@@ -0,0 +1,8 @@
+import {Page} from '@playwright/test';
+import {BaseElement} from './base-element';
+
+export class Clickable extends BaseElement {
+    constructor(page: Page, selector: string) {
+        super(page, selector);
+    }
+}

projects/fusion-e2e/entities/behavior/behavior-class/editable.ts

@@ -0,0 +1,28 @@
+import {Page, test} from '@playwright/test';
+import {Clickable} from './clickable';
+
+export class Editable extends Clickable {
+    constructor(page: Page, selector: string) {
+        super(page, selector);
+    }
+
+    async clearInput(): Promise<void> {
+        await test.step(`Clear input`, async () => {
+            await this.page.fill(this.selector, '');
+        });
+    }
+
+    async fill(text: string): Promise<void> {
+        await test.step(`Fill input with text: ${text}`, async () => {
+            await this.page.fill(this.selector, '');
+            await this.page.fill(this.selector, text);
+        });
+    }
+
+    async type(text: string): Promise<void> {
+        await test.step(`Fill input with text: ${text}`, async () => {
+            await this.page.fill(this.selector, '');
+            await this.locator.type(text, {delay: 50});
+        });
+    }
+}

projects/fusion-e2e/entities/behavior/index.ts

@@ -0,0 +1,4 @@
+export {Editable} from './behavior-class/editable';
+export {Clickable} from './behavior-class/clickable';
+export {Checkable} from './behavior-class/checkable';
+export {BaseElement} from './behavior-class/base-element';

projects/fusion-e2e/entities/components/alert/alert-component.ts

@@ -0,0 +1,55 @@
+import {AlertTestIdModifiers} from '@ironsource/fusion-ui/entities/test-ids-modifiers';
+import {getTestId, getTestIdSelector} from '../../global/utils';
+import {BaseComponent} from '../base-component';
+import {ButtonComponent} from '../button/button-component';
+import {StaticText} from '../../elements';
+import {Page} from '@playwright/test';
+
+export class AlertComponent extends BaseComponent {
+    wrapperElement: StaticText;
+    messageElement: StaticText;
+    titleElement: StaticText;
+    actionButtonElement: ButtonComponent;
+    closeButtonElement: ButtonComponent;
+
+    constructor(page: Page, selector: string) {
+        super(page, selector);
+        this.wrapperElement = new StaticText(page, getTestIdSelector(getTestId(this.selector, AlertTestIdModifiers.WRAPPER)));
+        this.messageElement = new StaticText(page, getTestIdSelector(getTestId(this.selector, AlertTestIdModifiers.MESSAGE)));
+        this.titleElement = new StaticText(page, getTestIdSelector(getTestId(this.selector, AlertTestIdModifiers.TITLE)));
+        this.actionButtonElement = new ButtonComponent(
+            page,
+            getTestIdSelector(getTestId(this.selector, AlertTestIdModifiers.ACTION_BUTTON))
+        );
+        this.closeButtonElement = new ButtonComponent(page, getTestIdSelector(getTestId(this.selector, AlertTestIdModifiers.CLOSE_BUTTON)));
+    }
+
+    async getAlertText(): Promise<string> {
+        return this.messageElement.textContent();
+    }
+
+    async getAlertTitle(): Promise<string> {
+        return this.titleElement.textContent();
+    }
+
+    async getActionButtonText(): Promise<string> {
+        return this.actionButtonElement.textContent();
+    }
+
+    async clickOnActionButton(): Promise<void> {
+        await this.actionButtonElement.click();
+    }
+
+    async closeAlert(): Promise<void> {
+        await this.closeButtonElement.click();
+    }
+
+    async isAlertVisible(): Promise<boolean> {
+        const alertSelector = await this.wrapperElement.count();
+        return alertSelector > 0;
+    }
+
+    async getAlertIconType(): Promise<string> {
+        return this.wrapperElement.getAttribute('class');
+    }
+}

projects/fusion-e2e/tests/components/alert/consts.ts → projects/fusion-e2e/entities/components/alert/const.ts

@@ -1,14 +1,7 @@
-import {AlertTestIdModifiers} from '@ironsource/fusion-ui/entities';
+import {AlertTestIdModifiers} from '@ironsource/fusion-ui/entities/test-ids-modifiers';
 import {getTestId, getTestIdSelector} from '../../global/utils';
 
 export const alertStoryId = 'v4-components-feedback-alert--basic';
 export const alertSeveritiesStoryId = 'v4-components-feedback-alert--severities';
 export const defaultTestId = 'alert-default';
-export const successTestId = 'success-alert';
-export const warningTestId = 'warning-alert';
-
-export const dangerTestId = 'danger-alert';
-export const infoTestId = 'info-alert';
-export const outlinedTestId = 'outlined-alert';
-
 export const loadedPageSelector = getTestIdSelector(getTestId(defaultTestId, AlertTestIdModifiers.WRAPPER));

projects/fusion-e2e/entities/components/base-component.ts

@@ -0,0 +1,20 @@
+import {Page} from '@playwright/test';
+import {BaseElement} from '../behavior';
+
+export class BaseComponent extends BaseElement {
+    constructor(page: Page, selector: string) {
+        super(page, selector);
+    }
+
+    async isAllControlsVisible(controls: BaseElement[]) {
+        let isVisible = true;
+        for (const control of controls) {
+            const isControlVisible = await control.isVisible();
+            if (!isControlVisible) {
+                isVisible = false;
+                break;
+            }
+        }
+        return isVisible;
+    }
+}