diff --git a/core/src/components/app/test/safe-area/app.e2e.ts b/core/src/components/app/test/safe-area/app.e2e.ts new file mode 100644 index 0000000000..d754398d54 --- /dev/null +++ b/core/src/components/app/test/safe-area/app.e2e.ts @@ -0,0 +1,37 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; +import type { E2EPage } from '@utils/test/playwright'; + +test.describe('app: safe-area', () => { + const testOverlay = async (page: E2EPage, trigger: string, event: string, screenshotModifier: string) => { + const presentEvent = await page.spyOnEvent(event); + + await page.click(trigger); + await presentEvent.next(); + + // Sometimes the inner content takes a frame or two to render + await page.waitForChanges(); + + expect(await page.screenshot()).toMatchSnapshot(`app-${screenshotModifier}-diff-${page.getSnapshotSettings()}.png`); + }; + test.beforeEach(async ({ page }, testInfo) => { + test.skip( + testInfo.project.metadata.rtl === true, + 'Safe area tests only check top and bottom edges. RTL checks are not required here.' + ); + + await page.goto(`/src/components/app/test/safe-area`); + }); + test('should not have visual regressions with action sheet', async ({ page }) => { + await testOverlay(page, '#show-action-sheet', 'ionActionSheetDidPresent', 'action-sheet'); + }); + test('should not have visual regressions with menu', async ({ page }) => { + await testOverlay(page, '#show-menu', 'ionDidOpen', 'menu'); + }); + test('should not have visual regressions with picker', async ({ page }) => { + await testOverlay(page, '#show-picker', 'ionPickerDidPresent', 'picker'); + }); + test('should not have visual regressions with toast', async ({ page }) => { + await testOverlay(page, '#show-toast', 'ionToastDidPresent', 'toast'); + }); +}); diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..6d73247b6d Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..3b179024e5 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..9ffe8875de Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..c165112096 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..9bc20f116d Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..f0372617b7 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-action-sheet-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..2e3bf0e13d Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4d8b3c94f5 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ceba1a5fd7 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..38849ef9cc Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..12edf319a7 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a6412b100e Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-menu-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..88bdf2ddb1 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..97ec9f3ca9 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ffdafc720d Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..01b1a33646 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ac8da5bf8c Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..65282b9798 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-picker-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..d1601e3bf2 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..17b2f7d6ae Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..7e22ecdfb4 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..f329571e56 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6053f90652 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0528bae260 Binary files /dev/null and b/core/src/components/app/test/safe-area/app.e2e.ts-snapshots/app-toast-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/app/test/safe-area/e2e.ts b/core/src/components/app/test/safe-area/e2e.ts deleted file mode 100644 index 686a2a9c6a..0000000000 --- a/core/src/components/app/test/safe-area/e2e.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('app: safe-area', async () => { - const page = await newE2EPage({ - url: '/src/components/app/test/safe-area?ionic:_testing=true', - }); - - expect(await page.compareScreenshot()).toMatchScreenshot(); - - // Action Sheet - await page.click('#show-action-sheet'); - await page.waitForChanges(); - const actionSheet = await page.find('ion-action-sheet'); - expect(await page.compareScreenshot('action-sheet')).toMatchScreenshot(); - await actionSheet.callMethod('dismiss'); - - // Menu - await page.click('#show-menu'); - await page.waitForChanges(); - const menu = await page.find('ion-menu'); - expect(await page.compareScreenshot('menu')).toMatchScreenshot(); - await menu.callMethod('close'); - - // Picker - await page.click('#show-picker'); - await page.waitForChanges(); - const picker = await page.find('ion-picker'); - expect(await page.compareScreenshot('picker')).toMatchScreenshot(); - await picker.callMethod('dismiss'); - - // Toast - await page.click('#show-toast'); - await page.waitForChanges(); - const toast = await page.find('ion-toast'); - expect(await page.compareScreenshot('toast')).toMatchScreenshot(); - await toast.callMethod('dismiss'); -});