Skip to content

Commit 50f8f64

Browse files
ShaneKShaneK
committed
Merge branch 'main' of github.com:ionic-team/ionic-framework into FW-6596
2 parents 112929c + 4b8863b commit 50f8f64

File tree

242 files changed

+698
-364
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

242 files changed

+698
-364
lines changed

‎core/Dockerfile‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Get Playwright
2-
FROM mcr.microsoft.com/playwright:v1.52.0
2+
FROM mcr.microsoft.com/playwright:v1.53.1
33

44
# Set the working directory
55
WORKDIR /ionic

‎core/package-lock.json‎

Lines changed: 23 additions & 23 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎core/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"@clack/prompts": "^0.11.0",
4545
"@ionic/eslint-config": "^0.3.0",
4646
"@ionic/prettier-config": "^2.0.0",
47-
"@playwright/test": "^1.52.0",
47+
"@playwright/test": "^1.53.2",
4848
"@rollup/plugin-node-resolve": "^8.4.0",
4949
"@rollup/plugin-virtual": "^2.0.3",
5050
"@stencil/angular-output-target": "^0.10.0",

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts‎

Lines changed: 218 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,226 @@ import { configs, test } from '@utils/test/playwright';
44
configs().forEach(({ config, screenshot, title }) => {
55
test.describe(title('breadcrumbs: basic'), () => {
66
test('should not have visual regressions', async ({ page }) => {
7-
await page.goto(`/src/components/breadcrumbs/test/basic`, config);
7+
await page.setContent(
8+
`
9+
<ion-breadcrumbs>
10+
<ion-breadcrumb>First</ion-breadcrumb>
11+
<ion-breadcrumb>Second</ion-breadcrumb>
12+
<ion-breadcrumb>Third</ion-breadcrumb>
13+
<ion-breadcrumb>Fourth</ion-breadcrumb>
14+
</ion-breadcrumbs>
15+
`,
16+
config
17+
);
818

9-
await page.setIonViewport();
19+
const breadcrumbs = page.locator('ion-breadcrumbs');
1020

11-
await expect(page).toHaveScreenshot(screenshot(`breadcrumb-diff`));
21+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-basic`));
22+
});
23+
24+
test('should not have visual regressions with links', async ({ page }) => {
25+
await page.setContent(
26+
`
27+
<ion-breadcrumbs>
28+
<ion-breadcrumb href="#">First</ion-breadcrumb>
29+
<ion-breadcrumb href="#">Second</ion-breadcrumb>
30+
<ion-breadcrumb href="#">Third</ion-breadcrumb>
31+
<ion-breadcrumb>Fourth</ion-breadcrumb>
32+
</ion-breadcrumbs>
33+
`,
34+
config
35+
);
36+
37+
const breadcrumbs = page.locator('ion-breadcrumbs');
38+
39+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-links`));
40+
});
41+
42+
test('should not have visual regressions with custom separators', async ({ page }) => {
43+
await page.setContent(
44+
`
45+
<ion-breadcrumbs>
46+
<ion-breadcrumb>
47+
First
48+
<ion-icon slot="separator" name="arrow-forward"></ion-icon>
49+
</ion-breadcrumb>
50+
<ion-breadcrumb>
51+
Second
52+
<ion-icon slot="separator" name="arrow-forward"></ion-icon>
53+
</ion-breadcrumb>
54+
<ion-breadcrumb>
55+
Third
56+
<ion-icon slot="separator" name="arrow-forward"></ion-icon>
57+
</ion-breadcrumb>
58+
<ion-breadcrumb>
59+
Fourth
60+
</ion-breadcrumb>
61+
</ion-breadcrumbs>
62+
`,
63+
config
64+
);
65+
66+
const breadcrumbs = page.locator('ion-breadcrumbs');
67+
68+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-separators`));
69+
});
70+
71+
test('should not have visual regressions with slotted start icons', async ({ page }) => {
72+
await page.setContent(
73+
`
74+
<ion-breadcrumbs>
75+
<ion-breadcrumb>
76+
<ion-icon slot="start" name="home"></ion-icon>
77+
First
78+
</ion-breadcrumb>
79+
<ion-breadcrumb>
80+
<ion-icon slot="start" name="folder"></ion-icon>
81+
Second
82+
</ion-breadcrumb>
83+
<ion-breadcrumb>
84+
<ion-icon slot="start" name="folder"></ion-icon>
85+
Third
86+
</ion-breadcrumb>
87+
<ion-breadcrumb>
88+
<ion-icon slot="start" name="document"></ion-icon>
89+
Fourth
90+
</ion-breadcrumb>
91+
</ion-breadcrumbs>
92+
`,
93+
config
94+
);
95+
96+
const breadcrumbs = page.locator('ion-breadcrumbs');
97+
98+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-start-icons`));
99+
});
100+
101+
test('should not have visual regressions with slotted end icons', async ({ page }) => {
102+
await page.setContent(
103+
`
104+
<ion-breadcrumbs>
105+
<ion-breadcrumb>
106+
First
107+
<ion-icon slot="end" name="home"></ion-icon>
108+
</ion-breadcrumb>
109+
<ion-breadcrumb>
110+
Second
111+
<ion-icon slot="end" name="folder"></ion-icon>
112+
</ion-breadcrumb>
113+
<ion-breadcrumb>
114+
Third
115+
<ion-icon slot="end" name="folder"></ion-icon>
116+
</ion-breadcrumb>
117+
<ion-breadcrumb>
118+
Fourth
119+
<ion-icon slot="end" name="document"></ion-icon>
120+
</ion-breadcrumb>
121+
</ion-breadcrumbs>
122+
`,
123+
config
124+
);
125+
126+
const breadcrumbs = page.locator('ion-breadcrumbs');
127+
128+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-slotted-end-icons`));
129+
});
130+
131+
test('should not have visual regressions in a toolbar', async ({ page }) => {
132+
await page.setContent(
133+
`
134+
<ion-toolbar>
135+
<ion-breadcrumbs>
136+
<ion-breadcrumb>First</ion-breadcrumb>
137+
<ion-breadcrumb>Second</ion-breadcrumb>
138+
<ion-breadcrumb>Third</ion-breadcrumb>
139+
<ion-breadcrumb>Fourth</ion-breadcrumb>
140+
</ion-breadcrumbs>
141+
</ion-toolbar>
142+
`,
143+
config
144+
);
145+
146+
const breadcrumbs = page.locator('ion-breadcrumbs');
147+
148+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-in-toolbar`));
149+
});
150+
});
151+
});
152+
153+
/**
154+
* This behavior does not vary across directions
155+
*/
156+
configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
157+
test.describe(title('breadcrumbs: states'), () => {
158+
test('should not have visual regressions when focused', async ({ page }) => {
159+
await page.setContent(
160+
`
161+
<ion-breadcrumbs>
162+
<ion-breadcrumb href="#">First</ion-breadcrumb>
163+
<ion-breadcrumb href="#">Second</ion-breadcrumb>
164+
<ion-breadcrumb href="#" class="ion-focused">Third</ion-breadcrumb>
165+
<ion-breadcrumb>Fourth</ion-breadcrumb>
166+
</ion-breadcrumbs>
167+
`,
168+
config
169+
);
170+
171+
const breadcrumbs = page.locator('ion-breadcrumbs');
172+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-focused`));
173+
});
174+
175+
test('should not have visual regressions when all breadcrumbs are disabled', async ({ page }) => {
176+
await page.setContent(
177+
`
178+
<ion-breadcrumbs>
179+
<ion-breadcrumb disabled>First</ion-breadcrumb>
180+
<ion-breadcrumb disabled>Second</ion-breadcrumb>
181+
<ion-breadcrumb disabled>Third</ion-breadcrumb>
182+
<ion-breadcrumb disabled>Fourth</ion-breadcrumb>
183+
</ion-breadcrumbs>
184+
`,
185+
config
186+
);
187+
188+
const breadcrumbs = page.locator('ion-breadcrumbs');
189+
190+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-all-disabled`));
191+
});
192+
193+
test('should not have visual regressions when one breadcrumb is disabled', async ({ page }) => {
194+
await page.setContent(
195+
`
196+
<ion-breadcrumbs>
197+
<ion-breadcrumb>First</ion-breadcrumb>
198+
<ion-breadcrumb disabled>Second</ion-breadcrumb>
199+
<ion-breadcrumb>Third</ion-breadcrumb>
200+
<ion-breadcrumb>Fourth</ion-breadcrumb>
201+
</ion-breadcrumbs>
202+
`,
203+
config
204+
);
205+
206+
const breadcrumbs = page.locator('ion-breadcrumbs');
207+
208+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-one-disabled`));
209+
});
210+
211+
test('should not have visual regressions when setting a different breadcrumb to active', async ({ page }) => {
212+
await page.setContent(
213+
`
214+
<ion-breadcrumbs>
215+
<ion-breadcrumb>First</ion-breadcrumb>
216+
<ion-breadcrumb>Second</ion-breadcrumb>
217+
<ion-breadcrumb active>Third</ion-breadcrumb>
218+
<ion-breadcrumb>Fourth</ion-breadcrumb>
219+
</ion-breadcrumbs>
220+
`,
221+
config
222+
);
223+
224+
const breadcrumbs = page.locator('ion-breadcrumbs');
225+
226+
await expect(breadcrumbs).toHaveScreenshot(screenshot(`breadcrumbs-custom-active`));
12227
});
13228
});
14229
});

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Chrome-linux.png‎

-138 KB
Binary file not shown.

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Firefox-linux.png‎

-186 KB
Binary file not shown.

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-ltr-Mobile-Safari-linux.png‎

-176 KB
Binary file not shown.

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Chrome-linux.png‎

-137 KB
Binary file not shown.

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Firefox-linux.png‎

-186 KB
Binary file not shown.

‎core/src/components/breadcrumbs/test/basic/breadcrumbs.e2e.ts-snapshots/breadcrumb-diff-ios-rtl-Mobile-Safari-linux.png‎

-178 KB
Binary file not shown.

0 commit comments

Comments
 (0)