[AAE-5834] Additions to EditProcessFilterCloudComponentPage to facili… (

#7256)

* [AAE-5834] Additions to EditProcessFilterCloudComponentPage to facilitate e2es

* [AAE-5834] Add control over started date and completed date dropdown filters

* [AAE-5834] Declarations on separate lines

* [AAE-5834] Add semi colons

* [AAE-5834] Removed Promise<void> implicit type declaration

* Fix lint

lib/process-services-cloud/src/lib/common/date-range-filter/date-range-filter.component.html

@@ -18,7 +18,10 @@
           <input matStartDate formControlName="from" placeholder="{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.START_DATE' | translate }}">
           <input matEndDate formControlName="to" placeholder="{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.END_DATE' | translate }}">
         </mat-date-range-input>
-        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+        <mat-datepicker-toggle
+            matSuffix
+            [for]="picker"
+            [attr.data-automation-id]="'adf-cloud-edit-process-property-date-range-' + processFilterProperty.key"></mat-datepicker-toggle>
         <mat-date-range-picker #picker (closed)="onDateRangeClosed()"></mat-date-range-picker>
     </mat-form-field>
 </ng-container>

lib/testing/src/lib/protractor/core/pages/material/date-picker-calendar.page.ts

@@ -26,6 +26,7 @@ export class DatePickerCalendarPage {
     nextMonthButton = element(by.css('button[class*="mat-calendar-next-button"]'));
     previousMonthButton = element(by.css('button[class*="mat-calendar-previous-button"]'));
     todayDate = element(by.css('.mat-calendar-body-today'));
+    periodButton = element(by.css('button[class*=mat-calendar-period-button]'));
 
     async getSelectedDate(): Promise<string> {
         return BrowserActions.getAttribute(element(by.css('td[class*="mat-calendar-body-active"]')), 'aria-label');
@@ -80,4 +81,32 @@ export class DatePickerCalendarPage {
         await BrowserActions.click(endDayElement);
         await this.checkDatePickerIsNotDisplayed();
     }
+
+    private async setDateUsingPeriodButton(date: Date) {
+        const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
+        const year = date.getFullYear();
+        const month = months[date.getMonth()];
+        const day = date.getDate();
+        const yearElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${year}`));
+        const monthElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${month}`));
+        const dayElement = element(by.cssContainingText(`div.mat-calendar-body-cell-content.mat-focus-indicator`, `${day}`));
+
+        await BrowserActions.click(this.periodButton);
+        await BrowserActions.click(yearElement);
+        await BrowserActions.click(monthElement);
+        await BrowserActions.click(dayElement);
+    }
+
+    async selectExactDate(date: Date): Promise<void> {
+        await this.checkDatePickerIsDisplayed();
+        await this.setDateUsingPeriodButton(date);
+        await this.checkDatePickerIsNotDisplayed();
+    }
+
+    async selectExactDateRange(start: Date, end: Date): Promise<void> {
+        await this.checkDatePickerIsDisplayed();
+        await this.setDateUsingPeriodButton(start);
+        await this.setDateUsingPeriodButton(end);
+        await this.checkDatePickerIsNotDisplayed();
+    }
 }

lib/testing/src/lib/protractor/core/pages/material/date-picker.page.ts

@@ -15,17 +15,31 @@
  * limitations under the License.
  */
 
