diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts index aa86ab3821..81d93ed297 100644 --- a/core/src/components/modal/test/basic/modal.e2e.ts +++ b/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'); }); diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 75dc5fbdfd..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 16c2b631bf..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a6093ac71b..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 01fdfd4190..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 6db6d2fab0..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 3d83739c1a..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index e2788784fc..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index e4e4ec33ec..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a813e8b330..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index cc376f0a4f..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index f3734e506d..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 3fedcdfb10..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 7cd31ec2a0..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 49fdbc601d..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index c3a9c3e77b..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index b31cd292f1..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index aeeb837ee7..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index ead5a65a77..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 29ee9a43c8..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index b808929661..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 6521a5bc69..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 29044499f2..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index a392a7a2f4..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index bff592756f..0000000000 Binary files a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-tablet-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/canDismiss/modal.e2e.ts b/core/src/components/modal/test/canDismiss/modal.e2e.ts index 637a913e29..11a6451dc8 100644 --- a/core/src/components/modal/test/canDismiss/modal.e2e.ts +++ b/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'); diff --git a/core/src/components/modal/test/card-refresher/modal.e2e.ts b/core/src/components/modal/test/card-refresher/modal.e2e.ts index 776c74c8f0..7c3687934d 100644 --- a/core/src/components/modal/test/card-refresher/modal.e2e.ts +++ b/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'); }); diff --git a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts b/core/src/components/modal/test/card-scroll-target/modal.e2e.ts index 35290325b8..bb1646ae61 100644 --- a/core/src/components/modal/test/card-scroll-target/modal.e2e.ts +++ b/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'); }); diff --git a/core/src/components/modal/test/card/modal.e2e.ts b/core/src/components/modal/test/card/modal.e2e.ts index 0e24f5eed6..e9a6b19221 100644 --- a/core/src/components/modal/test/card/modal.e2e.ts +++ b/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); + }); }); }); }); diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts index 75f0546f0f..77ba5c9eaa 100644 --- a/core/src/components/modal/test/inline/modal.e2e.ts +++ b/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) => { diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 293e563f25..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 7ccfc08143..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 8bf19b336d..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index d3d3d88f21..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index ee22baeca8..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 16f458b6fc..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index a020d4883c..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 99f9e33c50..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 34b9eb3eea..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index f6c6779d1a..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index f95854376a..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index f9145e88d4..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 9852be8f61..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 5101207d83..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 5b5f7ea7d6..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 2a921a3b6d..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 3717e05725..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index f87f8f3f7b..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index c533fae63d..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 32ca86eb1b..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 002a5e00ba..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 632aeb4c0a..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 06aa1673a2..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 95c497e170..0000000000 Binary files a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/modal/test/isOpen/modal.e2e.ts b/core/src/components/modal/test/isOpen/modal.e2e.ts index b50ce0d199..fb167addcd 100644 --- a/core/src/components/modal/test/isOpen/modal.e2e.ts +++ b/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'); }); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts index 9f580605d0..6cd6eb6125 100644 --- a/core/src/components/modal/test/sheet/modal.e2e.ts +++ b/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'); }); diff --git a/core/src/components/modal/test/standalone/modal.e2e.ts b/core/src/components/modal/test/standalone/modal.e2e.ts index 48866d8234..91ed7dca1a 100644 --- a/core/src/components/modal/test/standalone/modal.e2e.ts +++ b/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');