test(modal): add half-sheet test

Author: Tanner Reits

core/src/components/modal/test/shape/index.html

@@ -14,10 +14,6 @@
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
 
     <style>
-      ion-modal {
-        --box-shadow: 0px 0px 30px 10px rgba(0, 0, 0, 0.1);
-      }
-
       .container {
         margin-bottom: 20px;
       }

core/src/components/modal/test/sheet/index.html

@@ -72,6 +72,10 @@
       .grid-item {
         height: 200px;
       }
+
+      .half-sheet {
+        --height: 50%;
+      }
     </style>
   </head>
 
@@ -140,6 +144,13 @@
             Backdrop is inactive
           </button>
 
+          <button
+            id="half-sheet"
+            onclick="presentHalfSheetModal({ cssClass: 'half-sheet', backdropBreakpoint: 0.5, initialBreakpoint: 1, breakpoints: [1] })"
+          >
+            Half Sheet w/ Footer
+          </button>
+
           <div class="grid">
             <div class="grid-item red"></div>
             <div class="grid-item green"></div>
@@ -214,12 +225,65 @@
         modal.remove();
       }
 
-      async function presentCardModal() {
-        const presentingEl = document.querySelectorAll('.ion-page')[1];
-        const modal = createModal('card', {
-          presentingElement: presentingEl,
+      async function presentHalfSheetModal(options) {
+        let items = '';
+
+        for (var i = 0; i < 3; i++) {
+          items += `<ion-item>Item ${i}</ion-item>`;
+        }
+
+        // create component to open
+        const element = document.createElement('div');
+        element.innerHTML = `
+      <ion-header>
+        <ion-toolbar>
+          <ion-title>Super Modal</ion-title>
+          <ion-buttons slot="end">
+            <ion-button class="dismiss">Dismiss Modal</ion-button>
+          </ion-buttons>
+        </ion-toolbar>
+      </ion-header>
+      <ion-content>
+        <ion-list>
+          ${items}
+        </ion-list>
+      </ion-content>
+      <ion-footer>
+        <ion-toolbar>
+          <ion-button expand="block">Action</ion-button>
+        </ion-toolbar>
+      </ion-footer>
+      `;
+
+        let extraOptions = {
+          initialBreakpoint: 0.25,
+          breakpoints: [0, 0.25, 0.5, 0.75, 1],
+        };
+
+        if (options) {
+          extraOptions = {
+            ...extraOptions,
+            ...options,
+          };
+        }
+
+        // present the modal
+        const modalElement = Object.assign(document.createElement('ion-modal'), {
+          component: element,
+          ...extraOptions,
         });
-        await modal.present();
+
+        // listen for close event
+        const button = element.querySelector('ion-button');
+        button.addEventListener('click', () => {
+          modalElement.dismiss();
+        });
+        document.body.appendChild(modalElement);
+
+        await modalElement.present();
+
+        await modalElement.onDidDismiss();
+        modalElement.remove();
       }
     </script>
   </body>

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

@@ -16,6 +16,30 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   });
 });
 
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('sheet modal: half screen rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto('/src/components/modal/test/sheet', config);
+      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+
+      await page.click('#half-sheet');
+
+      await ionModalDidPresent.next();
+
+      await expect(page).toHaveScreenshot(screenshot(`modal-half-sheet-present`), {
+        /**
+         * Animations must be enabled to capture the screenshot.
+         * By default, animations are disabled with toHaveScreenshot,
+         * and when capturing the screenshot will call animation.finish().
+         * This will cause the modal to close and the screenshot capture
+         * to be invalid.
+         */
+        animations: 'allow',
+      });
+    });
+  });
+});
+
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('sheet modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {