diff --git a/src/components/ui/Accordion/index.test.tsx b/src/components/ui/Accordion/index.test.tsx
index 2b740b0..5f4c0b0 100644
--- a/src/components/ui/Accordion/index.test.tsx
+++ b/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(
-
-
- Trigger
- {contentText}
-
-
- );
-
- 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(
+
+
+ {trigger1}
+ {content1}
+
+
+ {trigger2}
+ {content2}
+
+
+ );
+
+ // 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();
+ });
});