feat: add test for accordion functionality

src/components/ui/Accordion/index.test.tsx

@@ -1,4 +1,5 @@
 import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 import '@testing-library/jest-dom';
 import {
@@ -37,20 +38,6 @@ describe('ui/Accordion', () => {
     expect(screen.getByText(contentText)).toBeInTheDocument();
   });
 
-  it('accordion is closed default', () => {
-    const contentText = 'Content';
-    const screen = render(
-      <Accordion type="single" collapsible>
-        <AccordionItem value="item-1">
-          <AccordionTrigger>Trigger</AccordionTrigger>
-          <AccordionContent>{contentText}</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    );
-
-    expect(() => screen.getByText(contentText)).toThrow();
-  });
-
   it('renders components with correct classes', () => {
     const triggerText = 'Trigger';
     const contentText = 'Content';
@@ -69,4 +56,49 @@ describe('ui/Accordion', () => {
     );
     expect(screen.getByText(contentText)).toHaveClass('pb-4 pt-0');
   });
+
+  it('accordion works correctly by clicking', async () => {
+    const trigger1 = 'Trigger 1';
+    const trigger2 = 'Trigger 2';
+    const content1 = 'Content 1';
+    const content2 = 'Content 2';
+
+    const screen = render(
+      <Accordion type="single" collapsible>
+        <AccordionItem value="item-1">
+          <AccordionTrigger>{trigger1}</AccordionTrigger>
+          <AccordionContent>{content1}</AccordionContent>
+        </AccordionItem>
+        <AccordionItem value="item-2">
+          <AccordionTrigger>{trigger2}</AccordionTrigger>
+          <AccordionContent>{content2}</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+
+    // closed by default
+    expect(() => screen.getByText(content1)).toThrow();
+    expect(() => screen.getByText(content2)).toThrow();
+
+    // open first item
+    await userEvent.click(screen.getByText(trigger1));
+
+    // first item is open, second is closed
+    expect(screen.getByText(content1)).toBeInTheDocument();
+    expect(() => screen.getByText(content2)).toThrow();
+
+    // open second item
+    await userEvent.click(screen.getByText(trigger2));
+
+    // first item is closed, second is open
+    expect(() => screen.getByText(content1)).toThrow();
+    expect(screen.getByText(content2)).toBeInTheDocument();
+
+    // close second item
+    await userEvent.click(screen.getByText(trigger2));
+
+    // both items are closed
+    expect(() => screen.getByText(content1)).toThrow();
+    expect(() => screen.getByText(content2)).toThrow();
+  });
 });