va-accordion: fix Stencil test re-render warning (#1403)

* fix stencil re-render warning

* update expand logic to account for “some”

* add comments

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

@@ -292,7 +292,7 @@ describe('va-accordion', () => {
       <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 -');
@@ -305,7 +305,7 @@ describe('va-accordion', () => {
         <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,19 +138,25 @@ export class VaAccordion {
       this.accordionsOpened();
   }
 
+  /**
+   * Handles the accordion open state
+   * @param method "some" or "every"; array methods to check if all or some of the accordion items are open
+   */
   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';
+    const accordionItems = [...this.el.children]
+      .filter((el) => el.tagName.toLowerCase() === 'va-accordion-item')
+      .map((el) => el.open);
+
+    const allOpen = currentValue => currentValue === true;
+    const allClosed = currentValue => currentValue === false;
+
     if (accordionItems[method](allOpen)) {
-      this.expanded = true;
+      return this.expanded = true;
     }
+
     if (accordionItems[method](allClosed)) {
-      this.expanded = false;
+      return this.expanded = false;
     }
   }
 
@@ -184,7 +190,7 @@ export class VaAccordion {
   }
 
   // if one or more accordion-items are open on load, then we should put component in state to "Collapse all"
-  componentDidLoad() {
+  componentWillLoad() {
     this.accordionsOpened('some');
   }
 
@@ -198,7 +204,7 @@ export class VaAccordion {
     const accordionItemIDs = [...this.el.children]
       .filter((el) => el.tagName.toLowerCase() === 'va-accordion-item')
       .map((el) => el.id);
-    
+
     return (
       <Host>
         <div class={ accordionClass } ref={(accordionContainer) => this.accordionContainer = accordionContainer}>