-
Notifications
You must be signed in to change notification settings - Fork 125
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Covered object marker component (Core) (#4308)
Covered multi input component (Platform)
- Loading branch information
Showing
7 changed files
with
312 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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']; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,5 +21,5 @@ export class CoreBaseComponentPo { | |
|
||
open(url: string): void { | ||
open('fundamental-ngx#/core' + url); | ||
}; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export const alabamaOption = 'Alabama'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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)); | ||
} | ||
}); | ||
}); |