diff --git a/core/src/components/split-pane/test/basic/e2e.ts b/core/src/components/split-pane/test/basic/e2e.ts deleted file mode 100644 index 61f2e20dd5..0000000000 --- a/core/src/components/split-pane/test/basic/e2e.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('split-pane: basic', async () => { - const page = await newE2EPage({ - url: '/src/components/split-pane/test/basic?ionic:_testing=true', - }); - - const screenshotCompares = []; - const MIN_WIDTH = '#side-min-width'; - const MAX_WIDTH = '#side-max-width'; - const WIDTH = '#side-width'; - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click(MIN_WIDTH); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click(MIN_WIDTH); - await page.click(MAX_WIDTH); - - screenshotCompares.push(await page.compareScreenshot()); - - await page.click(MAX_WIDTH); - await page.click(WIDTH); - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); diff --git a/core/src/components/split-pane/test/basic/index.html b/core/src/components/split-pane/test/basic/index.html index 60c571f3a3..c346b4739d 100644 --- a/core/src/components/split-pane/test/basic/index.html +++ b/core/src/components/split-pane/test/basic/index.html @@ -12,40 +12,24 @@ + - - Left Menu + Menu - - - Open end Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - Close Menu - - - - - - Footer - - + Menu Content
@@ -53,88 +37,15 @@ - - Navigation + Content - -

Page 1

- Disable/enable menu - - - - - - - Toggle Side Min Width - - - - - Toggle Side Max Width - - - - - Toggle Side Fixed Width - - - + Main Content
- - - - - diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts b/core/src/components/split-pane/test/basic/split-pane.e2e.ts new file mode 100644 index 0000000000..485e06604d --- /dev/null +++ b/core/src/components/split-pane/test/basic/split-pane.e2e.ts @@ -0,0 +1,28 @@ +import { expect } from '@playwright/test'; +import { test, Viewports } from '@utils/test/playwright'; + +test.describe('split-pane: basic', () => { + test('should render on the correct side', async ({ page }) => { + await page.setViewportSize(Viewports.large); + await page.goto(`/src/components/split-pane/test/basic`); + + expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot( + `split-pane-${page.getSnapshotSettings()}.png` + ); + }); + test('should collapse on smaller viewports', async ({ page, skip }) => { + skip.rtl(); + await page.goto(`/src/components/split-pane/test/basic`); + + const menu = page.locator('ion-menu'); + await expect(menu).toBeHidden(); + }); + test('should expand on larger viewports', async ({ page, skip }) => { + skip.rtl(); + await page.setViewportSize(Viewports.large); + await page.goto(`/src/components/split-pane/test/basic`); + + const menu = page.locator('ion-menu'); + await expect(menu).toBeVisible(); + }); +}); diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..8fee7120b1 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4e52b7a95e Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Safari-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..a6ad937088 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..cba85a1691 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..598c2d0e34 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..49c5d7b05f Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Chrome-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..3caaeff977 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Firefox-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..cbbed2e1df Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Safari-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..2ef8e73019 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Chrome-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..9eea6cad29 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Firefox-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..5e81f5ef8c Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Safari-linux.png b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 0000000000..0436f38969 Binary files /dev/null and b/core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/utils/test/playwright/viewports/index.ts b/core/src/utils/test/playwright/viewports/index.ts index 2c46da9f80..307945e549 100644 --- a/core/src/utils/test/playwright/viewports/index.ts +++ b/core/src/utils/test/playwright/viewports/index.ts @@ -5,4 +5,9 @@ export const Viewports = { height: 900, }, }, + // Based off https://github.com/ionic-team/ionic-framework/blob/2fe23d9d46c3593843c781c57340332e5a86fd64/core/src/components/split-pane/split-pane.tsx#L9-L13 + large: { + width: 992, + height: 768, + }, };