fix: collapse main composer

src/components/Accordion/Accordion.spec.tsx

@@ -20,22 +20,22 @@ const makeSut = ({
 
 describe('Accordion', () => {
   describe('when isOpen is false', () => {
-    it('body cannot render', () => {
+    it('body is collapsed', () => {
       makeSut({ isOpen: false });
 
-      const content = screen.queryByText('content');
+      const contentWrapper = screen.getByTestId('accordion-content');
 
-      expect(content).not.toBeInTheDocument();
+      expect(contentWrapper).toHaveStyle('height: 0px');
     });
   });
 
   describe('when isOpen is true', () => {
     it('body can render', () => {
       makeSut({ isOpen: true });
 
-      const content = screen.getByText('content');
+      const contentWrapper = screen.getByTestId('accordion-content');
 
-      expect(content).toBeVisible();
+      expect(contentWrapper).toHaveStyle('height: auto');
     });
   });
 });

src/components/Accordion/Accordion.tsx

@@ -7,10 +7,14 @@ import scss from './Accordion.module.scss';
 
 import { TAccordionProps } from './Accordion.types';
 
-function computeVariants(duration: number): Record<string, Variant> {
+function computeVariants(): Record<string, Variant> {
   return {
-    collapsed: { height: 0, transition: { duration } },
-    expanded: { height: 'auto', transition: { duration } },
+    collapsed: { height: 0, opacity: 0 },
+    expanded: {
+      height: 'auto',
+      opacity: 1,
+      transitionEnd: { height: 'auto' },
+    },
   };
 }
 
@@ -19,17 +23,17 @@ function Accordion({ duration = 0.3, ...props }: TAccordionProps): ReactNode {
     <section className={classNames(props.className, scss.container)}>
       <div className={scss.header}>{props.header}</div>
       <AnimatePresence>
-        {props.isOpen ? (
-          <motion.div
-            animate="expanded"
-            className={scss.content}
-            exit="collapsed"
-            initial="collapsed"
-            variants={computeVariants(duration)}
-          >
-            {props.content}
-          </motion.div>
-        ) : null}
+        <motion.div
+          animate={props.isOpen ? 'expanded' : 'collapsed'}
+          className={scss.content}
+          data-testid="accordion-content"
+          exit="collapsed"
+          initial="expanded"
+          transition={{ duration }}
+          variants={computeVariants()}
+        >
+          {props.content}
+        </motion.div>
       </AnimatePresence>
     </section>
   );

src/components/MainComposer/MainComposer.module.scss

@@ -1,6 +1,2 @@
 @use '~styles/global.scss';
 @use '~styles/breakpoints.scss';
-
-.container {
-  min-height: 40rem;
-}

src/pages/home/components/Sidebar/Sidebar.spec.tsx

@@ -48,13 +48,13 @@ describe('Sidebar component', () => {
     for (var account in accounts) {
       const socialMedia = mockedSocialMedias().get(account);
 
-      const accordionEvidence = screen.getByText(
+      const accordionEvidence = screen.getAllByText(
         new RegExp(socialMedia?.name as string, 'i')
       );
 
-      await userEvent.click(accordionEvidence);
+      await userEvent.click(accordionEvidence[0]);
 
-      expect(accordionEvidence).toBeInTheDocument();
+      expect(accordionEvidence[0]).toBeInTheDocument();
     }
 
     Object.values(accounts).forEach((values) => {
@@ -162,16 +162,16 @@ describe('Sidebar component', () => {
 
       await userEvent.type(inputSearchComponent, 'Twitter');
 
-      const discordAccordion = screen.getByText(/discord/i);
-      await waitForElementToBeRemoved(discordAccordion);
+      const discordAccordion = screen.getAllByText(/discord/i);
+      await waitForElementToBeRemoved(discordAccordion[0]);
 
-      const accordion = screen.getByText(/twitter/i);
-      await userEvent.click(accordion);
+      const accordions = screen.getAllByText(/twitter/i);
+      await userEvent.click(accordions[0]);
 
       const evidence = screen.getByText('Twitter User 14');
 
       expect(evidence).toBeInTheDocument();
-      expect(discordAccordion).not.toBeInTheDocument();
+      expect(discordAccordion[0]).not.toBeInTheDocument();
     });
 
     it('and theres no results', async () => {

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx

@@ -40,9 +40,9 @@ describe('SocialAccordion', () => {
         socialMediaId="DISCORD_EXAMPLE_ID"
       />
     );
-    const accordion = screen.getByText(/discord/i);
+    const accordion = screen.getAllByText(/discord/i);
 
-    expect(accordion).toBeInTheDocument();
+    expect(accordion[0]).toBeInTheDocument();
   });
 
   it('renders the intern content of accordion when is open', async () => {
@@ -54,8 +54,9 @@ describe('SocialAccordion', () => {
       />
     );
 
-    const accordion = screen.getByText(/discord/i);
-    await userEvent.click(accordion);
+    const accordion = screen.getAllByText(/discord/i);
+
+    await userEvent.click(accordion[0]);
 
     const innerContent = screen.getByText(mockDiscordData[0].userName);
 
@@ -81,8 +82,8 @@ describe('SocialAccordion', () => {
         />
       );
 
-      const accordion = screen.getByText(/discord/i);
-      await userEvent.click(accordion);
+      const accordion = screen.getAllByText(/discord/i);
+      await userEvent.click(accordion[0]);
 
       const [firstAccountSwitch] = screen.getAllByRole('checkbox');
 
@@ -101,8 +102,8 @@ describe('SocialAccordion', () => {
         />
       );
 
-      const accordion = screen.getByText(/discord/i);
-      await userEvent.click(accordion);
+      const accordion = screen.getAllByText(/discord/i);
+      await userEvent.click(accordion[0]);
 
       const [firstAccountSwitch] = screen.getAllByRole('checkbox');
 
@@ -115,7 +116,7 @@ describe('SocialAccordion', () => {
     });
   });
 
-  describe('when click 2 times', () => {
+  describe('when clicked 2 times', () => {
     it('closes the accordion', async () => {
       render(
         <SocialAccordion
@@ -125,17 +126,19 @@ describe('SocialAccordion', () => {
         />
       );
 
-      const accordion = screen.getByText(/discord/i);
-      await userEvent.click(accordion);
+      const contentWrapper = screen.getByTestId('accordion-content');
+      const toggleAccordion = screen.getByTestId('accordion-toggle-button');
 
-      const innerContent = screen.getByText(mockDiscordData[0].userName);
+      await userEvent.click(toggleAccordion);
 
-      expect(innerContent).toBeInTheDocument();
+      await waitFor(() => {
+        expect(contentWrapper).toHaveStyle('opacity: 1');
+      });
 
-      await userEvent.click(accordion);
+      await userEvent.click(toggleAccordion);
 
       await waitFor(() => {
-        expect(innerContent).not.toBeInTheDocument();
+        expect(contentWrapper).toHaveStyle('opacity: 0');
       });
     });
   });
@@ -165,9 +168,9 @@ describe('SocialAccordion', () => {
         />
       );
 
-      const accountQuantity = screen.getByText(/1/);
+      const accountQuantity = screen.getAllByText(/1/);
 
-      expect(accountQuantity).toBeInTheDocument();
+      expect(accountQuantity[0]).toBeInTheDocument();
     });
   });
 });

src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx

@@ -59,6 +59,7 @@ function SocialAccordion(props: SocialAccordionProps): ReactNode {
           aria-controls="content-accordion"
           aria-expanded={isOpen}
           className={scss.container}
+          data-testid="accordion-toggle-button"
           id="btn-accordion"
           onClick={handleOpenAccordion}
         >