Skip to content

Commit 3bb7380

Browse files
brandyscarneybrandyscarney
committed
test(accordion-group): add test for expand property
1 parent 1c90386 commit 3bb7380

14 files changed

+297
-0
lines changed

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts‎

Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
5+
test.describe(title('accordion-group: expand'), () => {
6+
test.describe(title('compact'), () => {
7+
test('should not have visual regressions', async ({ page }) => {
8+
await page.setContent(
9+
`
10+
<style>
11+
/* Background styles to show the border radius */
12+
:root {
13+
background: #ccc7c7;
14+
}
15+
</style>
16+
<ion-accordion-group>
17+
<ion-accordion value="first">
18+
<ion-item slot="header">
19+
<ion-label>Accordion title</ion-label>
20+
</ion-item>
21+
<div slot="content">This is the body of the accordion.</div>
22+
</ion-accordion>
23+
<ion-accordion value="second">
24+
<ion-item slot="header">
25+
<ion-label>Accordion title</ion-label>
26+
</ion-item>
27+
<div slot="content">This is the body of the accordion.</div>
28+
</ion-accordion>
29+
<ion-accordion value="third">
30+
<ion-item slot="header">
31+
<ion-label>Accordion title</ion-label>
32+
</ion-item>
33+
<div slot="content">This is the body of the accordion.</div>
34+
</ion-accordion>
35+
</ion-accordion-group>
36+
`,
37+
config
38+
);
39+
40+
const accordionGroup = page.locator('ion-accordion-group');
41+
42+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact'));
43+
});
44+
45+
test('should not have visual regressions when expanded', async ({ page }) => {
46+
await page.setContent(
47+
`
48+
<style>
49+
/* Background styles to show the border radius */
50+
:root {
51+
background: #ccc7c7;
52+
}
53+
</style>
54+
<ion-accordion-group value="first">
55+
<ion-accordion value="first">
56+
<ion-item slot="header">
57+
<ion-label>Accordion title</ion-label>
58+
</ion-item>
59+
<div slot="content">This is the body of the accordion.</div>
60+
</ion-accordion>
61+
<ion-accordion value="second">
62+
<ion-item slot="header">
63+
<ion-label>Accordion title</ion-label>
64+
</ion-item>
65+
<div slot="content">This is the body of the accordion.</div>
66+
</ion-accordion>
67+
<ion-accordion value="third">
68+
<ion-item slot="header">
69+
<ion-label>Accordion title</ion-label>
70+
</ion-item>
71+
<div slot="content">This is the body of the accordion.</div>
72+
</ion-accordion>
73+
</ion-accordion-group>
74+
`,
75+
config
76+
);
77+
78+
const accordionGroup = page.locator('ion-accordion-group');
79+
80+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-compact-expanded'));
81+
});
82+
});
83+
84+
test.describe(title('inset'), () => {
85+
test('should not have visual regressions', async ({ page }) => {
86+
await page.setContent(
87+
`
88+
<style>
89+
/* Background styles to show the border radius */
90+
:root {
91+
background: #ccc7c7;
92+
}
93+
</style>
94+
<ion-accordion-group expand="inset">
95+
<ion-accordion value="first">
96+
<ion-item slot="header">
97+
<ion-label>Accordion title</ion-label>
98+
</ion-item>
99+
<div slot="content">This is the body of the accordion.</div>
100+
</ion-accordion>
101+
<ion-accordion value="second">
102+
<ion-item slot="header">
103+
<ion-label>Accordion title</ion-label>
104+
</ion-item>
105+
<div slot="content">This is the body of the accordion.</div>
106+
</ion-accordion>
107+
<ion-accordion value="third">
108+
<ion-item slot="header">
109+
<ion-label>Accordion title</ion-label>
110+
</ion-item>
111+
<div slot="content">This is the body of the accordion.</div>
112+
</ion-accordion>
113+
</ion-accordion-group>
114+
`,
115+
config
116+
);
117+
118+
const accordionGroup = page.locator('ion-accordion-group');
119+
120+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset'));
121+
});
122+
123+
test('should not have visual regressions when expanded', async ({ page }) => {
124+
await page.setContent(
125+
`
126+
<style>
127+
/* Background styles to show the border radius */
128+
:root {
129+
background: #ccc7c7;
130+
}
131+
</style>
132+
<ion-accordion-group value="first" expand="inset">
133+
<ion-accordion value="first">
134+
<ion-item slot="header">
135+
<ion-label>Accordion title</ion-label>
136+
</ion-item>
137+
<div slot="content">This is the body of the accordion.</div>
138+
</ion-accordion>
139+
<ion-accordion value="second">
140+
<ion-item slot="header">
141+
<ion-label>Accordion title</ion-label>
142+
</ion-item>
143+
<div slot="content">This is the body of the accordion.</div>
144+
</ion-accordion>
145+
<ion-accordion value="third">
146+
<ion-item slot="header">
147+
<ion-label>Accordion title</ion-label>
148+
</ion-item>
149+
<div slot="content">This is the body of the accordion.</div>
150+
</ion-accordion>
151+
</ion-accordion-group>
152+
`,
153+
config
154+
);
155+
156+
const accordionGroup = page.locator('ion-accordion-group');
157+
158+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-group-expand-inset-expanded'));
159+
});
160+
});
161+
});
162+
});

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

7.94 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

11.6 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png‎

7.88 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

5.77 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

8.63 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-compact-ionic-md-ltr-light-Mobile-Safari-linux.png‎

5.76 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

8.62 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

12.3 KB
Loading

‎core/src/components/accordion-group/test/expand/accordion.e2e.ts-snapshots/accordion-group-expand-inset-expanded-ionic-md-ltr-light-Mobile-Safari-linux.png‎

8.55 KB
Loading

0 commit comments

Comments
 (0)