Skip to content

Commit

Permalink
[AAE-6742] Create E2Es for dropdown search capability (#7425)
Browse files Browse the repository at this point in the history 
* AAE-6742 Create E2Es for dropdown search capability

* Change protractor elementFinder to TestElement class in dropdown-widget.page.ts
  • Loading branch information
@MichalFidor
MichalFidor committed Dec 15, 2021
1 parent f35465e commit 75adf21
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 41 deletions.
120 changes: 92 additions & 28 deletions e2e/process-services-cloud/form-field/dropdown-widget.e2e.ts
View file
Expand Up @@ -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]);

groupInfo = await groupIdentityService.getGroupInfoByGroupName('hr');
testUser = await identityService.createIdentityUserWithRole([identityService.ROLES.ACTIVITI_USER]);
const 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 processDefinitionMultiselect = await processDefinitionService.getProcessDefinitionByName(processes['multiselect-dropdown'], simpleApp);

await processInstancesService.createProcessInstance(processDefinition.entry.key, simpleApp);
await processInstancesService.createProcessInstance(processDefinitionMultiselect.entry.key, simpleApp);
runningProcessInstance = await processInstancesService.createProcessInstance(processDefinition.entry.key, simpleApp);
runningProcessInstanceMultiselect = await processInstancesService.createProcessInstance(processDefinitionMultiselect.entry.key, simpleApp);
const processesData = ['dropdownOptionsProcess', 'multiselect-dropdown', 'dropdown-search'];

tasklist = await queryService.getProcessInstanceTasks(runningProcessInstance.entry.id, simpleApp);
task = await tasklist.list.entries[0];
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);
for (const process of processesData) {
const processDef = await processDefinitionService.getProcessDefinitionByName(processes[process], simpleApp);
await processInstancesService.createProcessInstance(processDef.entry.key, simpleApp);
runningProcessInstance = await processInstancesService.createProcessInstance(processDef.entry.key, simpleApp);
const tasklist = await queryService.getProcessInstanceTasks(runningProcessInstance.entry.id, simpleApp);
await tasksService.claimTask(tasklist.list.entries[0].entry.id, simpleApp);
runningTasks[process] = tasklist.list.entries[0].entry;
}

await loginSSOPage.login(testUser.username, testUser.password);
});
Expand All @@ -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.selectRow(taskMulti.entry.name);
await taskList.checkContentIsDisplayedByName(multiselectTaskName);
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')];

Expand All @@ -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.selectRow(taskMulti.entry.name);
await taskList.checkContentIsDisplayedByName(multiselectTaskName);
await taskList.selectRow(multiselectTaskName);

await taskFormCloudComponent.formFields().checkFormIsDisplayed();
await taskFormCloudComponent.formFields().checkWidgetIsVisible('DropdownMultiselect');
Expand All @@ -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.selectRow(task.entry.name);
await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
await taskList.selectRow(dropdownOptionTaskName);

await taskHeaderCloudPage.checkTaskPropertyListIsDisplayed();

Expand All @@ -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.selectRow(task.entry.name);
await taskList.checkContentIsDisplayedByName(dropdownOptionTaskName);
await taskList.selectRow(dropdownOptionTaskName);

await taskFormCloudComponent.formFields().checkFormIsDisplayed();
await taskFormCloudComponent.formFields().checkWidgetIsVisible('DropdownOptions');
Expand All @@ -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();
});
});
Binary file modified e2e/resources/activiti7/simpleapp.zip
View file
Binary file not shown.
46 changes: 33 additions & 13 deletions lib/testing/src/lib/protractor/core/pages/form/widgets/dropdown-widget.page.ts
View file
Expand Up @@ -16,50 +16,70 @@
*/

import { FormFields } from '../form-fields';
import { by, element, $, protractor } from 'protractor';
import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
import { $, by, protractor } from 'protractor';
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));
await BrowserActions.click(row);
const row = TestElement.byText('mat-option span', option);
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`);
await BrowserActions.click(dropdown);
const dropdown = TestElement.byCss(`${locator}`);
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}`);
await BrowserVisibility.waitUntilElementIsVisible(dropdown);
const dropdown = TestElement.byCss(`${locator}`);
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();
}
}
1 change: 1 addition & 0 deletions lib/testing/src/lib/protractor/process-services-cloud/resources/resources.ts
View file
Expand Up @@ -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',
Expand Down

0 comments on commit 75adf21

Please sign in to comment.