test(modal): check multiple event emits

Author: thetaPC

core/src/components/modal/test/card/modal-card.e2e.ts

@@ -110,17 +110,30 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       const ionDragEnd = await page.spyOnEvent('ionDragEnd');
 
       const header = page.locator('.modal-card ion-header');
-      await dragElementBy(header, page, 0, 100);
+
+      // Start the drag to verify it emits the events before the gesture ends
+      await dragElementBy(header, page, 0, 50, undefined, undefined, false);
 
       await ionDragStart.next();
       const dragMoveEvent = await ionDragMove.next();
-      const dragEndEvent = await ionDragEnd.next();
 
       expect(ionDragStart.length).toBe(1);
 
       expect(ionDragMove.length).toBeGreaterThan(0);
       expect(Object.keys(dragMoveEvent.detail).length).toBe(4);
 
+      expect(ionDragEnd.length).toBe(0);
+
+      // Drag the modal item further to verify it does not emit the event
+      // again for `ionDragStart` or `ionDragMove`, but does emit `ionDragEnd`
+      // when the gesture is released
+      await dragElementBy(header, page, 0, 100);
+
+      const dragEndEvent = await ionDragEnd.next();
+
+      expect(ionDragStart.length).toBe(1);
+      expect(ionDragMove.length).toBeGreaterThan(0);
+
       expect(ionDragEnd.length).toBe(1);
       expect(Object.keys(dragEndEvent.detail).length).toBe(4);
     });

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

@@ -355,7 +355,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
   });
 
   test.describe(title('sheet modal: drag events'), () => {
-    test('should emit ionDragStart, ionDragMove, and ionDragEnd events', async ({ page }) => {
+    test.only('should emit ionDragStart, ionDragMove, and ionDragEnd events', async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
 
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
@@ -368,17 +368,30 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       const ionDragEnd = await page.spyOnEvent('ionDragEnd');
 
       const header = page.locator('.modal-sheet ion-header');
-      await dragElementBy(header, page, 0, 100);
+
+      // Start the drag to verify it emits the events before the gesture ends
+      await dragElementBy(header, page, 0, 50, undefined, undefined, false);
 
       await ionDragStart.next();
       const dragMoveEvent = await ionDragMove.next();
-      const dragEndEvent = await ionDragEnd.next();
 
       expect(ionDragStart.length).toBe(1);
 
       expect(ionDragMove.length).toBeGreaterThan(0);
       expect(Object.keys(dragMoveEvent.detail).length).toBe(5);
 
+      expect(ionDragEnd.length).toBe(0);
+
+      // Drag the modal item further to verify it does not emit the event
+      // again for `ionDragStart` or `ionDragMove`, but does emit `ionDragEnd`
+      // when the gesture is released
+      await dragElementBy(header, page, 0, 100);
+
+      const dragEndEvent = await ionDragEnd.next();
+
+      expect(ionDragStart.length).toBe(1);
+      expect(ionDragMove.length).toBeGreaterThan(0);
+
       expect(ionDragEnd.length).toBe(1);
       expect(Object.keys(dragEndEvent.detail).length).toBe(5);
     });