va-accordion: check for open accordion items on load (#1341)

* check for open accordion items on load

* add test

packages/web-components/src/components/va-accordion/va-accordion.e2e.ts

@@ -285,4 +285,29 @@ describe('va-accordion', () => {
       },
     });
   });
+
+  it('shows "Collapse all -" if all accordion-items are open on load', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-accordion section-heading="The Section Heading">
+        <va-accordion-item header="First item" open="true">Some content</va-accordion-item>
+      </va-accordion>`);
+
+    const button = await page.find('va-accordion >>> button');
+
+    expect(button.innerText).toEqual('collapse-all -');
+  });
+
+  it('shows "Collapse all -" if some of accordion-items are open on load', async () => {
+    const page = await newE2EPage();
+    await page.setContent(`
+      <va-accordion section-heading="The Section Heading">
+        <va-accordion-item header="First item" open="true">Some content</va-accordion-item>
+        <va-accordion-item header="Second item">Some content</va-accordion-item>
+      </va-accordion>`);
+
+    const button = await page.find('va-accordion >>> button');
+
+    expect(button.innerText).toEqual('collapse-all -');
+  });
 });

packages/web-components/src/components/va-accordion/va-accordion.tsx

@@ -138,18 +138,18 @@ export class VaAccordion {
       this.accordionsOpened();
   }
 
-  private accordionsOpened() {
+  private accordionsOpened(method='every') {
     // Track user clicks on va-accordion-item within an array to compare if all values are true or false
     let accordionItems = [];
     getSlottedNodes(this.el, 'va-accordion-item').forEach(item => {
       accordionItems.push((item as Element).getAttribute('open'));
     });
     const allOpen = currentValue => currentValue === 'true';
     const allClosed = currentValue => currentValue === 'false';
-    if (accordionItems.every(allOpen)) {
+    if (accordionItems[method](allOpen)) {
       this.expanded = true;
     }
-    if (accordionItems.every(allClosed)) {
+    if (accordionItems[method](allClosed)) {
       this.expanded = false;
     }
   }
@@ -183,6 +183,11 @@ export class VaAccordion {
     i18next.off('languageChanged');
   }
 
+  // if one or more accordion-items are open on load, then we should put component in state to "Collapse all"
+  componentDidLoad() {
+    this.accordionsOpened('some');
+  }
+
   render() {
     const { openSingle } = this;