[AAE-1923] Form APS E2E (#5540)

* [AAE-1923] Form APS E2E

* * minor changes

* * fixed e2e

lib/core/form/components/widgets/functional-group/functional-group.widget.html

@@ -6,6 +6,7 @@
         <input matInput
                class="adf-input"
                type="text"
+               data-automation-id="adf-group-search-input"
                [id]="field.id"
                [(ngModel)]="value"
                (keyup)="onKeyUp($event)"
@@ -13,10 +14,10 @@
                placeholder="{{field.placeholder}}"
                [matAutocomplete]="auto">
         <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
-            <mat-option *ngFor="let item of groups"
+            <mat-option *ngFor="let item of groups; let i = index" id="adf-group-widget-user-{{i}}"
                        [id]="field.id +'-'+item.id"
                        (click)="onItemClick(item, $event)"  [value]="item">
-                <span>{{item.name}}</span>
+                <span id="adf-group-label-name">{{item.name}}</span>
             </mat-option>
         </mat-autocomplete>
 

lib/core/form/components/widgets/typeahead/typeahead.widget.html

@@ -13,11 +13,12 @@
                    (ngModelChange)="validate()"
                    (keyup)="onKeyUp($event)"
                    [disabled]="field.readOnly"
+                   data-automation-id="adf-typeahed-search-input"
                    placeholder="{{field.placeholder}}"
                    [matAutocomplete]="auto">
             <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onItemSelect($event.option.value)">
-                <mat-option *ngFor="let item of options" [value]="item">
-                    <span [id]="field.name+'_option_'+item.id">{{item.name}}</span>
+                <mat-option *ngFor="let item of options; let i = index" id="adf-typeahed-widget-user-{{i}}" [value]="item">
+                    <span id="adf-typeahed-label-name">{{item.name}}</span>
                 </mat-option>
             </mat-autocomplete>
         </mat-form-field>

lib/core/form/components/widgets/typeahead/typeahead.widget.spec.ts

@@ -304,9 +304,9 @@ describe('TypeaheadWidgetComponent', () => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
-                    expect(fixture.debugElement.query(By.css('[id="typeahead-name_option_1"]'))).not.toBeNull();
-                    expect(fixture.debugElement.query(By.css('[id="typeahead-name_option_2"]'))).not.toBeNull();
-                    expect(fixture.debugElement.query(By.css('[id="typeahead-name_option_3"]'))).not.toBeNull();
+                    expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
+                    expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-1"] span'))).not.toBeNull();
+                    expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-2"] span'))).not.toBeNull();
                 });
             }));
 
@@ -321,7 +321,7 @@ describe('TypeaheadWidgetComponent', () => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
                     fixture.detectChanges();
-                    expect(fixture.debugElement.query(By.css('[id="typeahead-name_option_1"]'))).not.toBeNull();
+                    expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).not.toBeNull();
                     typeaheadHTMLElement.focus();
                     typeaheadWidgetComponent.value = '';
                     typeaheadHTMLElement.dispatchEvent(new Event('keyup'));
@@ -329,7 +329,7 @@ describe('TypeaheadWidgetComponent', () => {
                     fixture.detectChanges();
                     fixture.whenStable().then(() => {
                         fixture.detectChanges();
-                        expect(fixture.debugElement.query(By.css('[id="typeahead-name_option_1"]'))).toBeNull();
+                        expect(fixture.debugElement.query(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeNull();
                     });
                 });
             }));
@@ -377,9 +377,9 @@ describe('TypeaheadWidgetComponent', () => {
                 typeaheadWidgetComponent.onKeyUp(keyboardEvent);
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {
-                    expect(fixture.debugElement.queryAll(By.css('[id="mat-option-1"]'))).toBeDefined();
-                    expect(fixture.debugElement.queryAll(By.css('[id="mat-option-2"]'))).toBeDefined();
-                    expect(fixture.debugElement.queryAll(By.css('[id="mat-option-3"]'))).toBeDefined();
+                    expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-0"] span'))).toBeDefined();
+                    expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-1"] span'))).toBeDefined();
+                    expect(fixture.debugElement.queryAll(By.css('[id="adf-typeahed-widget-user-2"] span'))).toBeDefined();
                 });
             }));
         });

lib/testing/src/lib/core/pages/form/widgets/dynamic-table-widget.page.ts

