forked from EVOgeek/Vmeda.Online
880 lines
31 KiB
TypeScript
880 lines
31 KiB
TypeScript
// (C) Copyright 2015 Moodle Pty 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 { Injectable } from '@angular/core';
|
|
import { CorePromisedValue } from '@classes/promised-value';
|
|
import { CoreWait } from '@singletons/wait';
|
|
import { makeSingleton, NgZone } from '@singletons';
|
|
import { TestingBehatElementLocator, TestingBehatFindOptions } from './behat-runtime';
|
|
|
|
/**
|
|
* Behat Dom Utils helper functions.
|
|
*/
|
|
@Injectable({ providedIn: 'root' })
|
|
export class TestingBehatDomUtilsService {
|
|
|
|
protected static readonly MULTI_ELEM_ALLOWED = ['P', 'SPAN', 'ION-LABEL'];
|
|
|
|
/**
|
|
* Check if an element is clickable.
|
|
*
|
|
* @param element Element.
|
|
* @returns Whether the element is clickable or not.
|
|
*/
|
|
isElementClickable(element: HTMLElement): boolean {
|
|
return element.getAttribute('aria-disabled') !== 'true' && !element.hasAttribute('disabled');
|
|
}
|
|
|
|
/**
|
|
* Check if an element is visible.
|
|
*
|
|
* @param element Element.
|
|
* @param container Container. If set, the function will also check parent elements visibility.
|
|
* @returns Whether the element is visible or not.
|
|
*/
|
|
isElementVisible(element: HTMLElement, container?: HTMLElement): boolean {
|
|
if (element.getAttribute('aria-hidden') === 'true') {
|
|
if (
|
|
element.tagName === 'ION-ROUTER-OUTLET' &&
|
|
element === document.body.querySelector('ion-app > ion-router-outlet') &&
|
|
(document.body.querySelector('ion-toast.hydrated:not(.overlay-hidden)') ||
|
|
!document.body.querySelector(
|
|
'ion-action-sheet.hydrated:not(.overlay-hidden), ion-alert.hydrated:not(.overlay-hidden)\
|
|
ion-loading.hydrated:not(.overlay-hidden), ion-modal.hydrated:not(.overlay-hidden),\
|
|
ion-picker.hydrated:not(.overlay-hidden), ion-popover.hydrated:not(.overlay-hidden)',
|
|
))
|
|
) {
|
|
// Main ion-router-outlet is aria-hidden when a toast is open but the UI is not blocked...
|
|
// It also may be hidden due to an error in Ionic. See fixOverlayAriaHidden function.
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
if (getComputedStyle(element).display === 'none') {
|
|
return false;
|
|
}
|
|
|
|
if (element.tagName === 'SWIPER-SLIDE') {
|
|
// Check if the slide is visible (in the viewport).
|
|
const bounding = element.getBoundingClientRect();
|
|
if (bounding.right <= 0 || bounding.left >= window.innerWidth) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (element.slot === 'content' && element.parentElement?.tagName === 'ION-ACCORDION') {
|
|
return element.parentElement.classList.contains('accordion-expanded');
|
|
}
|
|
|
|
if (!container) {
|
|
return true;
|
|
}
|
|
|
|
const parentElement = this.getParentElement(element);
|
|
if (parentElement === container) {
|
|
return true;
|
|
}
|
|
|
|
if (!parentElement) {
|
|
return false;
|
|
}
|
|
|
|
return this.isElementVisible(parentElement, container);
|
|
}
|
|
|
|
/**
|
|
* Check if an element is selected.
|
|
*
|
|
* @param element Element.
|
|
* @param firstCall Whether this is the first call of the function.
|
|
* @returns Whether the element is selected or not.
|
|
*/
|
|
isElementSelected(element: HTMLElement, firstCall = true): boolean {
|
|
const ariaCurrent = element.getAttribute('aria-current');
|
|
const ariaSelected = element.getAttribute('aria-selected');
|
|
const ariaChecked = element.getAttribute('aria-checked');
|
|
|
|
if (ariaCurrent || ariaSelected || ariaChecked) {
|
|
return (!!ariaCurrent && ariaCurrent !== 'false') ||
|
|
(!!ariaSelected && ariaSelected === 'true') ||
|
|
(!!ariaChecked && ariaChecked === 'true');
|
|
}
|
|
|
|
if (firstCall) {
|
|
const inputElement = element.closest('ion-checkbox, ion-radio, ion-toggle')?.querySelector('input');
|
|
if (inputElement) {
|
|
return inputElement.value === 'on';
|
|
}
|
|
|
|
const tabButtonElement = element.closest('ion-tab-button');
|
|
if (tabButtonElement?.classList.contains('tab-selected')) {
|
|
return true;
|
|
}
|
|
}
|
|
|
|
const parentElement = this.getParentElement(element);
|
|
if (!parentElement || parentElement.classList.contains('ion-page')) {
|
|
return false;
|
|
}
|
|
|
|
return this.isElementSelected(parentElement, false);
|
|
}
|
|
|
|
/**
|
|
* Finds elements within a given container with exact info.
|
|
*
|
|
* @param container Parent element to search the element within
|
|
* @param text Text to look for
|
|
* @param options Search options.
|
|
* @returns Elements containing the given text with exact boolean.
|
|
*/
|
|
protected findElementsBasedOnTextWithinWithExact(
|
|
container: HTMLElement,
|
|
text: string | string[],
|
|
options: TestingBehatFindOptions,
|
|
): ElementsWithExact[] {
|
|
if (Array.isArray(text)) {
|
|
return text.map((text) => this.findElementsBasedOnTextWithinWithExact(container, text, options)).flat();
|
|
}
|
|
|
|
// Escape double quotes to prevent breaking the query selector.
|
|
const escapedText = text.replace(/"/g, '\\"');
|
|
const attributesSelector = `[aria-label*="${escapedText}"], a[title*="${escapedText}"], ` +
|
|
`img[alt*="${escapedText}"], [placeholder*="${escapedText}"]`;
|
|
|
|
const elements = Array.from(container.querySelectorAll<HTMLElement>(attributesSelector))
|
|
.filter(
|
|
element => this.isElementVisible(element, container) &&
|
|
(!options.onlyClickable || this.isElementClickable(element)),
|
|
)
|
|
.map((element) => {
|
|
const exact = this.checkElementLabel(element, text);
|
|
|
|
return { element, exact };
|
|
});
|
|
|
|
const treeWalker = document.createTreeWalker(
|
|
container,
|
|
NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_DOCUMENT_FRAGMENT | NodeFilter.SHOW_TEXT, // eslint-disable-line no-bitwise
|
|
{
|
|
acceptNode: node => {
|
|
if (
|
|
node instanceof HTMLStyleElement ||
|
|
node instanceof HTMLLinkElement ||
|
|
node instanceof HTMLScriptElement
|
|
) {
|
|
return NodeFilter.FILTER_REJECT;
|
|
}
|
|
|
|
if (!(node instanceof HTMLElement)) {
|
|
return NodeFilter.FILTER_ACCEPT;
|
|
}
|
|
|
|
if (options.onlyClickable && !this.isElementClickable(node)) {
|
|
return NodeFilter.FILTER_REJECT;
|
|
}
|
|
|
|
if (!this.isElementVisible(node)) {
|
|
return NodeFilter.FILTER_REJECT;
|
|
}
|
|
|
|
return NodeFilter.FILTER_ACCEPT;
|
|
},
|
|
},
|
|
);
|
|
|
|
let fallbackCandidates: ElementsWithExact[] = [];
|
|
let currentNode: Node | null = null;
|
|
// eslint-disable-next-line no-cond-assign
|
|
while (currentNode = treeWalker.nextNode()) {
|
|
if (currentNode instanceof Text) {
|
|
if (currentNode.textContent?.includes(text) && currentNode.parentElement) {
|
|
elements.push({
|
|
element: currentNode.parentElement,
|
|
exact: currentNode.textContent.trim() === text,
|
|
});
|
|
}
|
|
|
|
continue;
|
|
}
|
|
|
|
if (currentNode instanceof HTMLElement) {
|
|
const labelledBy = currentNode.getAttribute('aria-labelledby');
|
|
const labelElement = labelledBy && container.querySelector<HTMLElement>(`#${labelledBy}`);
|
|
if (labelElement && labelElement.innerText && labelElement.innerText.includes(text)) {
|
|
elements.push({
|
|
element: currentNode,
|
|
exact: labelElement.innerText.trim() == text,
|
|
});
|
|
|
|
continue;
|
|
}
|
|
}
|
|
|
|
if (currentNode instanceof Element && currentNode.shadowRoot) {
|
|
for (const childNode of Array.from(currentNode.shadowRoot.childNodes)) {
|
|
if (!(childNode instanceof HTMLElement) || (
|
|
childNode instanceof HTMLStyleElement ||
|
|
childNode instanceof HTMLLinkElement ||
|
|
childNode instanceof HTMLScriptElement)) {
|
|
continue;
|
|
}
|
|
|
|
if (childNode.matches(attributesSelector)) {
|
|
elements.push({
|
|
element: childNode,
|
|
exact: this.checkElementLabel(childNode, text),
|
|
});
|
|
|
|
continue;
|
|
}
|
|
|
|
elements.push(...this.findElementsBasedOnTextWithinWithExact(childNode, text, options));
|
|
}
|
|
}
|
|
|
|
// Allow searching text split into different elements in some cases.
|
|
if (
|
|
elements.length === 0 &&
|
|
currentNode instanceof HTMLElement &&
|
|
TestingBehatDomUtilsService.MULTI_ELEM_ALLOWED.includes(currentNode.tagName) &&
|
|
currentNode.innerText.includes(text)
|
|
) {
|
|
// Only keep the child elements in the candidates list.
|
|
fallbackCandidates = fallbackCandidates.filter(entry => !entry.element.contains(currentNode));
|
|
fallbackCandidates.push({
|
|
element: currentNode,
|
|
exact: currentNode.innerText.trim() == text,
|
|
});
|
|
}
|
|
}
|
|
|
|
return elements.length > 0 ? elements : fallbackCandidates;
|
|
}
|
|
|
|
/**
|
|
* Checks an element has exactly the same label (title, alt or aria-label).
|
|
*
|
|
* @param element Element to check.
|
|
* @param text Text to check.
|
|
* @returns If text matches any of the label attributes.
|
|
*/
|
|
protected checkElementLabel(element: HTMLElement, text: string): boolean {
|
|
return element.title === text ||
|
|
element.getAttribute('alt') === text ||
|
|
element.getAttribute('aria-label') === text ||
|
|
element.getAttribute('placeholder') === text;
|
|
}
|
|
|
|
/**
|
|
* Finds elements within a given container.
|
|
*
|
|
* @param container Parent element to search the element within.
|
|
* @param text Text to look for.
|
|
* @param options Search options.
|
|
* @returns Elements containing the given text.
|
|
*/
|
|
protected findElementsBasedOnTextWithin(
|
|
container: HTMLElement,
|
|
text: string | string[],
|
|
options: TestingBehatFindOptions,
|
|
): HTMLElement[] {
|
|
const elements = this.findElementsBasedOnTextWithinWithExact(container, text, options);
|
|
|
|
// Give more relevance to exact matches.
|
|
elements.sort((a, b) => Number(b.exact) - Number(a.exact));
|
|
|
|
return elements.map(element => element.element);
|
|
}
|
|
|
|
/**
|
|
* Given a list of elements, get the top ancestors among all of them.
|
|
*
|
|
* This will remove duplicates and drop any elements nested within each other.
|
|
*
|
|
* @param elements Elements list.
|
|
* @returns Top ancestors.
|
|
*/
|
|
protected getTopAncestors(elements: HTMLElement[]): HTMLElement[] {
|
|
const uniqueElements = new Set(elements);
|
|
|
|
for (const element of uniqueElements) {
|
|
for (const otherElement of uniqueElements) {
|
|
if (otherElement === element) {
|
|
continue;
|
|
}
|
|
|
|
let documentPosition = element.compareDocumentPosition(otherElement);
|
|
// eslint-disable-next-line no-bitwise
|
|
if (documentPosition & Node.DOCUMENT_POSITION_DISCONNECTED) {
|
|
// Check if they are inside shadow DOM so we can compare their hosts.
|
|
const elementHost = this.getShadowDOMHost(element) || element;
|
|
const otherElementHost = this.getShadowDOMHost(otherElement) || otherElement;
|
|
|
|
documentPosition = elementHost.compareDocumentPosition(otherElementHost);
|
|
}
|
|
|
|
// eslint-disable-next-line no-bitwise
|
|
if (documentPosition & Node.DOCUMENT_POSITION_CONTAINS) {
|
|
uniqueElements.delete(otherElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
return Array.from(uniqueElements);
|
|
}
|
|
|
|
/**
|
|
* Get parent element, including Shadow DOM parents.
|
|
*
|
|
* @param element Element.
|
|
* @returns Parent element.
|
|
*/
|
|
protected getParentElement(element: HTMLElement): HTMLElement | null {
|
|
return element.parentElement || this.getShadowDOMHost(element);
|
|
}
|
|
|
|
/**
|
|
* Get shadow DOM host element.
|
|
*
|
|
* @param element Element.
|
|
* @returns Shadow DOM host element.
|
|
*/
|
|
protected getShadowDOMHost(element: HTMLElement): HTMLElement | null {
|
|
const node = element.getRootNode();
|
|
if (node instanceof ShadowRoot) {
|
|
return node.host as HTMLElement;
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
/**
|
|
* Get closest element matching a selector, without traversing up a given container.
|
|
*
|
|
* @param element Element.
|
|
* @param selector Selector.
|
|
* @param container Topmost container to search within.
|
|
* @returns Closest matching element.
|
|
*/
|
|
protected getClosestMatching(element: HTMLElement, selector: string, container: HTMLElement | null): HTMLElement | null {
|
|
if (element.matches(selector)) {
|
|
return element;
|
|
}
|
|
|
|
const parent = this.getParentElement(element);
|
|
if (element === container || !parent) {
|
|
return null;
|
|
}
|
|
|
|
return this.getClosestMatching(parent, selector, container);
|
|
}
|
|
|
|
/**
|
|
* Function to find top container elements.
|
|
*
|
|
* @param containerName Whether to search inside the a container name.
|
|
* @returns Found top container elements.
|
|
*/
|
|
protected getCurrentTopContainerElements(containerName?: string): HTMLElement[] {
|
|
let containers = Array.from(document.body.querySelectorAll<HTMLElement>([
|
|
'ion-alert.hydrated:not(.overlay-hidden)',
|
|
'ion-popover.hydrated:not(.overlay-hidden)',
|
|
'ion-action-sheet.hydrated:not(.overlay-hidden)',
|
|
'ion-modal.hydrated:not(.overlay-hidden)',
|
|
'core-user-tours-user-tour.is-active',
|
|
'ion-toast.hydrated:not(.overlay-hidden)',
|
|
'page-core-mainmenu > ion-tabs:not(.tabshidden) > .mainmenu-tabs',
|
|
'page-core-mainmenu > .core-network-message',
|
|
'.ion-page:not(.ion-page-hidden)',
|
|
].join(', ')));
|
|
const ionApp = document.querySelector<HTMLElement>('ion-app') ?? undefined;
|
|
|
|
containers = containers
|
|
.filter(container => {
|
|
|
|
if (container.tagName === 'ION-ALERT') {
|
|
// For some reason, in Behat sometimes alerts aren't removed from DOM, the close animation doesn't finish.
|
|
// Filter alerts with pointer-events none since that style is set before the close animation starts.
|
|
return container.style.pointerEvents !== 'none';
|
|
}
|
|
|
|
// Avoid searching in the whole app.
|
|
if (container.tagName === 'ION-APP' || container.tagName === 'PAGE-CORE-MAINMENU') {
|
|
return false;
|
|
}
|
|
|
|
// Ignore not visible containers.
|
|
return this.isElementVisible(container, ionApp);
|
|
})
|
|
// Sort them by z-index.
|
|
.sort((a, b) => Number(getComputedStyle(b).zIndex) - Number(getComputedStyle(a).zIndex));
|
|
|
|
if (containerName === 'split-view content') {
|
|
|
|
let splitViewContainer: HTMLElement | null = null;
|
|
|
|
// Find non hidden pages inside the containers.
|
|
containers.some(container => {
|
|
if (!container.classList.contains('ion-page')) {
|
|
return false;
|
|
}
|
|
if (container.closest('ion-router-outlet.content-outlet')) {
|
|
splitViewContainer = container;
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
});
|
|
|
|
return splitViewContainer ? [splitViewContainer] : [];
|
|
}
|
|
|
|
// Get containers until one blocks other views.
|
|
const topContainers: HTMLElement[] = [];
|
|
containers.some(container => {
|
|
if (container.tagName === 'ION-TOAST') {
|
|
container = container.shadowRoot?.querySelector('.toast-container') || container;
|
|
}
|
|
topContainers.push(container);
|
|
|
|
// If container has backdrop it blocks the rest of the UI.
|
|
return container.querySelector(':scope > ion-backdrop') || container.classList.contains('backdrop');
|
|
});
|
|
|
|
return topContainers;
|
|
}
|
|
|
|
/**
|
|
* Find a field.
|
|
*
|
|
* @param field Field name.
|
|
* @returns Field element.
|
|
*/
|
|
findField(field: string): HTMLElement | HTMLInputElement | undefined {
|
|
const selector =
|
|
'input, textarea, core-rich-text-editor, [contenteditable="true"], ion-select, ion-datetime-button, ion-datetime';
|
|
|
|
let input = this.findElementBasedOnText(
|
|
{ text: field, selector },
|
|
{ onlyClickable: false },
|
|
);
|
|
|
|
if (input?.tagName === 'CORE-RICH-TEXT-EDITOR') {
|
|
input = input.querySelector<HTMLElement>('[contenteditable="true"]') || undefined;
|
|
}
|
|
|
|
if (input) {
|
|
return input;
|
|
}
|
|
|
|
const label = this.findElementBasedOnText(
|
|
{ text: field, selector: 'label' },
|
|
{ onlyClickable: false },
|
|
);
|
|
|
|
if (label) {
|
|
const inputId = label.getAttribute('for');
|
|
|
|
if (inputId) {
|
|
const element = document.getElementById(inputId) || undefined;
|
|
if (element?.tagName !== 'ION-DATETIME-BUTTON') {
|
|
return element;
|
|
}
|
|
|
|
// Search the ion-datetime associated with the button.
|
|
const datetimeId = (<HTMLIonDatetimeButtonElement> element).datetime;
|
|
const datetime = document.body.querySelector<HTMLElement>(`ion-datetime#${datetimeId}`);
|
|
|
|
return datetime || undefined;
|
|
}
|
|
|
|
input = this.getShadowDOMHost(label) || undefined;
|
|
|
|
// Add support for other input types if required by adding them to the array.
|
|
const ionicInputFields = ['ION-INPUT', 'ION-TEXTAREA', 'ION-SELECT', 'ION-DATETIME', 'ION-TOGGLE'];
|
|
if (input && ionicInputFields.includes(input.tagName)) {
|
|
return input;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Function to find element based on their text or Aria label.
|
|
*
|
|
* @param locator Element locator.
|
|
* @param options Search options.
|
|
* @returns First found element.
|
|
*/
|
|
findElementBasedOnText(
|
|
locator: TestingBehatElementLocator,
|
|
options: TestingBehatFindOptions = {},
|
|
): HTMLElement | undefined {
|
|
if (Array.isArray(locator.text)) {
|
|
for (const text of locator.text) {
|
|
const element = this.findElementBasedOnText({ ...locator, text });
|
|
if (element) {
|
|
return element;
|
|
}
|
|
}
|
|
|
|
return undefined;
|
|
}
|
|
|
|
// Remove extra spaces.
|
|
const treatedText = locator.text.trim().replace(/\s\s+/g, ' ');
|
|
if (treatedText !== locator.text) {
|
|
const element = this.findElementsBasedOnText({
|
|
...locator,
|
|
text: treatedText,
|
|
}, options)[0];
|
|
|
|
if (element) {
|
|
return element;
|
|
}
|
|
}
|
|
|
|
return this.findElementsBasedOnText(locator, options)[0];
|
|
}
|
|
|
|
/**
|
|
* Wait until an element with the given selector is found.
|
|
*
|
|
* @param selector Element selector.
|
|
* @param timeout Timeout after which an error is thrown.
|
|
* @param retryFrequency Frequency for retries when the element is not found.
|
|
* @returns Element.
|
|
*/
|
|
async waitForElement<T extends HTMLElement = HTMLElement>(
|
|
selector: string,
|
|
timeout: number = 2000,
|
|
retryFrequency: number = 100,
|
|
): Promise<T> {
|
|
const element = document.body.querySelector<T>(selector);
|
|
|
|
if (!element) {
|
|
if (timeout < retryFrequency) {
|
|
throw new Error(`Element with '${selector}' selector not found`);
|
|
}
|
|
|
|
await new Promise(resolve => setTimeout(resolve, retryFrequency));
|
|
|
|
return this.waitForElement<T>(selector, timeout - retryFrequency, retryFrequency);
|
|
}
|
|
|
|
return element;
|
|
}
|
|
|
|
/**
|
|
* Function to find elements based on their text or Aria label.
|
|
*
|
|
* @param locator Element locator.
|
|
* @param options Search options.
|
|
* @returns Found elements
|
|
*/
|
|
protected findElementsBasedOnText(
|
|
locator: TestingBehatElementLocator,
|
|
options: TestingBehatFindOptions,
|
|
): HTMLElement[] {
|
|
const topContainers = this.getCurrentTopContainerElements(options.containerName);
|
|
let elements: HTMLElement[] = [];
|
|
|
|
topContainers.some((container) => {
|
|
elements = this.findElementsBasedOnTextInContainer(locator, container, options);
|
|
|
|
return elements.length > 0;
|
|
});
|
|
|
|
return elements;
|
|
}
|
|
|
|
/**
|
|
* Function to find elements based on their text or Aria label.
|
|
*
|
|
* @param locator Element locator.
|
|
* @param topContainer Container to search in.
|
|
* @param options Search options.
|
|
* @returns Found elements
|
|
*/
|
|
protected findElementsBasedOnTextInContainer(
|
|
locator: TestingBehatElementLocator,
|
|
topContainer: HTMLElement,
|
|
options: TestingBehatFindOptions = {},
|
|
): HTMLElement[] {
|
|
let container: HTMLElement | null = topContainer;
|
|
|
|
if (locator.within) {
|
|
const withinElements = this.findElementsBasedOnTextInContainer(locator.within, topContainer, options);
|
|
|
|
if (withinElements.length === 0) {
|
|
return [];
|
|
} else if (withinElements.length > 1) {
|
|
const withinElementsAncestors = this.getTopAncestors(withinElements);
|
|
|
|
if (withinElementsAncestors.length > 1) {
|
|
// Too many matches for within text.
|
|
return [];
|
|
}
|
|
|
|
topContainer = container = withinElementsAncestors[0];
|
|
} else {
|
|
topContainer = container = withinElements[0];
|
|
}
|
|
}
|
|
|
|
if (topContainer && locator.near) {
|
|
const nearElements = this.findElementsBasedOnTextInContainer(locator.near, topContainer, {
|
|
...options,
|
|
onlyClickable: false,
|
|
});
|
|
|
|
if (nearElements.length === 0) {
|
|
return [];
|
|
} else if (nearElements.length > 1) {
|
|
const nearElementsAncestors = this.getTopAncestors(nearElements);
|
|
|
|
if (nearElementsAncestors.length > 1) {
|
|
// Too many matches for near text.
|
|
return [];
|
|
}
|
|
|
|
container = this.getParentElement(nearElementsAncestors[0]);
|
|
} else {
|
|
container = this.getParentElement(nearElements[0]);
|
|
}
|
|
}
|
|
|
|
do {
|
|
if (!container) {
|
|
break;
|
|
}
|
|
|
|
const elements = this.findElementsBasedOnTextWithin(container, locator.text, options);
|
|
|
|
let filteredElements: HTMLElement[] = elements;
|
|
|
|
if (locator.selector) {
|
|
filteredElements = [];
|
|
const selector = locator.selector;
|
|
|
|
elements.forEach((element) => {
|
|
const closest = this.getClosestMatching(element, selector, container);
|
|
if (closest) {
|
|
filteredElements.push(closest);
|
|
}
|
|
});
|
|
}
|
|
|
|
if (filteredElements.length > 0) {
|
|
return filteredElements;
|
|
}
|
|
|
|
} while (container !== topContainer && (container = this.getParentElement(container)) && container !== topContainer);
|
|
|
|
return [];
|
|
}
|
|
|
|
/**
|
|
* Make sure that an element is visible and wait to trigger the callback.
|
|
*
|
|
* @param element Element.
|
|
* @returns Promise resolved with the DOM rectangle.
|
|
*/
|
|
protected async ensureElementVisible(element: HTMLElement): Promise<DOMRect> {
|
|
const initialRect = element.getBoundingClientRect();
|
|
|
|
element.scrollIntoView(false);
|
|
|
|
const promise = new CorePromisedValue<DOMRect>();
|
|
|
|
requestAnimationFrame(() => {
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
if (initialRect.y !== rect.y) {
|
|
setTimeout(() => {
|
|
promise.resolve(rect);
|
|
}, 300);
|
|
|
|
return;
|
|
}
|
|
|
|
promise.resolve(rect);
|
|
});
|
|
|
|
return promise;
|
|
}
|
|
|
|
/**
|
|
* Press an element.
|
|
*
|
|
* @param element Element to press.
|
|
*/
|
|
async pressElement(element: HTMLElement): Promise<void> {
|
|
await NgZone.run(async () => {
|
|
const promise = new CorePromisedValue<void>();
|
|
|
|
// Events don't bubble up across Shadow DOM boundaries, and some buttons
|
|
// may not work without doing this.
|
|
const parentElement = this.getParentElement(element);
|
|
|
|
if (parentElement?.matches('ion-button, ion-back-button')) {
|
|
element = parentElement;
|
|
} else if (parentElement?.tagName === 'ION-ITEM' && parentElement?.classList.contains('clickable')) {
|
|
element = parentElement.querySelector<HTMLElement>('ion-toggle') || element;
|
|
}
|
|
|
|
const rect = await this.ensureElementVisible(element);
|
|
|
|
// Simulate a mouse click on the button.
|
|
const eventOptions: MouseEventInit = {
|
|
clientX: rect.left + rect.width / 2,
|
|
clientY: rect.top + rect.height / 2,
|
|
bubbles: true,
|
|
view: window,
|
|
cancelable: true,
|
|
};
|
|
|
|
// There are some buttons in the app that don't respond to click events, for example
|
|
// buttons using the core-supress-events directive. That's why we need to send both
|
|
// click and mouse events.
|
|
element.dispatchEvent(new MouseEvent('mousedown', eventOptions));
|
|
|
|
setTimeout(() => {
|
|
element.dispatchEvent(new MouseEvent('mouseup', eventOptions));
|
|
element.click();
|
|
|
|
promise.resolve();
|
|
}, 300);
|
|
|
|
return promise;
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Set an input element value.
|
|
*
|
|
* @param element Input element.
|
|
* @param value Value.
|
|
*/
|
|
async setInputValue(element: HTMLInputElement | HTMLElement, value: string): Promise<void> {
|
|
await NgZone.run(async () => {
|
|
// Functions to get/set value depending on field type.
|
|
const setValue = async (text: string) => {
|
|
if (element.tagName === 'ION-SELECT') {
|
|
this.setIonSelectInputValue(element, value);
|
|
} else if ('value' in element) {
|
|
element.value = text;
|
|
} else {
|
|
element.innerHTML = text;
|
|
}
|
|
|
|
element.dispatchEvent(new Event('ionChange'));
|
|
};
|
|
|
|
const getValue = () => {
|
|
if ('value' in element) {
|
|
return element.value;
|
|
} else {
|
|
return element.innerHTML;
|
|
}
|
|
};
|
|
|
|
// Pretend we have cut and pasted the new text.
|
|
if (element.tagName !== 'ION-SELECT' && getValue() !== '') {
|
|
await CoreWait.nextTick();
|
|
await setValue('');
|
|
|
|
element.dispatchEvent(new InputEvent('input', {
|
|
bubbles: true,
|
|
view: window,
|
|
cancelable: true,
|
|
inputType: 'deleteByCut',
|
|
}));
|
|
}
|
|
|
|
if (value !== '') {
|
|
await CoreWait.nextTick();
|
|
await setValue(value);
|
|
|
|
element.dispatchEvent(new InputEvent('input', {
|
|
bubbles: true,
|
|
view: window,
|
|
cancelable: true,
|
|
inputType: 'insertFromPaste',
|
|
data: value,
|
|
}));
|
|
}
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Select an option in an ion-select element.
|
|
*
|
|
* @param element IonSelect element.
|
|
* @param value Value.
|
|
*/
|
|
protected async setIonSelectInputValue(element: HTMLElement, value: string): Promise<void> {
|
|
// Press select.
|
|
await TestingBehatDomUtils.pressElement(element);
|
|
|
|
// Press option.
|
|
type IonSelectInterface = 'alert' | 'action-sheet' | 'popover';
|
|
const selectInterface = element.getAttribute('interface') as IonSelectInterface ?? 'alert';
|
|
const containerSelector = ({
|
|
'alert': 'ion-alert.select-alert',
|
|
'action-sheet': 'ion-action-sheet.select-action-sheet',
|
|
'popover': 'ion-popover.select-popover',
|
|
})[selectInterface];
|
|
const optionSelector = ({
|
|
'alert': 'button',
|
|
'action-sheet': 'button',
|
|
'popover': 'ion-radio',
|
|
})[selectInterface] ?? '';
|
|
const optionsContainer = await TestingBehatDomUtils.waitForElement(containerSelector);
|
|
const options = this.findElementsBasedOnTextInContainer(
|
|
{ text: value, selector: optionSelector },
|
|
optionsContainer,
|
|
{},
|
|
);
|
|
|
|
if (options.length === 0) {
|
|
throw new Error('Couldn\'t find ion-select option.');
|
|
}
|
|
|
|
await TestingBehatDomUtils.pressElement(options[0]);
|
|
|
|
// Press options submit.
|
|
if (selectInterface === 'alert') {
|
|
const submitButton = optionsContainer.querySelector<HTMLElement>('.alert-button-group button:last-child');
|
|
|
|
if (!submitButton) {
|
|
throw new Error('Couldn\'t find ion-select submit button.');
|
|
}
|
|
|
|
await TestingBehatDomUtils.pressElement(submitButton);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
export const TestingBehatDomUtils = makeSingleton(TestingBehatDomUtilsService);
|
|
|
|
type ElementsWithExact = {
|
|
element: HTMLElement;
|
|
exact: boolean;
|
|
};
|