test(modal): remove redundant tests (#27426)

Issue number: N/A

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

There were several redundant tests I missed during the initial generator
pass.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->


3044c2dc4b

- Sheet rendering does not vary across directions, so I removed those
additional checks. Note: Modal _does_ have some RTL-specific styles but
those are already captured in the basic screenshots.
- The backdrop interaction behavior does not vary across modes, so I
removed those additional checks.


f5ff834196

- Similar to above, the card rendering does not vary across directions.


aba6c5c2a2

- During my generator pass, I had broke the `card/modal.e2e.ts` tests
into `card/modal-card.e2e.ts` and `card/modal-sheet.e2e.ts`, but I
forgot to delete the original `card/modal.e2e.ts` file, so we had
redundant tests running.


ae762d190e

- The isOpen tests are testing that you can open/close the modal by
triggering the `isOpen` property. I combined the two tests into 1 test
since they are doing the same thing: Checking that the modal opens when
`isOpen` is `true` and closes when `isOpen` is false. This also avoids
the 500ms timeout of the 2nd test which should speed up execution.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

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

@@ -3,7 +3,10 @@ import { configs, test } from '@utils/test/playwright';
 
 import { CardModalPage } from '../fixtures';
 
-configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+/**
+ * This behavior does not vary across directions.
+ */
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('card modal: rendering'), () => {
     let cardModalPage: CardModalPage;
     test.beforeEach(async ({ page }) => {
@@ -16,12 +19,7 @@ configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
       await expect(page).toHaveScreenshot(screenshot(`modal-card-present`));
     });
   });
-});
 
-/**
- * This behavior does not vary across directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('card modal: scenario rendering'), () => {
     let cardModalPage: CardModalPage;
     test.beforeEach(async ({ page }) => {
@@ -46,9 +44,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
       await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present`));
     });
   });
-});
 
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('card modal: functionality'), () => {
     let cardModalPage: CardModalPage;
     test.beforeEach(async ({ page }) => {

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

@@ -1,162 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test, Viewports } from '@utils/test/playwright';
-
-import { CardModalPage } from '../fixtures';
-
-configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('card modal: rendering'), () => {
-    let cardModalPage: CardModalPage;
-    test.beforeEach(async ({ page }) => {
-      cardModalPage = new CardModalPage(page);
-      await cardModalPage.navigate('/src/components/modal/test/card', config);
-    });
-    test('should not have visual regressions', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card');
-
-      await expect(page).toHaveScreenshot(screenshot(`modal-card-present`));
-    });
-    test('should not have visual regressions with custom modal', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card-custom');
-
-      await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-present`));
-    });
-    test('should not have visual regressions with stacked cards', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card');
-      await cardModalPage.openModalByTrigger('.add');
-
-      await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present`));
-    });
-    test('should not have visual regressions with stacked custom cards', async ({ page }) => {
-      await cardModalPage.openModalByTrigger('#card-custom');
-      await cardModalPage.openModalByTrigger('.add');
-
-      await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present`));
-    });
-  });
-});
-
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('card modal: functionality'), () => {
-    let cardModalPage: CardModalPage;
-    test.beforeEach(async ({ page }) => {
-      cardModalPage = new CardModalPage(page);
-      await cardModalPage.navigate('/src/components/modal/test/card', config);
-    });
-    test.describe(title('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 = page.locator('ion-modal ion-content');
-        await expect(content).toHaveJSProperty('scrollY', true);
-      });
-    });
-    test.describe(title('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');
-
-        await expect(page).toHaveScreenshot(screenshot(`modal-card-present-tablet`));
-      });
-      test('should not have visual regressions with custom modal', async ({ page }) => {
-        await cardModalPage.openModalByTrigger('#card-custom');
-
-        await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-present-tablet`));
-      });
-      test('should not have visual regressions with stacked cards', async ({ page }) => {
-        await cardModalPage.openModalByTrigger('#card');
-        await cardModalPage.openModalByTrigger('.add');
-
-        await expect(page).toHaveScreenshot(screenshot(`modal-card-stacked-present-tablet`));
-      });
-      test('should not have visual regressions with stacked custom cards', async ({ page }) => {
-        await cardModalPage.openModalByTrigger('#card-custom');
-        await cardModalPage.openModalByTrigger('.add');
-
-        await expect(page).toHaveScreenshot(screenshot(`modal-card-custom-stacked-present-tablet`));
-      });
-    });
-    test.describe(title('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 = page.locator('ion-modal ion-content');
-        await expect(content).toHaveJSProperty('scrollY', true);
-      });
-    });
-  });
-});

core/src/components/modal/test/is-open/modal.e2e.ts

@@ -3,29 +3,19 @@ import { configs, test } from '@utils/test/playwright';
 
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('modal: isOpen'), () => {
-    test.beforeEach(async ({ page }) => {
+    test('should open and close the modal', async ({ page }) => {
       await page.goto('/src/components/modal/test/is-open', config);
-    });
 
-    test('should open the modal', async ({ page }) => {
       const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
+      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
       const modal = page.locator('ion-modal');
 
       await page.click('#default');
 
       await ionModalDidPresent.next();
       await expect(modal).toBeVisible();
-    });
-
-    test('should open the modal then close after a timeout', async ({ page }) => {
-      const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent');
-      const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
-      const modal = page.locator('ion-modal');
-
-      await page.click('#timeout');
 
-      await ionModalDidPresent.next();
-      await expect(modal).toBeVisible();
+      await modal.evaluate((el: HTMLIonModalElement) => (el.isOpen = false));
 
       await ionModalDidDismiss.next();
       await expect(modal).toBeHidden();

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

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { configs, test, dragElementBy } from '@utils/test/playwright';
 
-configs().forEach(({ title, screenshot, config }) => {
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('sheet modal: rendering'), () => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);
@@ -16,7 +16,7 @@ configs().forEach(({ title, screenshot, config }) => {
   });
 });
 
-configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
   test.describe(title('sheet modal: backdrop'), () => {
     test.beforeEach(async ({ page }) => {
       await page.goto('/src/components/modal/test/sheet', config);