@@ -25,10 +25,8 @@ export class DynamicTableWidgetPage {
 
     labelLocator: Locator = by.css('dynamic-table-widget div div');
     columnNameLocator: Locator = by.css('table[id*="dynamic-table"] th');
-    addButton: ElementFinder = element(by.id('label-add-row'));
     cancelButton: ElementFinder = element(by.cssContainingText('button span', 'Cancel'));
     editButton: ElementFinder = element(by.cssContainingText('button span', 'edit'));
-    addRow: ElementFinder = element(by.id('dynamictable-add-row'));
     columnDateTime: ElementFinder = element(by.id('columnDateTime'));
     columnDate: ElementFinder = element(by.id('columnDate'));
     calendarHeader: ElementFinder = element(by.css('div[class="mat-datetimepicker-calendar-header-date-time"]'));
@@ -37,7 +35,6 @@ export class DynamicTableWidgetPage {
     errorMessage: ElementFinder = element(by.css('div[class="adf-error-text"]'));
     dateWidget: ElementFinder = element.all(by.css('mat-datepicker-toggle button')).first();
     tableRow: ElementArrayFinder = element.all(by.css('tbody tr'));
-    dataTableInput: ElementFinder = element(by.id('id'));
 
     getFieldLabel(fieldId): Promise<string> {
         return this.formFields.getFieldLabel(fieldId, this.labelLocator);
@@ -47,12 +44,9 @@ export class DynamicTableWidgetPage {
         return this.formFields.getFieldText(fieldId, this.columnNameLocator);
     }
 
-    async clickAddButton(): Promise<void> {
-        await BrowserActions.click(this.addButton);
-    }
-
-    async clickAddRow(): Promise<void> {
-        await BrowserActions.click(this.addRow);
+    async clickAddRow(id?: string): Promise<void> {
+        const rowButton = element(by.id(`${id ? id : 'label'}-add-row`));
+        await BrowserActions.click(rowButton);
     }
 
     async clickTableRow(rowNumber): Promise<void> {
@@ -68,11 +62,11 @@ export class DynamicTableWidgetPage {
         await BrowserActions.click(this.cancelButton);
     }
 
-    async setDatatableInput(text): Promise<void> {
-        await BrowserVisibility.waitUntilElementIsVisible(this.dataTableInput);
-        await this.dataTableInput.clear();
-        await this.dataTableInput.sendKeys(text);
-    }
+    async setDatatableInput(text, id = 'id'): Promise<void> {
+        const dataTableInput: ElementFinder = element(by.id(id));
+        await BrowserVisibility.waitUntilElementIsVisible(dataTableInput);
+        await BrowserActions.clearSendKeys(dataTableInput, text);
+     }
 
     async getTableRowText(rowNumber): Promise<string> {
         const tableRowByIndex = element(by.id('dynamictable-row-' + rowNumber));

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

@@ -0,0 +1,78 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormFields } from '../form-fields';
+import { by, element, ElementFinder, Locator } from 'protractor';
+import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+
+export class GroupWidgetPage {
+
+    groupField: ElementFinder = element(by.css('input[data-automation-id="adf-group-search-input"]'));
+    firstResult: ElementFinder = element(by.id('adf-group-widget-user-0'));
+    formFields: FormFields = new FormFields();
+    groupDropDownList: Locator = by.css('.mat-autocomplete-panel');
+
+    getFieldLabel(fieldId): Promise<string> {
+        return this.formFields.getFieldLabel(fieldId);
+    }
+
+    getFieldValue(fieldId): Promise<string> {
+        return this.formFields.getFieldValue(fieldId);
+    }
+
+    getFieldText(fieldId): Promise<string> {
+        return this.formFields.getFieldText(fieldId);
+    }
+
+    insertGroup(fieldId, value): Promise<void> {
+        return this.formFields.setValueInInputById(fieldId, value);
+    }
+
+    async checkDropDownListIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(element(this.groupDropDownList));
+    }
+
+    async checkGroupIsListed(group): Promise<void> {
+        const groupElement = element(by.cssContainingText('[id="adf-group-label-name"]', group));
+        await BrowserVisibility.waitUntilElementIsVisible(groupElement);
+    }
+
+    async getDropDownList(): Promise<any[]> {
+        const user = by.css('[id="adf-group-label-name"]');
+        await BrowserVisibility.waitUntilElementIsVisible(element(user));
+        return element.all(user).map((elementFinder) => elementFinder.getText());
+    }
+
+    async selectGroupFromDropDown(groupName): Promise<void> {
+        const group = element(by.cssContainingText('[id="adf-group-label-name"]', groupName));
+        await BrowserActions.click(group);
+    }
+
+    async checkGroupFieldIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.groupField);
+    }
+
+    async fillGroupField(value): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsClickable(this.groupField);
+        await this.groupField.sendKeys(value);
+    }
+
+    async selectGroupFromDropdown(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.firstResult);
+        await BrowserActions.click(this.firstResult);
+    }
+}

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

