From 143b55a1a4ff24611735eb415651d583bf67f9be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Fri, 23 Aug 2024 15:35:17 +0200 Subject: [PATCH] MOBILE-4636 behat: Correct container visibility and narrow search --- .../behat/contact_privacy_officer.feature | 2 +- .../tests/behat/my_data_requests.feature | 2 +- src/core/services/modals.ts | 2 +- src/core/utils/fix-aria-hidden.ts | 2 +- src/testing/services/behat-dom.ts | 58 ++++++++++++++----- 5 files changed, 49 insertions(+), 17 deletions(-) diff --git a/src/core/features/dataprivacy/tests/behat/contact_privacy_officer.feature b/src/core/features/dataprivacy/tests/behat/contact_privacy_officer.feature index b02fd7853f6..7cfd8a9bd2d 100644 --- a/src/core/features/dataprivacy/tests/behat/contact_privacy_officer.feature +++ b/src/core/features/dataprivacy/tests/behat/contact_privacy_officer.feature @@ -24,4 +24,4 @@ Feature: Contact the privacy officer Scenario: Contacting the privacy officer when not enabled When I entered the app as "student1" And I press the user menu button in the app - Then I should not find ""Data privacy" in the app + Then I should not find "Data privacy" in the app diff --git a/src/core/features/dataprivacy/tests/behat/my_data_requests.feature b/src/core/features/dataprivacy/tests/behat/my_data_requests.feature index ba3715fa2f1..dc362fb98d8 100644 --- a/src/core/features/dataprivacy/tests/behat/my_data_requests.feature +++ b/src/core/features/dataprivacy/tests/behat/my_data_requests.feature @@ -19,6 +19,6 @@ Feature: Manage my own data requests And I set the field "Message" to "Hello DPO!" in the app And I press "Send" in the app Then I should find "Your request has been submitted to the privacy officer" in the app - When I press "Cancel" near "Hello DPO!" in the app + When I press "Cancel request" near "Hello DPO!" in the app And I press "Cancel request" "button" in the app Then I should find "Cancelled" near "Hello DPO!" in the app diff --git a/src/core/services/modals.ts b/src/core/services/modals.ts index 13df097d737..91d9a67b424 100644 --- a/src/core/services/modals.ts +++ b/src/core/services/modals.ts @@ -48,7 +48,7 @@ export class CoreModalsService { // eslint-disable-next-line max-len // See https://github.com/ionic-team/ionic-framework/blob/a9b12a5aa4c150a1f8a80a826dda0df350bc0092/core/src/utils/overlays.ts#L39 - const overlays = document.querySelectorAll( + const overlays = document.body.querySelectorAll( 'ion-action-sheet, ion-alert, ion-loading, ion-modal, ion-picker, ion-popover, ion-toast', ); diff --git a/src/core/utils/fix-aria-hidden.ts b/src/core/utils/fix-aria-hidden.ts index 68ef2f85be2..b0dc5249117 100644 --- a/src/core/utils/fix-aria-hidden.ts +++ b/src/core/utils/fix-aria-hidden.ts @@ -45,6 +45,6 @@ export async function fixOverlayAriaHidden( ]); if (!overlays.find(overlay => overlay !== undefined)) { - document.querySelector('ion-router-outlet')?.removeAttribute('aria-hidden'); + document.body.querySelector('ion-router-outlet')?.removeAttribute('aria-hidden'); } } diff --git a/src/testing/services/behat-dom.ts b/src/testing/services/behat-dom.ts index 758811f40ff..4178b55bf30 100644 --- a/src/testing/services/behat-dom.ts +++ b/src/testing/services/behat-dom.ts @@ -44,7 +44,27 @@ export class TestingBehatDomUtilsService { * @returns Whether the element is visible or not. */ isElementVisible(element: HTMLElement, container?: HTMLElement): boolean { - if (element.getAttribute('aria-hidden') === 'true' || getComputedStyle(element).display === 'none') { + if (element.getAttribute('aria-hidden') === 'true') { + console.error(JSON.stringify(element)); + console.error(document.body.querySelector('ion-app > ion-router-outlet')?.getAttribute('aria-hidden')); + if ( + 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; } @@ -367,22 +387,21 @@ export class TestingBehatDomUtilsService { */ protected getCurrentTopContainerElements(containerName?: string): HTMLElement[] { let containers = Array.from(document.body.querySelectorAll([ - 'ion-alert.hydrated', - 'ion-popover.hydrated', - 'ion-action-sheet.hydrated', - 'ion-modal.hydrated', + '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', - 'page-core-mainmenu', - 'ion-app', + '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('ion-app') ?? undefined; containers = containers .filter(container => { - if (!this.isElementVisible(container)) { - // Ignore containers not visible. - return false; - } + console.error('FOUND ' + container.tagName); if (container.tagName === 'ION-ALERT') { // For some reason, in Behat sometimes alerts aren't removed from DOM, the close animation doesn't finish. @@ -390,11 +409,21 @@ export class TestingBehatDomUtilsService { return container.style.pointerEvents !== 'none'; } - return true; + // 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)); + containers.forEach((container) => { + console.error('SORTED ' + container.tagName); + }); + if (containerName === 'split-view content') { let splitViewContainer: HTMLElement | null = null; @@ -429,6 +458,9 @@ export class TestingBehatDomUtilsService { // If container has backdrop it blocks the rest of the UI. return container.querySelector(':scope > ion-backdrop') || container.classList.contains('backdrop'); }); + containers.forEach(container => { + console.error('TOP ' + container.tagName); + }); return topContainers; }