Skip to content

Commit 6be1189

Browse files
brandyscarneybrandyscarney
committed
test(breadcrumbs): update the basic test to use setContent
1 parent bcc730c commit 6be1189

File tree

2 files changed

+175
-261
lines changed

2 files changed

+175
-261
lines changed

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

Lines changed: 173 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,181 @@ 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+
<ion-breadcrumbs>
9+
<ion-breadcrumb>First</ion-breadcrumb>
10+
<ion-breadcrumb>Second</ion-breadcrumb>
11+
<ion-breadcrumb>Third</ion-breadcrumb>
12+
<ion-breadcrumb>Fourth</ion-breadcrumb>
13+
</ion-breadcrumbs>
14+
`, config);
815

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

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

0 commit comments

Comments
 (0)