@@ -58,6 +58,13 @@ export class PeopleWidgetPage {
         await BrowserActions.click(user);
     }
 
+    async getDropDownList(): Promise<any[]> {
+        await this.checkDropDownListIsDisplayed();
+        const users = by.css('.adf-people-label-name');
+        await BrowserVisibility.waitUntilElementIsVisible(element(users));
+        return element.all(users).map((elementFinder) => elementFinder.getText());
+    }
+
     async checkPeopleFieldIsDisplayed(): Promise<void> {
         await BrowserVisibility.waitUntilElementIsVisible(this.peopleField);
     }

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

@@ -0,0 +1,78 @@
+/*!
+ * @license
+ * Copyright 2019 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FormFields } from '../form-fields';
+import { by, element, ElementFinder, Locator } from 'protractor';
+import { BrowserVisibility, BrowserActions } from '../../../utils/public-api';
+
+export class TypeaheadWidgetPage {
+
+    field: ElementFinder = element(by.css('input[data-automation-id="adf-typeahed-search-input"]'));
+    firstResult: ElementFinder = element(by.id('adf-typeahed-widget-user-0'));
+    formFields: FormFields = new FormFields();
+    groupDropDownList: Locator = by.css('.mat-autocomplete-panel');
+
+    getFieldLabel(fieldId): Promise<string> {
+        return this.formFields.getFieldLabel(fieldId);
+    }
+
+    getFieldValue(fieldId): Promise<string> {
+        return this.formFields.getFieldValue(fieldId);
+    }
+
+    getFieldText(fieldId): Promise<string> {
+        return this.formFields.getFieldText(fieldId);
+    }
+
+    insertValue(fieldId, value): Promise<void> {
+        return this.formFields.setValueInInputById(fieldId, value);
+    }
+
+    async checkDropDownListIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(element(this.groupDropDownList));
+    }
+
+    async checkOptionIsListed(option): Promise<void> {
+        const optionElement = element(by.cssContainingText('[id="adf-typeahed-label-name"]', option));
+        await BrowserVisibility.waitUntilElementIsVisible(optionElement);
+    }
+
+    async getDropDownList(): Promise<any[]> {
+        const option = by.css('[id="adf-typeahed-label-name"]');
+        await BrowserVisibility.waitUntilElementIsVisible(element(option));
+        return element.all(option).map((elementFinder) => elementFinder.getText());
+    }
+
+    async selectOptionFromDropDown(userName): Promise<void> {
+        const option = element(by.cssContainingText('[id="adf-typeahed-label-name"]', userName));
+        await BrowserActions.click(option);
+    }
+
+    async checkTypeaheadFieldIsDisplayed(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.field);
+    }
+
+    async fillTypeaheadField(value): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsClickable(this.field);
+        await BrowserActions.clearSendKeys(this.field, value);
+    }
+
+    async selectOptionFromDropdown(): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.firstResult);
+        await BrowserActions.click(this.firstResult);
+    }
+}

lib/testing/src/lib/core/pages/form/widgets/widget.ts

@@ -34,6 +34,8 @@ import { ContainerWidgetPage } from './container-widget.page';
 import { PeopleWidgetPage } from './people-widget.page';
 import { TabPage } from './tab.page';
 import { DocumentWidgetPage } from './document-widget.page';
+import { GroupWidgetPage } from './group-widget.page';
+import { TypeaheadWidgetPage } from './typeahead-widget.page';
 
 export class Widget {
 
@@ -109,6 +111,14 @@ export class Widget {
         return new PeopleWidgetPage();
     }
 
+    groupWidget(): GroupWidgetPage {
+        return new GroupWidgetPage();
+    }
+
+    typeahedWidget(): TypeaheadWidgetPage {
+        return new TypeaheadWidgetPage();
+    }
+
     tab(): TabPage {
         return new TabPage();
     }