From b006c66914c64f4bea33f7a092dd7fc806799a25 Mon Sep 17 00:00:00 2001 From: nikvalor <74654139+nikvalor@users.noreply.github.com> Date: Tue, 12 Jan 2021 18:08:26 +0200 Subject: [PATCH] Covered object marker component (Core) (#4308) Covered multi input component (Platform) --- .../fixtures/appData/object-marker-content.ts | 9 + e2e/wdio/core/pages/core-base-component.po.ts | 2 +- e2e/wdio/core/pages/object-marker.po.ts | 16 ++ e2e/wdio/core/tests/object-marker.e2e-spec.ts | 57 ++++++ .../appData/multi-input.page-content.ts | 1 + e2e/wdio/platform/pages/multi-input.po.ts | 54 ++++++ .../platform/tests/multi-input.e2e-spec.ts | 174 ++++++++++++++++++ 7 files changed, 312 insertions(+), 1 deletion(-) create mode 100644 e2e/wdio/core/fixtures/appData/object-marker-content.ts create mode 100644 e2e/wdio/core/pages/object-marker.po.ts create mode 100644 e2e/wdio/core/tests/object-marker.e2e-spec.ts create mode 100644 e2e/wdio/platform/fixtures/appData/multi-input.page-content.ts create mode 100644 e2e/wdio/platform/pages/multi-input.po.ts create mode 100644 e2e/wdio/platform/tests/multi-input.e2e-spec.ts diff --git a/e2e/wdio/core/fixtures/appData/object-marker-content.ts b/e2e/wdio/core/fixtures/appData/object-marker-content.ts new file mode 100644 index 00000000000..93bdf019d50 --- /dev/null +++ b/e2e/wdio/core/fixtures/appData/object-marker-content.ts @@ -0,0 +1,9 @@ +export const iconStatusesList = [ + ['Favorite', 'Favorite Icon'], + ['Flag', 'Favorite Flag'], + ['Request', 'Favorite Request'], + ['Editable', 'Favorite Editable'], + ['Private', 'Favorite Private'] +]; +export const textDecorationAttribute = 'text-decoration'; +export const textDecorationValues = ['none solid rgb(40, 110, 180)', 'rgb(40,110,180)', 'none']; diff --git a/e2e/wdio/core/pages/core-base-component.po.ts b/e2e/wdio/core/pages/core-base-component.po.ts index de23663fa96..204a235a153 100644 --- a/e2e/wdio/core/pages/core-base-component.po.ts +++ b/e2e/wdio/core/pages/core-base-component.po.ts @@ -21,5 +21,5 @@ export class CoreBaseComponentPo { open(url: string): void { open('fundamental-ngx#/core' + url); - }; + } } diff --git a/e2e/wdio/core/pages/object-marker.po.ts b/e2e/wdio/core/pages/object-marker.po.ts new file mode 100644 index 00000000000..068d4b84253 --- /dev/null +++ b/e2e/wdio/core/pages/object-marker.po.ts @@ -0,0 +1,16 @@ +import { CoreBaseComponentPo } from './core-base-component.po'; +import { waitForElDisplayed } from '../../driver/wdio'; + +export class ObjectMarkerPo extends CoreBaseComponentPo { + private url = '/object-marker'; + root = '#page-content'; + + marker = '.fd-object-marker'; + iconOnlyMarkers = 'fd-object-marker-example span'; + clickableMarkers = '[ng-reflect-clickable="true"]'; + + open(): void { + super.open(this.url); + waitForElDisplayed(this.root); + } +} diff --git a/e2e/wdio/core/tests/object-marker.e2e-spec.ts b/e2e/wdio/core/tests/object-marker.e2e-spec.ts new file mode 100644 index 00000000000..23f338df8ab --- /dev/null +++ b/e2e/wdio/core/tests/object-marker.e2e-spec.ts @@ -0,0 +1,57 @@ +import {ObjectMarkerPo} from '../pages/object-marker.po'; +import { + click, + getAttributeByName, + getCSSPropertyByName, + getElementArrayLength, + mouseHoverElement, + refreshPage, + scrollIntoView, waitForPresent +} from '../../driver/wdio'; +import { + iconStatusesList, + textDecorationAttribute, + textDecorationValues +} from '../fixtures/appData/object-marker-content'; + +describe('Object marker test suite', function() { + const objectMarkerPage = new ObjectMarkerPo(); + + beforeAll(() => { + objectMarkerPage.open(); + waitForPresent(objectMarkerPage.marker); + }); + + afterEach(() => { + refreshPage(); + }); + + it('Verify each marker is clickable', () => { + const arr = getElementArrayLength(objectMarkerPage.marker); + for (let i = 0; i < arr; i++) { + scrollIntoView(objectMarkerPage.marker, i); + click(objectMarkerPage.marker, i); + } + }); + + it('Verify technical statuses', () => { + const arr = getElementArrayLength(objectMarkerPage.iconOnlyMarkers); + for (let i = 0; i < arr; i++) { + expect(getAttributeByName(objectMarkerPage.iconOnlyMarkers, 'title', i)).toBe(iconStatusesList[i][0]); + expect(getAttributeByName(objectMarkerPage.iconOnlyMarkers, 'aria-label', i)).toBe(iconStatusesList[i][1]); + } + }); + + it('Verify RTL and LTR orientation', () => { + objectMarkerPage.checkRtlSwitch(); + }); + + it('Verify marker hover state', () => { + const arr = getElementArrayLength(objectMarkerPage.clickableMarkers); + for (let i = 0; i < arr; i++) { + scrollIntoView(objectMarkerPage.clickableMarkers, i); + mouseHoverElement(objectMarkerPage.clickableMarkers, i); + expect(textDecorationValues).toContain(getCSSPropertyByName(objectMarkerPage.clickableMarkers, textDecorationAttribute, i).value as string); + } + }); +}); diff --git a/e2e/wdio/platform/fixtures/appData/multi-input.page-content.ts b/e2e/wdio/platform/fixtures/appData/multi-input.page-content.ts new file mode 100644 index 00000000000..516409ec018 --- /dev/null +++ b/e2e/wdio/platform/fixtures/appData/multi-input.page-content.ts @@ -0,0 +1 @@ +export const alabamaOption = 'Alabama'; diff --git a/e2e/wdio/platform/pages/multi-input.po.ts b/e2e/wdio/platform/pages/multi-input.po.ts new file mode 100644 index 00000000000..f98d0cc3a81 --- /dev/null +++ b/e2e/wdio/platform/pages/multi-input.po.ts @@ -0,0 +1,54 @@ +import { BaseComponentPo } from './base-component.po'; +import { click, scrollIntoView, sendKeys, waitForElDisplayed } from '../../driver/wdio'; + +export class MultiInputPo extends BaseComponentPo { + private url = '/multi-input'; + root = '#page-content'; + expandedDropdown = '.fd-list' + activeDropdownButtons = '[ng-reflect-disabled="false"] button[ng-reflect-glyph="value-help"]' + allDropdownButtons = 'button[ng-reflect-glyph="value-help"]'; + disabledDropdownButtons = '[ng-reflect-disabled="true"] button[ng-reflect-glyph="value-help"]' + activeInputs = '.fd-multi-input-field [ng-reflect-disabled="false"] input'; + mobileInput = 'div[role="dialog"] input' + disabledInputs = '.fdp-multi-input [ng-reflect-disabled="true"] input'; + filledInput = '[ng-reflect-disabled="false"] .fd-tokenizer__inner'; + approveButton = '[fdtype="emphasized"]'; + groupHeader = '.fd-list__group-header'; + groupDropdown = '#fdp-id-grouped button'; + options = 'fdp-standard-list-item'; + dropdownOption = 'ul[role=list] [role="listitem"] li '; + selectedToken = 'span[role=\'button\']' + dropdownOptionText = this.dropdownOption + 'span'; + dropdownOptionTextValueHelp = this.dropdownOption + 'div[class="fd-list__title ng-star-inserted"]'; + + + crossButton = (option: string) => { + return `//span[text() = '${option}']/following-sibling::span`; + } + + selectedDropDownOption = (name: string) => { + return `//span[text()='${name}']`; + }; + + dropDownOption = (name: string) => { + return `[ng-reflect-title="${name}"] li`; + }; + + expandDropdown(dropDownSelector: string, index: number = 0): void { + sendKeys(['Escape']); + scrollIntoView(dropDownSelector, index); + click(dropDownSelector, index); + waitForElDisplayed(this.expandedDropdown); + } + + selectOption(option: string): void { + waitForElDisplayed(this.dropDownOption(option)); + scrollIntoView(this.dropDownOption(option)); + click(this.dropDownOption(option)); + } + + open(): void { + super.open(this.url); + waitForElDisplayed(this.root); + } +} diff --git a/e2e/wdio/platform/tests/multi-input.e2e-spec.ts b/e2e/wdio/platform/tests/multi-input.e2e-spec.ts new file mode 100644 index 00000000000..1109768bd04 --- /dev/null +++ b/e2e/wdio/platform/tests/multi-input.e2e-spec.ts @@ -0,0 +1,174 @@ +import { + click, getAttributeByNameArr, + getElementArrayLength, + getText, + refreshPage, + scrollIntoView, + setValue, + waitForElDisplayed, + sendKeys, getAttributeByName, browserIsIEorSafari, pause, waitForPresent +} from '../../driver/wdio'; +import {placeholderValue} from '../fixtures/appData/file-uploader.page-content'; +import { MultiInputPo } from '../pages/multi-input.po'; + +describe('Multi input test suite', function() { + const multiInputPage: MultiInputPo = new MultiInputPo(); + + beforeAll(() => { + multiInputPage.open(); + waitForPresent(multiInputPage.mobileInput); + }); + + afterEach(() => { + refreshPage(); + }); + + it('Verify multi input allows user to enter multiple values', () => { + if (!browserIsIEorSafari()) { + const activeButtonsQuantity = getElementArrayLength(multiInputPage.activeDropdownButtons); + for (let i = 0; i < activeButtonsQuantity; i++) { + if (i !== activeButtonsQuantity - 2) { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + multiInputPage.selectOption(optionsArr[0]); + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + multiInputPage.selectOption(optionsArr[1]); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[1]); + expect(getText(multiInputPage.filledInput, i).split('\n')[0]).toBe(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i).split('\n')[1]).toBe(optionsArr[1]); + } else { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + multiInputPage.selectOption(optionsArr[0]); + multiInputPage.selectOption(optionsArr[1]); + click(multiInputPage.approveButton); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[1]); + expect(getText(multiInputPage.filledInput, i).split('\n')[0]).toBe(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i).split('\n')[1]).toBe(optionsArr[1]); + } + } + } + }); + + it('Check RTL/LTR orientation', () => { + multiInputPage.checkRtlSwitch(); + }); + + it('Verify group headers are not interactive', () => { + const headersQuantity = getElementArrayLength(multiInputPage.groupHeader); + multiInputPage.expandDropdown(multiInputPage.groupDropdown); + for (let i = 0; i < headersQuantity; i++) { + scrollIntoView(multiInputPage.groupHeader, i); + click(multiInputPage.groupHeader, i); + waitForElDisplayed(multiInputPage.expandedDropdown); + } + }); + + it('Verify A token can be added using suggestions or value help.', () => { + if (!browserIsIEorSafari()) { + const inputQuantity = getElementArrayLength(multiInputPage.activeInputs); + for (let i = 0; i < inputQuantity - 2; i++) { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + setValue(multiInputPage.activeInputs, optionsArr[0].substring(0, 2), i); + multiInputPage.selectOption(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + } + } + }); + + it('Verify The user can deselect an item by clicking its delete icon[X].', () => { + if (!browserIsIEorSafari()) { + const activeButtonsQuantity = getElementArrayLength(multiInputPage.activeDropdownButtons); + for (let i = 0; i < activeButtonsQuantity; i++) { + if (i !== activeButtonsQuantity - 2) { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + multiInputPage.selectOption(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + scrollIntoView(multiInputPage.crossButton(optionsArr[0])); + click(multiInputPage.crossButton(optionsArr[0])); + expect(multiInputPage.crossButton(optionsArr[0])).not.toBeDisplayed(); + } else { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + multiInputPage.selectOption(optionsArr[0]); + click(multiInputPage.approveButton); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + scrollIntoView(multiInputPage.crossButton(optionsArr[0])); + click(multiInputPage.crossButton(optionsArr[0])); + expect(multiInputPage.crossButton(optionsArr[0])).not.toBeDisplayed(); + } + } + } + }); + + it('Verify When the user starts typing in the input field, the list is filtered', () => { + if (!browserIsIEorSafari()) { + const activeButtonsQuantity = getElementArrayLength(multiInputPage.activeDropdownButtons); + console.log(activeButtonsQuantity); + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, 1); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + click(multiInputPage.activeDropdownButtons, 1); + setValue(multiInputPage.activeInputs, optionsArr[1].substring(0, 3), 1); + let filteredOptions = getElementArrayLength(multiInputPage.dropdownOption); + for (let j = 0; j < filteredOptions; j++) { + const dropdownOption = getText(multiInputPage.dropdownOptionTextValueHelp, j); + expect(dropdownOption).toContain(optionsArr[1].substring(0, 3)); + } + scrollIntoView(multiInputPage.activeInputs, 0); + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, 0); + setValue(multiInputPage.activeInputs, optionsArr[0].substring(0, 3), 0); + filteredOptions = getElementArrayLength(multiInputPage.dropdownOption); + for (let j = 0; j < filteredOptions; j++) { + const dropdownOption = getText(multiInputPage.dropdownOptionText, j); + expect(dropdownOption).toContain(optionsArr[0].substring(0, 3)); + } + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, 4); + setValue(multiInputPage.mobileInput, optionsArr[4].substring(0, 3)); + filteredOptions = getElementArrayLength(multiInputPage.dropdownOption); + for (let j = 0; j < filteredOptions; j++) { + const dropdownOption = getText(multiInputPage.dropdownOptionTextValueHelp, j); + expect(dropdownOption).toContain(optionsArr[4].substring(0, 3)); + } + } + }); + + it('Verify user can delete the token using backspace and delete key', () => { + if (!browserIsIEorSafari()) { + const activeButtonsQuantity = getElementArrayLength(multiInputPage.activeDropdownButtons); + for (let i = 0; i < activeButtonsQuantity; i++) { + if (i !== activeButtonsQuantity - 2) { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + multiInputPage.selectOption(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i).split('\n')[0]).toBe(optionsArr[0]); + click(multiInputPage.selectedToken); + sendKeys(['Backspace' , 'Backspace']); + expect(multiInputPage.selectedToken).not.toBeDisplayed(); + } else { + multiInputPage.expandDropdown(multiInputPage.activeDropdownButtons, i); + const optionsArr = getAttributeByNameArr(multiInputPage.options, 'ng-reflect-title'); + multiInputPage.selectOption(optionsArr[0]); + click(multiInputPage.approveButton); + expect(getText(multiInputPage.filledInput, i)).toContain(optionsArr[0]); + expect(getText(multiInputPage.filledInput, i).split('\n')[0]).toBe(optionsArr[0]); + click(multiInputPage.selectedToken); + sendKeys(['Backspace' , 'Backspace']); + expect(multiInputPage.selectedToken).not.toBeDisplayed(); + } + } + } + }); + + it('Verify inputs should have placeholder', () => { + const activeInputsQuantity = getElementArrayLength(multiInputPage.activeInputs); + for (let i = 0; i < activeInputsQuantity; i++) { + expect(placeholderValue).toContain(getAttributeByName + (multiInputPage.activeInputs, 'placeholder', i)); + } + }); +});