test(modal): verifying a very depply nested modal will still be closed when a containing component is removed

Author: ShaneK

core/src/components/modal/test/inline/modal.e2e.ts

@@ -191,5 +191,83 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       // Verify the container was actually removed
       await expect(modalContainer).not.toBeAttached();
     });
+
+    test('it should dismiss modals when top-level ancestor is removed', async ({ page }) => {
+      // We need to make sure we can close a modal when a much higher
+      // element is removed from the DOM. This will be a common
+      // use case in frameworks like Angular and React, where an entire
+      // page container for much more than the modal might be swapped out.
+      await page.setContent(
+        `
+        <ion-app>
+          <div class="ion-page">
+            <ion-header>
+              <ion-toolbar>
+                <ion-title>Top Level Removal Test</ion-title>
+              </ion-toolbar>
+            </ion-header>
+            <ion-content class="ion-padding">
+              <div id="top-level-container">
+                <div id="nested-container">
+                  <button id="open-nested-modal">Open Nested Modal</button>
+                  <ion-modal id="nested-modal">
+                    <ion-header>
+                      <ion-toolbar>
+                        <ion-title>Nested Modal</ion-title>
+                      </ion-toolbar>
+                    </ion-header>
+                    <ion-content class="ion-padding">
+                      <p>This modal's original parent is deeply nested</p>
+                      <button id="remove-top-level">Remove Top Level Container</button>
+                    </ion-content>
+                  </ion-modal>
+                </div>
+              </div>
+            </ion-content>
+          </div>
+        </ion-app>
+
+        <script>
+          const nestedModal = document.querySelector('#nested-modal');
+          nestedModal.presentingElement = document.querySelector('.ion-page');
+
+          document.getElementById('open-nested-modal').addEventListener('click', () => {
+            nestedModal.isOpen = true;
+          });
+
+          document.getElementById('remove-top-level').addEventListener('click', () => {
+            document.querySelector('#top-level-container').remove();
+          });
+        </script>
+        `,
+        config
+      );
+
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+
+      const nestedModal = page.locator('#nested-modal');
+      const topLevelContainer = page.locator('#top-level-container');
+
+      // Open the nested modal
+      await page.click('#open-nested-modal');
+      await ionModalDidPresent.next();
+      await expect(nestedModal).toBeVisible();
+
+      // Remove the top-level container
+      await page.click('#remove-top-level');
+
+      // Wait for modal to be dismissed
+      const dismissEvent = await ionModalDidDismiss.next();
+
+      // Verify the modal was dismissed with the correct role
+      expect(dismissEvent.detail.role).toBe('parent-removed');
+
+      // Verify the modal is no longer visible
+      await expect(nestedModal).toBeHidden();
+
+      // Verify the container was actually removed
+      await expect(topLevelContainer).not.toBeAttached();
+    });
   });
 });