test(vue): adding controller variants of overlay event tests

Author: ShaneK

packages/vue/test/base/src/views/Overlays.vue

@@ -274,6 +274,19 @@ export default defineComponent({
 
     const openModal = async () => {
       const modal = await modalController.create({ cssClass: "ion-modal-controller", component: ModalContent, componentProps: overlayProps });
+
+      // Attach lifecycle listeners for controller-created modal
+      modal.addEventListener('willPresent', () => { willPresent.value += 1; });
+      modal.addEventListener('didPresent', () => { didPresent.value += 1; });
+      modal.addEventListener('willDismiss', () => { willDismiss.value += 1; });
+      modal.addEventListener('didDismiss', () => { didDismiss.value += 1; });
+
+      // Long-form event names
+      modal.addEventListener('ionModalWillPresent', () => { ionModalWillPresent.value += 1; });
+      modal.addEventListener('ionModalDidPresent', () => { ionModalDidPresent.value += 1; });
+      modal.addEventListener('ionModalWillDismiss', () => { ionModalWillDismiss.value += 1; });
+      modal.addEventListener('ionModalDidDismiss', () => { ionModalDidDismiss.value += 1; });
+
       await modal.present();
     }
 

packages/vue/test/base/tests/e2e/specs/overlays.cy.js

@@ -269,6 +269,92 @@ describe('Overlays', () => {
     });
   });
 
+  it('should fire lifecycle events on controller overlays', () => {
+    cy.get('ion-radio#ion-modal').click();
+    cy.get('ion-radio#controller').click();
+
+    cy.get('ion-button#present-overlay').click();
+    cy.get('ion-modal').should('exist');
+
+    testLifecycle('overlays', {
+      willPresent: 1,
+      didPresent: 1,
+      willDismiss: 0,
+      didDismiss: 0
+    });
+
+    cy.get('ion-modal #dismiss').click();
+
+    testLifecycle('overlays', {
+      willPresent: 1,
+      didPresent: 1,
+      willDismiss: 1,
+      didDismiss: 1
+    });
+
+    cy.get('ion-button#present-overlay').click();
+    cy.get('ion-modal').should('exist');
+
+    testLifecycle('overlays', {
+      willPresent: 2,
+      didPresent: 2,
+      willDismiss: 1,
+      didDismiss: 1
+    });
+
+    cy.get('ion-modal #dismiss').click();
+
+    testLifecycle('overlays', {
+      willPresent: 2,
+      didPresent: 2,
+      willDismiss: 2,
+      didDismiss: 2
+    });
+  });
+
+  it('should fire long-form lifecycle events on controller overlays', () => {
+    cy.get('ion-radio#ion-modal').click();
+    cy.get('ion-radio#controller').click();
+
+    cy.get('ion-button#present-overlay').click();
+    cy.get('ion-modal').should('exist');
+
+    testLongLifecycle('overlays', {
+      willPresent: 1,
+      didPresent: 1,
+      willDismiss: 0,
+      didDismiss: 0
+    });
+
+    cy.get('ion-modal #dismiss').click();
+
+    testLongLifecycle('overlays', {
+      willPresent: 1,
+      didPresent: 1,
+      willDismiss: 1,
+      didDismiss: 1
+    });
+
+    cy.get('ion-button#present-overlay').click();
+    cy.get('ion-modal').should('exist');
+
+    testLongLifecycle('overlays', {
+      willPresent: 2,
+      didPresent: 2,
+      willDismiss: 1,
+      didDismiss: 1
+    });
+
+    cy.get('ion-modal #dismiss').click();
+
+    testLongLifecycle('overlays', {
+      willPresent: 2,
+      didPresent: 2,
+      willDismiss: 2,
+      didDismiss: 2
+    });
+  });
+
   it('should unmount modal via component', () => {
     cy.get('ion-radio#ion-modal').click();
     cy.get('ion-radio#component').click();