test: added test cases for controlled accordion

e2e/components/Accordion/Accordion-test.avt.e2e.js

@@ -48,6 +48,19 @@ test.describe('@avt Accordion', () => {
     );
   });
 
+  test('@avt-advanced-states controlled', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Accordion',
+      id: 'components-accordion--controlled',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations(
+      'Accordion @avt-advanced-states controlled'
+    );
+  });
+
   test('@avt-keyboard-nav', async ({ page }) => {
     await visitStory(page, {
       component: 'Accordion',
@@ -144,4 +157,36 @@ test.describe('@avt Accordion', () => {
       'Accordion @avt-advanced-states disabled'
     );
   });
+
+  test('@avt-keyboard-nav expand/collapseAll', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Accordion',
+      id: 'components-accordion--controlled',
+      globals: {
+        theme: 'white',
+      },
+    });
+    const expand_all_btn = page.getByRole('button', {
+      name: 'Click to expand all',
+    });
+    const collapse_all_btn = page.getByRole('button', {
+      name: 'Click to collapse all',
+    });
+    const accordion_btn1 = page.getByRole('button', {
+      name: 'Section 1 title',
+    });
+    await expect(expand_all_btn).toBeVisible();
+    await expect(collapse_all_btn).toBeVisible();
+    await page.keyboard.press('Tab');
+
+    // Check the focus on Expand button
+    await expect(expand_all_btn).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'true');
+    //focus on collapse button
+    await page.keyboard.press('Tab');
+    await expect(collapse_all_btn).toBeFocused();
+    await page.keyboard.press('Enter');
+    await expect(accordion_btn1).toHaveAttribute('aria-expanded', 'false');
+  });
 });

packages/react/src/components/Accordion/__tests__/Accordion-test.js

@@ -6,7 +6,7 @@
  */
 
 import '../../../../scss/components/accordion/_index.scss';
-
+import Button from '../../Button';
 import React from 'react';
 import { default as Accordion, AccordionItem } from '../';
 import { render, screen } from '@testing-library/react';
@@ -197,4 +197,61 @@ describe('Accordion', () => {
       );
     });
   });
+
+  describe('Expand/Collapse All', () => {
+    const ControlledAccordion = () => {
+      const [expandAll, setExpandAll] = React.useState(false);
+      return (
+        <>
+          <Button onClick={() => setExpandAll(true)}>
+            Click to expand all
+          </Button>
+          <Button
+            onClick={() => {
+              expandAll || expandAll === null
+                ? setExpandAll(false)
+                : setExpandAll(null);
+            }}>
+            Click to collapse all
+          </Button>
+
+          <Accordion className="extra-class">
+            <AccordionItem className="child" title="Heading A" open={expandAll}>
+              Panel A
+            </AccordionItem>
+            <AccordionItem className="child" title="Heading B" open={expandAll}>
+              Panel B
+            </AccordionItem>
+            <AccordionItem className="child" title="Heading C" open={expandAll}>
+              Panel C
+            </AccordionItem>
+          </Accordion>
+        </>
+      );
+    };
+
+    it('should expand All on click to button', async () => {
+      render(<ControlledAccordion />);
+
+      // click to open
+      await userEvent.click(screen.getByText('Click to expand all'));
+
+      // test when open
+      expect(screen.getByText('Panel A')).toBeVisible();
+      expect(screen.getByText('Panel B')).toBeVisible();
+      expect(screen.getByText('Panel C')).toBeVisible();
+    });
+
+    it('should Collapse All on click to button', async () => {
+      render(<ControlledAccordion />);
+
+      // click to close
+      await userEvent.click(screen.getByText('Click to collapse all'));
+
+      // test when close
+      expect(screen.getByText('Panel A')).not.toBeVisible();
+      expect(screen.getByText('Panel B')).not.toBeVisible();
+      expect(screen.getByText('Panel C')).not.toBeVisible();
+    });
+  });
 });