From 58b04c6fdc2b6ded841768de34641c115bf009e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Gomes?= <129187461+joaomarcelo09@users.noreply.github.com> Date: Fri, 6 Sep 2024 20:47:12 -0300 Subject: [PATCH 1/3] fix: collapse main composer --- src/components/Accordion/Accordion.tsx | 27 +++++++++---------- .../MainComposer/MainComposer.module.scss | 4 --- 2 files changed, 13 insertions(+), 18 deletions(-) diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 74e0f803e..6ee59977d 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -7,10 +7,10 @@ import scss from './Accordion.module.scss'; import { TAccordionProps } from './Accordion.types'; -function computeVariants(duration: number): Record { +function computeVariants(): Record { return { - collapsed: { height: 0, transition: { duration } }, - expanded: { height: 'auto', transition: { duration } }, + collapsed: { height: '0px' }, + expanded: { height: 'auto' }, }; } @@ -19,17 +19,16 @@ function Accordion({ duration = 0.3, ...props }: TAccordionProps): ReactNode {
{props.header}
- {props.isOpen ? ( - - {props.content} - - ) : null} + + {props.content} +
); diff --git a/src/components/MainComposer/MainComposer.module.scss b/src/components/MainComposer/MainComposer.module.scss index 1f62b9bfc..518433ae7 100644 --- a/src/components/MainComposer/MainComposer.module.scss +++ b/src/components/MainComposer/MainComposer.module.scss @@ -1,6 +1,2 @@ @use '~styles/global.scss'; @use '~styles/breakpoints.scss'; - -.container { - min-height: 40rem; -} From 3a7d7d4a99423b7ef2c4c3d25d9c926644684fc3 Mon Sep 17 00:00:00 2001 From: Joao Gomes Date: Wed, 2 Oct 2024 09:22:21 -0300 Subject: [PATCH 2/3] fix(): adjust tests to new logic in accordion component --- src/components/Accordion/Accordion.spec.tsx | 10 ++--- src/components/Accordion/Accordion.tsx | 9 ++++- .../home/components/Sidebar/Sidebar.spec.tsx | 16 ++++---- .../SocialAccordion/SocialAccordion.spec.tsx | 37 ++++++++++--------- .../SocialAccordion/SocialAccordion.tsx | 1 + 5 files changed, 41 insertions(+), 32 deletions(-) diff --git a/src/components/Accordion/Accordion.spec.tsx b/src/components/Accordion/Accordion.spec.tsx index 3ec94039c..2ef478634 100644 --- a/src/components/Accordion/Accordion.spec.tsx +++ b/src/components/Accordion/Accordion.spec.tsx @@ -20,12 +20,12 @@ 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'); }); }); @@ -33,9 +33,9 @@ describe('Accordion', () => { 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'); }); }); }); diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index 6ee59977d..e8ba60f23 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -9,8 +9,12 @@ import { TAccordionProps } from './Accordion.types'; function computeVariants(): Record { return { - collapsed: { height: '0px' }, - expanded: { height: 'auto' }, + collapsed: { height: 0, opacity: 0 }, + expanded: { + height: 'auto', + opacity: 1, + transitionEnd: { height: 'auto' }, + }, }; } @@ -22,6 +26,7 @@ function Accordion({ duration = 0.3, ...props }: TAccordionProps): ReactNode { { 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 () => { diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx index 2201a3506..4e9d9e28a 100644 --- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.spec.tsx +++ b/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( { /> ); - 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(); }); }); }); diff --git a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx b/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx index 9378bd643..223f3c115 100644 --- a/src/pages/home/components/Sidebar/components/SocialAccordion/SocialAccordion.tsx +++ b/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} > From 5e1436315f5f1da76edac791aa20ea8910ed3b79 Mon Sep 17 00:00:00 2001 From: Joao Gomes Date: Mon, 7 Oct 2024 19:42:08 -0300 Subject: [PATCH 3/3] fix: adjusts in accordion --- src/components/Accordion/Accordion.spec.tsx | 2 +- src/components/Accordion/Accordion.tsx | 19 ++++++++----------- 2 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/Accordion/Accordion.spec.tsx b/src/components/Accordion/Accordion.spec.tsx index 2ef478634..ef429580c 100644 --- a/src/components/Accordion/Accordion.spec.tsx +++ b/src/components/Accordion/Accordion.spec.tsx @@ -25,7 +25,7 @@ describe('Accordion', () => { const contentWrapper = screen.getByTestId('accordion-content'); - expect(contentWrapper).toHaveStyle('height: 0px'); + expect(contentWrapper).toHaveStyle('height: 0'); }); }); diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx index e8ba60f23..c475ba2ce 100644 --- a/src/components/Accordion/Accordion.tsx +++ b/src/components/Accordion/Accordion.tsx @@ -7,16 +7,13 @@ import scss from './Accordion.module.scss'; import { TAccordionProps } from './Accordion.types'; -function computeVariants(): Record { - return { - collapsed: { height: 0, opacity: 0 }, - expanded: { - height: 'auto', - opacity: 1, - transitionEnd: { height: 'auto' }, - }, - }; -} +const accordionVariants: Record = { + collapsed: { height: 0, opacity: 0 }, + expanded: { + height: 'auto', + opacity: 1, + }, +}; function Accordion({ duration = 0.3, ...props }: TAccordionProps): ReactNode { return ( @@ -30,7 +27,7 @@ function Accordion({ duration = 0.3, ...props }: TAccordionProps): ReactNode { exit="collapsed" initial="expanded" transition={{ duration }} - variants={computeVariants()} + variants={accordionVariants} > {props.content}