javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(split-pane): migrate to playwright (#26344)

Browse Source
This commit is contained in:
Liam DeBeasi
2022-11-22 16:00:53 -05:00
committed by GitHub
parent 2fe23d9d46
commit 181c44e4bb
16 changed files with 43 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/src/components/split-pane/test/basic/e2e.ts
View File

@ -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();
}
});

109
core/src/components/split-pane/test/basic/index.html
View File

@ -12,40 +12,24 @@
<script src="../../../../../scripts/testing/scripts.js"></script> <script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script> <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script> <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
ion-split-pane {
--side-width: 200px;
--side-min-width: 200px;
}
</style>
</head> </head>
<body> <body>
<ion-app> <ion-app>
<ion-split-pane id="splitPane" content-id="split-content"> <ion-split-pane id="splitPane" content-id="split-content">
<ion-menu side="start" content-id="split-content"> <ion-menu side="start" content-id="split-content">
<ion-header> <ion-header>
<ion-toolbar color="secondary"> <ion-toolbar color="secondary">
<ion-title>Left Menu</ion-title> <ion-title>Menu</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content class="ion-padding"> Menu Content </ion-content>
<ion-list>
<ion-item>Open end Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
<ion-item>Close Menu</ion-item>
</ion-list>
</ion-content>
<ion-footer>
<ion-toolbar color="secondary">
<ion-title>Footer</ion-title>
</ion-toolbar>
</ion-footer>
</ion-menu> </ion-menu>
<div class="ion-page" id="split-content"> <div class="ion-page" id="split-content">
@ -53,88 +37,15 @@
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-menu-button></ion-menu-button> <ion-menu-button></ion-menu-button>
<ion-menu-button auto-hide="false"></ion-menu-button>
</ion-buttons> </ion-buttons>
<ion-title>Navigation</ion-title> <ion-title>Content</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="ion-padding"> <ion-content class="ion-padding"> Main Content </ion-content>
<h1>Page 1</h1>
<ion-button onclick="menu()">Disable/enable menu</ion-button>
<f></f>
<f></f>
<f></f>
<f></f>
<ion-item>
<ion-label>Toggle Side Min Width</ion-label>
<ion-toggle id="side-min-width"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Toggle Side Max Width</ion-label>
<ion-toggle id="side-max-width"></ion-toggle>
</ion-item>
<ion-item>
<ion-label>Toggle Side Fixed Width</ion-label>
<ion-toggle id="side-width"></ion-toggle>
</ion-item>
</ion-content>
</div> </div>
</ion-split-pane> </ion-split-pane>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller>
<script>
const sideMinWidth = document.querySelector('ion-toggle#side-min-width');
const sideMaxWidth = document.querySelector('ion-toggle#side-max-width');
const sideWidth = document.querySelector('ion-toggle#side-width');
const splitPane = document.querySelector('ion-split-pane');
sideMinWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-min-width'));
sideMaxWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-max-width'));
sideWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-width'));
const menuCtrl = document.querySelector('ion-menu-controller');
function openStart() {
menuCtrl.open('start');
}
async function menu() {
menuCtrl.enable(!(await menuCtrl.isEnabled()));
}
</script>
<style>
.side-width {
--side-width: 150px;
--side-min-width: 150px;
}
.side-min-width {
--side-min-width: 500px;
}
.side-max-width {
--side-max-width: 75px;
--side-min-width: 0px;
}
f {
display: block;
height: 150px;
width: 150px;
background-color: blue;
margin: 15px auto;
}
f:last-child {
background-color: red;
}
</style>
</body> </body>
</html> </html>

28
core/src/components/split-pane/test/basic/split-pane.e2e.ts Normal file
View File

@ -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();
});
});

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 36 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

BIN
core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-rtl-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

5
core/src/utils/test/playwright/viewports/index.ts
View File

@ -5,4 +5,9 @@ export const Viewports = {
height: 900, 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,
},
}; };