[AAE-6742] Create E2Es for dropdown search capability (#7425)

* AAE-6742 Create E2Es for dropdown search capability

* Change protractor elementFinder to TestElement class in dropdown-widget.page.ts

e2e/process-services-cloud/form-field/dropdown-widget.e2e.ts

@@ -49,33 +49,30 @@ describe('Form Field Component - Dropdown Widget', () => {
 
     const dropdown = widget.dropdown();
 
-    let runningProcessInstance, runningProcessInstanceMultiselect, testUser, groupInfo, tasklist, tasklistMulti, taskMulti, task;
+    let testUser: { idIdentityService: string, username: string, password: string };
+    const runningTasks = {};
     const simpleApp = browser.params.resources.ACTIVITI_CLOUD_APPS.SIMPLE_APP.name;
 
     beforeAll(async () => {
         const { processes } = browser.params.resources.ACTIVITI_CLOUD_APPS.SIMPLE_APP;
+        let runningProcessInstance: Record<string, any>;
         await apiService.loginWithProfile('identityAdmin');
 
-        testUser = await identityService.createIdentityUserWithRole( [identityService.ROLES.ACTIVITI_USER]);
+        testUser = await identityService.createIdentityUserWithRole([identityService.ROLES.ACTIVITI_USER]);
-
+        const groupInfo = await groupIdentityService.getGroupInfoByGroupName('hr');
-        groupInfo = await groupIdentityService.getGroupInfoByGroupName('hr');
         await identityService.addUserToGroup(testUser.idIdentityService, groupInfo.id);
         await apiService.login(testUser.username, testUser.password);
 
-        const processDefinition = await processDefinitionService.getProcessDefinitionByName(processes.dropdownOptionsProcess, simpleApp);
+        const processesData = ['dropdownOptionsProcess', 'multiselect-dropdown', 'dropdown-search'];
-        const processDefinitionMultiselect = await processDefinitionService.getProcessDefinitionByName(processes['multiselect-dropdown'], simpleApp);
 
-        await processInstancesService.createProcessInstance(processDefinition.entry.key, simpleApp);
+        for (const process of processesData) {
-        await processInstancesService.createProcessInstance(processDefinitionMultiselect.entry.key, simpleApp);
+            const processDef = await processDefinitionService.getProcessDefinitionByName(processes[process], simpleApp);
-        runningProcessInstance = await processInstancesService.createProcessInstance(processDefinition.entry.key, simpleApp);
+            await processInstancesService.createProcessInstance(processDef.entry.key, simpleApp);
-        runningProcessInstanceMultiselect = await processInstancesService.createProcessInstance(processDefinitionMultiselect.entry.key, simpleApp);
+            runningProcessInstance = await processInstancesService.createProcessInstance(processDef.entry.key, simpleApp);
-
+            const tasklist = await queryService.getProcessInstanceTasks(runningProcessInstance.entry.id, simpleApp);
-        tasklist = await queryService.getProcessInstanceTasks(runningProcessInstance.entry.id, simpleApp);
+            await tasksService.claimTask(tasklist.list.entries[0].entry.id, simpleApp);
-        task = await tasklist.list.entries[0];
+            runningTasks[process] = tasklist.list.entries[0].entry;
-        tasklistMulti = await queryService.getProcessInstanceTasks(runningProcessInstanceMultiselect.entry.id, simpleApp);
+        }
-        taskMulti = await tasklistMulti.list.entries[0];
-        await tasksService.claimTask(task.entry.id, simpleApp);
-        await tasksService.claimTask(taskMulti.entry.id, simpleApp);
 
         await loginSSOPage.login(testUser.username, testUser.password);
     });
@@ -91,18 +88,20 @@ describe('Form Field Component - Dropdown Widget', () => {
         await appListCloudComponent.goToApp(simpleApp);
     });
 
-    it('Should be able to finish task with mulitselect dropdown form field', async () => {
+    it('[C601606] Should be able to finish task with multiselect dropdown form field', async () => {
         const optionsToSelect = ['First', 'Third'];
+        const { name: multiselectTaskName } = runningTasks['multiselect-dropdown'];
+
         await taskFilter.clickTaskFilter('my-tasks');
         await taskList.getDataTable().waitTillContentLoaded();
 
-        await taskList.checkContentIsDisplayedByName(taskMulti.entry.name);
+        await taskList.checkContentIsDisplayedByName(multiselectTaskName);
-        await taskList.selectRow(taskMulti.entry.name);
+        await taskList.selectRow(multiselectTaskName);
 
         await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();
         await dropdown.openDropdown('#DropdownMultiselect');
         await dropdown.selectMultipleOptions(optionsToSelect);
-        await dropdown.closeDropdown();
+        await dropdown.closeDropdownFor('DropdownMultiselect');
 
         const optionsSelected = [await dropdown.getSelectedOptionText('DropdownMultiselect')];
 
@@ -111,8 +110,8 @@ describe('Form Field Component - Dropdown Widget', () => {
         await taskFilter.clickTaskFilter('completed-tasks');
         await taskList.getDataTable().waitTillContentLoaded();
 
-        await taskList.checkContentIsDisplayedByName(taskMulti.entry.name);
+        await taskList.checkContentIsDisplayedByName(multiselectTaskName);
-        await taskList.selectRow(taskMulti.entry.name);
+        await taskList.selectRow(multiselectTaskName);
 
         await taskFormCloudComponent.formFields().checkFormIsDisplayed();
         await taskFormCloudComponent.formFields().checkWidgetIsVisible('DropdownMultiselect');
@@ -123,11 +122,12 @@ describe('Form Field Component - Dropdown Widget', () => {
     });
 
     it('[C309878] Should be able to select a dropdown option, save and complete the task form', async () => {
+        const { name: dropdownOptionTaskName } = runningTasks['dropdownOptionsProcess'];
         await taskFilter.clickTaskFilter('my-tasks');
         await taskList.getDataTable().waitTillContentLoaded();
 
-        await taskList.checkContentIsDisplayedByName(task.entry.name);
+        await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
-        await taskList.selectRow(task.entry.name);
+        await taskList.selectRow(dropdownOptionTaskName);
 
         await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();
 
@@ -147,14 +147,14 @@ describe('Form Field Component - Dropdown Widget', () => {
 
         await expect(await taskFilter.getActiveFilterName()).toBe('My Tasks');
 
-        await taskList.checkContentIsNotDisplayedByName(task.entry.name);
+        await taskList.checkContentIsNotDisplayedByName(dropdownOptionTaskName);
         await notificationHistoryPage.checkNotifyContains('Task has been saved successfully');
 
         await taskFilter.clickTaskFilter('completed-tasks');
         await taskList.getDataTable().waitTillContentLoaded();
 
-        await taskList.checkContentIsDisplayedByName(task.entry.name);
+        await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
-        await taskList.selectRow(task.entry.name);
+        await taskList.selectRow(dropdownOptionTaskName);
 
         await taskFormCloudComponent.formFields().checkFormIsDisplayed();
         await taskFormCloudComponent.formFields().checkWidgetIsVisible('DropdownOptions');
@@ -163,4 +163,68 @@ describe('Form Field Component - Dropdown Widget', () => {
 
         await taskFormCloudComponent.checkCompleteButtonIsNotDisplayed();
     });
+
+    it('[C601606] Should be able to search and select multiple options from multiple choice dropdown', async () => {
+        const { name: dropdownOptionTaskName } = runningTasks['dropdown-search'];
+        const expectedOptions = ['Albania', 'Colombia', 'Italy', 'Poland', 'United Kingdom of Great Britain and Northern Ireland'];
+        const dropdownId = 'DropdownCountriesMultiple';
+
+        await taskFilter.clickTaskFilter('my-tasks');
+        await taskList.getDataTable().waitTillContentLoaded();
+
+        await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
+        await taskList.selectRow(dropdownOptionTaskName);
+
+        await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();
+
+        await taskFormCloudComponent.formFields().checkFormIsDisplayed();
+        await dropdown.openDropdown(`#${dropdownId}`);
+        await dropdown.searchAndChooseOptionsFromList(...expectedOptions);
+        await dropdown.closeDropdownFor(dropdownId);
+
+        const actualSelectedOptions = await dropdown.getSelectedOptionText(dropdownId);
+        await expect(actualSelectedOptions).toEqual(expectedOptions.join(', '));
+    });
+
+    it('[C601606] Should be able to search and select single options from the single choice dropdown', async () => {
+        const { name: dropdownOptionTaskName } = runningTasks['dropdown-search'];
+        const firstOption = 'Mauritius';
+        const expectedOption = 'Namibia';
+        const dropdownId = 'DropdownCountriesSingle';
+
+        await taskFilter.clickTaskFilter('my-tasks');
+        await taskList.getDataTable().waitTillContentLoaded();
+
+        await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
+        await taskList.selectRow(dropdownOptionTaskName);
+
+        await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();
+
+        await taskFormCloudComponent.formFields().checkFormIsDisplayed();
+        await dropdown.openDropdown(`#${dropdownId}`);
+        await dropdown.searchAndChooseOptionFromList(firstOption);
+        await dropdown.openDropdown(`#${dropdownId}`);
+        await dropdown.searchAndChooseOptionFromList(expectedOption);
+
+        const actualSelectedOptions = await dropdown.getSelectedOptionText(dropdownId);
+        await expect(actualSelectedOptions).toEqual(expectedOption);
+    });
+
+    it('[C601606] Should not be able to search if there is less than 6 options to choose', async () => {
+        const { name: dropdownOptionTaskName } = runningTasks['dropdown-search'];
+        const dropdownId = 'DropdownSingleFive';
+        await taskFilter.clickTaskFilter('my-tasks');
+        await taskList.getDataTable().waitTillContentLoaded();
+
+        await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
+        await taskList.selectRow(dropdownOptionTaskName);
+
+        await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();
+
+        await taskFormCloudComponent.formFields().checkFormIsDisplayed();
+        await dropdown.openDropdown(`#${dropdownId}`);
+
+        const searchDropdownFieldIsPresent = await dropdown.searchElementLocator.isPresent(1000);
+        await expect(searchDropdownFieldIsPresent).toBeFalsy();
+    });
 });

lib/testing/src/lib/protractor/core/pages/form/widgets/dropdown-widget.page.ts

@@ -16,50 +16,70 @@
  */
 
 import { FormFields } from '../form-fields';
-import { by, element, $, protractor } from 'protractor';
+import { $, by, protractor } from 'protractor';
-import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
 import { TestElement } from '../../../test-element';
 
 export class DropdownWidgetPage {
 
     formFields: FormFields = new FormFields();
 
-    getSelectedOptionText(fieldId: string = 'dropdown'): Promise<string> {
+    readonly searchElementLocator = TestElement.byCss('[aria-label="Search options"]');
+
+    async getSelectedOptionText(fieldId: string = 'dropdown'): Promise<string> {
         return this.formFields.getFieldText(fieldId, by.css(`mat-select[id="${fieldId}"] span span`));
     }
 
     async selectOption(option: string, locator: string = '#dropdown'): Promise<void> {
         await this.openDropdown(locator);
-        const row = element(by.cssContainingText('mat-option span', option));
+        const row = TestElement.byText('mat-option span', option);
-        await BrowserActions.click(row);
+        await row.click();
     }
 
     async selectMultipleOptions(options: string[]): Promise<void> {
         for (const option of options) {
-            await TestElement.byText('mat-option span', option).click();
+            await this.clickOption(option);
         }
     }
 
-    async closeDropdown(): Promise<void> {
+    async closeDropdownFor(dropdownId: string): Promise<void> {
+        const dropdownElement = TestElement.byCss(`#${dropdownId}-panel`);
         await $('body').sendKeys(protractor.Key.ESCAPE);
+        await dropdownElement.waitNotPresent();
     }
 
     async openDropdown(locator: string = '#dropdown'): Promise<void> {
         await this.checkDropdownIsDisplayed(locator);
-        const dropdown = locator ? $(`${locator}`) : $(`#dropdown`);
+        const dropdown = TestElement.byCss(`${locator}`);
-        await BrowserActions.click(dropdown);
+        await dropdown.click();
+    }
+
+    async searchAndChooseOptionFromList(name: string): Promise<void> {
+        await this.searchElementLocator.typeText(name);
+        await this.clickOption(name);
+    }
+
+    async searchAndChooseOptionsFromList(...names: string[]): Promise<void> {
+        for (const name of names) {
+            await this.searchElementLocator.typeText(name);
+            await this.clickOption(name);
+        }
     }
 
     async checkDropdownIsDisplayed(locator: string = '#dropdown'): Promise<void> {
-        const dropdown = $(`${locator}`);
+        const dropdown = TestElement.byCss(`${locator}`);
-        await BrowserVisibility.waitUntilElementIsVisible(dropdown);
+        await dropdown.waitVisible();
     }
 
-    async isWidgetVisible(fieldId): Promise<void> {
+    async isWidgetVisible(fieldId: string): Promise<void> {
         await this.formFields.checkWidgetIsVisible(fieldId);
     }
 
-    async isWidgetHidden(fieldId): Promise<void> {
+    async isWidgetHidden(fieldId: string): Promise<void> {
         await this.formFields.checkWidgetIsHidden(fieldId);
     }
+
+    private async clickOption(name: string): Promise<void> {
+        const optionLocator = TestElement.byText('mat-option span', name);
+        await optionLocator.click();
+    }
 }

lib/testing/src/lib/protractor/process-services-cloud/resources/resources.ts

@@ -129,6 +129,7 @@ export const ACTIVITI_CLOUD_APPS = {
             multiinstancemanualtask: 'multiinstance-manualtask',
             multiinstancesubprocess: 'multiinstance-subprocess',
             'multiselect-dropdown': 'multiselect-dropdown',
+            'dropdown-search': 'dropdown-search',
             calledprocess: 'calledprocess',
             booleanvisibilityprocess: 'booleanvisibilityprocess',
             numbervisibilityprocess: 'numbervisibilityprocess',