diff --git a/core/src/components/accordion-group/accordion-group.tsx b/core/src/components/accordion-group/accordion-group.tsx index 82e492df79..3cbf069dd7 100644 --- a/core/src/components/accordion-group/accordion-group.tsx +++ b/core/src/components/accordion-group/accordion-group.tsx @@ -150,10 +150,11 @@ export class AccordionGroup implements ComponentInterface { * to the array. */ if (multiple) { - const groupValue = (value || []) as string[]; - const valueExists = groupValue.find(v => v === accordionValue); + const groupValue = value || []; + const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue]; + const valueExists = processedValue.find(v => v === accordionValue); if (valueExists === undefined && accordionValue !== undefined) { - this.value = [...groupValue, accordionValue]; + this.value = [...processedValue, accordionValue]; } } else { this.value = accordionValue; @@ -164,8 +165,9 @@ export class AccordionGroup implements ComponentInterface { * out of the values array or unset the value. */ if (multiple) { - const groupValue = (value || []) as string[]; - this.value = groupValue.filter(v => v !== accordionValue); + const groupValue = value || []; + const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue]; + this.value = processedValue.filter(v => v !== accordionValue); } else { this.value = undefined; } diff --git a/core/src/components/accordion/test/multiple/e2e.ts b/core/src/components/accordion/test/multiple/e2e.ts new file mode 100644 index 0000000000..70e886e221 --- /dev/null +++ b/core/src/components/accordion/test/multiple/e2e.ts @@ -0,0 +1,55 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('accordion: multiple - open', async () => { + const page = await newE2EPage({ + url: '/src/components/accordion/test/multiple?ionic:_testing=true' + }); + + const screenshotCompares = []; + + screenshotCompares.push(await page.compareScreenshot()); + + const accordionGroup = await page.find('ion-accordion-group'); + const diningAccordion = await page.find('ion-accordion[value="dining"] ion-item[slot="header"]'); + const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]'); + + const groupValue = await accordionGroup.getProperty('value'); + expect(groupValue).toEqual('attractions'); + + await diningAccordion.click(); + await page.waitForChanges(); + + const groupValueAgain = await accordionGroup.getProperty('value'); + expect(groupValueAgain).toEqual(['attractions', 'dining']); + + screenshotCompares.push(await page.compareScreenshot()); + + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); + } +}); + +test('accordion: multiple - close', async () => { + const page = await newE2EPage({ + url: '/src/components/accordion/test/multiple?ionic:_testing=true' + }); + + const screenshotCompares = []; + + screenshotCompares.push(await page.compareScreenshot()); + + const accordionGroup = await page.find('ion-accordion-group'); + const attractionsAccordion = await page.find('ion-accordion[value="attractions"] ion-item[slot="header"]'); + + await attractionsAccordion.click(); + await page.waitForChanges(); + + const groupValue = await accordionGroup.getProperty('value'); + expect(groupValue).toEqual([]); + + screenshotCompares.push(await page.compareScreenshot()); + + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); + } +}); diff --git a/core/src/components/accordion/test/multiple/index.html b/core/src/components/accordion/test/multiple/index.html new file mode 100644 index 0000000000..25b49c155a --- /dev/null +++ b/core/src/components/accordion/test/multiple/index.html @@ -0,0 +1,118 @@ + + + + + Accordion - Multiple + + + + + + + + + + + + Accordion - Multiple + + + +
+
+

Multiple

+ + + + + Attractions + + + + Movie Theaters + + + Amusement Parks + + + Mini Golf + + + + + + + Dining + + + + Breakfast & Brunch + + + New American + + + Sushi Bars + + + + + + + Games + + + + + Xbox + + + Playstation + + + Switch + + + + + + + Exercise + + + + + Jog + + + Swim + + + Nap + + + + +
+
+ + + +