test(modal): skip unneeded checks (#26472)

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

@@ -5,6 +5,7 @@ import type { E2EPage } from '@utils/test/playwright';
 test.describe('modal: focus trapping', () => {
   test.beforeEach(async ({ skip }) => {
     skip.rtl();
+    skip.mode('md');
     skip.browser('firefox', 'Firefox incorrectly allows keyboard focus to move to ion-content');
   });
   test('focus should be trapped inside of modal', async ({ page, browserName }) => {
@@ -88,9 +89,7 @@ test.describe('modal: rendering', () => {
     await ionModalWillDismiss.next();
     await ionModalDidDismiss.next();
 
-    expect(await page.screenshot()).toMatchSnapshot(
-      `modal-basic-dismiss-${screenshotModifier}${page.getSnapshotSettings()}.png`
-    );
+    await expect(modal).toBeHidden();
   };
 
   test('should not have visual regressions', async ({ page }) => {
@@ -103,7 +102,9 @@ test.describe('modal: rendering', () => {
 });
 
 test.describe('modal: htmlAttributes inheritance', () => {
-  test('should correctly inherit attributes on host', async ({ page }) => {
+  test('should correctly inherit attributes on host', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
     await page.goto('/src/components/modal/test/basic');
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
@@ -119,7 +120,9 @@ test.describe('modal: htmlAttributes inheritance', () => {
 });
 
 test.describe('modal: backdrop', () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
     await page.goto('/src/components/modal/test/basic');
   });
 
@@ -138,7 +141,9 @@ test.describe('modal: backdrop', () => {
 });
 
 test.describe('modal: incorrect usage', () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
     await page.goto('/src/components/modal/test/basic');
   });
 

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

@@ -2,11 +2,11 @@ import { expect } from '@playwright/test';
 import { test, dragElementBy } from '@utils/test/playwright';
 
 test.describe('modal: canDismiss', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/src/components/modal/test/canDismiss');
-  });
-
   test.describe('regular modal', () => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
+      await page.goto('/src/components/modal/test/canDismiss');
+    });
     test('should dismiss when canDismiss is true', async ({ page }) => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
@@ -77,7 +77,10 @@ test.describe('modal: canDismiss', () => {
     });
   });
   test.describe('card modal', () => {
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
+      skip.mode('md');
+      await page.goto('/src/components/modal/test/canDismiss');
       await page.click('#radio-card');
     });
     test('should dismiss when canDismiss is true', async ({ page }) => {
@@ -132,11 +135,11 @@ test.describe('modal: canDismiss', () => {
       expect(returnValue).toBe(false);
     });
   });
-
   test.describe('card modal - iOS swiping', () => {
     test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
       skip.mode('md');
-
+      await page.goto('/src/components/modal/test/canDismiss');
       await page.click('#radio-card');
     });
 
@@ -219,7 +222,9 @@ test.describe('modal: canDismiss', () => {
   });
 
   test.describe('sheet modal', () => {
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
+      await page.goto('/src/components/modal/test/canDismiss');
       await page.click('#radio-sheet');
     });
     test('should dismiss when canDismiss is true', async ({ page }) => {
@@ -380,9 +385,10 @@ test.describe('modal: canDismiss', () => {
   });
 
   test.describe('function params', () => {
-    test.beforeEach(({ skip }) => {
-      skip.rtl();
+    test.beforeEach(async ({ page, skip }) => {
       skip.mode('md');
+      skip.rtl();
+      await page.goto('/src/components/modal/test/canDismiss');
     });
     test('should pass data and role when calling dismiss', async ({ page }) => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');

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

@@ -4,6 +4,7 @@ import { dragElementBy, test } from '@utils/test/playwright';
 test.describe('card modal - with refresher', () => {
   test.beforeEach(async ({ page, skip }) => {
     skip.mode('md');
+    skip.rtl();
 
     await page.goto('/src/components/modal/test/card-refresher');
   });

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

@@ -4,6 +4,7 @@ import { dragElementBy, test } from '@utils/test/playwright';
 test.describe('card modal - scroll target', () => {
   test.beforeEach(async ({ page, skip }) => {
     skip.mode('md');
+    skip.rtl();
 
     await page.goto('/src/components/modal/test/card-scroll-target');
   });

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

@@ -4,14 +4,15 @@ import { test, Viewports } from '@utils/test/playwright';
 import { CardModalPage } from '../fixtures';
 
 test.describe('card modal', () => {
-  let cardModalPage: CardModalPage;
-  test.beforeEach(async ({ page, skip }) => {
+  test.beforeEach(async ({ skip }) => {
     skip.mode('md');
-
-    cardModalPage = new CardModalPage(page);
-    await cardModalPage.navigate('/src/components/modal/test/card');
   });
   test.describe('card modal: rendering', () => {
+    let cardModalPage: CardModalPage;
+    test.beforeEach(async ({ page }) => {
+      cardModalPage = new CardModalPage(page);
+      await cardModalPage.navigate('/src/components/modal/test/card');
+    });
     test('should not have visual regressions', async ({ page }) => {
       await cardModalPage.openModalByTrigger('#card');
 
@@ -37,126 +38,134 @@ test.describe('card modal', () => {
       );
     });
   });
-  test.describe('card modal: swipe to close', () => {
-    test('it should swipe to close when swiped on the header', async () => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.swipeToCloseModal('ion-modal ion-header');
+  test.describe('card modal: functionality', () => {
+    let cardModalPage: CardModalPage;
+    test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
+      cardModalPage = new CardModalPage(page);
+      await cardModalPage.navigate('/src/components/modal/test/card');
     });
-    test('it should swipe to close when swiped on the content', async () => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content');
+    test.describe('card modal: swipe to close', () => {
+      test('it should swipe to close when swiped on the header', async () => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-header');
+      });
+      test('it should swipe to close when swiped on the content', async () => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content');
+      });
+      test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
+        const modal = await cardModalPage.openModalByTrigger('#card');
+
+        const content = (await page.$('ion-modal ion-content'))!;
+        await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
+
+        await content.waitForElementState('stable');
+        await expect(modal).toBeVisible();
+      });
+      test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({
+        page,
+      }) => {
+        const modal = await cardModalPage.openModalByTrigger('#card');
+
+        await page.click('ion-button.replace');
+
+        const content = (await page.$('ion-modal ion-content'))!;
+        await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
+
+        await content.waitForElementState('stable');
+        await expect(modal).toBeVisible();
+      });
+      test('content should be scrollable after gesture ends', async ({ page }) => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20);
+
+        const content = await page.locator('ion-modal ion-content');
+        await expect(content).toHaveJSProperty('scrollY', true);
+      });
     });
-    test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
-      const modal = await cardModalPage.openModalByTrigger('#card');
+    test.describe('card modal: rendering - tablet', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.setViewportSize(Viewports.tablet.portrait);
+      });
+      test('should not have visual regressions', async ({ page }) => {
+        await cardModalPage.openModalByTrigger('#card');
 
-      const content = (await page.$('ion-modal ion-content'))!;
-      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+        expect(await page.screenshot()).toMatchSnapshot(`modal-card-present-tablet-${page.getSnapshotSettings()}.png`);
+      });
+      test('should not have visual regressions with custom modal', async ({ page }) => {
+        await cardModalPage.openModalByTrigger('#card-custom');
 
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
+        expect(await page.screenshot()).toMatchSnapshot(
+          `modal-card-custom-present-tablet-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('should not have visual regressions with stacked cards', async ({ page }) => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.openModalByTrigger('.add');
 
-      await content.waitForElementState('stable');
-      await expect(modal).toBeVisible();
+        expect(await page.screenshot()).toMatchSnapshot(
+          `modal-card-stacked-present-tablet-${page.getSnapshotSettings()}.png`
+        );
+      });
+      test('should not have visual regressions with stacked custom cards', async ({ page }) => {
+        await cardModalPage.openModalByTrigger('#card-custom');
+        await cardModalPage.openModalByTrigger('.add');
+
+        expect(await page.screenshot()).toMatchSnapshot(
+          `modal-card-custom-stacked-present-tablet-${page.getSnapshotSettings()}.png`
+        );
+      });
     });
-    test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({
-      page,
-    }) => {
-      const modal = await cardModalPage.openModalByTrigger('#card');
+    test.describe('card modal: swipe to close - tablet', () => {
+      test.beforeEach(async ({ page }) => {
+        await page.setViewportSize(Viewports.tablet.portrait);
+      });
+      test('it should swipe to close when swiped on the header', async () => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-header');
+      });
+      test('it should swipe to close when swiped on the content', async () => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content');
+      });
+      test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
+        const modal = await cardModalPage.openModalByTrigger('#card');
 
-      await page.click('ion-button.replace');
+        const content = (await page.$('ion-modal ion-content'))!;
+        await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
 
-      const content = (await page.$('ion-modal ion-content'))!;
-      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
 
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
+        await content.waitForElementState('stable');
+        await expect(modal).toBeVisible();
+      });
+      test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({
+        page,
+      }) => {
+        const modal = await cardModalPage.openModalByTrigger('#card');
 
-      await content.waitForElementState('stable');
-      await expect(modal).toBeVisible();
-    });
-    test('content should be scrollable after gesture ends', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20);
+        await page.click('ion-button.replace');
 
-      const content = await page.locator('ion-modal ion-content');
-      await expect(content).toHaveJSProperty('scrollY', true);
-    });
-  });
-  test.describe('card modal: rendering - tablet', () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setViewportSize(Viewports.tablet.portrait);
-    });
-    test('should not have visual regressions', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card');
+        const content = (await page.$('ion-modal ion-content'))!;
+        await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
 
-      expect(await page.screenshot()).toMatchSnapshot(`modal-card-present-tablet-${page.getSnapshotSettings()}.png`);
-    });
-    test('should not have visual regressions with custom modal', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card-custom');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
 
-      expect(await page.screenshot()).toMatchSnapshot(
-        `modal-card-custom-present-tablet-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should not have visual regressions with stacked cards', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.openModalByTrigger('.add');
+        await content.waitForElementState('stable');
+        await expect(modal).toBeVisible();
+      });
+      test('content should be scrollable after gesture ends', async ({ page }) => {
+        await cardModalPage.openModalByTrigger('#card');
+        await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20);
 
-      expect(await page.screenshot()).toMatchSnapshot(
-        `modal-card-stacked-present-tablet-${page.getSnapshotSettings()}.png`
-      );
-    });
-    test('should not have visual regressions with stacked custom cards', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card-custom');
-      await cardModalPage.openModalByTrigger('.add');
-
-      expect(await page.screenshot()).toMatchSnapshot(
-        `modal-card-custom-stacked-present-tablet-${page.getSnapshotSettings()}.png`
-      );
-    });
-  });
-  test.describe('card modal: swipe to close - tablet', () => {
-    test.beforeEach(async ({ page }) => {
-      await page.setViewportSize(Viewports.tablet.portrait);
-    });
-    test('it should swipe to close when swiped on the header', async () => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.swipeToCloseModal('ion-modal ion-header');
-    });
-    test('it should swipe to close when swiped on the content', async () => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content');
-    });
-    test('it should not swipe to close when swiped on the content but the content is scrolled', async ({ page }) => {
-      const modal = await cardModalPage.openModalByTrigger('#card');
-
-      const content = (await page.$('ion-modal ion-content'))!;
-      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
-
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
-
-      await content.waitForElementState('stable');
-      await expect(modal).toBeVisible();
-    });
-    test('it should not swipe to close when swiped on the content but the content is scrolled even when content is replaced', async ({
-      page,
-    }) => {
-      const modal = await cardModalPage.openModalByTrigger('#card');
-
-      await page.click('ion-button.replace');
-
-      const content = (await page.$('ion-modal ion-content'))!;
-      await content.evaluate((el: HTMLIonContentElement) => el.scrollToBottom(0));
-
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content', false);
-
-      await content.waitForElementState('stable');
-      await expect(modal).toBeVisible();
-    });
-    test('content should be scrollable after gesture ends', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.swipeToCloseModal('ion-modal ion-content', false, 20);
-
-      const content = await page.locator('ion-modal ion-content');
-      await expect(content).toHaveJSProperty('scrollY', true);
+        const content = await page.locator('ion-modal ion-content');
+        await expect(content).toHaveJSProperty('scrollY', true);
+      });
     });
   });
 });

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

@@ -2,24 +2,25 @@ import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('modal: inline', () => {
-  test('it should present and then remain in the dom on dismiss', async ({ page }) => {
+  test('it should present and then remain in the dom on dismiss', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
     await page.goto('/src/components/modal/test/inline');
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
     const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
+    const modal = page.locator('ion-modal');
 
     await page.click('#open-inline-modal');
 
     await ionModalDidPresent.next();
 
-    expect(await page.screenshot()).toMatchSnapshot(`modal-inline-present-${page.getSnapshotSettings()}.png`);
+    await expect(modal).toBeVisible();
 
-    const modal = await page.locator('ion-modal');
     await modal.evaluate((el: HTMLIonModalElement) => el.dismiss());
 
     await ionModalDidDismiss.next();
-    await page.waitForSelector('ion-modal', { state: 'hidden' });
 
-    expect(await page.screenshot()).toMatchSnapshot(`modal-inline-dismiss-${page.getSnapshotSettings()}.png`);
+    await expect(modal).toBeHidden();
   });
 
   test('presenting should create a single root element with the ion-page class', async ({ page, skip }, testInfo) => {

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

@@ -1,7 +1,9 @@
 import { test } from '@utils/test/playwright';
 
 test.describe('modal: isOpen', () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
     await page.goto('/src/components/modal/test/isOpen');
   });
 

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

@@ -15,7 +15,8 @@ test.describe('sheet modal: rendering', () => {
 });
 
 test.describe('sheet modal: backdrop', () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
     await page.goto('/src/components/modal/test/sheet');
   });
   test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => {
@@ -55,12 +56,12 @@ test.describe('sheet modal: backdrop', () => {
 });
 
 test.describe('sheet modal: setting the breakpoint', () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto('/src/components/modal/test/sheet');
-  });
   test.describe('sheet modal: invalid values', () => {
     let warnings: string[] = [];
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
+      await page.goto('/src/components/modal/test/sheet');
+
       warnings = [];
 
       page.on('console', (ev) => {
@@ -90,7 +91,9 @@ test.describe('sheet modal: setting the breakpoint', () => {
     });
   });
   test.describe('sheet modal: valid values', () => {
-    test.beforeEach(async ({ page }) => {
+    test.beforeEach(async ({ page, skip }) => {
+      skip.rtl();
+      await page.goto('/src/components/modal/test/sheet');
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
 
       await page.click('#sheet-modal');
@@ -134,7 +137,9 @@ test.describe('sheet modal: setting the breakpoint', () => {
     });
   });
 
-  test('it should reset the breakpoint value on dismiss', async ({ page }) => {
+  test('it should reset the breakpoint value on dismiss', async ({ page, skip }) => {
+    skip.rtl();
+    await page.goto('/src/components/modal/test/sheet');
     test.info().annotations.push({
       type: 'issue',
       description: 'https://github.com/ionic-team/ionic-framework/issues/25245',
@@ -197,7 +202,8 @@ test.describe('sheet modal: setting the breakpoint', () => {
 });
 
 test.describe('sheet modal: clicking the handle', () => {
-  test.beforeEach(async ({ page }) => {
+  test.beforeEach(async ({ page, skip }) => {
+    skip.rtl();
     await page.goto('/src/components/modal/test/sheet');
   });
 

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

@@ -1,7 +1,9 @@
 import { test } from '@utils/test/playwright';
 
 test.describe('modal: standalone', () => {
-  test('should open even without an ion-app', async ({ page }) => {
+  test('should open even without an ion-app', async ({ page, skip }) => {
+    skip.rtl();
+    skip.mode('md');
     await page.goto('/src/components/modal/test/standalone');
     const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
     const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');