diff --git a/packages/react/accordion/src/accordion.test.tsx b/packages/react/accordion/src/accordion.test.tsx index 93a816198..a6f419f67 100644 --- a/packages/react/accordion/src/accordion.test.tsx +++ b/packages/react/accordion/src/accordion.test.tsx @@ -291,6 +291,51 @@ describe('given a single Accordion', () => { }); }); +describe('given a controlled single collapsible Accordion', () => { + let rendered: RenderResult; + + afterEach(cleanup); + + beforeEach(() => { + rendered = render(); + }); + + describe('when opening an item and then clicking the same trigger', () => { + let trigger: HTMLElement; + let contentOne: HTMLElement; + + beforeEach(() => { + trigger = rendered.getByText('Trigger One'); + fireEvent.click(trigger); + contentOne = rendered.getByText('Content One'); + }); + + it('should show the content after the first click', () => { + expect(contentOne).toBeVisible(); + }); + + describe('then clicking the trigger again to close', () => { + beforeEach(() => { + fireEvent.click(trigger); + }); + + it('should hide the content after the second click', () => { + expect(contentOne).not.toBeVisible(); + }); + + describe('then clicking the trigger a third time to re-open', () => { + beforeEach(() => { + fireEvent.click(trigger); + }); + + it('should show the content again', () => { + expect(rendered.getByText('Content One')).toBeVisible(); + }); + }); + }); + }); +}); + describe('given a multiple Accordion', () => { let handleValueChange: Mock; let rendered: RenderResult; @@ -412,3 +457,22 @@ function AccordionTest(props: React.ComponentProps) { ); } + +function ControlledAccordionSingle() { + const [value, setValue] = React.useState(undefined); + return ( + setValue(v || undefined)} + > + + + Trigger One + + Content One + + + ); +} diff --git a/packages/react/accordion/src/accordion.tsx b/packages/react/accordion/src/accordion.tsx index 36dbdc686..ba4f63328 100644 --- a/packages/react/accordion/src/accordion.tsx +++ b/packages/react/accordion/src/accordion.tsx @@ -106,8 +106,14 @@ const AccordionImplSingle = React.forwardRef