MOBILE-4616 behat: Correct container visibility and narrow search

Author: crazyserver

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

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

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<HTMLElement>(
+        const overlays = document.body.querySelectorAll<HTMLElement>(
             'ion-action-sheet, ion-alert, ion-loading, ion-modal, ion-picker, ion-popover, ion-toast',
         );
 

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');
     }
 }

src/testing/services/behat-dom.ts

@@ -44,7 +44,25 @@ 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') {
+            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;
         }
 
@@ -371,30 +389,34 @@ export class TestingBehatDomUtilsService {
      */
     protected getCurrentTopContainerElements(containerName?: string): HTMLElement[] {
         let containers = Array.from(document.body.querySelectorAll<HTMLElement>([
-            '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<HTMLElement>('ion-app') ?? undefined;
 
         containers = containers
             .filter(container => {
-                if (!this.isElementVisible(container)) {
-                    // Ignore containers not visible.
-                    return false;
-                }
 
                 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';
                 }
 
-                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));