Covered object marker component (Core) (#4308)

Covered multi input component (Platform)

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'];

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);
-    };
+    }
 }

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);
+    }
+}

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);
+        }
+    });
+});

e2e/wdio/platform/fixtures/appData/multi-input.page-content.ts

@@ -0,0 +1 @@
+export const alabamaOption = 'Alabama';

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);
+    }
+}

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));
+        }
+    });
+});