-
Notifications
You must be signed in to change notification settings - Fork 661
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: upgraded visibility errors (#7319)
<!-- Thank you for your contribution. Before making a PR, please read our contributing guidelines at https://github.com/DevExpress/testcafe/blob/master/CONTRIBUTING.md#code-contribution We recommend creating a *draft* PR, so that you can mark it as 'ready for review' when you are done. --> [closes #7310] ## Purpose Show detailed information in errors when elements are not visible. ## Approach 1. Research visibility cases 2. Refactor current visibility checks 3. Add tests 4. Add check when an element has the property `visibility: collapse` 5. Add rendering messages with detailed visibility information 6. Expand current errors templates with rendered messages ## References #7310 ## Pre-Merge TODO - [X] Write tests for your proposed changes - [x] Make sure that existing tests do not fail Co-authored-by: titerman <43554315+titerman@users.noreply.github.com>
- Loading branch information
Showing
40 changed files
with
628 additions
and
223 deletions.
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
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
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
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
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
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
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
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,112 @@ | ||
| import hammerhead from '../deps/hammerhead'; | ||
| import * as domUtils from '../utils/dom'; | ||
| import * as styleUtils from '../utils/style'; | ||
|
|
||
| const shadowUI = hammerhead.shadowUI; | ||
| const nativeMethods = hammerhead.nativeMethods; | ||
|
|
||
| const OPTION_GROUP_CLASS = 'tcOptionGroup'; | ||
| const OPTION_CLASS = 'tcOption'; | ||
| const DISABLED_CLASS = 'disabled'; | ||
|
|
||
|
|
||
| class SelectController { | ||
| public currentEl: HTMLSelectElement | null; | ||
| public optionList: HTMLElement | null; | ||
| public groups: HTMLElement[]; | ||
| public options: HTMLElement[]; | ||
|
|
||
| constructor () { | ||
| this.currentEl = null; | ||
| this.optionList = null; | ||
| this.groups = []; | ||
| this.options = []; | ||
| } | ||
|
|
||
| _createOption (realOption: HTMLOptionElement, parent: HTMLElement): void { | ||
| const option = document.createElement('div'); | ||
| const isOptionDisabled = realOption.disabled || domUtils.getTagName(realOption.parentElement) === 'optgroup' && | ||
| (realOption.parentElement as HTMLOptGroupElement).disabled; | ||
|
|
||
| // eslint-disable-next-line no-restricted-properties | ||
| const text = domUtils.getTagName(realOption) === 'option' ? (realOption as HTMLOptionElement).text : ''; | ||
|
|
||
| nativeMethods.nodeTextContentSetter.call(option, text); | ||
|
|
||
| parent.appendChild(option); | ||
| shadowUI.addClass(option, OPTION_CLASS); | ||
|
|
||
| if (isOptionDisabled) { | ||
| shadowUI.addClass(option, DISABLED_CLASS); | ||
| styleUtils.set(option, 'color', styleUtils.get(realOption, 'color')); | ||
| } | ||
|
|
||
| this.options.push(option); | ||
| } | ||
|
|
||
| _createGroup (realGroup: HTMLOptGroupElement, parent: HTMLElement): void { | ||
| const group = document.createElement('div'); | ||
|
|
||
| nativeMethods.nodeTextContentSetter.call(group, realGroup.label || ' '); | ||
| parent.appendChild(group); | ||
|
|
||
| shadowUI.addClass(group, OPTION_GROUP_CLASS); | ||
|
|
||
| if (realGroup.disabled) { | ||
| shadowUI.addClass(group, DISABLED_CLASS); | ||
|
|
||
| styleUtils.set(group, 'color', styleUtils.get(realGroup, 'color')); | ||
| } | ||
|
|
||
| this.createChildren(realGroup.children, group); | ||
|
|
||
| this.groups.push(group); | ||
| } | ||
|
|
||
| clear (): void { | ||
| this.optionList = null; | ||
| this.currentEl = null; | ||
| this.options = []; | ||
| this.groups = []; | ||
| } | ||
|
|
||
| createChildren (children: HTMLCollection, parent: HTMLElement): void { | ||
| const childrenLength = domUtils.getChildrenLength(children); | ||
|
|
||
| for (let i = 0; i < childrenLength; i++) { | ||
| if (domUtils.isOptionElement(children[i])) | ||
| this._createOption(children[i] as HTMLOptionElement, parent); | ||
| else if (domUtils.getTagName(children[i]) === 'optgroup') | ||
| this._createGroup(children[i] as HTMLOptGroupElement, parent); | ||
| } | ||
| } | ||
|
|
||
| getEmulatedChildElement (element: HTMLElement): HTMLElement { | ||
| const isGroup = domUtils.getTagName(element) === 'optgroup'; | ||
| const elementIndex = isGroup ? domUtils.getElementIndexInParent(this.currentEl, element) : | ||
| domUtils.getElementIndexInParent(this.currentEl, element); | ||
|
|
||
| if (!isGroup) | ||
| return this.options[elementIndex]; | ||
|
|
||
| return this.groups[elementIndex]; | ||
| } | ||
|
|
||
| isOptionListExpanded (select: HTMLSelectElement): boolean { | ||
| return select ? select === this.currentEl : !!this.currentEl; | ||
| } | ||
|
|
||
| isOptionElementVisible (el: HTMLElement): boolean { | ||
| const parentSelect = domUtils.getSelectParent(el); | ||
|
|
||
| if (!parentSelect) | ||
| return true; | ||
|
|
||
| const expanded = this.isOptionListExpanded(parentSelect); | ||
| const selectSizeValue = styleUtils.getSelectElementSize(parentSelect); | ||
|
|
||
| return expanded || selectSizeValue > 1; | ||
| } | ||
| } | ||
|
|
||
| export default new SelectController(); |
Oops, something went wrong.