Skip to content

Commit 521be54

Browse files
brandyscarneybrandyscarney
committed
test(accordion): update states test to show inset vs compact
1 parent 8a497c4 commit 521be54

File tree

1 file changed

+102
-6
lines changed

1 file changed

+102
-6
lines changed

‎core/src/components/accordion/test/states/accordion.e2e.ts‎

Lines changed: 102 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
3030
config
3131
);
3232

33-
const accordion = page.locator('ion-accordion-group');
33+
const accordionGroup = page.locator('ion-accordion-group');
3434

35-
await expect(accordion).toHaveScreenshot(screenshot('accordion-states-disabled'));
35+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-disabled'));
3636
});
3737

3838
test('should render activated state', async ({ page }) => {
@@ -62,9 +62,9 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
6262
config
6363
);
6464

65-
const accordion = page.locator('ion-accordion-group');
65+
const accordionGroup = page.locator('ion-accordion-group');
6666

67-
await expect(accordion).toHaveScreenshot(screenshot('accordion-states-activated'));
67+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-activated'));
6868
});
6969

7070
test('should render focused state', async ({ page }) => {
@@ -94,9 +94,105 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
9494
config
9595
);
9696

97-
const accordion = page.locator('ion-accordion-group');
97+
const accordionGroup = page.locator('ion-accordion-group');
9898

99-
await expect(accordion).toHaveScreenshot(screenshot('accordion-states-focused'));
99+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-focused'));
100+
});
101+
102+
test('should render disabled state when group is inset', async ({ page }) => {
103+
await page.setContent(
104+
`
105+
<ion-accordion-group value="first" expand="inset">
106+
<ion-accordion value="first" disabled="true">
107+
<ion-item slot="header">
108+
<ion-label>Accordion title</ion-label>
109+
</ion-item>
110+
<div slot="content">This is the body of the accordion.</div>
111+
</ion-accordion>
112+
<ion-accordion value="second">
113+
<ion-item slot="header">
114+
<ion-label>Accordion title</ion-label>
115+
</ion-item>
116+
<div slot="content">This is the body of the accordion.</div>
117+
</ion-accordion>
118+
<ion-accordion value="third">
119+
<ion-item slot="header">
120+
<ion-label>Accordion title</ion-label>
121+
</ion-item>
122+
<div slot="content">This is the body of the accordion.</div>
123+
</ion-accordion>
124+
</ion-accordion-group>
125+
`,
126+
config
127+
);
128+
129+
const accordionGroup = page.locator('ion-accordion-group');
130+
131+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-disabled'));
132+
});
133+
134+
test('should render activated state when group is inset', async ({ page }) => {
135+
await page.setContent(
136+
`
137+
<ion-accordion-group value="first" expand="inset">
138+
<ion-accordion value="first">
139+
<ion-item slot="header" class="ion-activated">
140+
<ion-label>Accordion title</ion-label>
141+
</ion-item>
142+
<div slot="content">This is the body of the accordion.</div>
143+
</ion-accordion>
144+
<ion-accordion value="second">
145+
<ion-item slot="header">
146+
<ion-label>Accordion title</ion-label>
147+
</ion-item>
148+
<div slot="content">This is the body of the accordion.</div>
149+
</ion-accordion>
150+
<ion-accordion value="third">
151+
<ion-item slot="header">
152+
<ion-label>Accordion title</ion-label>
153+
</ion-item>
154+
<div slot="content">This is the body of the accordion.</div>
155+
</ion-accordion>
156+
</ion-accordion-group>
157+
`,
158+
config
159+
);
160+
161+
const accordionGroup = page.locator('ion-accordion-group');
162+
163+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-activated'));
164+
});
165+
166+
test('should render focused state when group is inset', async ({ page }) => {
167+
await page.setContent(
168+
`
169+
<ion-accordion-group value="first" expand="inset">
170+
<ion-accordion value="first">
171+
<ion-item slot="header" class="ion-focused">
172+
<ion-label>Accordion title</ion-label>
173+
</ion-item>
174+
<div slot="content">This is the body of the accordion.</div>
175+
</ion-accordion>
176+
<ion-accordion value="second">
177+
<ion-item slot="header">
178+
<ion-label>Accordion title</ion-label>
179+
</ion-item>
180+
<div slot="content">This is the body of the accordion.</div>
181+
</ion-accordion>
182+
<ion-accordion value="third">
183+
<ion-item slot="header">
184+
<ion-label>Accordion title</ion-label>
185+
</ion-item>
186+
<div slot="content">This is the body of the accordion.</div>
187+
</ion-accordion>
188+
</ion-accordion-group>
189+
`,
190+
config
191+
);
192+
193+
const accordionGroup = page.locator('ion-accordion-group');
194+
195+
await expect(accordionGroup).toHaveScreenshot(screenshot('accordion-states-inset-focused'));
100196
});
101197
});
102198
});

0 commit comments

Comments
 (0)