From 3c8a2134f19d5a39d9a6c4b265ff5d8e87c65ba3 Mon Sep 17 00:00:00 2001 From: Arrey-Etta <33989423+okhot@users.noreply.github.com> Date: Tue, 12 Mar 2024 00:08:32 +0100 Subject: [PATCH] made styles reusable and add test --- src/pages/people/tabs/Wanted.tsx | 47 ++----------------- .../people/tabs/popoverCheckboxStyles.ts | 46 ++++++++++++++++++ .../widgetViews/UserTicketsView.spec.tsx | 38 +++++++++++++++ src/people/widgetViews/UserTicketsView.tsx | 46 ++---------------- 4 files changed, 90 insertions(+), 87 deletions(-) create mode 100644 src/pages/people/tabs/popoverCheckboxStyles.ts diff --git a/src/pages/people/tabs/Wanted.tsx b/src/pages/people/tabs/Wanted.tsx index 709e816b..cb878949 100644 --- a/src/pages/people/tabs/Wanted.tsx +++ b/src/pages/people/tabs/Wanted.tsx @@ -15,6 +15,7 @@ import styled from 'styled-components'; import { LoadMoreContainer } from '../../../people/widgetViews/WidgetSwitchViewer'; import { colors } from '../../../config/colors'; import checkboxImage from './Icons/checkboxImage.svg'; +import PopoverCheckbox from './popoverCheckboxStyles'; const config = widgetConfigs.bounties; type BountyType = any; @@ -45,48 +46,6 @@ const Panel = styled.a` } `; -const EuiPopOverCheckbox = styled.div<{ color?: any }>` - margin-right: 3px; - overflow-y: scroll; - display: flex; - align-items: center; - &.CheckboxOuter > div { - height: 100%; - display: grid; - grid-template-columns: 1fr 1fr; - .euiCheckboxGroup__item { - margin-top: 0px; - display: flex; - align-items: center; - .euiCheckbox__square { - border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500}; - border-radius: 2px; - } - .euiCheckbox__input + .euiCheckbox__square { - background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center; - } - .euiCheckbox__input:checked + .euiCheckbox__square { - border: 1px solid ${(p: any) => p?.color && p?.color?.blue1}; - background: ${(p: any) => p?.color && p?.color?.blue1} no-repeat center; - background-image: url(${checkboxImage}); - } - .euiCheckbox__label { - font-family: 'Barlow'; - font-style: normal; - font-weight: 500; - font-size: 13px; - line-height: 16px; - color: ${(p: any) => p?.color && p?.color?.grayish.G50}; - margin-top: 2px; - } - input.euiCheckbox__input:checked ~ label { - color: black; - font-weight: 600; - } - } - } -`; - export const Wanted = observer(() => { const { ui, main } = useStores(); const { person, canEdit } = usePerson(ui.selectedPerson); @@ -189,7 +148,7 @@ export const Wanted = observer(() => { }} >

Bounties

- + ({ @@ -202,7 +161,7 @@ export const Wanted = observer(() => { }} /> {canEdit && } - + {loading && } diff --git a/src/pages/people/tabs/popoverCheckboxStyles.ts b/src/pages/people/tabs/popoverCheckboxStyles.ts new file mode 100644 index 00000000..181a07f5 --- /dev/null +++ b/src/pages/people/tabs/popoverCheckboxStyles.ts @@ -0,0 +1,46 @@ +import styled from 'styled-components'; +import checkboxImage from './Icons/checkboxImage.svg'; + +const PopoverCheckbox = styled.div<{ color?: any }>` + margin-right: 3px; + overflow-y: scroll; + display: flex; + align-items: center; + &.CheckboxOuter > div { + height: 100%; + display: grid; + grid-template-columns: 1fr 1fr; + .euiCheckboxGroup__item { + margin-top: 0px; + display: flex; + align-items: center; + .euiCheckbox__square { + border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500}; + border-radius: 2px; + } + .euiCheckbox__input + .euiCheckbox__square { + background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center; + } + .euiCheckbox__input:checked + .euiCheckbox__square { + border: 1px solid ${(p: any) => p?.color && p?.color?.blue1}; + background: ${(p: any) => p?.color && p?.color?.blue1} no-repeat center; + background-image: url(${checkboxImage}); + } + .euiCheckbox__label { + font-family: 'Barlow'; + font-style: normal; + font-weight: 500; + font-size: 13px; + line-height: 16px; + color: ${(p: any) => p?.color && p?.color?.grayish.G50}; + margin-top: 2px; + } + input.euiCheckbox__input:checked ~ label { + color: black; + font-weight: 600; + } + } + } +`; + +export default PopoverCheckbox; diff --git a/src/people/widgetViews/UserTicketsView.spec.tsx b/src/people/widgetViews/UserTicketsView.spec.tsx index 7618a0fa..29fb8bad 100644 --- a/src/people/widgetViews/UserTicketsView.spec.tsx +++ b/src/people/widgetViews/UserTicketsView.spec.tsx @@ -17,6 +17,9 @@ beforeAll(() => { mockUsehistory(); }); +jest.mock('remark-gfm', () => null); +jest.mock('rehype-raw', () => null); + describe('User Tickets View', () => { nock(user.url).get('/person/id/1').reply(200, { user }); nock(user.url).get('/ask').reply(200, {}); @@ -293,4 +296,39 @@ describe('User Tickets View', () => { expect(displayName).toBeInTheDocument(); }); }); + + it('test that the correct calls are made when boxes are clicked for created bounties tab', async () => { + // biome-ignore lint/suspicious/noExplicitAny: + const userBounty = { ...mockBounties[0], body: {} } as any; + userBounty.body = { + ...userBounty.bounty, + owner_id: person.owner_pubkey, + title: 'test bounty here', + description: 'custom ticket for testing' + }; + + const mockedPersonAssignedBounites = jest + .spyOn(mainStore, 'getPersonAssignedBounties') + .mockReturnValue(Promise.resolve([userBounty])); + act(async () => { + render( + + + + ); + await waitFor(() => { + const checkBoxLable = screen.queryByText('Assigned'); + expect(checkBoxLable).toBeInTheDocument(); + + const checkBoxInput = checkBoxLable?.previousElementSibling as HTMLInputElement; + fireEvent.click(checkBoxInput); + }); + + await waitFor(() => + expect(mockedPersonAssignedBounites).toHaveBeenCalledWith( + expect.objectContaining({ Open: false, Assigned: true }) + ) + ); + }); + }); }); diff --git a/src/people/widgetViews/UserTicketsView.tsx b/src/people/widgetViews/UserTicketsView.tsx index b9f4a8f7..f847ef43 100644 --- a/src/people/widgetViews/UserTicketsView.tsx +++ b/src/people/widgetViews/UserTicketsView.tsx @@ -9,6 +9,7 @@ import styled from 'styled-components'; import { BountyModal } from 'people/main/bountyModal/BountyModal'; import PageLoadSpinner from 'people/utils/PageLoadSpinner'; import { Person } from 'store/main'; +import PopoverCheckbox from 'pages/people/tabs/popoverCheckboxStyles'; import history from '../../config/history'; import { colors } from '../../config/colors'; import WantedView from './WantedView'; @@ -45,47 +46,6 @@ const Panel = styled.a` } `; -const EuiPopOverCheckbox = styled.div<{ color?: any }>` - overflow-y: scroll; - display: flex; - align-items: center; - &.CheckboxOuter > div { - height: 100%; - display: flex; - .euiCheckboxGroup__item { - margin-top: 0px; - display: flex; - align-items: center; - .euiCheckbox__square { - top: 5px; - border: 1px solid ${(p: any) => p?.color && p?.color?.grayish.G500}; - border-radius: 2px; - } - .euiCheckbox__input + .euiCheckbox__square { - background: ${(p: any) => p?.color && p?.color?.pureWhite} no-repeat center; - } - .euiCheckbox__input:checked + .euiCheckbox__square { - border: 1px solid ${(p: any) => p?.color && p?.color?.blue1}; - background: ${(p: any) => p?.color && p?.color?.blue1} no-repeat center; - background-image: url(${checkboxImage}); - } - .euiCheckbox__label { - font-family: 'Barlow'; - font-style: normal; - font-weight: 500; - font-size: 13px; - line-height: 16px; - color: ${(p: any) => p?.color && p?.color?.grayish.G50}; - margin-top: 4px; - } - input.euiCheckbox__input:checked ~ label { - color: black; - font-weight: 600; - } - } - } -`; - const UserTickets = () => { const color = colors['light']; const { uuid } = useParams<{ uuid: string }>(); @@ -229,7 +189,7 @@ const UserTickets = () => { >

Assigned Bounties

- + ({ @@ -241,7 +201,7 @@ const UserTickets = () => { applyFilters(optionId); }} /> - +
{loading && }