Close accordion item if clicked when open. (#744)

* Close accordion item if clicked a second time * Add test
facultyai · Oct 21, 2021 · e777d8e · e777d8e
1 parent 0ebea4f
commit e777d8e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
@@ -37,6 +37,8 @@ const Accordion = props => {
     if (setProps) {
       if (active_item !== item) {
         setProps({active_item: item});
+      } else {
+        setProps({active_item: null});
       }
     }
   };

diff --git a/src/components/accordion/__tests__/Accordion.test.js b/src/components/accordion/__tests__/Accordion.test.js
@@ -128,5 +128,26 @@ describe('Accordion', () => {
     expect(
       accordionItems.children[1].querySelector('div.accordion-collapse')
     ).toHaveClass('show');
+
+    // clicking on an open item closes it
+    userEvent.click(
+      accordionItems.children[1].querySelector('h2.accordion-header > button')
+    );
+    expect(mockSetProps.mock.calls).toHaveLength(2);
+
+    rerender(
+      <Accordion setProps={mockSetProps} {...mockSetProps.mock.calls[1][0]}>
+        <AccordionItem title="item-title-1">item-content-1</AccordionItem>
+        <AccordionItem title="item-title-2">item-content-2</AccordionItem>
+      </Accordion>
+    );
+    jest.runAllTimers();
+
+    expect(
+      accordionItems.children[0].querySelector('div.accordion-collapse')
+    ).not.toHaveClass('show');
+    expect(
+      accordionItems.children[1].querySelector('div.accordion-collapse')
+    ).not.toHaveClass('show');
   });
 });