From 7b61a836b9b6a1d9a3f953ccb2aa58c17d93b0d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Thu, 22 Aug 2024 14:40:40 +0200 Subject: [PATCH] MOBILE-4616 behat: ion-page is not a valid element anymore --- src/testing/services/behat-dom.ts | 44 ++++++++++++++------------- src/testing/services/behat-runtime.ts | 17 +++++------ 2 files changed, 30 insertions(+), 31 deletions(-) diff --git a/src/testing/services/behat-dom.ts b/src/testing/services/behat-dom.ts index 94fa3e803..5ec3e31e7 100644 --- a/src/testing/services/behat-dom.ts +++ b/src/testing/services/behat-dom.ts @@ -369,9 +369,8 @@ export class TestingBehatDomUtilsService { * @param containerName Whether to search inside the a container name. * @returns Found top container elements. */ - protected getCurrentTopContainerElements(containerName: string): HTMLElement[] { - const topContainers: HTMLElement[] = []; - let containers = Array.from(document.querySelectorAll([ + protected getCurrentTopContainerElements(containerName?: string): HTMLElement[] { + let containers = Array.from(document.body.querySelectorAll([ 'ion-alert.hydrated', 'ion-popover.hydrated', 'ion-action-sheet.hydrated', @@ -395,13 +394,15 @@ export class TestingBehatDomUtilsService { return container.style.pointerEvents !== 'none'; } - // Ignore pages that are inside other visible pages. - return container.tagName !== 'ION-PAGE' || !container.closest('.ion-page.ion-page-hidden'); + return true; }) // 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')) { @@ -409,18 +410,20 @@ export class TestingBehatDomUtilsService { } const pageContainers = Array.from(container.querySelectorAll('.ion-page:not(.ion-page-hidden)')); - let topContainer = pageContainers.find((page) => !page.closest('.ion-page.ion-page-hidden')) ?? null; + const topContainer = pageContainers.find((page) => !page.closest('.ion-page.ion-page-hidden')) ?? null; - topContainer = (topContainer || container).querySelector('core-split-view ion-router-outlet'); - topContainer && topContainers.push(topContainer); + splitViewContainer = (topContainer || container).querySelector( + 'core-split-view ion-router-outlet', + ); - return !!topContainer; + return !!splitViewContainer; }); - return topContainers; + 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; @@ -446,7 +449,7 @@ export class TestingBehatDomUtilsService { let input = this.findElementBasedOnText( { text: field, selector }, - { onlyClickable: false, containerName: '' }, + { onlyClickable: false }, ); if (input?.tagName === 'CORE-RICH-TEXT-EDITOR') { @@ -459,7 +462,7 @@ export class TestingBehatDomUtilsService { const label = this.findElementBasedOnText( { text: field, selector: 'label' }, - { onlyClickable: false, containerName: '' }, + { onlyClickable: false }, ); if (label) { @@ -473,7 +476,7 @@ export class TestingBehatDomUtilsService { // Search the ion-datetime associated with the button. const datetimeId = ( element).datetime; - const datetime = document.querySelector(`ion-datetime#${datetimeId}`); + const datetime = document.body.querySelector(`ion-datetime#${datetimeId}`); return datetime || undefined; } @@ -539,7 +542,7 @@ export class TestingBehatDomUtilsService { timeout: number = 2000, retryFrequency: number = 100, ): Promise { - const element = document.querySelector(selector); + const element = document.body.querySelector(selector); if (!element) { if (timeout < retryFrequency) { @@ -565,15 +568,14 @@ export class TestingBehatDomUtilsService { locator: TestingBehatElementLocator, options: TestingBehatFindOptions, ): HTMLElement[] { - const topContainers = this.getCurrentTopContainerElements(options.containerName ?? ''); + const topContainers = this.getCurrentTopContainerElements(options.containerName); let elements: HTMLElement[] = []; - for (let i = 0; i < topContainers.length; i++) { - elements = elements.concat(this.findElementsBasedOnTextInContainer(locator, topContainers[i], options)); - if (elements.length) { - break; - } - } + topContainers.some((container) => { + elements = this.findElementsBasedOnTextInContainer(locator, container, options); + + return elements.length > 0; + }); return elements; } diff --git a/src/testing/services/behat-runtime.ts b/src/testing/services/behat-runtime.ts index b5530f8d7..6c0277878 100644 --- a/src/testing/services/behat-runtime.ts +++ b/src/testing/services/behat-runtime.ts @@ -188,7 +188,6 @@ export class TestingBehatRuntimeService { let foundButton: HTMLElement | undefined; const options: TestingBehatFindOptions = { onlyClickable: true, - containerName: '', }; switch (button) { @@ -235,11 +234,11 @@ export class TestingBehatRuntimeService { const backdrops = [ ...Array - .from(document.querySelectorAll('ion-popover, ion-modal')) + .from(document.body.querySelectorAll('ion-popover, ion-modal')) .map(popover => popover.shadowRoot?.querySelector('ion-backdrop')) .filter(backdrop => !!backdrop), ...Array - .from(document.querySelectorAll('ion-backdrop')) + .from(document.body.querySelectorAll('ion-backdrop')) .filter(backdrop => !!backdrop.offsetParent), ]; @@ -272,7 +271,6 @@ export class TestingBehatRuntimeService { try { const element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false, - containerName: '', ...options, }); @@ -298,7 +296,7 @@ export class TestingBehatRuntimeService { this.log('Action - scrollTo', { locator }); try { - let element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false, containerName: '' }); + let element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false }); if (!element) { return 'ERROR: No element matches element to scroll to.'; @@ -365,7 +363,7 @@ export class TestingBehatRuntimeService { try { const infiniteLoading = Array - .from(document.querySelectorAll('core-infinite-loading')) + .from(document.body.querySelectorAll('core-infinite-loading')) .find(element => !element.closest('.ion-page-hidden')); if (!infiniteLoading) { @@ -411,7 +409,7 @@ export class TestingBehatRuntimeService { this.log('Action - Is Selected', locator); try { - const element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false, containerName: '' }); + const element = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: false }); if (!element) { return 'ERROR: No element matches locator to find.'; @@ -441,7 +439,7 @@ export class TestingBehatRuntimeService { this.log('Action - Press', locator); try { - const found = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: true, containerName: '' }); + const found = TestingBehatDomUtils.findElementBasedOnText(locator, { onlyClickable: true }); if (!found) { return 'ERROR: No element matches locator to press.'; @@ -523,7 +521,7 @@ export class TestingBehatRuntimeService { getHeader(): string { this.log('Action - Get header'); - const getBySelector = (selector: string ) => Array.from(document.querySelectorAll(selector)) + const getBySelector = (selector: string ) => Array.from(document.body.querySelectorAll(selector)) .filter((title) => TestingBehatDomUtils.isElementVisible(title, document.body)) .map((title) => title.innerText.trim()) .filter((title) => title.length > 0); @@ -650,7 +648,6 @@ export class TestingBehatRuntimeService { if (referenceLocator) { startingElement = TestingBehatDomUtils.findElementBasedOnText(referenceLocator, { onlyClickable: false, - containerName: '', }); if (!startingElement) {