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();
+ });
  });
 });