Skip to content

Commit 43ad7a3

Browse files
OS-pedrolourencoOS-pedrolourenco
committed
Adding new shape testing page and screenshot tests
1 parent 04be644 commit 43ad7a3

12 files changed

+135
-24
lines changed

‎core/src/components/toast/test/basic/index.html‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -169,30 +169,6 @@
169169
Toast with Icon 3
170170
</button>
171171

172-
<button
173-
class="expand"
174-
id="soft-shape-toast"
175-
onclick="openToast({ message: 'click to close', duration: 2000, shape: 'soft' })"
176-
>
177-
Soft Toast
178-
</button>
179-
180-
<button
181-
class="expand"
182-
id="round-shape-toast"
183-
onclick="openToast({ message: 'click to close', duration: 2000, shape: 'round' })"
184-
>
185-
Round Toast
186-
</button>
187-
188-
<button
189-
class="expand"
190-
id="rect-shape-toast"
191-
onclick="openToast({ message: 'click to close', duration: 2000, shape: 'rectangular' })"
192-
>
193-
Rectangular Toast
194-
</button>
195-
196172
<ion-grid>
197173
<ion-row>
198174
<ion-col size="6">

‎core/src/components/toast/test/shape/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Toast - Shape</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
<script type="module">
17+
import { toastController } from '../../../../dist/ionic/index.esm.js';
18+
window.toastController = toastController;
19+
</script>
20+
<body>
21+
<ion-app>
22+
<ion-header>
23+
<ion-toolbar>
24+
<ion-title>Toast - Shape</ion-title>
25+
</ion-toolbar>
26+
</ion-header>
27+
28+
<ion-content class="ion-padding" id="content">
29+
(Only available for ionic theme)
30+
<button
31+
class="expand"
32+
id="soft-shape-toast"
33+
onclick="openToast({ message: 'Hello, world!', duration: 2000, shape: 'soft' })"
34+
>
35+
Soft Toast
36+
</button>
37+
38+
<button
39+
class="expand"
40+
id="round-shape-toast"
41+
onclick="openToast({ message: 'Hello, world!', duration: 2000, shape: 'round' })"
42+
>
43+
Round Toast
44+
</button>
45+
46+
<button
47+
class="expand"
48+
id="rect-shape-toast"
49+
onclick="openToast({ message: 'Hello, world!', duration: 2000, shape: 'rectangular' })"
50+
>
51+
Rectangular Toast
52+
</button>
53+
</ion-content>
54+
</ion-app>
55+
<script>
56+
async function openToast(opts) {
57+
const toast = await toastController.create(opts);
58+
await toast.present();
59+
}
60+
</script>
61+
</body>
62+
</html>

‎core/src/components/toast/test/shape/toast.e2e.ts‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { expect, type Locator } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
import type { E2EPage, E2EPageOptions, ScreenshotFn, EventSpy } from '@utils/test/playwright';
4+
5+
class ToastFixture {
6+
readonly page: E2EPage;
7+
8+
private ionToastDidPresent!: EventSpy;
9+
10+
constructor(page: E2EPage) {
11+
this.page = page;
12+
}
13+
14+
async goto(config: E2EPageOptions) {
15+
const { page } = this;
16+
await page.goto(`/src/components/toast/test/shape`, config);
17+
this.ionToastDidPresent = await page.spyOnEvent('ionToastDidPresent');
18+
}
19+
20+
async openToast(selector: string) {
21+
const { page, ionToastDidPresent } = this;
22+
const button = page.locator(selector);
23+
await button.click();
24+
25+
await ionToastDidPresent.next();
26+
27+
return {
28+
toast: page.locator('ion-toast'),
29+
container: page.locator('ion-toast .toast-container'),
30+
};
31+
}
32+
33+
async screenshot(screenshotModifier: string, screenshot: ScreenshotFn, el?: Locator) {
34+
const { page } = this;
35+
36+
const screenshotString = screenshot(`toast-${screenshotModifier}`);
37+
38+
if (el === undefined) {
39+
await expect(page).toHaveScreenshot(screenshotString);
40+
} else {
41+
await expect(el).toHaveScreenshot(screenshotString);
42+
}
43+
}
44+
}
45+
46+
/**
47+
* This behavior does not vary across directions.
48+
*/
49+
configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
50+
test.describe(title('toast: shape'), () => {
51+
let toastFixture: ToastFixture;
52+
53+
test.beforeEach(async ({ page }) => {
54+
toastFixture = new ToastFixture(page);
55+
await toastFixture.goto(config);
56+
});
57+
58+
test('should render a soft toast', async () => {
59+
await toastFixture.openToast('#soft-shape-toast');
60+
await toastFixture.screenshot('soft', screenshot);
61+
});
62+
63+
test('should render a round toast', async () => {
64+
await toastFixture.openToast('#round-shape-toast');
65+
await toastFixture.screenshot('round', screenshot);
66+
});
67+
68+
test('should render a rectangular toast', async () => {
69+
await toastFixture.openToast('#rect-shape-toast');
70+
await toastFixture.screenshot('rect', screenshot);
71+
});
72+
});
73+
});

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-rect-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

15.6 KB
Loading

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-rect-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

24.2 KB
Loading

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-rect-ionic-md-ltr-light-Mobile-Safari-linux.png‎

15.1 KB
Loading

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-round-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

16.3 KB
Loading

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-round-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

24.8 KB
Loading

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-round-ionic-md-ltr-light-Mobile-Safari-linux.png‎

15.9 KB
Loading

‎core/src/components/toast/test/shape/toast.e2e.ts-snapshots/toast-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

15.9 KB
Loading

0 commit comments

Comments
 (0)