Skip to content

Commit 181c44e

Browse files
liamdebeasiliamdebeasi
authored
test(split-pane): migrate to playwright (#26344)
1 parent 2fe23d9 commit 181c44e

16 files changed

+43
-131
lines changed

‎core/src/components/split-pane/test/basic/e2e.ts‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎core/src/components/split-pane/test/basic/index.html‎

Lines changed: 10 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -12,129 +12,40 @@
1212
<script src="../../../../../scripts/testing/scripts.js"></script>
1313
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
1414
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
<style>
16+
ion-split-pane {
17+
--side-width: 200px;
18+
--side-min-width: 200px;
19+
}
20+
</style>
1521
</head>
16-
1722
<body>
1823
<ion-app>
1924
<ion-split-pane id="splitPane" content-id="split-content">
2025
<ion-menu side="start" content-id="split-content">
2126
<ion-header>
2227
<ion-toolbar color="secondary">
23-
<ion-title>Left Menu</ion-title>
28+
<ion-title>Menu</ion-title>
2429
</ion-toolbar>
2530
</ion-header>
2631

27-
<ion-content>
28-
<ion-list>
29-
<ion-item>Open end Menu</ion-item>
30-
<ion-item>Close Menu</ion-item>
31-
<ion-item>Close Menu</ion-item>
32-
<ion-item>Close Menu</ion-item>
33-
<ion-item>Close Menu</ion-item>
34-
<ion-item>Close Menu</ion-item>
35-
<ion-item>Close Menu</ion-item>
36-
<ion-item>Close Menu</ion-item>
37-
<ion-item>Close Menu</ion-item>
38-
<ion-item>Close Menu</ion-item>
39-
<ion-item>Close Menu</ion-item>
40-
<ion-item>Close Menu</ion-item>
41-
</ion-list>
42-
</ion-content>
43-
44-
<ion-footer>
45-
<ion-toolbar color="secondary">
46-
<ion-title>Footer</ion-title>
47-
</ion-toolbar>
48-
</ion-footer>
32+
<ion-content class="ion-padding"> Menu Content </ion-content>
4933
</ion-menu>
5034

5135
<div class="ion-page" id="split-content">
5236
<ion-header>
5337
<ion-toolbar>
5438
<ion-buttons slot="start">
5539
<ion-menu-button></ion-menu-button>
56-
<ion-menu-button auto-hide="false"></ion-menu-button>
5740
</ion-buttons>
5841

59-
<ion-title>Navigation</ion-title>
42+
<ion-title>Content</ion-title>
6043
</ion-toolbar>
6144
</ion-header>
6245

63-
<ion-content class="ion-padding">
64-
<h1>Page 1</h1>
65-
<ion-button onclick="menu()">Disable/enable menu</ion-button>
66-
<f></f>
67-
<f></f>
68-
<f></f>
69-
<f></f>
70-
71-
<ion-item>
72-
<ion-label>Toggle Side Min Width</ion-label>
73-
<ion-toggle id="side-min-width"></ion-toggle>
74-
</ion-item>
75-
76-
<ion-item>
77-
<ion-label>Toggle Side Max Width</ion-label>
78-
<ion-toggle id="side-max-width"></ion-toggle>
79-
</ion-item>
80-
81-
<ion-item>
82-
<ion-label>Toggle Side Fixed Width</ion-label>
83-
<ion-toggle id="side-width"></ion-toggle>
84-
</ion-item>
85-
</ion-content>
46+
<ion-content class="ion-padding"> Main Content </ion-content>
8647
</div>
8748
</ion-split-pane>
8849
</ion-app>
89-
<ion-menu-controller></ion-menu-controller>
90-
91-
<script>
92-
const sideMinWidth = document.querySelector('ion-toggle#side-min-width');
93-
const sideMaxWidth = document.querySelector('ion-toggle#side-max-width');
94-
const sideWidth = document.querySelector('ion-toggle#side-width');
95-
96-
const splitPane = document.querySelector('ion-split-pane');
97-
98-
sideMinWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-min-width'));
99-
sideMaxWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-max-width'));
100-
sideWidth.addEventListener('ionChange', () => splitPane.classList.toggle('side-width'));
101-
102-
const menuCtrl = document.querySelector('ion-menu-controller');
103-
function openStart() {
104-
menuCtrl.open('start');
105-
}
106-
107-
async function menu() {
108-
menuCtrl.enable(!(await menuCtrl.isEnabled()));
109-
}
110-
</script>
111-
112-
<style>
113-
.side-width {
114-
--side-width: 150px;
115-
--side-min-width: 150px;
116-
}
117-
118-
.side-min-width {
119-
--side-min-width: 500px;
120-
}
121-
122-
.side-max-width {
123-
--side-max-width: 75px;
124-
--side-min-width: 0px;
125-
}
126-
127-
f {
128-
display: block;
129-
height: 150px;
130-
width: 150px;
131-
background-color: blue;
132-
margin: 15px auto;
133-
}
134-
135-
f:last-child {
136-
background-color: red;
137-
}
138-
</style>
13950
</body>
14051
</html>

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { expect } from '@playwright/test';
2+
import { test, Viewports } from '@utils/test/playwright';
3+
4+
test.describe('split-pane: basic', () => {
5+
test('should render on the correct side', async ({ page }) => {
6+
await page.setViewportSize(Viewports.large);
7+
await page.goto(`/src/components/split-pane/test/basic`);
8+
9+
expect(await page.screenshot({ animations: 'disabled' })).toMatchSnapshot(
10+
`split-pane-${page.getSnapshotSettings()}.png`
11+
);
12+
});
13+
test('should collapse on smaller viewports', async ({ page, skip }) => {
14+
skip.rtl();
15+
await page.goto(`/src/components/split-pane/test/basic`);
16+
17+
const menu = page.locator('ion-menu');
18+
await expect(menu).toBeHidden();
19+
});
20+
test('should expand on larger viewports', async ({ page, skip }) => {
21+
skip.rtl();
22+
await page.setViewportSize(Viewports.large);
23+
await page.goto(`/src/components/split-pane/test/basic`);
24+
25+
const menu = page.locator('ion-menu');
26+
await expect(menu).toBeVisible();
27+
});
28+
});

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Chrome-linux.png‎

38.3 KB
Loading

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Firefox-linux.png‎

24.8 KB
Loading

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-ltr-Mobile-Safari-linux.png‎

35.6 KB
Loading

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Chrome-linux.png‎

37.9 KB
Loading

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Firefox-linux.png‎

23.8 KB
Loading

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-ios-rtl-Mobile-Safari-linux.png‎

35.6 KB
Loading

‎core/src/components/split-pane/test/basic/split-pane.e2e.ts-snapshots/split-pane-md-ltr-Mobile-Chrome-linux.png‎

40 KB
Loading

0 commit comments

Comments
 (0)