From 553aa65376e3e23264903bf07d312d4c3ebf61cb Mon Sep 17 00:00:00 2001 From: ShaneK Date: Wed, 7 Jan 2026 08:30:56 -0800 Subject: [PATCH] chore(tests): fixing tests having issues with mutation observers --- core/scripts/testing/scripts.js | 18 ------------------ .../components/app/test/safe-area/app.e2e.ts | 8 +------- core/src/components/content/content.tsx | 3 ++- core/src/components/modal/modal.tsx | 3 ++- .../src/components/modal/test/basic/index.html | 8 ++++++++ .../components/modal/test/dark-mode/index.html | 7 +++++++ 6 files changed, 20 insertions(+), 27 deletions(-) diff --git a/core/scripts/testing/scripts.js b/core/scripts/testing/scripts.js index d49ff09f32..ff8236c6a0 100644 --- a/core/scripts/testing/scripts.js +++ b/core/scripts/testing/scripts.js @@ -48,24 +48,6 @@ document.head.appendChild(style); } - /** - * Zero out safe-area insets in test environments. - * The default 20px --ion-safe-area-top from core.scss is for legacy - * status bar simulation but doesn't represent real browser behavior. - * Tests that need to verify safe-area handling should explicitly set - * these values in their test HTML files. - */ - const safeAreaStyle = document.createElement('style'); - safeAreaStyle.innerHTML = ` - :root { - --ion-safe-area-top: 0px; - --ion-safe-area-bottom: 0px; - --ion-safe-area-left: 0px; - --ion-safe-area-right: 0px; - } - `; - document.head.appendChild(safeAreaStyle); - /** * The `palette` param is used to load a specific palette * for the theme. diff --git a/core/src/components/app/test/safe-area/app.e2e.ts b/core/src/components/app/test/safe-area/app.e2e.ts index 4cc16ed0a7..336cdffcc4 100644 --- a/core/src/components/app/test/safe-area/app.e2e.ts +++ b/core/src/components/app/test/safe-area/app.e2e.ts @@ -53,17 +53,11 @@ configs({ directions: ['ltr'] }).forEach(({ config, title, screenshot }) => { // Remove the safe area class html.classList.remove('safe-area'); - // Set the Capacitor safe area inset variables. - // Also set --ion-safe-area-* directly since test environments zero these out, - // which would prevent the CSS var() cascade from working. + // Set the safe area inset variables html.style.setProperty('--safe-area-inset-top', '10px'); html.style.setProperty('--safe-area-inset-bottom', '20px'); html.style.setProperty('--safe-area-inset-left', '30px'); html.style.setProperty('--safe-area-inset-right', '40px'); - html.style.setProperty('--ion-safe-area-top', 'var(--safe-area-inset-top)'); - html.style.setProperty('--ion-safe-area-bottom', 'var(--safe-area-inset-bottom)'); - html.style.setProperty('--ion-safe-area-left', 'var(--safe-area-inset-left)'); - html.style.setProperty('--ion-safe-area-right', 'var(--safe-area-inset-right)'); }); const top = await page.evaluate(() => diff --git a/core/src/components/content/content.tsx b/core/src/components/content/content.tsx index ac00d3b6ff..dbe2a3b0dd 100644 --- a/core/src/components/content/content.tsx +++ b/core/src/components/content/content.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core'; +import { win } from '@utils/browser'; import { componentOnReady, hasLazyBuild, inheritAriaAttributes } from '@utils/helpers'; import type { Attributes } from '@utils/helpers'; import { isPlatform } from '@utils/platform'; @@ -192,7 +193,7 @@ export class Content implements ComponentInterface { // Watch for dynamic header/footer changes (common in React conditional rendering) const parent = this.el.parentElement; - if (parent && !this.parentMutationObserver) { + if (parent && !this.parentMutationObserver && win !== undefined && 'MutationObserver' in win) { this.parentMutationObserver = new MutationObserver(() => { this.updateSiblingDetection(); forceUpdate(this); diff --git a/core/src/components/modal/modal.tsx b/core/src/components/modal/modal.tsx index f92b468635..00a240400d 100644 --- a/core/src/components/modal/modal.tsx +++ b/core/src/components/modal/modal.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Listen, Method, Prop, State, Watch, h, writeTask } from '@stencil/core'; +import { win } from '@utils/browser'; import { findIonContent, printIonContentErrorMsg } from '@utils/content'; import { CoreDelegate, attachComponent, detachComponent } from '@utils/framework-delegate'; import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from '@utils/helpers'; @@ -941,7 +942,7 @@ export class Modal implements ComponentInterface, OverlayInterface { this.updateFooterPadding(); // Watch for dynamic footer additions/removals (e.g., async data loading) - if (!this.footerObserver) { + if (!this.footerObserver && win !== undefined && 'MutationObserver' in win) { this.footerObserver = new MutationObserver(() => this.updateFooterPadding()); this.footerObserver.observe(this.el, { childList: true, subtree: true }); } diff --git a/core/src/components/modal/test/basic/index.html b/core/src/components/modal/test/basic/index.html index 5cff0181b4..9269c7bf79 100644 --- a/core/src/components/modal/test/basic/index.html +++ b/core/src/components/modal/test/basic/index.html @@ -12,6 +12,14 @@ + diff --git a/core/src/components/modal/test/dark-mode/index.html b/core/src/components/modal/test/dark-mode/index.html index d63873fd32..a104ad9ffb 100644 --- a/core/src/components/modal/test/dark-mode/index.html +++ b/core/src/components/modal/test/dark-mode/index.html @@ -14,6 +14,13 @@