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(); + }); });