test(modal): reverting to for loop search for shallow nested objects because stencil's test mock doesn't support :scope

Author: ShaneK

core/src/components/modal/modal.tsx

@@ -1464,10 +1464,18 @@ export class Modal implements ComponentInterface, OverlayInterface {
     // Check for standard Ionic layout children (ion-content, ion-footer),
     // searching one level deep for wrapped components (e.g.,
     // <app-footer><ion-footer>...</ion-footer></app-footer>).
-    // Uses :scope to limit the search depth rather than matching deeply
-    // nested elements inside inner modals or other overlays.
-    const hasContent = el.querySelector(':scope > ion-content, :scope > * > ion-content') !== null;
-    const hasFooter = el.querySelector(':scope > ion-footer, :scope > * > ion-footer') !== null;
+    // Note: uses a manual loop instead of querySelector(':scope > ...') because
+    // Stencil's mock-doc (used in spec tests) does not support :scope.
+    let hasContent = false;
+    let hasFooter = false;
+    for (const child of Array.from(el.children)) {
+      if (child.tagName === 'ION-CONTENT') hasContent = true;
+      if (child.tagName === 'ION-FOOTER') hasFooter = true;
+      for (const grandchild of Array.from(child.children)) {
+        if (grandchild.tagName === 'ION-CONTENT') hasContent = true;
+        if (grandchild.tagName === 'ION-FOOTER') hasFooter = true;
+      }
+    }
 
     // Only apply wrapper padding for standard Ionic layouts (has ion-content
     // but no ion-footer). Custom modals with raw HTML are fully