diff --git a/e2e/core/card-view/card-view-component.e2e.ts b/e2e/core/card-view/card-view-component.e2e.ts index 56378e53f4..4e1f9f85be 100644 --- a/e2e/core/card-view/card-view-component.e2e.ts +++ b/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 BrowserVisibility.waitUntilElementIsPresent(label); + await cardViewPageComponent.checkNameTextLabelIsPresent(); }); 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.enterTextField('example'); - await cardViewPageComponent.clickOnTextSaveIcon(); + await cardViewPageComponent.clickOnNameTextField(); + await cardViewPageComponent.enterNameTextField('example'); + 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.enterTextField('example'); - await cardViewPageComponent.clickOnTextClearIcon(); + await cardViewPageComponent.clickOnNameTextField(); + await cardViewPageComponent.enterNameTextField('example'); + await cardViewPageComponent.clickOnNameTextClearIcon(); - await expect(await cardViewPageComponent.getTextFieldText()).toBe('Spock'); + await expect(await cardViewPageComponent.getNameTextFieldText()).toBe('Spock'); }); }); diff --git a/e2e/pages/adf/cardViewComponentPage.ts b/e2e/pages/adf/cardViewComponentPage.ts index b8d4ac60ac..a1744a9189 100644 --- a/e2e/pages/adf/cardViewComponentPage.ts +++ b/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 { + await this.nameCardTextItem.checkLabelIsPresent(); + } + + async getNameTextFieldText(): Promise { + return this.nameCardTextItem.getFieldValue(); + } + + async clickOnNameTextField(): Promise { + await this.nameCardTextItem.clickOnToggleTextField(); + } + + async enterNameTextField(text: string): Promise { + await this.nameCardTextItem.enterTextField(text); + } + + async clickOnNameTextSaveIcon(): Promise { + await this.nameCardTextItem.clickOnSaveButton(); + } + + async clickOnNameTextClearIcon(): Promise { + await this.nameCardTextItem.clickOnClearButton(); + } + async clickOnResetButton(): Promise { await BrowserActions.click(this.resetButton); } - async clickOnTextField(): Promise { - 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 { - const clearIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-reset-name"]`)); - await BrowserActions.click(clearIcon); - } - - async clickOnTextSaveIcon(): Promise { - const saveIcon: ElementFinder = element(by.css(`button[data-automation-id="card-textitem-update-name"]`)); - await BrowserActions.click(saveIcon); - } - - getTextFieldText(): Promise { - const textField: ElementFinder = element(by.css(`span[data-automation-id="card-textitem-value-name"]`)); - return BrowserActions.getText(textField); - } - - async enterTextField(text: string): Promise { - await BrowserActions.clearSendKeys(this.textField, text); - } - async clickOnIntField(): Promise { - 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 { - 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); } diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html index 6907cd50ed..b5f6080dce 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -5,7 +5,7 @@ {{ property.displayValue }} -
+
{{ property.displayValue }} @@ -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"> {{ property.displayValue }} diff --git a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts index b0792e3568..885f6125c3 100644 --- a/lib/core/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts +++ b/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(); diff --git a/lib/testing/src/lib/core/pages/card-view/card-view-text-item.page.ts b/lib/testing/src/lib/core/pages/card-view/card-view-text-item.page.ts new file mode 100644 index 0000000000..ed1804d96f --- /dev/null +++ b/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 { + const fieldElement = this.rootElement.element(this.field); + return BrowserActions.getText(fieldElement); + } + + async checkLabelIsPresent(): Promise { + const labelElement: ElementFinder = this.rootElement.element(this.labelLocator); + await BrowserVisibility.waitUntilElementIsPresent(labelElement); + } + + async clickOnToggleTextField(): Promise { + 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 { + await BrowserVisibility.waitUntilElementIsVisible(this.rootElement.element(this.textField)); + await BrowserActions.clearSendKeys(this.rootElement.element(this.textField), text); + } + + async clickOnSaveButton(): Promise { + await BrowserActions.click(this.rootElement.element(this.saveButton)); + } + + async clickOnClearButton(): Promise { + await BrowserActions.click(this.rootElement.element(this.clearButton)); + } +} diff --git a/lib/testing/src/lib/core/pages/card-view/public-api.ts b/lib/testing/src/lib/core/pages/card-view/public-api.ts new file mode 100644 index 0000000000..18bf3c1db5 --- /dev/null +++ b/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'; diff --git a/lib/testing/src/lib/core/pages/public-api.ts b/lib/testing/src/lib/core/pages/public-api.ts index 9c26affc5e..bdfa857c8e 100644 --- a/lib/testing/src/lib/core/pages/public-api.ts +++ b/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'; diff --git a/lib/testing/src/lib/process-services-cloud/pages/task-header-cloud-component.page.ts b/lib/testing/src/lib/process-services-cloud/pages/task-header-cloud-component.page.ts index 9101ce0653..b81e58023c 100644 --- a/lib/testing/src/lib/process-services-cloud/pages/task-header-cloud-component.page.ts +++ b/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')); - statusField: ElementFinder = element(by.css('span[data-automation-id*="status"] span')); - priorityField: ElementFinder = element(by.css('span[data-automation-id*="priority"] span')); + assigneeCardTextItem: CardTextItemPage = new CardTextItemPage('assignee'); + statusCardTextItem: CardTextItemPage = new CardTextItemPage('status'); + 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(); - descriptionField: ElementFinder = element(by.css('span[data-automation-id*="description"] span')); + idCardTextItem: CardTextItemPage = new CardTextItemPage('id'); + 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 { - return BrowserActions.getText(this.assigneeField); + return this.assigneeCardTextItem.getFieldValue(); + } + + async clickOnAssignee(): Promise { + await this.assigneeCardTextItem.clickOnToggleTextField(); } async getStatus(): Promise { - return BrowserActions.getText(this.statusField); + return this.statusCardTextItem.getFieldValue(); } async getPriority(): Promise { - return BrowserActions.getText(this.priorityField); + return this.priorityCardTextItem.getFieldValue(); } async getCategory(): Promise { @@ -67,11 +72,11 @@ export class TaskHeaderCloudPage { } async getId(): Promise { - return BrowserActions.getText(this.idField); + return this.idCardTextItem.getFieldValue(); } async getDescription(): Promise { - return BrowserActions.getText(this.descriptionField); + return this.descriptionCardTextItem.getFieldValue(); } async getDueDate(): Promise {