[ADF-2990] Datatable - row navigation (#5198)

* datatable row component

* add to module

* implement datatable row component

* use FocusKeyManager for arrows navigation

* tests

* prevent screen reader to announce undefined value

* prevent from bubbling up

* fix unit test

* fix row locator

* fix locator reference

* fix row reference locators

* fix locator xpath
This commit is contained in:
Cilibiu Bogdan
2019-10-30 07:39:43 +00:00
committed by Denys Vuika
parent a150e74366
commit af6bd0892c
17 changed files with 320 additions and 45 deletions
+5 -5
View File
@@ -36,8 +36,8 @@ export class DataTablePage {
dataTable: DataTableComponentPage;
multiSelect: ElementFinder = element(by.css(`div[data-automation-id='multiselect'] label > div[class='mat-checkbox-inner-container']`));
reset: ElementFinder = element(by.xpath(`//span[contains(text(),'Reset to default')]/..`));
allSelectedRows: ElementArrayFinder = element.all(by.css(`div[class*='is-selected']`));
selectedRowNumber: ElementFinder = element(by.css(`div[class*='is-selected'] div[data-automation-id*='text_']`));
allSelectedRows: ElementArrayFinder = element.all(by.css(`adf-datatable-row[class*='is-selected']`));
selectedRowNumber: ElementFinder = element(by.css(`adf-datatable-row[class*='is-selected'] div[data-automation-id*='text_']`));
selectAll: ElementFinder = element(by.css(`div[class*='header'] label`));
addRowElement: ElementFinder = element(by.xpath(`//span[contains(text(),'Add row')]/..`));
replaceRowsElement: ElementFinder = element(by.xpath(`//span[contains(text(),'Replace rows')]/..`));
@@ -85,7 +85,7 @@ export class DataTablePage {
async checkRowIsNotSelected(rowNumber: string): Promise<void> {
const isRowSelected = this.dataTable.getCellElementByValue(this.columns.id, rowNumber)
.element(by.xpath(`ancestor::div[contains(@class, 'adf-datatable-row custom-row-style ng-star-inserted is-selected')]`));
.element(by.xpath(`ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row custom-row-style ng-star-inserted is-selected')]`));
await BrowserVisibility.waitUntilElementIsNotVisible(isRowSelected);
}
@@ -112,7 +112,7 @@ export class DataTablePage {
async clickCheckbox(rowNumber: string): Promise<void> {
await BrowserActions.closeMenuAndDialogs();
const checkbox = this.dataTable.getCellElementByValue(this.columns.id, rowNumber)
.element(by.xpath(`ancestor::div[contains(@class, 'adf-datatable-row')]//mat-checkbox/label`));
.element(by.xpath(`ancestor::adf-datatable-row[contains(@class, 'adf-datatable-row')]//mat-checkbox/label`));
await BrowserActions.click(checkbox);
}
@@ -134,7 +134,7 @@ export class DataTablePage {
}
getRowCheckbox(rowNumber: string): ElementFinder {
return this.dataTable.getCellElementByValue(this.columns.id, rowNumber).element(by.xpath(`ancestor::div/div/mat-checkbox[contains(@class, 'mat-checkbox-checked')]`));
return this.dataTable.getCellElementByValue(this.columns.id, rowNumber).element(by.xpath(`ancestor::adf-datatable-row/div/mat-checkbox[contains(@class, 'mat-checkbox-checked')]`));
}
async getCopyContentTooltip(): Promise<string> {
@@ -32,9 +32,9 @@ export class ProcessFiltersPage {
accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
buttonWindow: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"] > div'));
noContentMessage: ElementFinder = element.all(by.css('div[class="adf-empty-content__title"]')).first();
rows: Locator = by.css('adf-process-instance-list div[class="adf-datatable-body"] div[class*="adf-datatable-row"]');
rows: Locator = by.css('adf-process-instance-list div[class="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"]');
tableBody: ElementFinder = element.all(by.css('adf-datatable div[class="adf-datatable-body"]')).first();
nameColumn: Locator = by.css('div[class*="adf-datatable-body"] div[class*="adf-datatable-row"] div[title="Name"] span');
nameColumn: Locator = by.css('div[class*="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"] div[title="Name"] span');
processIcon: Locator = by.xpath('ancestor::div[@class="mat-list-item-content"]/mat-icon');
async startProcess(): Promise<StartProcessPage> {
@@ -263,7 +263,7 @@ export class TaskDetailsPage {
}
async removeInvolvedUser(user): Promise<void> {
const row = this.getRowsUser(user).element(by.xpath('ancestor::div[contains(@class, "adf-datatable-row")]'));
const row = this.getRowsUser(user).element(by.xpath('ancestor::adf-datatable-row[contains(@class, "adf-datatable-row")]'));
await BrowserActions.click(row.element(by.css('button[data-automation-id="action_menu_0"]')));
await BrowserVisibility.waitUntilElementIsVisible(this.removeInvolvedPeople);
await BrowserActions.click(this.removeInvolvedPeople);
+1 -1
View File
@@ -32,7 +32,7 @@ export class TasksPage {
rowByRowName = by.xpath('ancestor::mat-chip');
checklistContainer = by.css('div[class*="checklist-menu"]');
taskTitle = 'h2[class="adf-activiti-task-details__header"] span';
rows = by.css('div[class*="adf-datatable-body"] div[class*="adf-datatable-row"] div[class*="adf-datatable-cell"]');
rows = by.css('div[class*="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"] div[class*="adf-datatable-cell"]');
completeButtonNoForm: ElementFinder = element(by.id('adf-no-form-complete-button'));
checklistDialog: ElementFinder = element(by.id('checklist-dialog'));
checklistNoMessage: ElementFinder = element(by.id('checklist-none-message'));
+1 -1
View File
@@ -22,7 +22,7 @@ import { element, by, ElementFinder, Locator } from 'protractor';
export class TrashcanPage {
contentList: DocumentListPage = new DocumentListPage(element(by.css('adf-document-list')));
rows: Locator = by.css('adf-document-list div[class*="adf-datatable-body"] div[class*="adf-datatable-row"]');
rows: Locator = by.css('adf-document-list div[class*="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"]');
tableBody: ElementFinder = element.all(by.css('adf-document-list div[class="adf-datatable-body"]')).first();
pagination: ElementFinder = element(by.css('adf-pagination'));
emptyTrashcan: ElementFinder = element(by.css('adf-empty-content'));