fix: socialaccordion test

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

@@ -1,5 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { Mock } from 'vitest';
 
 import {
   mockedAccounts,
@@ -8,82 +9,130 @@ import {
 
 import SocialAccordion from './SocialAccordion';
 
+const mockAddAccount = vi.fn();
+const mockRemoveAccount = vi.fn();
+
+vi.mock('~stores/useAccountStore', () => ({
+  useAccountStore: (): {
+    addAccount: Mock;
+    removeAccount: Mock;
+  } => ({
+    addAccount: mockAddAccount,
+    removeAccount: mockRemoveAccount,
+  }),
+}));
+
 vi.mock(
   '~stores/useSocialMediaStore/useSocialMediaStore',
   () => mockedUseSocialMediaStore
 );
 
 vi.spyOn(window, 'scrollTo');
 
-// TODO: revisitar esse teste pois está falhando
-describe.skip('SocialAccordion', () => {
-  describe('when initilize', () => {
-    it('renders the component', () => {
+const mockDiscordData = mockedAccounts().data.DISCORD_EXAMPLE_ID;
+
+describe('SocialAccordion', () => {
+  it('renders the component', () => {
+    render(
+      <SocialAccordion
+        accounts={mockDiscordData}
+        error={false}
+        socialMediaId="DISCORD_EXAMPLE_ID"
+      />
+    );
+    const accordion = screen.getByText(/discord/i);
+
+    expect(accordion).toBeInTheDocument();
+  });
+
+  it('renders the intern content of accordion when is open', async () => {
+    render(
+      <SocialAccordion
+        accounts={mockDiscordData}
+        error={false}
+        socialMediaId="DISCORD_EXAMPLE_ID"
+      />
+    );
+
+    const accordion = screen.getByText(/discord/i);
+    await userEvent.click(accordion);
+
+    const innerContent = screen.getByText(mockDiscordData[0].userName);
+
+    expect(innerContent).toBeInTheDocument();
+  });
+
+  it('shows the error on screen if error={true}', () => {
+    render(
+      <SocialAccordion accounts={[]} error socialMediaId="DISCORD_EXAMPLE_ID" />
+    );
+    const error = screen.getByText(/error/i);
+
+    expect(error).toBeInTheDocument();
+  });
+
+  describe('social tab switch', () => {
+    it('activates social tab when is enable', async () => {
       render(
         <SocialAccordion
-          accounts={mockedAccounts().data.DISCORD_EXAMPLE_ID}
+          accounts={mockDiscordData}
           error={false}
           socialMediaId="DISCORD_EXAMPLE_ID"
         />
       );
+
       const accordion = screen.getByText(/discord/i);
+      await userEvent.click(accordion);
 
-      expect(accordion).toBeInTheDocument();
-    });
+      const [firstAccountSwitch] = screen.getAllByRole('checkbox');
+      await userEvent.click(firstAccountSwitch);
 
-    it('renders the intern content of accordion when is open', () => {
+      expect(mockAddAccount).toHaveBeenCalledWith(mockDiscordData[0]);
+    });
+    it('deactivates social tab when is disable', async () => {
       render(
         <SocialAccordion
-          accounts={mockedAccounts().data.DISCORD_EXAMPLE_ID}
+          accounts={mockDiscordData}
           error={false}
           socialMediaId="DISCORD_EXAMPLE_ID"
         />
       );
-      const innerContent = screen.getByText(/discord/i);
 
-      expect(innerContent).toBeInTheDocument();
-    });
+      const accordion = screen.getByText(/discord/i);
+      await userEvent.click(accordion);
 
-    it('shows the error on screen if error={true}', () => {
-      render(
-        <SocialAccordion
-          accounts={[]}
-          error
-          socialMediaId="DISCORD_EXAMPLE_ID"
-        />
-      );
-      const error = screen.getByText(/error/i);
+      const [firstAccountSwitch] = screen.getAllByRole('checkbox');
+
+      await userEvent.click(firstAccountSwitch);
+      await userEvent.click(firstAccountSwitch);
+
+      const [firstAccount] = mockDiscordData;
 
-      expect(error).toBeInTheDocument();
+      expect(mockRemoveAccount).toHaveBeenLastCalledWith(firstAccount.id);
     });
   });
 
-  describe('when click', () => {
-    it('closes the accordion', () => {
+  describe('when click 2 times', () => {
+    it('closes the accordion', async () => {
       render(
         <SocialAccordion
           accounts={mockedAccounts().data.DISCORD_EXAMPLE_ID}
           error={false}
           socialMediaId="DISCORD_EXAMPLE_ID"
         />
       );
-      const accounts = mockedAccounts().data;
 
-      Object.values(accounts.DISCORD_EXAMPLE_ID).forEach(async (account) => {
-        const accordion = await screen.findByRole('button');
-        await userEvent.click(accordion);
+      const accordion = screen.getByText(/discord/i);
+      await userEvent.click(accordion);
 
-        const userCard = screen.getByText(new RegExp(account.userName, 'i'));
+      const innerContent = screen.getByText(mockDiscordData[0].userName);
 
-        expect(userCard).toBeInTheDocument();
+      expect(innerContent).toBeInTheDocument();
 
-        await userEvent.click(accordion);
+      await userEvent.click(accordion);
 
-        await waitFor(() =>
-          expect(
-            screen.queryByText(new RegExp(account.userName, 'i'))
-          ).not.toBeInTheDocument()
-        );
+      await waitFor(() => {
+        expect(innerContent).not.toBeInTheDocument();
       });
     });
   });
@@ -102,24 +151,20 @@ describe.skip('SocialAccordion', () => {
       expect(accountQuantity).toBeInTheDocument();
     });
 
-    it('renders with one if list have one account', () => {
-      const accounts = mockedAccounts().data;
+    it('renders with one account if list have one account', () => {
+      const [account] = mockDiscordData;
 
       render(
         <SocialAccordion
-          accounts={accounts.DISCORD_EXAMPLE_ID}
+          accounts={[account]}
           error={false}
           socialMediaId="DISCORD_EXAMPLE_ID"
         />
       );
 
-      Object.values(accounts.DISCORD_EXAMPLE_ID).forEach((account) => {
-        const accountQuantity = screen.getByText(
-          new RegExp(String(account.id), 'i')
-        );
+      const accountQuantity = screen.getByText(/1/);
 
-        expect(accountQuantity).toBeInTheDocument();
-      });
+      expect(accountQuantity).toBeInTheDocument();
     });
   });
 });