[ACS-7381][ADF] Break DataTable dependency on Material Module (#9657)

* [ACS-7381] remove MaterialModule dependency and convert components to standalone * [ACS-7381] remove MaterialModule dependency and convert components to standalone * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] tests fixes * [ACS-7381] fix e2e tests * [ACS-7381] update e2e tests * [ACS-7381] update e2e tests * [ACS-7381] update e2e tests * [ACS-7381] update e2e tests * [ACS-7381] update e2e tests * [ACS-7381] fix for checkboxes * [ACS-7381] fix e2e * [ACS-7381] fix e2e * [ACS-7381] fix e2e * [ACS-7381] fix e2e * [ACS-7381] fix for e2e * [ACS-7381] fix for e2e
2025-07-24 17:32:15 +00:00 · 2024-06-24 10:40:59 +02:00
parent 785b5821a0
commit f27d62585b
82 changed files with 1398 additions and 1258 deletions
--- a/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts
+++ b/lib/testing/src/lib/protractor/core/pages/data-table-component.page.ts
@@ -24,7 +24,6 @@ import { materialLocators } from './public-api';
 const MAX_LOADING_TIME = 120000;

 export class DataTableComponentPage {
-
    rootElement: ElementFinder;
    list: ElementArrayFinder;
    contents: ElementArrayFinder;
@@ -39,22 +38,22 @@ export class DataTableComponentPage {
    noContentContainer: ElementFinder;
    mainMenuButton: ElementFinder;

-    rows = `adf-datatable div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`;
+    rows = `adf-datatable tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`;

    constructor(rootElement = $$('adf-datatable').first()) {
        this.rootElement = rootElement;
-        this.list = this.rootElement.$$(`div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`);
+        this.list = this.rootElement.$$(`tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`);
        this.contents = this.rootElement.$$('.adf-datatable-body span');
        this.tableBody = this.rootElement.$$(`.adf-datatable-body`).first();
        this.allColumns = this.rootElement.$$('div[data-automation-id*="auto_header_content_id"]');
        this.mainMenuButton = this.rootElement.$('[data-automation-id="adf-datatable-main-menu-button"]');
        this.selectedRowNumber = this.rootElement.$(`adf-datatable-row[class*='is-selected'] div[data-automation-id*='text_']`);
        this.allSelectedRows = this.rootElement.$$(`adf-datatable-row[class*='is-selected']`);
-        this.selectAll = this.rootElement.$(`div[class*='adf-datatable-header'] ${materialLocators.Checkbox.root}`);
+        this.selectAll = this.rootElement.$(`thead[class*='adf-datatable-header'] ${materialLocators.Checkbox.root}`);
        this.emptyList = this.rootElement.$(`adf-empty-content`);
        this.emptyListTitle = this.rootElement.$(`.adf-empty-content__title`);
        this.emptyListSubtitle = this.rootElement.$(`.adf-empty-content__subtitle`);
-        this.noContentContainer = $(`div[class*='adf-no-content-container']`);
+        this.noContentContainer = $(`td[class*='adf-no-content-container']`);
    }

    geCellElementDetail(detail: string): ElementArrayFinder {
@@ -114,19 +113,23 @@ export class DataTableComponentPage {
    }

    async checkRowIsSelected(columnName: string, columnValue: string): Promise<void> {
-        const selectedRow = this.getCellElementByValue(columnName, columnValue).element(by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`));
+        const selectedRow = this.getCellElementByValue(columnName, columnValue).element(
+            by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`)
+        );
        await BrowserVisibility.waitUntilElementIsVisible(selectedRow);
    }

    async checkRowIsNotSelected(columnName: string, columnValue: string): Promise<void> {
-        const selectedRow = this.getCellElementByValue(columnName, columnValue).element(by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`));
+        const selectedRow = this.getCellElementByValue(columnName, columnValue).element(
+            by.xpath(`ancestor::adf-datatable-row[contains(@class, 'is-selected')]`)
+        );
        await BrowserVisibility.waitUntilElementIsNotVisible(selectedRow);
    }

    async getColumnValueForRow(identifyingColumn: string, identifyingValue: string, columnName: string): Promise<string> {
        const row = this.getRow(identifyingColumn, identifyingValue);
        await BrowserVisibility.waitUntilElementIsVisible(row);
-        const rowColumn = row.$(`div[title="${columnName}"] span`);
+        const rowColumn = row.$(`td[title="${columnName}"] span`);
        return BrowserActions.getText(rowColumn);
    }

@@ -139,7 +142,7 @@ export class DataTableComponentPage {
     * @returns 'true' if the list is sorted as await expected and 'false' if it isn't
     */
    async checkListIsSorted(sortOrder: string, columnTitle: string, listType: string = 'STRING'): Promise<any> {
-        const column = $$(`div.adf-datatable-cell[title='${columnTitle}'] span`);
+        const column = $$(`td.adf-datatable-cell[title='${columnTitle}'] span`);
        await BrowserVisibility.waitUntilElementIsVisible(column.first());
        const initialList: string[] = [];

@@ -229,14 +232,14 @@ export class DataTableComponentPage {

    async getAllRowsColumnValues(column: string): Promise<string[]> {
        let columnValues: string[] = [];
-        const columnLocator = $$(`adf-datatable div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row'] div[title="${column}"] span`);
+        const columnLocator = $$(
+            `adf-datatable tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row'] *[title="${column}"] span`
+        );

        await BrowserVisibility.waitUntilElementIsPresent(columnLocator.first(), 1000);
        try {
            await BrowserVisibility.waitUntilElementIsPresent(columnLocator.first(), 1000);
-            columnValues = await columnLocator
-                .filter(async (el) => el.isPresent())
-                .map(async (el) => el.getText());
+            columnValues = await columnLocator.filter(async (el) => el.isPresent()).map(async (el) => el.getText());
        } catch (error) {
            Logger.log(error);
        }
@@ -245,7 +248,7 @@ export class DataTableComponentPage {
    }

    async getRowsWithSameColumnValues(columnName: string, columnValue: string) {
-        const columnLocator = `div[title='${columnName}'] div[data-automation-id="text_${columnValue}"] span`;
+        const columnLocator = `td[title='${columnName}'] div[data-automation-id="text_${columnValue}"] span`;
        await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.$$(columnLocator).first());
        return this.rootElement.$$(columnLocator).getText();
    }
@@ -273,7 +276,7 @@ export class DataTableComponentPage {
     * @param titleColumn column title
     */
    async sortByColumn(sortOrder: string, titleColumn: string): Promise<void> {
-        const locator = $(`div[data-automation-id="auto_id_${titleColumn}"]`);
+        const locator = $(`th[data-automation-id="auto_id_${titleColumn}"]`);
        await BrowserVisibility.waitUntilElementIsVisible(locator);
        const result = await BrowserActions.getAttribute(locator, 'class');

@@ -326,12 +329,20 @@ export class DataTableComponentPage {
    }

    getRow(columnName: string, columnValue: string): ElementFinder {
-        return this.rootElement.all(by.xpath(`//div[starts-with(@title, '${columnName}')]//div[contains(@data-automation-id, '${columnValue}')]//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`)).first();
+        return this.rootElement
+            .all(
+                by.xpath(
+                    `//td[starts-with(@title, '${columnName}')]//div[contains(@data-automation-id, '${columnValue}')]//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`
+                )
+            )
+            .first();
    }

    // @deprecated use Playwright instead
    getRowByIndex(index: number): ElementFinder {
-        return this.rootElement.element(by.xpath(`//div[contains(@class,'adf-datatable-body')]//adf-datatable-row[contains(@class,'adf-datatable-row')][${index}]`));
+        return this.rootElement.element(
+            by.xpath(`//div[contains(@class,'adf-datatable-body')]//adf-datatable-row[contains(@class,'adf-datatable-row')][${index}]`)
+        );
    }

    async contentInPosition(position: number): Promise<string> {
@@ -340,7 +351,7 @@ export class DataTableComponentPage {
    }

    getCellElementByValue(columnName: string, columnValue: string, columnPrefix = 'text_'): ElementFinder {
-        return this.rootElement.$$(`div[title="${columnName}"] div[data-automation-id="${columnPrefix}${columnValue}"] span`).first();
+        return this.rootElement.$$(`td[title="${columnName}"] div[data-automation-id="${columnPrefix}${columnValue}"] span`).first();
    }

    async tableIsLoaded(): Promise<void> {
@@ -350,23 +361,27 @@ export class DataTableComponentPage {
    async waitTillContentLoaded(): Promise<void> {
        if (await this.isSpinnerPresent()) {
            Logger.log('wait datatable loading spinner disappear');
-            await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME);
+            await BrowserVisibility.waitUntilElementIsNotVisible(
+                this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)),
+                MAX_LOADING_TIME
+            );

            if (await this.isEmpty()) {
                Logger.log('empty page');
            } else {
                await this.waitFirstElementPresent();
            }
-
        } else if (await this.isEmpty()) {
            Logger.log('empty page');
        } else {
            try {
                Logger.log('wait datatable loading spinner is present');
                await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), 2000);
-                await BrowserVisibility.waitUntilElementIsNotVisible(this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)), MAX_LOADING_TIME);
-            } catch (error) {
-            }
+                await BrowserVisibility.waitUntilElementIsNotVisible(
+                    this.rootElement.element(by.tagName(materialLocators.Progress.spinner.root)),
+                    MAX_LOADING_TIME
+                );
+            } catch (error) {}

            if (await this.isEmpty()) {
                Logger.log('empty page');
@@ -392,8 +407,7 @@ export class DataTableComponentPage {
            try {
                Logger.log('wait datatable loading spinner is present');
                await BrowserVisibility.waitUntilElementIsVisible(element(by.tagName(materialLocators.Progress.bar.root)));
-            } catch (error) {
-            }
+            } catch (error) {}
            if (await this.isEmpty()) {
                Logger.log('empty page');
            } else {
@@ -404,14 +418,10 @@ export class DataTableComponentPage {

    // @deprecated use Playwright instead
    async isColumnDisplayed(columnTitle: string): Promise<boolean> {
-        const isColumnDisplayed = (await this.allColumns).some(
-            async column => {
-                const columnText = await column.getText();
-                return columnText === columnTitle;
-            }
-        );
-
-        return isColumnDisplayed;
+        return (await this.allColumns).some(async (column) => {
+            const columnText = await column.getText();
+            return columnText === columnTitle;
+        });
    }

    // @deprecated use Playwright instead
@@ -424,11 +434,11 @@ export class DataTableComponentPage {
    }

    getCellByRowNumberAndColumnName(rowNumber: number, columnName: string): ElementFinder {
-        return this.list.get(rowNumber).$$(`div[title="${columnName}"] span`).first();
+        return this.list.get(rowNumber).$$(`td[title="${columnName}"] span`).first();
    }

    getCellByRowContentAndColumn(rowColumn: string, rowContent: string, columnName: string): ElementFinder {
-        return this.getRow(rowColumn, rowContent).$(`div[title='${columnName}']`);
+        return this.getRow(rowColumn, rowContent).$(`td[title='${columnName}']`);
    }

    async selectRowByContent(content: string): Promise<void> {
@@ -447,42 +457,52 @@ export class DataTableComponentPage {
    }

    getCellByContent(content: string): ElementFinder {
-        return this.rootElement.all(by.cssContainingText(`adf-datatable-row[class*='adf-datatable-row'] div[class*='adf-datatable-cell']`, content)).first();
+        return this.rootElement
+            .all(by.cssContainingText(`adf-datatable-row[class*='adf-datatable-row'] td[class*='adf-datatable-cell']`, content))
+            .first();
    }

    async checkCellByHighlightContent(content: string): Promise<void> {
-        const cell = this.rootElement.element(by.cssContainingText(`adf-datatable-row[class*='adf-datatable-row'] div[class*='adf-name-location-cell-name'] span.adf-highlight`, content));
+        const cell = this.rootElement.element(
+            by.cssContainingText(
+                `adf-datatable-row[class*='adf-datatable-row'] div[class*='adf-name-location-cell-name'] span.adf-highlight`,
+                content
+            )
+        );
        await BrowserVisibility.waitUntilElementIsVisible(cell);
    }

    async clickRowByContent(name: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first();
+        const resultElement = this.rootElement.$$(`td[data-automation-id='${name}']`).first();
        await BrowserActions.click(resultElement);
    }

    async clickRowByContentCheckbox(name: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first().element(by.xpath(`ancestor::adf-datatable-row/label/${materialLocators.Checkbox.root}`));
+        const resultElement = this.rootElement
+            .$$(`div[data-automation-id='${name}']`)
+            .first()
+            .element(by.xpath(`ancestor::adf-datatable-row/label/${materialLocators.Checkbox.root}`));
        browser.actions().mouseMove(resultElement);
        await BrowserActions.click(resultElement);
    }

    async checkRowContentIsDisplayed(content: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${content}']`).first();
+        const resultElement = this.rootElement.$$(`td[data-automation-id='${content}']`).first();
        await BrowserVisibility.waitUntilElementIsVisible(resultElement);
    }

    async checkRowContentIsNotDisplayed(content: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${content}']`).first();
+        const resultElement = this.rootElement.$$(`tr[data-automation-id='${content}']`).first();
        await BrowserVisibility.waitUntilElementIsNotVisible(resultElement);
    }

    async checkRowContentIsDisabled(content: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${content}'] div.adf-cell-value img[aria-label='Disabled']`).first();
+        const resultElement = this.rootElement.$$(`tr[data-automation-id='${content}'] div.adf-cell-value img[aria-label='Disabled']`).first();
        await BrowserVisibility.waitUntilElementIsVisible(resultElement);
    }

    async doubleClickRowByContent(name: string): Promise<void> {
-        const resultElement = this.rootElement.$$(`div[data-automation-id='${name}']`).first();
+        const resultElement = this.rootElement.$$(`td[data-automation-id='${name}']`).first();
        await BrowserActions.click(resultElement);
        await browser.actions().sendKeys(protractor.Key.ENTER).perform();
    }
--- a/lib/testing/src/lib/protractor/core/pages/data-table/column.ts
+++ b/lib/testing/src/lib/protractor/core/pages/data-table/column.ts
@@ -19,7 +19,7 @@ export abstract class Column {
    columnName: string;
    columnType: string;

-    constructor(columnName: string, columnType: string ) {
+    constructor(columnName: string, columnType: string) {
        this.columnName = columnName;
        this.columnType = columnType;
    }
--- a/lib/testing/src/lib/protractor/core/pages/data-table/data-table-item.ts
+++ b/lib/testing/src/lib/protractor/core/pages/data-table/data-table-item.ts
@@ -23,7 +23,7 @@ import { BrowserVisibility } from '../../utils/browser-visibility';
 export class DataTableItem {
    columns = new Array<Column>();
    rootElement: ElementFinder;
-    rows = `div[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`;
+    rows = `tbody[class*='adf-datatable-body'] adf-datatable-row[class*='adf-datatable-row']`;

    constructor(rootElement = $$('adf-datatable').first()) {
        this.rootElement = rootElement;
@@ -34,14 +34,16 @@ export class DataTableItem {
    }

    async getColumn(columnName: string): Promise<Column> {
-        return this.columns.find(
-            (column) =>  column.getColumnName() === columnName
-        );
+        return this.columns.find((column) => column.getColumnName() === columnName);
    }

    async getRow(columnName: string, columnValue: string): Promise<ElementFinder> {
+        console.log('getRow', '-------------------------------------------------------');
        const column = await this.getColumn(columnName);
-        const locator = `//div[@title="${column.columnName}"]` + column.createLocator(columnValue) + `//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`;
+        const locator =
+            `//td[@title="${column.columnName}"]` +
+            column.createLocator(columnValue) +
+            `//ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]`;
        return this.rootElement.element(by.xpath(locator));
    }

@@ -71,19 +73,26 @@ export class DataTableItem {
    async getColumnValueForRow(identifyingColumnName: string, identifyingColumnValue: string, columnName: string): Promise<string> {
        const row = await this.getRow(identifyingColumnName, identifyingColumnValue);
        await BrowserVisibility.waitUntilElementIsVisible(row);
-        const rowColumn = row.$(`div[title="${columnName}"] span`);
+        const rowColumn = row.$(`td[title="${columnName}"] span`);
        return BrowserActions.getText(rowColumn);
    }

    async checkRowIsSelected(columnName: string, columnValue: string): Promise<void> {
+        console.log('checkRowIsSelected', '-------------------------------------------------------');
        const column = await this.getColumn(columnName);
-        const locator = `//div[@title="${column.columnName}"]` + column.createLocator(columnValue) + `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`;
+        const locator =
+            `//td[@title="${column.columnName}"]` +
+            column.createLocator(columnValue) +
+            `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`;
        await BrowserVisibility.waitUntilElementIsVisible(element(by.xpath(locator)));
    }

    async checkRowIsNotSelected(columnName: string, columnValue: string): Promise<void> {
        const column = await this.getColumn(columnName);
-        const locator = `//div[@title="${column.columnName}"]` + column.createLocator(columnValue) + `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`;
+        const locator =
+            `//div[@title="${column.columnName}"]` +
+            column.createLocator(columnValue) +
+            `//ancestor::adf-datatable-row[contains(@class, 'is-selected')]`;
        await BrowserVisibility.waitUntilElementIsNotVisible(element(by.xpath(locator)));
    }

--- a/lib/testing/src/lib/protractor/core/pages/viewer.page.ts
+++ b/lib/testing/src/lib/protractor/core/pages/viewer.page.ts
@@ -58,7 +58,7 @@ export class ViewerPage {
    unknownFormat = $(`adf-viewer-unknown-format .adf-viewer__unknown-format-view`);

    async viewFile(fileName: string): Promise<void> {
-        const fileView = $$(`#document-list-container div[data-automation-id="${fileName}"]`).first();
+        const fileView = $$(`#document-list-container td[data-automation-id="${fileName}"]`).first();
        await BrowserActions.click(fileView);
        await browser.actions().sendKeys(protractor.Key.ENTER).perform();
        await this.waitTillContentLoaded();
@@ -245,7 +245,7 @@ export class ViewerPage {
    }

    async clickInfoButton(): Promise<void> {
-        await BrowserActions.click($('button[data-automation-id="adf-toolbar-sidebar"]'));
+        await BrowserActions.click(this.infoButton);
    }

    async clickOnTab(tabName: string): Promise<void> {