diff --git a/core/src/components/modal/test/basic/e2e.ts b/core/src/components/modal/test/basic/e2e.ts deleted file mode 100644 index 2111cf3354..0000000000 --- a/core/src/components/modal/test/basic/e2e.ts +++ /dev/null @@ -1,127 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -import { openModal, testModal } from '../test.utils'; - -const DIRECTORY = 'basic'; -const getActiveElementText = async (page) => { - const activeElement = await page.evaluateHandle(() => document.activeElement); - return await page.evaluate((el) => el?.textContent, activeElement); -}; - -test('modal: focus trap', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' }); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - await page.waitForSelector('#basic-modal'); - - const modal = await page.find('ion-modal'); - expect(modal).not.toBe(null); - - await ionModalDidPresent.next(); - - await page.keyboard.press('Tab'); - - const activeElementText = await getActiveElementText(page); - expect(activeElementText).toEqual('Dismiss Modal'); - - await page.keyboard.down('Shift'); - await page.keyboard.press('Tab'); - await page.keyboard.up('Shift'); - - const activeElementTextTwo = await getActiveElementText(page); - expect(activeElementTextTwo).toEqual('Dismiss Modal'); - - await page.keyboard.press('Tab'); - - const activeElementTextThree = await getActiveElementText(page); - expect(activeElementTextThree).toEqual('Dismiss Modal'); -}); - -test('modal: return focus', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' }); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#basic-modal'); - await page.waitForSelector('#basic-modal'); - - const modal = await page.find('ion-modal'); - expect(modal).not.toBe(null); - - await ionModalDidPresent.next(); - - await Promise.all([ - await modal.callMethod('dismiss'), - await ionModalDidDismiss.next(), - await modal.waitForNotVisible(), - ]); - - const activeElement = await page.evaluateHandle(() => document.activeElement); - const id = await activeElement.evaluate((node) => node.id); - expect(id).toEqual('basic-modal'); -}); - -test('modal: basic', async () => { - await testModal(DIRECTORY, '#basic-modal', false); -}); - -test('modal:rtl: basic', async () => { - await testModal(DIRECTORY, '#basic-modal', false, true); -}); - -test('modal: htmlAttributes', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' }); - - await page.click('#basic-modal'); - await page.waitForSelector('#basic-modal'); - - const alert = await page.find('ion-modal'); - - expect(alert).not.toBe(null); - await alert.waitForVisible(); - - const attribute = await page.evaluate(() => document.querySelector('ion-modal').getAttribute('data-testid')); - - expect(attribute).toEqual('basic-modal'); -}); - -test('it should dismiss the modal when clicking the backdrop', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' }); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#basic-modal'); - await ionModalDidPresent.next(); - - await page.mouse.click(20, 20); - await ionModalDidDismiss.next(); -}); - -test('modal: setting the breakpoint should warn the developer', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' }); - - const warnings = []; - - page.on('console', (ev) => { - if (ev.type() === 'warning') { - warnings.push(ev.text()); - } - }); - - const modal = await openModal(page, '#basic-modal'); - - await modal.callMethod('setCurrentBreakpoint', 0.5); - - expect(warnings.length).toBe(1); - expect(warnings[0]).toBe('[Ionic Warning]: setCurrentBreakpoint is only supported on sheet modals.'); -}); - -test('modal: getting the breakpoint should return undefined', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/basic?ionic:_testing=true' }); - - const modal = await openModal(page, '#basic-modal'); - - const breakpoint = await modal.callMethod('getCurrentBreakpoint'); - expect(breakpoint).toBeUndefined(); -}); diff --git a/core/src/components/modal/test/basic/modal.e2e.ts b/core/src/components/modal/test/basic/modal.e2e.ts new file mode 100644 index 0000000000..131a028774 --- /dev/null +++ b/core/src/components/modal/test/basic/modal.e2e.ts @@ -0,0 +1,182 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('modal: focus trapping', () => { + test('focus should be trapped inside of modal', async ({ page, browserName }) => { + await page.goto('/src/components/modal/test/basic'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalDidPresent.next(); + + /** + * The default WebKit behavior is to + * highlight items on webpages with Option-Tab. + * See "Press Tab to highlight each item on a webpage" + * in Safari Preferences > Advanced. + */ + if (browserName === 'webkit') { + await page.keyboard.down('Alt'); + } + await page.keyboard.press('Tab'); + + const dismissButton = await page.locator('ion-button.dismiss'); + expect(dismissButton).toBeFocused(); + + await page.keyboard.down('Shift'); + await page.keyboard.press('Tab'); + await page.keyboard.up('Shift'); + + expect(dismissButton).toBeFocused(); + await page.keyboard.press('Tab'); + + if (browserName === 'webkit') { + await page.keyboard.up('Alt'); + } + + expect(dismissButton).toBeFocused(); + }); + + test('focus should be returned to previously focused element when dismissing modal', async ({ + page, + browserName, + }) => { + await page.goto('/src/components/modal/test/basic'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const modalButton = await page.locator('#basic-modal'); + + if (browserName === 'webkit') { + await page.keyboard.down('Alt'); + } + + // Focus #basic-modal button + await page.keyboard.press('Tab'); + expect(modalButton).toBeFocused(); + + if (browserName === 'webkit') { + await page.keyboard.up('Alt'); + } + + await page.keyboard.press('Space'); + await ionModalDidPresent.next(); + + await page.keyboard.press('Escape'); + await ionModalDidDismiss.next(); + + expect(modalButton).toBeFocused(); + }); +}); + +test.describe('modal: rendering', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/modal/test/basic'); + + const ionModalWillDismiss = await page.spyOnEvent('ionModalWillDismiss'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + const ionModalWillPresent = await page.spyOnEvent('ionModalWillPresent'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalWillPresent.next(); + await ionModalDidPresent.next(); + + const modal = await page.locator('ion-modal'); + + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-basic-present-${page.getSnapshotSettings()}.png`); + + await modal.evaluate((el: HTMLIonModalElement) => { + el.dismiss(); + }); + + await ionModalWillDismiss.next(); + await ionModalDidDismiss.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-basic-dismiss-${page.getSnapshotSettings()}.png`); + }); +}); + +test.describe('modal: htmlAttributes inheritance', () => { + test('should correctly inherit attributes on host', async ({ page }) => { + await page.goto('/src/components/modal/test/basic'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + + await ionModalDidPresent.next(); + + const modal = await page.locator('ion-modal'); + + const attribute = await modal.getAttribute('data-testid'); + expect(attribute).toBe('basic-modal'); + }); +}); + +test.describe('modal: backdrop', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/basic'); + }); + + test('it should dismiss the modal when clicking the backdrop', async ({ page }, testInfo) => { + test.skip( + testInfo.project.name === 'Mobile Chrome' || testInfo.project.name === 'Mobile Safari', + 'The modal covers the entire screen on mobile, so the backdrop is not clickable.' + ); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + await page.mouse.click(20, 20); + await ionModalDidDismiss.next(); + }); +}); + +test.describe('modal: incorrect usage', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/basic'); + }); + + test('it should warn when setting a breakpoint on a non-sheet modal', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + const warnings: string[] = []; + + page.on('console', (ev) => { + if (ev.type() === 'warning') { + warnings.push(ev.text()); + } + }); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + const modal = await page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => { + el.setCurrentBreakpoint(0.5); + }); + + expect(warnings.length).toBe(1); + expect(warnings[0]).toBe('[Ionic Warning]: setCurrentBreakpoint is only supported on sheet modals.'); + }); + + test('it should return undefined when getting the breakpoint on a non-sheet modal', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + const modal = await page.locator('ion-modal'); + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => { + return el.getCurrentBreakpoint(); + }); + + expect(breakpoint).toBe(undefined); + }); +}); 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 new file mode 100644 index 0000000000..2d83aec98d Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..a6093ac71b Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..21e9f1e9d8 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..28f6a050a4 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..731420b7f0 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-ltr-webkit-linux.png 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 new file mode 100644 index 0000000000..74b47dddd9 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..3d83739c1a Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..4ca6fbb5a0 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..276cc48ac5 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..1ae9094962 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-ios-rtl-webkit-linux.png 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 new file mode 100644 index 0000000000..e2788784fc Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..a813e8b330 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..db3b95905a Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..f935b1e3d3 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..43c6ea98eb Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-ltr-webkit-linux.png 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 new file mode 100644 index 0000000000..d98e421534 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..3fedcdfb10 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..56b6d7d35f Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..5ba5a81c66 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..37410032a6 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-dismiss-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1d4757acf1 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fa2b8ee151 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..33ab8ac761 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..ecdc5e8577 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..510fb73f3c Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7c90637b3b Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..632acbccac Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..fffb124724 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..440cd26ed1 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..22288af7ed Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a0d69684a4 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ae4b6cddeb Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..ae502997c8 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..41b32bfa93 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..8cd97a5780 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5603a85d82 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..c492030710 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..a732ff7725 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..ebbf53fef4 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..9007fb8eb2 Binary files /dev/null and b/core/src/components/modal/test/basic/modal.e2e.ts-snapshots/modal-basic-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/canDismiss/e2e.ts b/core/src/components/modal/test/canDismiss/modal.e2e.ts similarity index 59% rename from core/src/components/modal/test/canDismiss/e2e.ts rename to core/src/components/modal/test/canDismiss/modal.e2e.ts index c2d1ae031e..2bae0c7c36 100644 --- a/core/src/components/modal/test/canDismiss/e2e.ts +++ b/core/src/components/modal/test/canDismiss/modal.e2e.ts @@ -1,27 +1,25 @@ -import { newE2EPage, newE2EPage } from '@stencil/core/testing'; -import { dragElementBy } from '@utils/test'; +import { expect } from '@playwright/test'; +import { test, dragElementBy } from '@utils/test/playwright'; -describe('modal - canDismiss handler', () => { - let page: E2EPage; +test.describe('modal: canDismiss', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/canDismiss'); + }); - describe('regular modal', () => { - beforeEach(async () => { - page = await newE2EPage({ url: '/src/components/modal/test/canDismiss?ionic:_testing=true' }); - }); - - it('should dismiss when canDismiss is true', async () => { + test.describe('regular modal', () => { + test('should dismiss when canDismiss is true', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#show-modal'); await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(true); }); - it('should not dismiss when canDismiss is false', async () => { + test('should not dismiss when canDismiss is false', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-false'); @@ -29,12 +27,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(false); }); - it('should dismiss when canDismiss is Promise', async () => { + test('should dismiss when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-promise-true'); @@ -42,12 +40,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(true); }); - it('should not dismiss when canDismiss is Promise', async () => { + test('should not dismiss when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-promise-false'); @@ -55,12 +53,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(false); }); - it('should dismiss when canDismiss is Action Sheet and user clicks confirm', async () => { + test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); @@ -78,26 +76,23 @@ describe('modal - canDismiss handler', () => { await ionModalDidDismiss.next(); }); }); - - describe('card modal', () => { - beforeEach(async () => { - page = await newE2EPage({ url: '/src/components/modal/test/canDismiss?ionic:_testing=true&ionic:mode=ios' }); + test.describe('card modal', () => { + test.beforeEach(async ({ page }) => { await page.click('#radio-card'); }); - - it('should dismiss when canDismiss is true', async () => { + test('should dismiss when canDismiss is true', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#show-modal'); await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(true); }); - it('should not dismiss when canDismiss is false', async () => { + test('should not dismiss when canDismiss is false', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-false'); @@ -105,12 +100,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(false); }); - it('should dismiss when canDismiss is Promise', async () => { + test('should dismiss when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-promise-true'); @@ -118,12 +113,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(true); }); - it('should not dismiss when canDismiss is Promise', async () => { + test('should not dismiss when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-promise-false'); @@ -131,12 +126,21 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(false); }); - it('should dismiss on swipe when canDismiss is true', async () => { + }); + + test.describe('card modal - iOS swiping', () => { + test.beforeEach(async ({ page }, testInfo) => { + test.skip(testInfo.project.metadata.mode !== 'ios', 'Swipe to close on a modal is only available in iOS mode.'); + + await page.click('#radio-card'); + }); + + test('should dismiss on swipe when canDismiss is true', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); @@ -144,12 +148,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('ion-modal #modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionModalDidDismiss.next(); }); - it('should not dismiss on swipe when canDismiss is false', async () => { + test('should not dismiss on swipe when canDismiss is false', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-false'); @@ -157,13 +161,13 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); - const modal = await page.find('ion-modal'); + const modal = await page.locator('ion-modal'); expect(modal).not.toBe(null); }); - it('should dismiss on swipe when canDismiss is Promise', async () => { + test('should dismiss on swipe when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); @@ -172,12 +176,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionModalDidDismiss.next(); }); - it('should not dismiss on swipe when canDismiss is Promise', async () => { + test('should not dismiss on swipe when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); @@ -186,15 +190,15 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionHandlerDone.next(); - const modal = await page.find('ion-modal'); + const modal = await page.locator('ion-modal'); expect(modal).not.toBe(null); }); - it('should dismiss when canDismiss is Action Sheet and user clicks confirm', async () => { + test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); @@ -204,7 +208,7 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionActionSheetDidPresent.next(); @@ -214,25 +218,23 @@ describe('modal - canDismiss handler', () => { }); }); - describe('sheet modal', () => { - beforeEach(async () => { - page = await newE2EPage({ url: '/src/components/modal/test/canDismiss?ionic:_testing=true' }); + test.describe('sheet modal', () => { + test.beforeEach(async ({ page }) => { await page.click('#radio-sheet'); }); - - it('should dismiss when canDismiss is true', async () => { + test('should dismiss when canDismiss is true', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#show-modal'); await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(true); }); - it('should not dismiss when canDismiss is true', async () => { + test('should not dismiss when canDismiss is false', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-false'); @@ -240,12 +242,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(false); }); - it('should dismiss when canDismiss is Promise', async () => { + test('should dismiss when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-promise-true'); @@ -253,12 +255,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(true); }); - it('should not dismiss when canDismiss is Promise', async () => { + test('should not dismiss when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-promise-false'); @@ -266,12 +268,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modal = await page.find('ion-modal'); - const returnValue = await modal.callMethod('dismiss'); + const modal = await page.locator('ion-modal'); + const returnValue = await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); expect(returnValue).toBe(false); }); - it('should dismiss on swipe when canDismiss is true', async () => { + test('should dismiss on swipe when canDismiss is true', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); @@ -279,12 +281,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionModalDidDismiss.next(); }); - it('should not dismiss on swipe when canDismiss is true', async () => { + test('should not dismiss on swipe when canDismiss is false', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); await page.click('#radio-false'); @@ -292,13 +294,13 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); - const modal = await page.find('ion-modal'); + const modal = await page.locator('ion-modal'); expect(modal).not.toBe(null); }); - it('should dismiss on swipe when canDismiss is Promise', async () => { + test('should dismiss on swipe when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); @@ -307,12 +309,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionModalDidDismiss.next(); }); - it('should not dismiss on swipe when canDismiss is Promise', async () => { + test('should not dismiss on swipe when canDismiss is Promise', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionHandlerDone = await page.spyOnEvent('ionHandlerDone'); @@ -321,37 +323,29 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionHandlerDone.next(); - const modal = await page.find('ion-modal'); + const modal = await page.locator('ion-modal'); expect(modal).not.toBe(null); }); - - it('should not dismiss on swipe when not attempting to close', async () => { + test('should not dismiss on swipe when not attempting to close', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - const screenshotCompares = []; await page.click('#radio-promise-true'); await page.click('#show-modal'); await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, -500); - screenshotCompares.push(await page.compareScreenshot()); - - const modal = await page.find('ion-modal'); + const modal = await page.locator('ion-modal'); expect(modal).not.toBe(null); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } }); - it('should hit the dismiss threshold when swiping', async () => { + test('should hit the dismiss threshold when swiping', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); @@ -360,12 +354,12 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 100); await ionModalDidDismiss.next(); }); - it('should dismiss when canDismiss is Action Sheet and user clicks confirm', async () => { + test('should dismiss when canDismiss is Action Sheet and user clicks confirm', async ({ page }) => { const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); const ionActionSheetDidPresent = await page.spyOnEvent('ionActionSheetDidPresent'); @@ -375,7 +369,7 @@ describe('modal - canDismiss handler', () => { await ionModalDidPresent.next(); - const modalHeader = await page.$('#modal-header'); + const modalHeader = await page.locator('#modal-header'); await dragElementBy(modalHeader, page, 0, 500); await ionActionSheetDidPresent.next(); diff --git a/core/src/components/modal/test/card/e2e.ts b/core/src/components/modal/test/card/e2e.ts deleted file mode 100644 index 954184d6e9..0000000000 --- a/core/src/components/modal/test/card/e2e.ts +++ /dev/null @@ -1,103 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -import { testModal } from '../test.utils'; - -const DIRECTORY = 'card'; - -test('modal: card', async () => { - await testModal(DIRECTORY, '#card', true); -}); - -test('modal: card - custom', async () => { - await testModal(DIRECTORY, '#card-custom', true); -}); - -test('modal: card - Stacked, Tablet', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' }); - - // Ensure that we get tablet styles - await page.setViewport({ width: 768, height: 500 }); - - const screenshotCompares = []; - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card'); - await page.waitForSelector('#card'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click('.add'); - await page.waitForSelector('.add'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); -}); - -test('modal: card - Stacked, Mobile', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' }); - - const screenshotCompares = []; - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card'); - await page.waitForSelector('#card'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click('.add'); - await page.waitForSelector('.add'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); -}); - -test('modal: card - Custom, Stacked, Tablet', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' }); - - // Ensure that we get tablet styles - await page.setViewport({ width: 768, height: 500 }); - - const screenshotCompares = []; - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card-custom'); - await page.waitForSelector('#card-custom'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click('.add'); - await page.waitForSelector('.add'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); -}); - -test('modal: card - Custom, Stacked, Mobile', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/card?ionic:_testing=true' }); - - const screenshotCompares = []; - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#card-custom'); - await page.waitForSelector('#card-custom'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click('.add'); - await page.waitForSelector('.add'); - - await ionModalDidPresent.next(); - - screenshotCompares.push(await page.compareScreenshot()); -}); diff --git a/core/src/components/modal/test/card/modal.e2e.ts b/core/src/components/modal/test/card/modal.e2e.ts new file mode 100644 index 0000000000..f9e627dbc9 --- /dev/null +++ b/core/src/components/modal/test/card/modal.e2e.ts @@ -0,0 +1,51 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('card modal: rendering', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/modal/test/card'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card'); + + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-card-present-${page.getSnapshotSettings()}.png`); + }); + test('should not have visual regressions with custom modal', async ({ page }) => { + await page.goto('/src/components/modal/test/card'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card-custom'); + + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-card-custom-present-${page.getSnapshotSettings()}.png`); + }); + test('should not have visual regressions with stacked cards', async ({ page }) => { + await page.goto('/src/components/modal/test/card'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card'); + await ionModalDidPresent.next(); + + await page.click('.add'); + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-card-stacked-present-${page.getSnapshotSettings()}.png`); + }); + test('should not have visual regressions with stacked custom cards', async ({ page }) => { + await page.goto('/src/components/modal/test/card'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#card-custom'); + await ionModalDidPresent.next(); + + await page.click('.add'); + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot( + `modal-card-custom-stacked-present-${page.getSnapshotSettings()}.png` + ); + }); +}); diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8395f2198a Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a8cb87a6b6 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..38ee736039 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..12900fb94b Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..a17cdbf2a5 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..56892676f4 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..37794c512b Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..8242f7da51 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..e1a0f05475 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..b944565c03 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0137e94c2c Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bf10753fc0 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..a7b1a51112 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..2f111bec27 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..1005c78803 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..60c8cf6fd7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8a9facec7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..830ab7163d Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..af00b80001 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..e6427dfa9c Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9ab190aa48 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..d174359403 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..73aad5d30a Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..86d3bd6918 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..d02088bba9 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ba145ab6c0 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8a1f663228 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..681b53032f Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..6c25911284 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..37fa1804eb Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4442e50e34 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bf10753fc0 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..a0bcf9bb53 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..ec70c3b81b Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..f45cfc5077 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..5c4da9f7a2 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8a9facec7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..63aa36bb81 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..2d42c4f1cb Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..cab5900ca3 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-custom-stacked-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..321897cb7f Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..59bb75fc02 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..a6650a83f4 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..6b6db49a13 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..0b3653ab4e Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d38e688a74 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..e38be50a69 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..90178b1b52 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..6c0f57987a Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..e3d0a3d618 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8c50426a7a Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bf10753fc0 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..241701a936 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..adfcdd9be5 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..1d2accca1c Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7b691a835e Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8a9facec7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..17b80f2e2b Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..50a92233d1 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..61415fb357 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..a276bf043f Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2fbbac0b8c Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..eb87b2627d Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..515e929b10 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..9710fd62b6 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..82e6543ff7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..050aa7bbf5 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..416a04a05a Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..42ecc4a771 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..f6334475a7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3269e60a56 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..bf10753fc0 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..bbc9d757e1 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..ace45dc615 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..6220a076f2 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..86bb294426 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..b8a9facec7 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..0e9f7681f8 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..933dc953d1 Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..7e2091076d Binary files /dev/null and b/core/src/components/modal/test/card/modal.e2e.ts-snapshots/modal-card-stacked-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/custom/e2e.ts b/core/src/components/modal/test/custom/e2e.ts deleted file mode 100644 index 9099134909..0000000000 --- a/core/src/components/modal/test/custom/e2e.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { testModal } from '../test.utils'; - -const DIRECTORY = 'custom'; - -test('modal: custom', async () => { - await testModal(DIRECTORY, '#custom-modal', false); -}); - -test('modal:rtl: custom', async () => { - await testModal(DIRECTORY, '#custom-modal', false, true); -}); diff --git a/core/src/components/modal/test/custom/modal.e2e.ts b/core/src/components/modal/test/custom/modal.e2e.ts new file mode 100644 index 0000000000..2573285c7c --- /dev/null +++ b/core/src/components/modal/test/custom/modal.e2e.ts @@ -0,0 +1,17 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('modal: custom rendering', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/modal/test/custom'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#custom-modal'); + + await ionModalDidPresent.next(); + + await page.setIonViewport(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-custom-present-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..7f52c1375a Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..309e06a113 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..812ca5bcfa Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..0a9a801daa Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..b2548562ba Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..beb764e602 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..63d265583a Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..f8e45b4465 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..e788522eb3 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..3c5b7ff542 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..801e2270f1 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..24ca10bd28 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..6a89666437 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..2dd73021b7 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..58869d5ec7 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..92fb9d2469 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..27b8c97f16 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..1c93771eca Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..cf46f2e524 Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..e49d46d66e Binary files /dev/null and b/core/src/components/modal/test/custom/modal.e2e.ts-snapshots/modal-custom-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/inline/e2e.ts b/core/src/components/modal/test/inline/e2e.ts deleted file mode 100644 index 345eed9386..0000000000 --- a/core/src/components/modal/test/inline/e2e.ts +++ /dev/null @@ -1,42 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('modal: inline', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/inline?ionic:_testing=true' }); - const screenshotCompares = []; - - await page.click('ion-button'); - await page.waitForSelector('ion-modal'); - - let modal = await page.find('ion-modal'); - - expect(modal).not.toBe(null); - await modal.waitForVisible(); - - const container = await modal.find('.ion-page'); - - expect(container).not.toBe(null); - - screenshotCompares.push(await page.compareScreenshot()); - - await modal.callMethod('dismiss'); - await modal.waitForNotVisible(); - - screenshotCompares.push(await page.compareScreenshot('dismiss')); - - modal = await page.find('ion-modal'); - expect(modal).not.toBe(null); - - await page.click('ion-button'); - await page.waitForSelector('ion-modal'); - - const modalAgain = await page.find('ion-modal'); - - expect(modalAgain).not.toBe(null); - await modalAgain.waitForVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/modal/test/inline/index.html b/core/src/components/modal/test/inline/index.html index acfab4b39e..3acc5ae7f9 100644 --- a/core/src/components/modal/test/inline/index.html +++ b/core/src/components/modal/test/inline/index.html @@ -22,7 +22,7 @@ - Open Modal + Open Modal diff --git a/core/src/components/modal/test/inline/modal.e2e.ts b/core/src/components/modal/test/inline/modal.e2e.ts new file mode 100644 index 0000000000..c215da0a4b --- /dev/null +++ b/core/src/components/modal/test/inline/modal.e2e.ts @@ -0,0 +1,24 @@ +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 }) => { + await page.goto('/src/components/modal/test/inline'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#open-inline-modal'); + + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-inline-present-${page.getSnapshotSettings()}.png`); + + 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`); + }); +}); 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 new file mode 100644 index 0000000000..f1ee2e8082 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..8bf19b336d Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..a4180c5c57 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..e1f3dc57c3 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..442fa5dfb4 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-ltr-webkit-linux.png 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 new file mode 100644 index 0000000000..54dce543d3 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..16f458b6fc Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..5ab3feb820 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..d113ddbf64 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..13f1f95387 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-ios-rtl-webkit-linux.png 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 new file mode 100644 index 0000000000..a020d4883c Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..34b9eb3eea Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..d3a91e0fef Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..a4b039d3d8 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..9f3a0e7a41 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-ltr-webkit-linux.png 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 new file mode 100644 index 0000000000..2f847f083d Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..f9145e88d4 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..04414d8a1c Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..a6c092bf54 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..43b66a17ca Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-dismiss-md-rtl-webkit-linux.png 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 new file mode 100644 index 0000000000..dc30a96ccf Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..5b5f7ea7d6 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..81ca9d525d Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..1ad01b97ce Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..53a0f5cde7 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-ltr-webkit-linux.png 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 new file mode 100644 index 0000000000..4ed929ad64 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..f87f8f3f7b Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..101d4082ab Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..8e90c51e84 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..6dbbead428 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-ios-rtl-webkit-linux.png 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 new file mode 100644 index 0000000000..c533fae63d Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..002a5e00ba Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..48b76578ab Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..37a718c02e Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..50c89d50f0 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-ltr-webkit-linux.png 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 new file mode 100644 index 0000000000..f29c4be0e1 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Chrome-linux.png 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 new file mode 100644 index 0000000000..95c497e170 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..c2fa826036 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..7a5455e437 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..567f8ea5f1 Binary files /dev/null and b/core/src/components/modal/test/inline/modal.e2e.ts-snapshots/modal-inline-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/isOpen/e2e.ts b/core/src/components/modal/test/isOpen/e2e.ts deleted file mode 100644 index 2dca5f59a2..0000000000 --- a/core/src/components/modal/test/isOpen/e2e.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('should open the modal', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/isOpen?ionic:_testing=true' }); - - const screenshotCompares = []; - - const trigger = await page.find('#default'); - trigger.click(); - - await page.waitForSelector('ion-modal'); - const modal = await page.find('ion-modal'); - await modal.waitForVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); - -test('should open the modal then close after a timeout', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/isOpen?ionic:_testing=true' }); - - const screenshotCompares = []; - - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - const trigger = await page.find('#timeout'); - trigger.click(); - - await page.waitForSelector('ion-modal'); - const modal = await page.find('ion-modal'); - await modal.waitForVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - await ionModalDidDismiss.next(); - - await modal.waitForNotVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/modal/test/isOpen/modal.e2e.ts b/core/src/components/modal/test/isOpen/modal.e2e.ts new file mode 100644 index 0000000000..b50ce0d199 --- /dev/null +++ b/core/src/components/modal/test/isOpen/modal.e2e.ts @@ -0,0 +1,28 @@ +import { test } from '@utils/test/playwright'; + +test.describe('modal: isOpen', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/isOpen'); + }); + + test('should open the modal', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + await page.click('#default'); + + await ionModalDidPresent.next(); + await page.waitForSelector('ion-modal', { state: 'visible' }); + }); + + test('should open the modal then close after a timeout', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + await page.click('#timeout'); + + await ionModalDidPresent.next(); + await page.waitForSelector('ion-modal', { state: 'visible' }); + + await ionModalDidDismiss.next(); + + await page.waitForSelector('ion-modal', { state: 'hidden' }); + }); +}); diff --git a/core/src/components/modal/test/sheet/e2e.ts b/core/src/components/modal/test/sheet/e2e.ts deleted file mode 100644 index 8e6fe9d606..0000000000 --- a/core/src/components/modal/test/sheet/e2e.ts +++ /dev/null @@ -1,209 +0,0 @@ -import type { E2EElement, E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; -import { getActiveElement, getActiveElementParent, dragElementBy } from '@utils/test'; - -import { openModal, testModal, testModal } from '../test.utils'; - -const DIRECTORY = 'sheet'; - -test('modal: sheet', async () => { - await testModal(DIRECTORY, '#sheet-modal'); -}); - -test('modal:rtl: sheet', async () => { - await testModal(DIRECTORY, '#sheet-modal', true); -}); - -test('modal - open', async () => { - const screenshotCompares = []; - const page = await newE2EPage({ url: '/src/components/modal/test/sheet?ionic:_testing=true' }); - - await page.click('#sheet-modal'); - - const modal = await page.find('ion-modal'); - await modal.waitForVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - await modal.callMethod('dismiss'); - await modal.waitForNotVisible(); - - screenshotCompares.push(await page.compareScreenshot('dismiss')); - - await page.click('#sheet-modal'); - - const modalAgain = await page.find('ion-modal'); - await modalAgain.waitForVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - await modalAgain.callMethod('dismiss'); - await modalAgain.waitForNotVisible(); - - screenshotCompares.push(await page.compareScreenshot('dismiss')); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); - -test('should click to dismiss sheet modal', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/sheet?ionic:_testing=true' }); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#sheet-modal'); - - const modal = await page.find('ion-modal'); - await modal.waitForVisible(); - - await page.mouse.click(50, 50); - - await ionModalDidDismiss.next(); -}); - -test('should click to dismiss sheet modal when backdrop is active', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/sheet?ionic:_testing=true' }); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - await page.click('#backdrop-active'); - - const modal = await page.find('ion-modal'); - await modal.waitForVisible(); - - await page.mouse.click(50, 50); - - await ionModalDidDismiss.next(); -}); - -test('should click to present another modal when backdrop is inactive', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/sheet?ionic:_testing=true' }); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#backdrop-inactive'); - - await ionModalDidPresent.next(); - - await page.click('#custom-height-modal'); - - await ionModalDidPresent.next(); - - const customModal = await page.find('.custom-height'); - expect(customModal).not.toBe(null); -}); - -test('input should be focusable when backdrop is inactive', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/sheet?ionic:_testing=true' }); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#backdrop-inactive'); - - await ionModalDidPresent.next(); - - await page.click('#root-input'); - - const parentEl = await getActiveElementParent(page); - expect(parentEl.id).toEqual('root-input'); -}); - -test('input should not be focusable when backdrop is active', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/sheet?ionic:_testing=true' }); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click('#backdrop-active'); - - await ionModalDidPresent.next(); - - await page.click('#root-input'); - await page.waitForChanges(); - - const parentEl = await getActiveElement(page); - expect(parentEl.tagName).toEqual('ION-BUTTON'); -}); - -describe('modal: sheet: setting the breakpoint', () => { - let page: E2EPage; - - beforeEach(async () => { - page = await newE2EPage({ - url: '/src/components/modal/test/sheet?ionic:_testing=true', - }); - }); - - describe('setting an invalid value', () => { - let warnings: string[]; - let modal: E2EElement; - - beforeEach(async () => { - warnings = []; - page.on('console', (ev) => { - if (ev.type() === 'warning') { - warnings.push(ev.text()); - } - }); - - modal = await openModal(page, '#sheet-modal'); - - await modal.callMethod('setCurrentBreakpoint', 0.01); - }); - - it('should not change the breakpoint', async () => { - const breakpoint = await modal.callMethod('getCurrentBreakpoint'); - expect(breakpoint).toBe(0.25); - }); - - it('should console a warning to developers', async () => { - expect(warnings.length).toBe(1); - expect(warnings[0]).toBe( - '[Ionic Warning]: Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.' - ); - }); - }); - - describe('setting the breakpoint to a valid value', () => { - it('should update the current breakpoint', async () => { - const modal = await openModal(page, '#sheet-modal'); - - await modal.callMethod('setCurrentBreakpoint', 0.5); - await modal.waitForEvent('ionBreakpointDidChange'); - - const breakpoint = await modal.callMethod('getCurrentBreakpoint'); - expect(breakpoint).toBe(0.5); - }); - - it('should emit ionBreakpointDidChange', async () => { - const modal = await openModal(page, '#sheet-modal'); - - const ionBreakpointDidChangeSpy = await modal.spyOnEvent('ionBreakpointDidChange'); - - await modal.callMethod('setCurrentBreakpoint', 0.5); - await modal.waitForEvent('ionBreakpointDidChange'); - - expect(ionBreakpointDidChangeSpy).toHaveReceivedEventTimes(1); - }); - - it('should emit ionBreakpointDidChange when breakpoint is set to 0', async () => { - const modal = await openModal(page, '#sheet-modal'); - - const ionBreakpointDidChangeSpy = await modal.spyOnEvent('ionBreakpointDidChange'); - - await modal.callMethod('setCurrentBreakpoint', 0); - await modal.waitForEvent('ionBreakpointDidChange'); - - expect(ionBreakpointDidChangeSpy).toHaveReceivedEventTimes(1); - }); - }); - - it('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async () => { - const modal = await openModal(page, '#sheet-modal'); - - const ionBreakpointDidChangeSpy = await modal.spyOnEvent('ionBreakpointDidChange'); - - const headerEl = await page.$('ion-modal ion-header'); - - await dragElementBy(headerEl, page, 0, 500); - - await modal.waitForEvent('ionBreakpointDidChange'); - - expect(ionBreakpointDidChangeSpy).toHaveReceivedEventTimes(1); - }); -}); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts b/core/src/components/modal/test/sheet/modal.e2e.ts new file mode 100644 index 0000000000..c996fd432f --- /dev/null +++ b/core/src/components/modal/test/sheet/modal.e2e.ts @@ -0,0 +1,155 @@ +import { expect } from '@playwright/test'; +import { test, dragElementBy } from '@utils/test/playwright'; + +test.describe('sheet modal: rendering', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto('/src/components/modal/test/sheet'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#sheet-modal'); + + await ionModalDidPresent.next(); + + expect(await page.screenshot()).toMatchSnapshot(`modal-sheet-present-${page.getSnapshotSettings()}.png`); + }); +}); + +test.describe('sheet modal: backdrop', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/src/components/modal/test/sheet'); + }); + test('should dismiss the sheet modal when clicking the active backdrop', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#backdrop-active'); + + await ionModalDidPresent.next(); + + await page.mouse.click(50, 50); + + await ionModalDidDismiss.next(); + }); + test('should present another sheet modal when clicking an inactive backdrop', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#backdrop-inactive'); + await ionModalDidPresent.next(); + + await page.click('#custom-height-modal'); + await ionModalDidPresent.next(); + + await page.waitForSelector('.custom-height', { state: 'visible' }); + }); + test('input outside sheet modal should be focusable when backdrop is inactive', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#backdrop-inactive'); + + await ionModalDidPresent.next(); + + const input = await page.locator('#root-input input'); + await input.click(); + expect(input).toBeFocused(); + }); + test('input outside sheet modal should not be focusable when backdrop is active', async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#backdrop-active'); + + await ionModalDidPresent.next(); + + const input = await page.locator('#root-input input'); + + /** + * Input is behind the active backdrop + * so users will click the backdrop first + * before getting the input. Using force + * allows us to test focus trapping even + * when the backdrop is enabled. + */ + await input.click({ force: true }); + expect(input).not.toBeFocused(); + }) +}); + +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 }) => { + warnings = []; + + page.on('console', (ev) => { + if (ev.type() === 'warning') { + warnings.push(ev.text()); + } + }); + + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#sheet-modal'); + await ionModalDidPresent.next(); + + const modal = await page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.01)); + }); + test('it should not change the breakpoint when setting to an invalid value', async ({ page }) => { + const modal = await page.locator('ion-modal'); + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + expect(breakpoint).toBe(0.25); + }); + test('it should warn when setting an invalid breakpoint', async () => { + expect(warnings.length).toBe(1); + expect(warnings[0]).toBe( + '[Ionic Warning]: Attempted to set invalid breakpoint value 0.01. Please double check that the breakpoint value is part of your defined breakpoints.' + ); + }); + }); + test.describe('sheet modal: valid values', () => { + test.beforeEach(async ({ page }) => { + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#sheet-modal'); + await ionModalDidPresent.next(); + }); + test('should update the current breakpoint', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const modal = await page.locator('.modal-sheet'); + + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); + await ionBreakpointDidChange.next(); + + const breakpoint = await modal.evaluate((el: HTMLIonModalElement) => el.getCurrentBreakpoint()); + expect(breakpoint).toBe(0.5); + }); + test('should emit ionBreakpointDidChange', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const modal = await page.locator('.modal-sheet'); + + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0.5)); + await ionBreakpointDidChange.next(); + expect(ionBreakpointDidChange.events.length).toBe(1); + }); + test('should emit ionBreakpointDidChange when breakpoint is set to 0', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const modal = await page.locator('.modal-sheet'); + + await modal.evaluate((el: HTMLIonModalElement) => el.setCurrentBreakpoint(0)); + await ionBreakpointDidChange.next(); + expect(ionBreakpointDidChange.events.length).toBe(1); + }); + test('should emit ionBreakpointDidChange when the sheet is swiped to breakpoint 0', async ({ page }) => { + const ionBreakpointDidChange = await page.spyOnEvent('ionBreakpointDidChange'); + const header = await page.locator('.modal-sheet ion-header'); + + await dragElementBy(header, page, 0, 500); + + await ionBreakpointDidChange.next(); + + expect(ionBreakpointDidChange.events.length).toBe(1); + }); + }); +}); diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f5ba894d39 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ce39f72134 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-chromium-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-chromium-linux.png new file mode 100644 index 0000000000..6c6da5dbf7 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-firefox-linux.png new file mode 100644 index 0000000000..7c0db8d1eb Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-webkit-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-webkit-linux.png new file mode 100644 index 0000000000..18833ab14a Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ac337c88f0 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..8e704be953 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-chromium-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-chromium-linux.png new file mode 100644 index 0000000000..e70769cc94 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-firefox-linux.png new file mode 100644 index 0000000000..2235636029 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-webkit-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-webkit-linux.png new file mode 100644 index 0000000000..dd3d832ae4 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-ios-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ffba1eebc9 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a30634634b Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-chromium-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-chromium-linux.png new file mode 100644 index 0000000000..482b6df7f1 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-chromium-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-firefox-linux.png new file mode 100644 index 0000000000..a1192ec4f5 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-webkit-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-webkit-linux.png new file mode 100644 index 0000000000..e0324ad581 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-ltr-webkit-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..18eae3a1f3 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2a2705e075 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-chromium-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-chromium-linux.png new file mode 100644 index 0000000000..0b98ab03f8 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-chromium-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-firefox-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-firefox-linux.png new file mode 100644 index 0000000000..4b3bdd47c5 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-firefox-linux.png differ diff --git a/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-webkit-linux.png b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-webkit-linux.png new file mode 100644 index 0000000000..60730291b6 Binary files /dev/null and b/core/src/components/modal/test/sheet/modal.e2e.ts-snapshots/modal-sheet-present-md-rtl-webkit-linux.png differ diff --git a/core/src/components/modal/test/spec/e2e.ts b/core/src/components/modal/test/spec/e2e.ts deleted file mode 100644 index 3f40349321..0000000000 --- a/core/src/components/modal/test/spec/e2e.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { testModal } from '../test.utils'; - -const DIRECTORY = 'spec'; - -test('modal: card', async () => { - await testModal(DIRECTORY, '#card-modal', true); -}); - -test('modal:rtl: card', async () => { - await testModal(DIRECTORY, '#card-modal', true, true); -}); diff --git a/core/src/components/modal/test/standalone/e2e.ts b/core/src/components/modal/test/standalone/e2e.ts deleted file mode 100644 index 69776cb276..0000000000 --- a/core/src/components/modal/test/standalone/e2e.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { testModal } from '../test.utils'; - -const DIRECTORY = 'standalone'; - -test('modal: basic', async () => { - await testModal(DIRECTORY, '#basic-modal'); -}); diff --git a/core/src/components/modal/test/standalone/modal.e2e.ts b/core/src/components/modal/test/standalone/modal.e2e.ts new file mode 100644 index 0000000000..48866d8234 --- /dev/null +++ b/core/src/components/modal/test/standalone/modal.e2e.ts @@ -0,0 +1,19 @@ +import { test } from '@utils/test/playwright'; + +test.describe('modal: standalone', () => { + test('should open even without an ion-app', async ({ page }) => { + await page.goto('/src/components/modal/test/standalone'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); + + await page.click('#basic-modal'); + await ionModalDidPresent.next(); + + const modal = await page.locator('ion-modal'); + await modal.evaluate((el: HTMLIonModalElement) => el.dismiss()); + + await ionModalDidDismiss.next(); + + await page.waitForSelector('ion-modal', { state: 'detached' }); + }); +}); diff --git a/core/src/components/modal/test/test.utils.ts b/core/src/components/modal/test/test.utils.ts deleted file mode 100644 index 9ae92c46d0..0000000000 --- a/core/src/components/modal/test/test.utils.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type { E2EPage } from '@stencil/core/testing'; -import { newE2EPage } from '@stencil/core/testing'; -import { generateE2EUrl } from '@utils/test'; - -export const openModal = async (page: E2EPage, selector: string) => { - const ionModalWillPresent = await page.spyOnEvent('ionModalWillPresent'); - const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); - - await page.click(selector); - - await ionModalWillPresent.next(); - await ionModalDidPresent.next(); - - await page.waitForSelector(selector); - - const modal = await page.find('ion-modal'); - await modal.waitForVisible(); - await page.waitForTimeout(100); - - return modal; -}; - -export const testModal = async (type: string, selector: string, expectUnmount = true, rtl = false) => { - const pageUrl = generateE2EUrl('modal', type, rtl); - - const page = await newE2EPage({ - url: pageUrl, - }); - - const screenshotCompares = []; - const ionModalWillDismiss = await page.spyOnEvent('ionModalWillDismiss'); - const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss'); - - let modal = await openModal(page, selector); - - screenshotCompares.push(await page.compareScreenshot()); - - await modal.callMethod('dismiss'); - - await ionModalWillDismiss.next(); - await ionModalDidDismiss.next(); - - await modal.waitForNotVisible(); - - screenshotCompares.push(await page.compareScreenshot('dismiss')); - - if (expectUnmount) { - modal = await page.find('ion-modal'); - expect(modal).toBeNull(); - } - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}; diff --git a/core/src/components/modal/test/trigger/e2e.ts b/core/src/components/modal/test/trigger/e2e.ts deleted file mode 100644 index da106ae229..0000000000 --- a/core/src/components/modal/test/trigger/e2e.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('should open modal by left clicking on trigger', async () => { - const page = await newE2EPage({ url: '/src/components/modal/test/trigger?ionic:_testing=true' }); - - const screenshotCompares = []; - - await page.click('#left-click-trigger'); - await page.waitForSelector('.left-click-modal'); - - const modal = await page.find('.left-click-modal'); - await modal.waitForVisible(); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/modal/test/trigger/modal.e2e.ts b/core/src/components/modal/test/trigger/modal.e2e.ts new file mode 100644 index 0000000000..e42f43688c --- /dev/null +++ b/core/src/components/modal/test/trigger/modal.e2e.ts @@ -0,0 +1,16 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('modal: trigger', () => { + test('should open modal by left clicking on trigger', async ({ page }) => { + await page.goto('/src/components/modal/test/trigger'); + const ionModalDidPresent = await page.spyOnEvent('ionModalDidPresent'); + + await page.click('#left-click-trigger'); + + await ionModalDidPresent.next(); + + const modal = await page.locator('.left-click-modal'); + expect(modal).toBeVisible(); + }); +}); diff --git a/core/src/utils/test/playwright/drag-element.ts b/core/src/utils/test/playwright/drag-element.ts new file mode 100644 index 0000000000..4421232662 --- /dev/null +++ b/core/src/utils/test/playwright/drag-element.ts @@ -0,0 +1,28 @@ +import type { Locator } from '@playwright/test'; + +import type { E2EPage } from './'; + +export const dragElementBy = async (el: Locator, page: E2EPage, dragByX = 0, dragByY = 0) => { + const boundingBox = await el.boundingBox(); + + if (!boundingBox) { + throw new Error( + 'Cannot get a bounding box for an element that is not visible. See https://playwright.dev/docs/api/class-locator#locator-bounding-box for more information' + ); + } + + const startX = boundingBox.x + boundingBox.width / 2; + const startY = boundingBox.y + boundingBox.height / 2; + + const midX = startX + dragByX / 2; + const midY = startY + dragByY / 2; + + const endX = startX + dragByX; + const endY = startY + dragByY; + + await page.mouse.move(startX, startY); + await page.mouse.down(); + await page.mouse.move(midX, midY); + await page.mouse.move(endX, endY); + await page.mouse.up(); +}; diff --git a/core/src/utils/test/playwright/index.ts b/core/src/utils/test/playwright/index.ts index 9732f31107..ef4f136f6c 100644 --- a/core/src/utils/test/playwright/index.ts +++ b/core/src/utils/test/playwright/index.ts @@ -1,3 +1,4 @@ export * from './playwright-page'; export * from './playwright-declarations'; export * from './page/event-spy'; +export * from './drag-element';