-import { element, by } from 'protractor';
+import { element, by, ElementFinder } from 'protractor';
 import { BrowserActions } from '../../utils/browser-actions';
 import { DatePickerCalendarPage } from './date-picker-calendar.page';
 
 export class DatePickerPage {
 
-    datePicker = element.all(by.css('.mat-datepicker-toggle')).first();
+    datePicker: ElementFinder;
     dateTime = new DatePickerCalendarPage();
 
-    async setTodayDateValue(): Promise<void> {
+    constructor(datePickerElement?: ElementFinder) {
+        const locator = by.css('.mat-datepicker-toggle');
+        this.datePicker = datePickerElement ? datePickerElement : element(locator);
+    }
+
+    async clickDatePicker() {
         await BrowserActions.click(this.datePicker);
+    }
+
+    async setTodayDateValue(): Promise<void> {
+        await this.clickDatePicker();
         await this.dateTime.selectTodayDate();
     }
+
+    async setDateRange(start: Date, end: Date): Promise<void> {
+        await this.clickDatePicker();
+        await this.dateTime.selectExactDateRange(start, end);
+    }
 }

lib/testing/src/lib/protractor/process-services-cloud/pages/edit-process-filter-cloud-component.page.ts

@@ -20,6 +20,7 @@ import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { DropdownPage } from '../../core/pages/material/dropdown.page';
 import { PeopleCloudComponentPage } from './people-cloud-component.page';
+import { DatePickerPage } from '../../core/pages/material/date-picker.page';
 
 export interface FilterProps {
     name?: string;
@@ -28,6 +29,7 @@ export interface FilterProps {
     order?: string;
     initiator?: string;
     processName?: string;
+    suspendedDateRange?: string;
 }
 
 export class EditProcessFilterCloudComponentPage {
@@ -44,6 +46,12 @@ export class EditProcessFilterCloudComponentPage {
     private locatorSortDropdown = element(by.css(`mat-select[data-automation-id='adf-cloud-edit-process-property-sort']`));
     private locatorOrderDropdown = element(by.css(`mat-select[data-automation-id='adf-cloud-edit-process-property-order']`));
     private locatorProcessDefinitionNameDropdown = element(by.css(`mat-select[data-automation-id='adf-cloud-edit-process-property-processDefinitionName']`));
+    private locatorSuspendedDateRangeDropdown = element(by.css(`mat-select[data-automation-id='adf-cloud-edit-process-property-suspendedDateRange']`));
+    private locatorStartedDateRangeDropdown = element(by.css(`mat-select[data-automation-id='adf-cloud-edit-process-property-startedDateRange']`));
+    private locatorCompletedDateRangeDropdown = element(by.css(`mat-select[data-automation-id='adf-cloud-edit-process-property-completedDateRange']`));
+
+    private locatorSuspendedDateRangeWithin = element(by.css(`mat-datepicker-toggle[data-automation-id='adf-cloud-edit-process-property-date-range-suspendedDateRange']`));
+
     private expansionPanelExtended = this.rootElement.element(by.css('mat-expansion-panel-header.mat-expanded'));
     private content = this.rootElement.element(by.css('div.mat-expansion-panel-content[style*="visible"]'));
 
@@ -52,6 +60,12 @@ export class EditProcessFilterCloudComponentPage {
     sortDropdown = new DropdownPage(this.locatorSortDropdown);
     orderDropdown = new DropdownPage(this.locatorOrderDropdown);
     processDefinitionNameDropdown = new DropdownPage(this.locatorProcessDefinitionNameDropdown);
+    suspendedDateRangeDropdown = new DropdownPage(this.locatorSuspendedDateRangeDropdown);
+    startedDateRangeDropdown = new DropdownPage(this.locatorStartedDateRangeDropdown);
+    completedDateRangeDropdown = new DropdownPage(this.locatorCompletedDateRangeDropdown);
+
+    suspendedDateRangeWithin = new DatePickerPage(this.locatorSuspendedDateRangeWithin);
+
     peopleCloudComponent = new PeopleCloudComponentPage();
 
     editProcessFilterDialogPage = new EditProcessFilterDialogPage();
@@ -64,36 +78,36 @@ export class EditProcessFilterCloudComponentPage {
         return BrowserVisibility.waitUntilElementIsVisible(this.filter);
     }
 
-    async openFilter(): Promise<void> {
+    async openFilter() {
         await this.isFilterDisplayed();
         await BrowserActions.click(this.customiseFilter);
         await this.checkHeaderIsExpanded();
     }
 
-    async checkHeaderIsExpanded(): Promise<void> {
+    async checkHeaderIsExpanded() {
         await BrowserVisibility.waitUntilElementIsVisible(this.expansionPanelExtended);
         await BrowserVisibility.waitUntilElementIsVisible(this.content);
     }
 
-    async closeFilter(): Promise<void> {
+    async closeFilter() {
         await BrowserActions.click(this.customiseFilter);
         await this.checkHeaderIsCollapsed();
     }
 
-    async checkHeaderIsCollapsed(): Promise<void> {
+    async checkHeaderIsCollapsed() {
         await BrowserVisibility.waitUntilElementIsNotVisible(this.expansionPanelExtended, 1000);
         await BrowserVisibility.waitUntilElementIsNotVisible(this.content, 1000);
     }
 
-    setStatusFilterDropDown(option: string): Promise<void> {
-        return this.statusDropdown.selectDropdownOption(option);
+    async setStatusFilterDropDown(option: string) {
+        await this.statusDropdown.selectDropdownOption(option);
     }
 
     getStateFilterDropDownValue(): Promise<string> {
         return BrowserActions.getText(element(by.css("mat-form-field[data-automation-id='status'] span")));
     }
 
-    async setSortFilterDropDown(option): Promise<void> {
+    async setSortFilterDropDown(option) {
         await this.sortDropdown.selectDropdownOption(option);
     }
 
@@ -102,7 +116,7 @@ export class EditProcessFilterCloudComponentPage {
         return BrowserActions.getText(sortLocator);
     }
 
-    async setOrderFilterDropDown(option): Promise<void> {
+    async setOrderFilterDropDown(option) {
         await this.orderDropdown.selectDropdownOption(option);
         await browser.sleep(1500);
     }
@@ -111,12 +125,29 @@ export class EditProcessFilterCloudComponentPage {
         return BrowserActions.getText(element(by.css("mat-form-field[data-automation-id='order'] span")));
     }
 
-    setAppNameDropDown(option: string): Promise<void> {
-        return this.appNameDropdown.selectDropdownOption(option);
+    async setAppNameDropDown(option: string) {
+        await this.appNameDropdown.selectDropdownOption(option);
+    }
+
+    async setProcessDefinitionNameDropDown(option: string) {
+        await this.processDefinitionNameDropdown.selectDropdownOption(option);
+    }
+
+    async setSuspendedDateRangeDropDown(option: string) {
+        await this.suspendedDateRangeDropdown.selectDropdownOption(option);
     }
 
-    setProcessDefinitionNameDropDown(option: string): Promise<void> {
-        return this.processDefinitionNameDropdown.selectDropdownOption(option);
+    async setStartedDateRangeDropDown(option: string) {
+        await this.startedDateRangeDropdown.selectDropdownOption(option);
+    }
+
+    async setCompletedDateRangeDropDown(option: string) {
+        await this.completedDateRangeDropdown.selectDropdownOption(option);
+    }
+
+    async setSuspendedDateRangeWithin(start: Date, end: Date) {
+        await this.setSuspendedDateRangeDropDown('Date within');
+        await this.suspendedDateRangeWithin.setDateRange(start, end);
     }
 
     async getApplicationSelected(): Promise<string> {
@@ -144,20 +175,20 @@ export class EditProcessFilterCloudComponentPage {
         return BrowserVisibility.waitUntilElementIsNotVisible(emptyList);
     }
 
-    setProcessInstanceId(option: string): Promise<void> {
-        return this.setProperty('processInstanceId', option);
+    async setProcessInstanceId(option: string) {
+        await this.setProperty('processInstanceId', option);
     }
 
-    setProcessDefinitionKey(option: string): Promise<void> {
-        return this.setProperty('processDefinitionKey', option);
+    async setProcessDefinitionKey(option: string) {
+        await this.setProperty('processDefinitionKey', option);
     }
 
-    setProcessName(option: string): Promise<void> {
-        return this.setProperty('processName', option);
+    async setProcessName(option: string) {
+        await this.setProperty('processName', option);
     }
 
-    setInitiator(value: string): Promise<void> {
-        return this.peopleCloudComponent.searchAssigneeAndSelect(value);
+    async setInitiator(value: string) {
+        await this.peopleCloudComponent.searchAssigneeAndSelect(value);
     }
 
     getProcessInstanceId(): Promise<string> {
@@ -169,26 +200,26 @@ export class EditProcessFilterCloudComponentPage {
         return BrowserActions.getInputValue(locator);
     }
 
-    async setProperty(property: string, option: string): Promise<void> {
+    async setProperty(property: string, option: string) {
         const locator = element.all(by.css('input[data-automation-id="adf-cloud-edit-process-property-' + property + '"]')).first();
         await BrowserVisibility.waitUntilElementIsVisible(locator);
         await BrowserActions.clearSendKeys(locator, option);
     }
 
-    checkSaveButtonIsDisplayed(): Promise<void> {
-        return BrowserVisibility.waitUntilElementIsVisible(this.saveButton);
+    async checkSaveButtonIsDisplayed() {
+        await BrowserVisibility.waitUntilElementIsVisible(this.saveButton);
     }
 
-    checkSaveAsButtonIsDisplayed(): Promise<void> {
-        return BrowserVisibility.waitUntilElementIsVisible(this.saveAsButton);
+    async checkSaveAsButtonIsDisplayed() {
+        await BrowserVisibility.waitUntilElementIsVisible(this.saveAsButton);
     }
 
-    checkDeleteButtonIsDisplayed(): Promise<void> {
-        return BrowserVisibility.waitUntilElementIsVisible(this.deleteButton);
+    async checkDeleteButtonIsDisplayed() {
+        await BrowserVisibility.waitUntilElementIsVisible(this.deleteButton);
     }
 
-    checkDeleteButtonIsNotDisplayed(): Promise<void> {
-        return BrowserVisibility.waitUntilElementIsNotVisible(this.deleteButton);
+    async checkDeleteButtonIsNotDisplayed() {
+        await BrowserVisibility.waitUntilElementIsNotVisible(this.deleteButton);
     }
 
     async checkSaveButtonIsEnabled(): Promise<boolean> {
@@ -206,35 +237,36 @@ export class EditProcessFilterCloudComponentPage {
         return this.deleteButton.isEnabled();
     }
 
-    async saveAs(name: string): Promise<void> {
+    async saveAs(name: string) {
         await this.clickSaveAsButton();
         await this.editProcessFilterDialog().setFilterName(name);
         await this.editProcessFilterDialog().clickOnSaveButton();
 
         await browser.driver.sleep(1000);
     }
 
-    async clickSaveAsButton(): Promise<void> {
+    async clickSaveAsButton() {
         await BrowserActions.click(this.saveAsButton);
         await browser.driver.sleep(1000);
     }
 
-    clickDeleteButton(): Promise<void> {
-        return BrowserActions.click(this.deleteButton);
+    async clickDeleteButton() {
+        await BrowserActions.click(this.deleteButton);
     }
 
-    clickSaveButton(): Promise<void> {
-        return BrowserActions.click(this.saveButton);
+    async clickSaveButton() {
+        await BrowserActions.click(this.saveButton);
     }
 
-    async setFilter(props: FilterProps): Promise<void> {
+    async setFilter(props: FilterProps) {
         await this.openFilter();
         if (props.name) { await this.setProcessName(props.name); }
         if (props.status) { await this.setStatusFilterDropDown(props.status); }
         if (props.sort) { await this.setSortFilterDropDown(props.sort);     }
         if (props.order) { await this.setOrderFilterDropDown(props.order);   }
         if (props.initiator) { await this.setInitiator(props.initiator);   }
         if (props.processName) { await this.setProcessName(props.processName);   }
+        if (props.suspendedDateRange) { await this.setSuspendedDateRangeDropDown(props.suspendedDateRange); }
         await this.closeFilter();
     }
 }