[AAE-865]Create card view text item PO (#5320)

* Create card view text item PO

* Changed back the puppeteer version

* Fix the rootElement locator

* no message

* Fix wrong rebase

* * Added unique data-automation-id on cardViewTextComponent.

* Changed data-automation-id for float

e2e/core/card-view/card-view-component.e2e.ts

@@ -92,29 +92,27 @@ describe('CardView Component', () => {
     describe('Text', () => {
 
         it('[C279937] Should the label be present', async () => {
-            const label = element(by.css('div[data-automation-id="card-textitem-label-name"]'));
+            await cardViewPageComponent.checkNameTextLabelIsPresent();
-
-            await BrowserVisibility.waitUntilElementIsPresent(label);
         });
 
         it('[C279943] Should be present a default value', async () => {
-            await expect(await cardViewPageComponent.getTextFieldText()).toBe('Spock');
+            await expect(await cardViewPageComponent.getNameTextFieldText()).toBe('Spock');
         });
 
         it('[C279934] Should be possible edit text item', async () => {
-            await cardViewPageComponent.clickOnTextField();
+            await cardViewPageComponent.clickOnNameTextField();
-            await cardViewPageComponent.enterTextField('example');
+            await cardViewPageComponent.enterNameTextField('example');
-            await cardViewPageComponent.clickOnTextSaveIcon();
+            await cardViewPageComponent.clickOnNameTextSaveIcon();
 
             await expect(await cardViewPageComponent.getOutputText(0)).toBe('[CardView Text Item] - example');
         });
 
         it('[C279944] Should be possible undo text item modify when click on the clear button', async () => {
-            await cardViewPageComponent.clickOnTextField();
+            await cardViewPageComponent.clickOnNameTextField();
-            await cardViewPageComponent.enterTextField('example');
+            await cardViewPageComponent.enterNameTextField('example');
-            await cardViewPageComponent.clickOnTextClearIcon();
+            await cardViewPageComponent.clickOnNameTextClearIcon();
 
-            await expect(await cardViewPageComponent.getTextFieldText()).toBe('Spock');
+            await expect(await cardViewPageComponent.getNameTextFieldText()).toBe('Spock');
         });
     });
 

e2e/pages/adf/cardViewComponentPage.ts

@@ -16,13 +16,13 @@
  */
 
 import { by, element, ElementFinder } from 'protractor';
-import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
+import { BrowserVisibility, BrowserActions, CardTextItemPage } from '@alfresco/adf-testing';
 
 export class CardViewComponentPage {
 
     addButton: ElementFinder = element(by.className('adf-card-view__key-value-pairs__add-btn'));
     selectValue = 'mat-option';
-    textField: ElementFinder = element(by.css(`input[data-automation-id='card-textitem-editinput-name']`));
+    nameCardTextItem: CardTextItemPage = new CardTextItemPage('name');
     intField: ElementFinder = element(by.css(`input[data-automation-id='card-textitem-editinput-int']`));
     floatField: ElementFinder = element(by.css(`input[data-automation-id='card-textitem-editinput-float']`));
     valueInputField: ElementFinder = element(by.xpath(`//*[contains(@id,'input') and @placeholder='Value']`));
@@ -41,37 +41,36 @@ export class CardViewComponentPage {
         await BrowserActions.click(this.addButton);
     }
 
+    async checkNameTextLabelIsPresent(): Promise<void> {
+        await this.nameCardTextItem.checkLabelIsPresent();
+    }
+
+    async getNameTextFieldText(): Promise<string> {
+        return this.nameCardTextItem.getFieldValue();
+    }
+
+    async clickOnNameTextField(): Promise<void> {
+        await this.nameCardTextItem.clickOnToggleTextField();
+    }
+
+    async enterNameTextField(text: string): Promise<void> {
+        await this.nameCardTextItem.enterTextField(text);
+    }
+
+    async clickOnNameTextSaveIcon(): Promise<void> {
+        await this.nameCardTextItem.clickOnSaveButton();
+    }
+
+    async clickOnNameTextClearIcon(): Promise<void> {
+        await this.nameCardTextItem.clickOnClearButton();
+    }
+
     async clickOnResetButton(): Promise<void> {
         await BrowserActions.click(this.resetButton);
     }
 
-    async clickOnTextField(): Promise<void> {
-        const toggleText: ElementFinder = element(by.css(`div[data-automation-id='card-textitem-edit-toggle-name']`));
-        await BrowserActions.click(toggleText);
-        await BrowserVisibility.waitUntilElementIsVisible(this.textField);
-    }
-
-    async clickOnTextClearIcon(): Promise<void> {
-        const clearIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-reset-name"]`));
-        await BrowserActions.click(clearIcon);
-    }
-
-    async clickOnTextSaveIcon(): Promise<void> {
-        const saveIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-update-name"]`));
-        await BrowserActions.click(saveIcon);
-    }
-
-    getTextFieldText(): Promise<string> {
-        const textField: ElementFinder = element(by.css(`span[data-automation-id="card-textitem-value-name"]`));
-        return BrowserActions.getText(textField);
-    }
-
-    async enterTextField(text: string): Promise<void> {
-        await BrowserActions.clearSendKeys(this.textField, text);
-    }
-
     async clickOnIntField(): Promise<void> {
-        const toggleText: ElementFinder = element(by.css('div[data-automation-id="card-textitem-edit-toggle-int"]'));
+        const toggleText: ElementFinder = element(by.css('div[data-automation-id="card-textitem-toggle-int"]'));
         await BrowserActions.click(toggleText);
         await BrowserVisibility.waitUntilElementIsVisible(this.intField);
     }
@@ -101,7 +100,7 @@ export class CardViewComponentPage {
     }
 
     async clickOnFloatField(): Promise<void> {
-        const toggleText: ElementFinder = element(by.css('div[data-automation-id="card-textitem-edit-toggle-float"]'));
+        const toggleText: ElementFinder = element(by.css('div[data-automation-id="card-textitem-toggle-float"]'));
         await BrowserActions.click(toggleText);
         await BrowserVisibility.waitUntilElementIsVisible(this.floatField);
     }

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -5,7 +5,7 @@
             <span *ngIf="showProperty()" class="adf-textitem-ellipsis">{{ property.displayValue }}</span>
         </span>
         <ng-template #elseBlock>
-            <div role="button" class="adf-textitem-clickable" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center">
+            <div role="button" class="adf-textitem-clickable" [attr.data-automation-id]="'card-textitem-toggle-' + property.key" (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center">
                 <span class="adf-textitem-clickable-value" [attr.data-automation-id]="'card-textitem-value-' + property.key">
                     <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>
                 </span>
@@ -27,7 +27,7 @@
             (click)="setEditMode(true)"
             (keydown.enter)="setEditMode(true)"
             class="adf-textitem-readonly"
-            [attr.data-automation-id]="'card-textitem-edit-toggle-' + property.key"
+            [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
             fxLayout="row" fxLayoutAlign="space-between center">
             <span [attr.data-automation-id]="'card-textitem-value-' + property.key">
                 <span *ngIf="showProperty(); else elseEmptyValueBlock">{{ property.displayValue }}</span>

lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -375,7 +375,7 @@ describe('CardViewTextItemComponent', () => {
                 }
             );
 
-            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
+            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${component.property.key}"]`));
             editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
             fixture.detectChanges();
 
@@ -403,7 +403,7 @@ describe('CardViewTextItemComponent', () => {
                 }
             );
 
-            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
+            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${component.property.key}"]`));
             editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
             fixture.detectChanges();
 
@@ -426,7 +426,7 @@ describe('CardViewTextItemComponent', () => {
             component.property.isValid = () => true;
             fixture.detectChanges();
 
-            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-edit-toggle-${component.property.key}"]`));
+            const editIcon = fixture.debugElement.query(By.css(`[data-automation-id="card-textitem-toggle-${component.property.key}"]`));
             editIcon.nativeElement.dispatchEvent(new MouseEvent('click'));
             fixture.detectChanges();
 

lib/testing/src/lib/core/pages/card-view/card-view-text-item.page.ts

@@ -0,0 +1,63 @@
+/*!
+ * @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 { element, by, ElementFinder, Locator } from 'protractor';
+import { BrowserActions, BrowserVisibility } from '../../utils/public-api';
+
+export class CardTextItemPage {
+
+    rootElement: ElementFinder;
+    textField: Locator = by.css('input[data-automation-id*="card-textitem-editinput"]');
+    saveButton: Locator = by.css('button[data-automation-id*="card-textitem-update"]');
+    clearButton: Locator = by.css('button[data-automation-id*="card-textitem-reset"]');
+    field: Locator = by.css('span[data-automation-id*="card-textitem-value"] span');
+    labelLocator: Locator = by.css('div[data-automation-id*="card-textitem-label"]');
+    toggle: Locator = by.css('div[data-automation-id*="card-textitem-toggle"]');
+
+    constructor(label: string = 'assignee') {
+        this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "label-${label}")]/ancestor::adf-card-view-textitem`));
+    }
+
+    async getFieldValue(): Promise<string> {
+        const fieldElement = this.rootElement.element(this.field);
+        return BrowserActions.getText(fieldElement);
+    }
+
+    async checkLabelIsPresent(): Promise<void> {
+        const labelElement: ElementFinder = this.rootElement.element(this.labelLocator);
+        await BrowserVisibility.waitUntilElementIsPresent(labelElement);
+    }
+
+    async clickOnToggleTextField(): Promise<void> {
+        const toggleText: ElementFinder = this.rootElement.element(this.toggle);
+        await BrowserActions.click(toggleText);
+        await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(this.textField));
+    }
+
+    async enterTextField(text: string): Promise<void> {
+        await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(this.textField));
+        await BrowserActions.clearSendKeys(this.rootElement.element(this.textField), text);
+    }
+
+    async clickOnSaveButton(): Promise<void> {
+        await BrowserActions.click(this.rootElement.element(this.saveButton));
+    }
+
+    async clickOnClearButton(): Promise<void> {
+        await BrowserActions.click(this.rootElement.element(this.clearButton));
+    }
+}

lib/testing/src/lib/core/pages/card-view/public-api.ts

@@ -0,0 +1,18 @@
+/*!
+ * @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.
+ */
+
+export * from './card-view-text-item.page';

lib/testing/src/lib/core/pages/public-api.ts

@@ -27,4 +27,5 @@ export * from './error.page';
 export * from './login.page';
 export * from './notification-history.page';
 export * from './form/public-api';
+export * from './card-view/public-api';
 export * from './viewerPage';

lib/testing/src/lib/process-services-cloud/pages/task-header-cloud-component.page.ts

@@ -18,32 +18,37 @@
 import { element, by, ElementFinder } from 'protractor';
 import { BrowserActions } from '../../core/utils/browser-actions';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
+import { CardTextItemPage } from '../../core/pages/card-view/card-view-text-item.page';
 
 export class TaskHeaderCloudPage {
 
-    assigneeField: ElementFinder = element(by.css('span[data-automation-id*="assignee"] span'));
+    assigneeCardTextItem: CardTextItemPage = new CardTextItemPage('assignee');
-    statusField: ElementFinder = element(by.css('span[data-automation-id*="status"] span'));
+    statusCardTextItem: CardTextItemPage = new CardTextItemPage('status');
-    priorityField: ElementFinder = element(by.css('span[data-automation-id*="priority"] span'));
+    priorityCardTextItem: CardTextItemPage = new CardTextItemPage('priority');
     dueDateField: ElementFinder = element.all(by.css('span[data-automation-id*="dueDate"] span')).first();
     categoryField: ElementFinder = element(by.css('span[data-automation-id*="category"] span'));
     createdField: ElementFinder = element(by.css('span[data-automation-id="card-dateitem-created"] span'));
     parentNameField: ElementFinder = element(by.css('span[data-automation-id*="parentName"] span'));
     parentTaskIdField: ElementFinder = element(by.css('span[data-automation-id*="parentTaskId"] span'));
     endDateField: ElementFinder = element.all(by.css('span[data-automation-id*="endDate"] span')).first();
-    idField: ElementFinder = element.all(by.css('span[data-automation-id*="id"] span')).first();
+    idCardTextItem: CardTextItemPage = new CardTextItemPage('id');
-    descriptionField: ElementFinder = element(by.css('span[data-automation-id*="description"] span'));
+    descriptionCardTextItem: CardTextItemPage = new CardTextItemPage('description');
     taskPropertyList: ElementFinder = element(by.css('adf-cloud-task-header adf-card-view div[class="adf-property-list"]'));
 
     async getAssignee(): Promise<string> {
-        return BrowserActions.getText(this.assigneeField);
+        return this.assigneeCardTextItem.getFieldValue();
+    }
+
+    async clickOnAssignee(): Promise<void> {
+        await this.assigneeCardTextItem.clickOnToggleTextField();
     }
 
     async getStatus(): Promise<string> {
-        return BrowserActions.getText(this.statusField);
+        return this.statusCardTextItem.getFieldValue();
     }
 
     async getPriority(): Promise<string> {
-        return BrowserActions.getText(this.priorityField);
+        return this.priorityCardTextItem.getFieldValue();
     }
 
     async getCategory(): Promise<string> {
@@ -67,11 +72,11 @@ export class TaskHeaderCloudPage {
     }
 
     async getId(): Promise<string> {
-        return BrowserActions.getText(this.idField);
+        return this.idCardTextItem.getFieldValue();
     }
 
     async getDescription(): Promise<string> {
-        return BrowserActions.getText(this.descriptionField);
+        return this.descriptionCardTextItem.getFieldValue();
     }
 
     async getDueDate(): Promise<string> {