fix(vue): loading is created as an inline component (#26191)

ionic-team · Nov 2, 2022 · 84990ce · 84990ce
1 parent 30e3a14
commit 84990ce
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 6 deletions.
diff --git a/packages/vue/scripts/copy-overlays.js b/packages/vue/scripts/copy-overlays.js
@@ -15,7 +15,6 @@ function generateOverlays() {
     },
     {
       tag: 'ion-loading',
-      controller: 'loadingController',
       name: 'IonLoading'
     },
     {
@@ -61,7 +60,10 @@ export const ${component.name} = /*@__PURE__*/ defineOverlayContainer<JSX.${comp
     `);
   });
 
-  const template = `/* auto-generated vue overlay proxies */
+  const template = `/**
+ * This is an autogenerated file created by 'scripts/copy-overlays.js'.
+ * Changes made to this file will be overwritten on build.
+ */
 
 import {
   JSX,

diff --git a/packages/vue/src/components/Overlays.ts b/packages/vue/src/components/Overlays.ts
@@ -1,10 +1,12 @@
-/* auto-generated vue overlay proxies */
+/**
+ * This is an autogenerated file created by 'scripts/copy-overlays.js'.
+ * Changes made to this file will be overwritten on build.
+ */
 
 import {
   JSX,
   actionSheetController,
   alertController,
-  loadingController,
   pickerController,
   toastController,
 } from '@ionic/core/components';
@@ -23,7 +25,7 @@ export const IonActionSheet = /*@__PURE__*/ defineOverlayContainer<JSX.IonAction
 
 export const IonAlert = /*@__PURE__*/ defineOverlayContainer<JSX.IonAlert>('ion-alert', defineIonAlertCustomElement, ['animated', 'backdropDismiss', 'buttons', 'cssClass', 'enterAnimation', 'header', 'htmlAttributes', 'inputs', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'subHeader', 'translucent'], alertController);
 
-export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger'], loadingController);
+export const IonLoading = /*@__PURE__*/ defineOverlayContainer<JSX.IonLoading>('ion-loading', defineIonLoadingCustomElement, ['animated', 'backdropDismiss', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'isOpen', 'keyboardClose', 'leaveAnimation', 'message', 'mode', 'showBackdrop', 'spinner', 'translucent', 'trigger']);
 
 export const IonPicker = /*@__PURE__*/ defineOverlayContainer<JSX.IonPicker>('ion-picker', defineIonPickerCustomElement, ['animated', 'backdropDismiss', 'buttons', 'columns', 'cssClass', 'duration', 'enterAnimation', 'htmlAttributes', 'keyboardClose', 'leaveAnimation', 'mode', 'showBackdrop'], pickerController);
 

diff --git a/packages/vue/test/base/tests/e2e/specs/overlays.cy.js b/packages/vue/test/base/tests/e2e/specs/overlays.cy.js
@@ -32,11 +32,29 @@ const testComponent = (overlay, shadow = false) => {
      * so they should not be removed from the DOM. This test
      * might need to be revisited if other overlay components
      * are converted to shadow as well.
+     * 
+     * Migrate these overlays to use `testInlineOverlay` instead.
      */
     cy.get(overlay).should('not.exist');
   }
 }
 
+const testInlineOverlay = (overlay, shadow = false) => {
+  cy.get(`ion-radio#${overlay}`).click();
+  cy.get('ion-radio#component').click();
+
+  cy.get('ion-button#present-overlay').click();
+  cy.get(overlay).should('exist').should('be.visible');
+
+  if (shadow) {
+    cy.get(overlay).shadow().find('ion-backdrop').click({ force: true });
+  } else {
+    cy.get(`${overlay} ion-backdrop`).click({ force: true });
+
+    cy.get(overlay).should('not.be.visible');
+  }
+}
+
 describe('Overlays', () => {
   beforeEach(() => {
     cy.viewport(1000, 900);
@@ -84,7 +102,7 @@ describe('Overlays', () => {
   });
 
   it(`should open and close ion-loading via component`, () => {
-    testComponent('ion-loading');
+    testInlineOverlay('ion-loading');
   });
 
   it(`should open and close ion-modal via component`, () => {