From 8cc7735031c7f252af46e567f3d3d62400b20508 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 12:35:01 +0530 Subject: [PATCH 01/18] add: modifying create advertisement modal to allow editing --- src/GraphQl/Mutations/mutations.ts | 23 ++++ .../AdvertisementRegister.tsx | 129 +++++++++++++++--- 2 files changed, 133 insertions(+), 19 deletions(-) diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index f25abab4ef..a1a755eeaf 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -440,6 +440,29 @@ export const ADD_ADVERTISEMENT_MUTATION = gql` } } `; +export const UPDATE_ADVERTISEMENT_MUTATION = gql` + mutation UpdateAdvertisement( + $id: ID! + $name: String + $link: String + $type: String + $startDate: Date + $endDate: Date + ) { + updateAdvertisement( + id: $id + data: { + name: $name + link: $link + type: $type + startDate: $startDate + endDate: $endDate + } + ) { + _id + } + } +`; export const DELETE_ADVERTISEMENT_BY_ID = gql` mutation ($id: ID!) { deleteAdvertisementById(id: $id) { diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index e1a980150c..0a1579fd3c 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -1,9 +1,12 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import styles from './AdvertisementRegister.module.css'; import { Button, Form, Modal } from 'react-bootstrap'; import { useMutation } from '@apollo/client'; -import { ADD_ADVERTISEMENT_MUTATION } from 'GraphQl/Mutations/mutations'; +import { + ADD_ADVERTISEMENT_MUTATION, + UPDATE_ADVERTISEMENT_MUTATION, +} from 'GraphQl/Mutations/mutations'; import { useTranslation } from 'react-i18next'; import { toast } from 'react-toastify'; import dayjs from 'dayjs'; @@ -11,6 +14,14 @@ import dayjs from 'dayjs'; interface InterfaceAddOnRegisterProps { id?: string; // OrgId createdBy?: string; // User + formStatus?: string; + idEdit?: string; + nameEdit?: string; + typeEdit?: string; + orgIdEdit?: string; + linkEdit?: string; + endDateEdit?: Date; + startDateEdit?: Date; } interface InterfaceFormStateTypes { name: string; @@ -24,6 +35,16 @@ interface InterfaceFormStateTypes { function advertisementRegister({ /* eslint-disable-next-line @typescript-eslint/no-unused-vars */ createdBy, + formStatus, + idEdit, + nameEdit, + typeEdit, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + orgIdEdit, + linkEdit, + endDateEdit, + // eslint-disable-next-line @typescript-eslint/no-unused-vars + startDateEdit, }: InterfaceAddOnRegisterProps): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'advertisement' }); @@ -32,6 +53,7 @@ function advertisementRegister({ const handleClose = (): void => setShow(false); const handleShow = (): void => setShow(true); const [create] = useMutation(ADD_ADVERTISEMENT_MUTATION); + const [updateAdvertisement] = useMutation(UPDATE_ADVERTISEMENT_MUTATION); //getting orgId from URL const currentOrg = window.location.href.split('/id=')[1] + ''; @@ -43,6 +65,30 @@ function advertisementRegister({ endDate: new Date(), orgId: currentOrg, }); + + //if set to edit set the formState by edit variables + useEffect(() => { + if (formStatus === 'edit') { + setFormState((prevState) => ({ + ...prevState, + name: nameEdit || '', + link: linkEdit || '', + type: typeEdit || 'BANNER', + startDate: startDateEdit || new Date(), + endDate: endDateEdit || new Date(), + orgId: currentOrg, + })); + } + }, [ + formStatus, + nameEdit, + linkEdit, + typeEdit, + startDateEdit, + endDateEdit, + currentOrg, + ]); + const handleRegister = async (): Promise => { try { console.log('At handle register', formState); @@ -68,16 +114,49 @@ function advertisementRegister({ console.log('error occured', error); } }; + const handleUpdate = async (): Promise => { + try { + console.log('At handle update', formState); + const { data } = await updateAdvertisement({ + variables: { + id: idEdit, + // orgId: currentOrg, + name: formState.name, + link: formState.link, + type: formState.type, + startDate: dayjs(formState.startDate).format('YYYY-MM-DD'), + endDate: dayjs(formState.endDate).format('YYYY-MM-DD'), + }, + }); + + if (data) { + toast.success('Advertisement updated successfully'); + } + } catch (error: any) { + toast.error(error.message); + } + }; return ( <> - + {formStatus === 'register' ? ( //If register show register button else show edit button + + ) : ( + + )} @@ -140,7 +219,7 @@ function advertisementRegister({ { setFormState({ ...formState, @@ -155,7 +234,7 @@ function advertisementRegister({ { setFormState({ ...formState, @@ -174,13 +253,23 @@ function advertisementRegister({ > {t('close')} - + {formStatus === 'register' ? ( + + ) : ( + + )} @@ -194,6 +283,7 @@ advertisementRegister.defaultProps = { startDate: new Date(), endDate: new Date(), orgId: '', + formStatus: 'register', }; advertisementRegister.propTypes = { @@ -203,6 +293,7 @@ advertisementRegister.propTypes = { startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date), orgId: PropTypes.string, + formStatus: PropTypes.string, }; export default advertisementRegister; From b0387198174afec2dc34beb8e60c25cf21b7f352 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 12:40:17 +0530 Subject: [PATCH 02/18] adding edit button to advertisement card --- .../AdvertisementEntry/AdvertisementEntry.tsx | 45 ++++++++++++------- 1 file changed, 29 insertions(+), 16 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index 3896b5ec73..4b65b9b9c6 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -6,6 +6,7 @@ import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations'; import { useMutation } from '@apollo/client'; import { useTranslation } from 'react-i18next'; import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries'; +import AdvertisementRegister from '../AdvertisementRegister/AdvertisementRegister'; interface InterfaceAddOnEntryProps { id: string; name: string; @@ -60,22 +61,34 @@ function advertisementEntry({ {type} {link} - +
+ + +
From bcb2b99a545d8337b66e5bce8380333ea98d3100 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 12:43:30 +0530 Subject: [PATCH 03/18] fix: adding link as prop --- src/components/Advertisements/Advertisements.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Advertisements/Advertisements.tsx b/src/components/Advertisements/Advertisements.tsx index 7af6fd98c9..2601d7cebb 100644 --- a/src/components/Advertisements/Advertisements.tsx +++ b/src/components/Advertisements/Advertisements.tsx @@ -140,6 +140,7 @@ export default function advertisements(): JSX.Element { orgId={ad.orgId} startDate={new Date(ad.startDate)} endDate={new Date(ad.endDate)} + link={ad.link} // getInstalledPlugins={getInstalledPlugins} /> ) From 6d68cd7fc96b79ac53b9d8c8129dd55e5bc4ba30 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 12:47:40 +0530 Subject: [PATCH 04/18] adding css for the changes --- .../core/AdvertisementEntry/AdvertisementEntry.module.css | 7 +++++-- .../AdvertisementRegister/AdvertisementRegister.module.css | 7 ++++++- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css index 1f1ea89996..38f3c90f97 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css @@ -4,9 +4,7 @@ } .entryaction { - margin-left: auto; display: flex !important; - align-items: center; } .entryaction i { @@ -18,3 +16,8 @@ width: 1rem; margin-right: 8px; } + +.buttons { + display: flex; + justify-content: space-between; +} diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css index c122d386fa..57fa91e279 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css @@ -4,6 +4,11 @@ align-items: center; } -.modalbtn i { +.modalbtn i, +.button i { margin-right: 8px; } + +.button { + min-width: 102px; +} From 89d3071b5e767aa34957b5509847d952f79bddce Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 13:50:18 +0530 Subject: [PATCH 05/18] changing title of edit modal --- .../core/AdvertisementRegister/AdvertisementRegister.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index 0a1579fd3c..b1e5a0b43b 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -160,7 +160,11 @@ function advertisementRegister({ - {t('RClose')} + {formStatus === 'register' ? ( + {t('RClose')} + ) : ( + Edit Advertisement + )}
From 4fc71d3b211cbc08be23058a04c7a90eb31f31b3 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 15:02:46 +0530 Subject: [PATCH 06/18] update: changing card layout to default layout --- .../AdvertisementEntry.module.css | 48 ++++++++++++++++- .../AdvertisementEntry/AdvertisementEntry.tsx | 52 +++++++++++++------ .../AdvertisementRegister.tsx | 9 +--- 3 files changed, 83 insertions(+), 26 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css index 38f3c90f97..b92736a6d6 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css @@ -19,5 +19,51 @@ .buttons { display: flex; - justify-content: space-between; + justify-content: end; +} + +.dropdownButton { + background-color: transparent; + color: #000; + border: none; + cursor: pointer; + display: flex; + width: 100%; + justify-content: end; + padding: 8px 10px; +} + +.dropdownContainer { + position: relative; + display: inline-block; +} + +.dropdownmenu { + display: none; + position: absolute; + z-index: 1; + background-color: white; + width: 120px; + box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); + padding: 5px 0; + margin: 0; + list-style-type: none; + right: 0; + top: 100%; +} + +.dropdownmenu li { + cursor: pointer; + padding: 8px 16px; + text-decoration: none; + display: block; + color: #333; +} + +.dropdownmenu li:hover { + background-color: #f1f1f1; +} + +.dropdownContainer:hover .dropdownmenu { + display: block; } diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index 4b65b9b9c6..8dd49bd343 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -4,9 +4,10 @@ import styles from './AdvertisementEntry.module.css'; import { Button, Card, Col, Row, Spinner } from 'react-bootstrap'; import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations'; import { useMutation } from '@apollo/client'; -import { useTranslation } from 'react-i18next'; +// import { useTranslation } from 'react-i18next'; import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries'; import AdvertisementRegister from '../AdvertisementRegister/AdvertisementRegister'; +import MoreVertIcon from '@mui/icons-material/MoreVert'; interface InterfaceAddOnEntryProps { id: string; name: string; @@ -27,8 +28,9 @@ function advertisementEntry({ // eslint-disable-next-line @typescript-eslint/no-unused-vars startDate, }: InterfaceAddOnEntryProps): JSX.Element { - const { t } = useTranslation('translation', { keyPrefix: 'advertisement' }); + // const { t } = useTranslation('translation', { keyPrefix: 'advertisement' }); const [buttonLoading, setButtonLoading] = useState(false); + const [dropdown, setDropdown] = useState(false); const [deleteAdById] = useMutation(DELETE_ADVERTISEMENT_BY_ID, { refetchQueries: [ADVERTISEMENTS_GET], }); @@ -42,12 +44,41 @@ function advertisementEntry({ }); setButtonLoading(false); }; + const handleOptionsClick = (): void => { + setDropdown(!dropdown); + }; return ( <> {Array.from({ length: 1 }).map((_, idx) => ( +
+ + {dropdown && ( +
    +
  • + +
    • +
  • Delete
    • +
+ )} +
{ - onDelete(); - }} > {buttonLoading ? ( ) : ( - + )} - {t('delete')} + View - diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index b1e5a0b43b..9fc200d05a 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -148,14 +148,7 @@ function advertisementRegister({ {t('addNew')} ) : ( - +
Edit
)} From 09d137089151d2325985c94f6b1c79e7a750c54f Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 15:04:47 +0530 Subject: [PATCH 07/18] fix: view button styling --- .../core/AdvertisementEntry/AdvertisementEntry.module.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css index b92736a6d6..d6168e8558 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css @@ -9,6 +9,7 @@ .entryaction i { margin-right: 8px; + margin-top: 4px; } .entryaction .spinner-grow { From 0c32c0a94d46e5c29aa155165ec5994599caa6dd Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 15:23:49 +0530 Subject: [PATCH 08/18] fix: edit modal header styling --- .../AdvertisementRegister/AdvertisementRegister.module.css | 5 +++++ .../core/AdvertisementRegister/AdvertisementRegister.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css index 57fa91e279..646311041a 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.module.css @@ -12,3 +12,8 @@ .button { min-width: 102px; } + +.editHeader { + background-color: #31bb6b; + color: white; +} diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index 9fc200d05a..99d75a7dc0 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -152,7 +152,7 @@ function advertisementRegister({ )} - + {formStatus === 'register' ? ( {t('RClose')} ) : ( From 7ee1bf287dea3dcbe0180442cd94b796a82a00fb Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 23:08:55 +0530 Subject: [PATCH 09/18] adding test for increasing code coverage --- .../AdvertisementEntry.test.tsx | 47 ++++++++++++++++++- 1 file changed, 46 insertions(+), 1 deletion(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index 896c61e5e1..d61b4c941e 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { ApolloClient, @@ -57,4 +57,49 @@ describe('Testing Advertisement Entry Component', () => { expect(getAllByText('POPUP')[0]).toBeInTheDocument(); expect(getAllByText('Advert1')[0]).toBeInTheDocument(); }); + it('should open and close the dropdown when options button is clicked', () => { + const { getByTestId, queryByText, getAllByText } = render( + + + + + + + + + + ); + + // Test initial rendering + expect(getByTestId('AdEntry')).toBeInTheDocument(); + expect(getAllByText('POPUP')[0]).toBeInTheDocument(); + expect(getAllByText('Advert1')[0]).toBeInTheDocument(); + + // Test dropdown functionality + const optionsButton = getByTestId('moreiconbtn'); + + // Initially, the dropdown should not be visible + expect(queryByText('Edit')).toBeNull(); + + // Click to open the dropdown + fireEvent.click(optionsButton); + + // After clicking the button, the dropdown should be visible + expect(queryByText('Edit')).toBeInTheDocument(); + + // Click again to close the dropdown + fireEvent.click(optionsButton); + + // After the second click, the dropdown should be hidden again + expect(queryByText('Edit')).toBeNull(); + }); }); From 4537cc97ca6fa2f27380f63a8911d101aea32406 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 9 Dec 2023 23:56:48 +0530 Subject: [PATCH 10/18] add: test case for delete add button --- .../AdvertisementEntry.test.tsx | 63 ++++++++++++++++++- .../AdvertisementEntry/AdvertisementEntry.tsx | 4 +- 2 files changed, 63 insertions(+), 4 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index d61b4c941e..5cabf57cac 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; -import { render, fireEvent } from '@testing-library/react'; - +import { render, fireEvent, waitFor } from '@testing-library/react'; +import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations'; +import { MockedProvider } from '@apollo/client/testing'; import { ApolloClient, ApolloProvider, @@ -8,7 +9,7 @@ import { ApolloLink, HttpLink, } from '@apollo/client'; - +import { StaticMockLink } from 'utils/StaticMockLink'; import type { NormalizedCacheObject } from '@apollo/client'; import { BrowserRouter } from 'react-router-dom'; import AdvertisementEntry from './AdvertisementEntry'; @@ -17,7 +18,48 @@ import { store } from 'state/store'; import { BACKEND_URL } from 'Constant/constant'; import i18nForTest from 'utils/i18nForTest'; import { I18nextProvider } from 'react-i18next'; +import { act } from 'react-dom/test-utils'; +const advertisementProps = { + id: '1', + name: 'Sample Advertisement', + type: 'Sample Type', + orgId: 'org_id', + link: 'samplelink.com', + endDate: new Date(), + startDate: new Date(), +}; +const mocks = [ + { + request: { + query: DELETE_ADVERTISEMENT_BY_ID, + variables: { id: advertisementProps.id }, + }, + result: { + data: { + deleteAdvertisement: { + id: advertisementProps.id, + }, + }, + }, + }, +]; + +jest.mock('react-toastify', () => ({ + toast: { + success: jest.fn(), + warn: jest.fn(), + error: jest.fn(), + }, +})); +const link = new StaticMockLink(mocks, true); +async function wait(ms = 100): Promise { + await act(() => { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); + }); +} const httpLink = new HttpLink({ uri: BACKEND_URL, headers: { @@ -102,4 +144,19 @@ describe('Testing Advertisement Entry Component', () => { // After the second click, the dropdown should be hidden again expect(queryByText('Edit')).toBeNull(); }); + test('should delete an advertisement when delete button is clicked', async () => { + const { getByTestId, queryByText } = render( + + + + ); + wait(); + const deleteButton = getByTestId('deletebtn'); + fireEvent.click(deleteButton); + + await waitFor(() => { + const deletedAdName = queryByText(advertisementProps.name); + expect(deletedAdName).toBeNull(); + }); + }); }); diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index 8dd49bd343..5edc436bb5 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -75,7 +75,9 @@ function advertisementEntry({ startDateEdit={startDate} /> -
  • Delete
    • +
  • + Delete +
    • )} From 7c7f4e9ba0ddae243640441ee847d54087d8f94f Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sun, 10 Dec 2023 04:09:41 +0530 Subject: [PATCH 11/18] fix:tests --- .../AdvertisementEntry.test.tsx | 68 +++++++++++++------ 1 file changed, 48 insertions(+), 20 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index 5cabf57cac..a8ce2fb8f8 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -19,6 +19,7 @@ import { BACKEND_URL } from 'Constant/constant'; import i18nForTest from 'utils/i18nForTest'; import { I18nextProvider } from 'react-i18next'; import { act } from 'react-dom/test-utils'; +import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries'; const advertisementProps = { id: '1', @@ -33,25 +34,47 @@ const mocks = [ { request: { query: DELETE_ADVERTISEMENT_BY_ID, - variables: { id: advertisementProps.id }, + variables: { id: '1' }, }, result: { data: { - deleteAdvertisement: { - id: advertisementProps.id, + deleteAdvertisementById: { + success: true, }, }, }, }, + { + request: { + query: ADVERTISEMENTS_GET, + }, + result: { + data: { + getAdvertisements: [ + { + _id: '6574cf9caa18987e28d248d9', + name: 'Cookie', + orgId: '6437904485008f171cf29924', + link: '123', + type: 'BANNER', + startDate: '2023-12-10', + endDate: '2023-12-10', + }, + { + _id: '6574e38aaa18987e28d24979', + name: 'HEy', + orgId: '6437904485008f171cf29924', + link: '123', + type: 'BANNER', + startDate: '2023-12-10', + endDate: '2023-12-10', + }, + ], + }, + }, + }, ]; -jest.mock('react-toastify', () => ({ - toast: { - success: jest.fn(), - warn: jest.fn(), - error: jest.fn(), - }, -})); const link = new StaticMockLink(mocks, true); async function wait(ms = 100): Promise { await act(() => { @@ -145,18 +168,23 @@ describe('Testing Advertisement Entry Component', () => { expect(queryByText('Edit')).toBeNull(); }); test('should delete an advertisement when delete button is clicked', async () => { - const { getByTestId, queryByText } = render( - - - + const { getByTestId } = render( + + + + + + + + + + + ); - wait(); + await wait(); + const optionsButton = getByTestId('moreiconbtn'); + fireEvent.click(optionsButton); const deleteButton = getByTestId('deletebtn'); fireEvent.click(deleteButton); - - await waitFor(() => { - const deletedAdName = queryByText(advertisementProps.name); - expect(deletedAdName).toBeNull(); - }); }); }); From 10a54368bec9dbb6d9e6090ba2b55f3d2648129d Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sun, 10 Dec 2023 04:10:50 +0530 Subject: [PATCH 12/18] eslint fix --- .../core/AdvertisementEntry/AdvertisementEntry.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index a8ce2fb8f8..b9844224d4 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, waitFor } from '@testing-library/react'; +import { render, fireEvent } from '@testing-library/react'; import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations'; import { MockedProvider } from '@apollo/client/testing'; import { From 37723209bd088caec2c66f6f8043ae047a38549b Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 23 Dec 2023 21:44:57 +0530 Subject: [PATCH 13/18] fix: resolved warning --- .../core/AdvertisementEntry/AdvertisementEntry.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css index d6168e8558..20bb86a21a 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css @@ -20,7 +20,7 @@ .buttons { display: flex; - justify-content: end; + justify-content: flex-end; } .dropdownButton { @@ -30,7 +30,7 @@ cursor: pointer; display: flex; width: 100%; - justify-content: end; + justify-content: flex-end; padding: 8px 10px; } From bab71221b89411e907f8ddd341fa26be6252357b Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sat, 23 Dec 2023 21:59:18 +0530 Subject: [PATCH 14/18] add : translations --- public/locales/en.json | 6 +++++- public/locales/fr.json | 6 +++++- public/locales/hi.json | 6 +++++- public/locales/sp.json | 6 +++++- public/locales/zh.json | 6 +++++- .../core/AdvertisementEntry/AdvertisementEntry.tsx | 4 ++-- .../core/AdvertisementRegister/AdvertisementRegister.tsx | 6 +++--- 7 files changed, 30 insertions(+), 10 deletions(-) diff --git a/public/locales/en.json b/public/locales/en.json index 668c0fae94..74b8ba070b 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -682,7 +682,11 @@ "deleteAdvertisement": "Delete Advertisement", "deleteAdvertisementMsg": "Do you want to remove this advertisement?", "no": "No", - "yes": "Yes" + "yes": "Yes", + "view": "View", + "edit": "Edit", + "editAdvertisement": "Edit Advertisement", + "saveChanges": "Save Changes" }, "userChat": { "chat": "Chat", diff --git a/public/locales/fr.json b/public/locales/fr.json index 16c4206a4d..fc11526ccf 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -662,7 +662,11 @@ "deleteAdvertisement": "Supprimer l'annonce", "deleteAdvertisementMsg": "Voulez-vous supprimer cette annonce ?", "no": "Non", - "yes": "Oui" + "yes": "Oui", + "view": "Voir", + "edit": "Éditer", + "editAdvertisement": "Éditer l'annonce", + "saveChanges": "Enregistrer les modifications" }, "userChat": { "chat": "Chat", diff --git a/public/locales/hi.json b/public/locales/hi.json index e917f3b49d..241fb2ce47 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -662,7 +662,11 @@ "deleteAdvertisement": "विज्ञापन हटाएं", "deleteAdvertisementMsg": "क्या आप इस विज्ञापन को हटाना चाहते हैं?", "no": "नहीं", - "yes": "हाँ" + "yes": "हाँ", + "view": "देखें", + "edit": "संपादित करें", + "editAdvertisement": "विज्ञापन संपादित करें", + "saveChanges": "परिवर्तन सहेजें" }, "userChat": { "chat": "बात", diff --git a/public/locales/sp.json b/public/locales/sp.json index f90fcad222..a7895a86f3 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -662,7 +662,11 @@ "deleteAdvertisement": "Eliminar anuncio", "deleteAdvertisementMsg": "¿Desea eliminar este anuncio?", "no": "No", - "yes": "Sí" + "yes": "Sí", + "view": "Ver", + "edit": "Editar", + "editAdvertisement": "Editar Anuncio", + "saveChanges": "Guardar Cambios" }, "userChat": { "chat": "Charlar", diff --git a/public/locales/zh.json b/public/locales/zh.json index 4f439fb086..13bbe0b2d8 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -662,7 +662,11 @@ "deleteAdvertisement": "删除广告", "deleteAdvertisementMsg": "您是否要删除此广告？", "no": "不", - "yes": "是" + "yes": "是", + "view": "查看", + "edit": "编辑", + "editAdvertisement": "编辑广告", + "saveChanges": "保存更改" }, "userChat": { "chat": "聊天", diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index 2b2f2feb8f..ca665e8ca1 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -85,7 +85,7 @@ function advertisementEntry({ />
  • - Delete + {t('delete')}
    • )} @@ -115,7 +115,7 @@ function advertisementEntry({ ) : ( )} - View + {t('view')} {link} diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index 80f14381d1..3686c20f31 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -157,7 +157,7 @@ function advertisementRegister({ {t('addNew')} ) : ( -
    Edit
    +
    {t('edit')}
    )} @@ -165,7 +165,7 @@ function advertisementRegister({ {formStatus === 'register' ? ( {t('RClose')} ) : ( - Edit Advertisement + {t('editAdvertisement')} )}     @@ -273,7 +273,7 @@ function advertisementRegister({ onClick={handleUpdate} data-testid="addonupdate" > - Save Changes + {t('saveChanges')} )} From 4d34aca44659b75dbfc277872e79499e99dfc0e4 Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Wed, 27 Dec 2023 12:05:45 +0530 Subject: [PATCH 15/18] fix: mutation and add: refetch after updating --- src/GraphQl/Mutations/mutations.ts | 8 +-- .../Advertisements/Advertisements.test.tsx | 51 ----------------- .../AdvertisementEntry.test.tsx | 57 ++++++------------- .../AdvertisementRegister.tsx | 1 + 4 files changed, 23 insertions(+), 94 deletions(-) diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index a1a755eeaf..7afef996a3 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -446,12 +446,12 @@ export const UPDATE_ADVERTISEMENT_MUTATION = gql` $name: String $link: String $type: String - $startDate: Date - $endDate: Date + $startDate: String + $endDate: String ) { updateAdvertisement( - id: $id - data: { + input: { + id: $id name: $name link: $link type: $type diff --git a/src/components/Advertisements/Advertisements.test.tsx b/src/components/Advertisements/Advertisements.test.tsx index 6113609ebe..ed47ee2060 100644 --- a/src/components/Advertisements/Advertisements.test.tsx +++ b/src/components/Advertisements/Advertisements.test.tsx @@ -163,57 +163,6 @@ const ORGANIZATIONS_LIST_MOCK = { }; describe('Testing Advertisement Component', () => { - test('Testing if the deletion works', async () => { - const mocks = [ - { - request: { - query: ADVERTISEMENTS_GET, - }, - result: { - data: { - getAdvertisements: [ - { - _id: '1', - name: 'Advertisement1', - type: 'POPUP', - orgId: 'undefined', - link: 'http://example1.com', - endDate: '2023-01-01', - startDate: '2022-01-01', - }, - ], - }, - loading: false, - }, - }, - ORGANIZATIONS_LIST_MOCK, - PLUGIN_GET_MOCK, - ADD_ADVERTISEMENT_MUTATION_MOCK, - ]; - - render( - - - - - - - - - - - ); - - await wait(); - - await act(async () => { - await userEvent.click(screen.getByText('Delete')); - }); - await act(async () => { - await userEvent.click(screen.getByText('Yes')); - }); - }); - test('for creating new Advertisements', async () => { const mocks = [ ORGANIZATIONS_LIST_MOCK, diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index 429298ed6a..fffae046e4 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -105,7 +105,7 @@ jest.mock('@apollo/client', () => { }); describe('Testing Advertisement Entry Component', () => { - test('Temporary test for Advertisement Entry', async () => { + test('Testing rendering and deleting of advertisement', async () => { const deleteAdByIdMock = jest.fn(); mockUseMutation.mockReturnValue([deleteAdByIdMock]); const { getByTestId, getAllByText } = render( @@ -113,38 +113,36 @@ describe('Testing Advertisement Entry Component', () => { - { - - } + ); + + //Testing rendering expect(getByTestId('AdEntry')).toBeInTheDocument(); expect(getAllByText('POPUP')[0]).toBeInTheDocument(); expect(getAllByText('Advert1')[0]).toBeInTheDocument(); - fireEvent.click(getByTestId('AddOnEntry_btn_install')); + //Testing successful deletion + fireEvent.click(getByTestId('moreiconbtn')); + fireEvent.click(getByTestId('deletebtn')); await waitFor(() => { expect(screen.getByTestId('delete_title')).toBeInTheDocument(); expect(screen.getByTestId('delete_body')).toBeInTheDocument(); }); - fireEvent.click(getByTestId('AddOnEntry_btn_install')); - - fireEvent.click(getByTestId('AddOnEntry_btn_install')); - fireEvent.click(getByTestId('delete_yes')); await waitFor(() => { @@ -157,9 +155,10 @@ describe('Testing Advertisement Entry Component', () => { expect(deletedMessage).toBeNull(); }); + //Testing unsuccessful deletion deleteAdByIdMock.mockRejectedValueOnce(new Error('Deletion Failed')); - fireEvent.click(getByTestId('AddOnEntry_btn_install')); + fireEvent.click(getByTestId('moreiconbtn')); fireEvent.click(getByTestId('delete_yes')); @@ -223,24 +222,4 @@ describe('Testing Advertisement Entry Component', () => { // After the second click, the dropdown should be hidden again expect(queryByText('Edit')).toBeNull(); }); - test('should delete an advertisement when delete button is clicked', async () => { - const { getByTestId } = render( - - - - - - - - - - - - ); - await wait(); - const optionsButton = getByTestId('moreiconbtn'); - fireEvent.click(optionsButton); - const deleteButton = getByTestId('deletebtn'); - fireEvent.click(deleteButton); - }); }); diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index 3686c20f31..e723a1f4b3 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -140,6 +140,7 @@ function advertisementRegister({ if (data) { toast.success('Advertisement updated successfully'); + refetch(); } } catch (error: any) { toast.error(error.message); From a89d247bc0640d80eab72b0f59da5e3be26d1dfc Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sun, 14 Jan 2024 19:05:42 +0530 Subject: [PATCH 16/18] fix: tests & mutation --- src/GraphQl/Mutations/mutations.ts | 12 +- .../AdvertisementEntry.test.tsx | 344 ++++++++++++++---- .../AdvertisementRegister.test.tsx | 108 ++++-- .../AdvertisementRegister.tsx | 54 ++- 4 files changed, 397 insertions(+), 121 deletions(-) diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index 7afef996a3..79955051a3 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -445,13 +445,13 @@ export const UPDATE_ADVERTISEMENT_MUTATION = gql` $id: ID! $name: String $link: String - $type: String - $startDate: String - $endDate: String + $type: AdvertisementType + $startDate: Date + $endDate: Date ) { updateAdvertisement( input: { - id: $id + _id: $id name: $name link: $link type: $type @@ -459,7 +459,9 @@ export const UPDATE_ADVERTISEMENT_MUTATION = gql` endDate: $endDate } ) { - _id + advertisement { + _id + } } } `; diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index fffae046e4..25a10fd701 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -1,6 +1,4 @@ import React from 'react'; -import { DELETE_ADVERTISEMENT_BY_ID } from 'GraphQl/Mutations/mutations'; -import { MockedProvider } from '@apollo/client/testing'; import { render, fireEvent, waitFor, screen } from '@testing-library/react'; import { ApolloClient, @@ -9,86 +7,28 @@ import { ApolloLink, HttpLink, } from '@apollo/client'; -import { StaticMockLink } from 'utils/StaticMockLink'; import type { NormalizedCacheObject } from '@apollo/client'; import { BrowserRouter } from 'react-router-dom'; import AdvertisementEntry from './AdvertisementEntry'; +import AdvertisementRegister from '../AdvertisementRegister/AdvertisementRegister'; import { Provider } from 'react-redux'; +import i18n from 'utils/i18nForTest'; import { store } from 'state/store'; import { BACKEND_URL } from 'Constant/constant'; import i18nForTest from 'utils/i18nForTest'; import { I18nextProvider } from 'react-i18next'; -import { act } from 'react-dom/test-utils'; -import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries'; - -const advertisementProps = { - id: '1', - name: 'Sample Advertisement', - type: 'Sample Type', - orgId: 'org_id', - link: 'samplelink.com', - endDate: new Date(), - startDate: new Date(), -}; -const mocks = [ - { - request: { - query: DELETE_ADVERTISEMENT_BY_ID, - variables: { id: '1' }, - }, - result: { - data: { - deleteAdvertisementById: { - success: true, - }, - }, - }, - }, - { - request: { - query: ADVERTISEMENTS_GET, - }, - result: { - data: { - getAdvertisements: [ - { - _id: '6574cf9caa18987e28d248d9', - name: 'Cookie', - orgId: '6437904485008f171cf29924', - link: '123', - type: 'BANNER', - startDate: '2023-12-10', - endDate: '2023-12-10', - }, - { - _id: '6574e38aaa18987e28d24979', - name: 'HEy', - orgId: '6437904485008f171cf29924', - link: '123', - type: 'BANNER', - startDate: '2023-12-10', - endDate: '2023-12-10', - }, - ], - }, - }, - }, -]; +import dayjs from 'dayjs'; -const link = new StaticMockLink(mocks, true); -async function wait(ms = 100): Promise { - await act(() => { - return new Promise((resolve) => { - setTimeout(resolve, ms); - }); - }); -} const httpLink = new HttpLink({ uri: BACKEND_URL, headers: { authorization: 'Bearer ' + localStorage.getItem('token') || '', }, }); +const translations = JSON.parse( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain + JSON.stringify(i18n.getDataByLanguage('en')?.translation.advertisement!) +); const client: ApolloClient = new ApolloClient({ cache: new InMemoryCache(), @@ -222,4 +162,274 @@ describe('Testing Advertisement Entry Component', () => { // After the second click, the dropdown should be hidden again expect(queryByText('Edit')).toBeNull(); }); + test('Updates the advertisement and shows success toast on successful update', async () => { + const updateAdByIdMock = jest.fn().mockResolvedValue({ + data: { + updateAdvertisement: { + advertisement: { + _id: '1', + name: 'Updated Advertisement', + link: 'google.com', + startDate: dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD'), + endDate: dayjs(new Date()).add(2, 'days').format('YYYY-MM-DD'), + type: 'BANNER', + }, + }, + }, + }); + + mockUseMutation.mockReturnValue([updateAdByIdMock]); + + render( + + + + + { + + } + + + + + ); + + const optionsButton = screen.getByTestId('moreiconbtn'); + fireEvent.click(optionsButton); + fireEvent.click(screen.getByTestId('editBtn')); + + fireEvent.change(screen.getByLabelText('Enter name of Advertisement'), { + target: { value: 'Updated Advertisement' }, + }); + + expect(screen.getByLabelText('Enter name of Advertisement')).toHaveValue( + 'Updated Advertisement' + ); + + fireEvent.change(screen.getByLabelText(translations.Rlink), { + target: { value: 'http://example.com' }, + }); + expect(screen.getByLabelText(translations.Rlink)).toHaveValue( + 'http://example.com' + ); + + fireEvent.change(screen.getByLabelText(translations.Rtype), { + target: { value: 'BANNER' }, + }); + expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER'); + + fireEvent.change(screen.getByLabelText(translations.RstartDate), { + target: { value: dayjs().add(1, 'day').format('YYYY-MM-DD') }, + }); + + fireEvent.change(screen.getByLabelText(translations.RendDate), { + target: { value: dayjs().add(2, 'days').format('YYYY-MM-DD') }, + }); + + fireEvent.click(screen.getByTestId('addonupdate')); + + expect(updateAdByIdMock).toHaveBeenCalledWith({ + variables: { + id: '1', + name: 'Updated Advertisement', + link: 'http://example.com', + type: 'BANNER', + startDate: dayjs().add(1, 'day').format('YYYY-MM-DD'), + endDate: dayjs().add(2, 'days').format('YYYY-MM-DD'), + }, + }); + }); + test('Simulating if the mutation doesnt have data variable while updating', async () => { + const updateAdByIdMock = jest.fn().mockResolvedValue({ + updateAdvertisement: { + _id: '1', + name: 'Updated Advertisement', + type: 'BANNER', + }, + }); + + mockUseMutation.mockReturnValue([updateAdByIdMock]); + + render( + + + + + { + + } + + + + + ); + + const optionsButton = screen.getByTestId('moreiconbtn'); + fireEvent.click(optionsButton); + fireEvent.click(screen.getByTestId('editBtn')); + + fireEvent.change(screen.getByLabelText('Enter name of Advertisement'), { + target: { value: 'Updated Advertisement' }, + }); + + expect(screen.getByLabelText('Enter name of Advertisement')).toHaveValue( + 'Updated Advertisement' + ); + + fireEvent.change(screen.getByLabelText(translations.Rtype), { + target: { value: 'BANNER' }, + }); + expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER'); + + fireEvent.click(screen.getByTestId('addonupdate')); + + expect(updateAdByIdMock).toHaveBeenCalledWith({ + variables: { + id: '1', + name: 'Updated Advertisement', + type: 'BANNER', + }, + }); + }); + test('Updates the advertisement and shows error toast on successful update', async () => { + const updateAdByIdMock = jest.fn(); + + mockUseMutation.mockReturnValue([updateAdByIdMock]); + + render( + + + + + { + + } + + + + + ); + + fireEvent.click(screen.getByTestId('editBtn')); + + fireEvent.change(screen.getByLabelText(translations.Rlink), { + target: { value: 'http://example.com' }, + }); + expect(screen.getByLabelText(translations.Rlink)).toHaveValue( + 'http://example.com' + ); + + fireEvent.click(screen.getByTestId('addonupdate')); + + expect(updateAdByIdMock).toHaveBeenCalledWith({ + variables: { + id: '-100', + link: 'http://example.com', + }, + }); + }); + test('Simulating if the mutation does not have data variable while registering', async () => { + Object.defineProperty(window, 'location', { + configurable: true, + value: { + reload: jest.fn(), + href: 'https://example.com/page/id=1', + }, + }); + const createAdByIdMock = jest.fn().mockResolvedValue({ + data1: { + createAdvertisement: { + _id: '1', + }, + }, + }); + + mockUseMutation.mockReturnValue([createAdByIdMock]); + + render( + + + + + {} + + + + + ); + + fireEvent.click(screen.getByTestId('createAdvertisement')); + + fireEvent.change(screen.getByLabelText('Enter name of Advertisement'), { + target: { value: 'Updated Advertisement' }, + }); + + expect(screen.getByLabelText('Enter name of Advertisement')).toHaveValue( + 'Updated Advertisement' + ); + + fireEvent.change(screen.getByLabelText(translations.Rlink), { + target: { value: 'http://example.com' }, + }); + expect(screen.getByLabelText(translations.Rlink)).toHaveValue( + 'http://example.com' + ); + + fireEvent.change(screen.getByLabelText(translations.Rtype), { + target: { value: 'BANNER' }, + }); + expect(screen.getByLabelText(translations.Rtype)).toHaveValue('BANNER'); + + fireEvent.change(screen.getByLabelText(translations.RstartDate), { + target: { value: '2023-01-01' }, + }); + expect(screen.getByLabelText(translations.RstartDate)).toHaveValue( + '2023-01-01' + ); + + fireEvent.change(screen.getByLabelText(translations.RendDate), { + target: { value: '2023-02-01' }, + }); + expect(screen.getByLabelText(translations.RendDate)).toHaveValue( + '2023-02-01' + ); + + fireEvent.click(screen.getByTestId('addonregister')); + + expect(createAdByIdMock).toHaveBeenCalledWith({ + variables: { + orgId: '1', + name: 'Updated Advertisement', + link: 'http://example.com', + type: 'BANNER', + startDate: dayjs(new Date('2023-01-01')).format('YYYY-MM-DD'), + endDate: dayjs(new Date('2023-02-01')).format('YYYY-MM-DD'), + }, + }); + }); }); diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx index 9a578c114c..1afddf7690 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, fireEvent, waitFor } from '@testing-library/react'; +import { render, fireEvent, waitFor, screen } from '@testing-library/react'; import { ApolloClient, @@ -48,6 +48,7 @@ const MOCKS = [ data: { createAdvertisement: { _id: '1', + __typename: 'Advertisement', }, }, }, @@ -93,7 +94,7 @@ describe('Testing Advertisement Register Component', () => { }); }); - test('AdvertismentRegister component loads correctly', async () => { + test('AdvertismentRegister component loads correctly in register mode', async () => { const { getByText } = render( @@ -118,6 +119,32 @@ describe('Testing Advertisement Register Component', () => { expect(getByText(translations.addNew)).toBeInTheDocument(); }); }); + test('AdvertismentRegister component loads correctly in edit mode', async () => { + render( + + + + + { + + } + + + + + ); + await waitFor(() => { + expect(screen.getByTestId('editBtn')).toBeInTheDocument(); + }); + }); test('Opens and closes modals on button click', async () => { const { getByText, queryByText } = render( @@ -171,40 +198,41 @@ describe('Testing Advertisement Register Component', () => { ); - await waitFor(() => { - fireEvent.click(getByText(translations.addNew)); - expect(queryByText(translations.RClose)).toBeInTheDocument(); + fireEvent.click(getByText(translations.addNew)); + expect(queryByText(translations.RClose)).toBeInTheDocument(); - fireEvent.change(getByLabelText(translations.Rname), { - target: { value: 'Test Advertisement' }, - }); - expect(getByLabelText(translations.Rname)).toHaveValue( - 'Test Advertisement' - ); + fireEvent.change(getByLabelText(translations.Rname), { + target: { value: 'Test Advertisement' }, + }); + expect(getByLabelText(translations.Rname)).toHaveValue( + 'Test Advertisement' + ); - fireEvent.change(getByLabelText(translations.Rlink), { - target: { value: 'http://example.com' }, - }); - expect(getByLabelText(translations.Rlink)).toHaveValue( - 'http://example.com' - ); + fireEvent.change(getByLabelText(translations.Rlink), { + target: { value: 'http://example.com' }, + }); + expect(getByLabelText(translations.Rlink)).toHaveValue( + 'http://example.com' + ); - fireEvent.change(getByLabelText(translations.Rtype), { - target: { value: 'BANNER' }, - }); - expect(getByLabelText(translations.Rtype)).toHaveValue('BANNER'); + fireEvent.change(getByLabelText(translations.Rtype), { + target: { value: 'BANNER' }, + }); + expect(getByLabelText(translations.Rtype)).toHaveValue('BANNER'); - fireEvent.change(getByLabelText(translations.RstartDate), { - target: { value: '2023-01-01' }, - }); - expect(getByLabelText(translations.RstartDate)).toHaveValue('2023-01-01'); + fireEvent.change(getByLabelText(translations.RstartDate), { + target: { value: '2023-01-01' }, + }); + expect(getByLabelText(translations.RstartDate)).toHaveValue('2023-01-01'); - fireEvent.change(getByLabelText(translations.RendDate), { - target: { value: '2023-02-01' }, - }); - expect(getByLabelText(translations.RendDate)).toHaveValue('2023-02-01'); + fireEvent.change(getByLabelText(translations.RendDate), { + target: { value: '2023-02-01' }, + }); + expect(getByLabelText(translations.RendDate)).toHaveValue('2023-02-01'); - fireEvent.click(getByText(translations.register)); + fireEvent.click(getByText(translations.register)); + await waitFor(() => { + // Assert the success toast and setTimeout expect(toast.success).toBeCalledWith( 'Advertisement created successfully' ); @@ -221,12 +249,12 @@ describe('Testing Advertisement Register Component', () => { { } @@ -235,11 +263,11 @@ describe('Testing Advertisement Register Component', () => { ); - await waitFor(() => { - fireEvent.click(getByText(translations.addNew)); - expect(queryByText(translations.RClose)).toBeInTheDocument(); + fireEvent.click(getByText(translations.addNew)); + expect(queryByText(translations.RClose)).toBeInTheDocument(); - fireEvent.click(getByText(translations.register)); + fireEvent.click(getByText(translations.register)); + await waitFor(() => { expect(toast.error).toBeCalledWith( 'An error occured, could not create new advertisement' ); diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index e723a1f4b3..c4eb6ee4fd 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -125,22 +125,56 @@ function advertisementRegister({ }; const handleUpdate = async (): Promise => { try { - console.log('At handle update', formState); + const updatedFields: Partial = {}; + + // Only include the fields which are updated + if (formState.name !== nameEdit) { + updatedFields.name = formState.name; + } + if (formState.link !== linkEdit) { + updatedFields.link = formState.link; + } + if (formState.type !== typeEdit) { + updatedFields.type = formState.type; + } + const startDateFormattedString = dayjs(formState.startDate).format( + 'YYYY-MM-DD' + ); + const endDateFormattedString = dayjs(formState.endDate).format( + 'YYYY-MM-DD' + ); + + const startDateDate = dayjs( + startDateFormattedString, + 'YYYY-MM-DD' + ).toDate(); + const endDateDate = dayjs(endDateFormattedString, 'YYYY-MM-DD').toDate(); + + if (!dayjs(startDateDate).isSame(startDateEdit, 'day')) { + updatedFields.startDate = startDateDate; + } + if (!dayjs(endDateDate).isSame(endDateEdit, 'day')) { + updatedFields.endDate = endDateDate; + } + + console.log('At handle update', updatedFields); const { data } = await updateAdvertisement({ variables: { id: idEdit, - // orgId: currentOrg, - name: formState.name, - link: formState.link, - type: formState.type, - startDate: dayjs(formState.startDate).format('YYYY-MM-DD'), - endDate: dayjs(formState.endDate).format('YYYY-MM-DD'), + ...(updatedFields.name && { name: updatedFields.name }), + ...(updatedFields.link && { link: updatedFields.link }), + ...(updatedFields.type && { type: updatedFields.type }), + ...(updatedFields.startDate && { + startDate: startDateFormattedString, + }), + ...(updatedFields.endDate && { endDate: endDateFormattedString }), }, }); if (data) { toast.success('Advertisement updated successfully'); refetch(); + handleClose(); } } catch (error: any) { toast.error(error.message); @@ -153,12 +187,15 @@ function advertisementRegister({ className={styles.modalbtn} variant="primary" onClick={handleShow} + data-testid="createAdvertisement" > {t('addNew')} ) : ( -
    {t('edit')}
    +
    + {t('edit')} +
    )} @@ -213,7 +250,6 @@ function advertisementRegister({ ...formState, type: e.target.value, }); - console.log(e.target, e.target.value, typeof e.target.value); }} > From 6f03dbf74a7f7da67cd517cb8084d45a8bfca6ce Mon Sep 17 00:00:00 2001 From: Vaishali054 <100770875+Vaishali054@users.noreply.github.com> Date: Sun, 14 Jan 2024 19:33:09 +0530 Subject: [PATCH 17/18] remove the card link && fix tests --- .../core/AdvertisementEntry/AdvertisementEntry.test.tsx | 7 ++++--- .../core/AdvertisementEntry/AdvertisementEntry.tsx | 1 - .../AdvertisementRegister/AdvertisementRegister.test.tsx | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index 25a10fd701..008ae80fb2 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -12,7 +12,6 @@ import { BrowserRouter } from 'react-router-dom'; import AdvertisementEntry from './AdvertisementEntry'; import AdvertisementRegister from '../AdvertisementRegister/AdvertisementRegister'; import { Provider } from 'react-redux'; -import i18n from 'utils/i18nForTest'; import { store } from 'state/store'; import { BACKEND_URL } from 'Constant/constant'; import i18nForTest from 'utils/i18nForTest'; @@ -26,8 +25,10 @@ const httpLink = new HttpLink({ }, }); const translations = JSON.parse( - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain - JSON.stringify(i18n.getDataByLanguage('en')?.translation.advertisement!) + JSON.stringify( + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain + i18nForTest.getDataByLanguage('en')?.translation.advertisement! + ) ); const client: ApolloClient = new ApolloClient({ diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index ca665e8ca1..e8fad060fe 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -118,7 +118,6 @@ function advertisementEntry({ {t('view')} - {link}
    diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx index 94c8e936de..a1a16bf7b8 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx @@ -124,7 +124,7 @@ describe('Testing Advertisement Register Component', () => { - + { Date: Thu, 18 Jan 2024 10:53:44 +0530 Subject: [PATCH 18/18] changes: add line, fix comment --- .../core/AdvertisementEntry/AdvertisementEntry.test.tsx | 5 +++++ .../core/AdvertisementEntry/AdvertisementEntry.tsx | 1 + .../AdvertisementRegister/AdvertisementRegister.test.tsx | 4 ++++ .../core/AdvertisementRegister/AdvertisementRegister.tsx | 3 ++- 4 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index 008ae80fb2..5ae43aed5a 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -118,6 +118,7 @@ describe('Testing Advertisement Entry Component', () => { expect(deletionFailedText).toBeNull(); }); }); + it('should open and close the dropdown when options button is clicked', () => { const { getByTestId, queryByText, getAllByText } = render( @@ -163,6 +164,7 @@ describe('Testing Advertisement Entry Component', () => { // After the second click, the dropdown should be hidden again expect(queryByText('Edit')).toBeNull(); }); + test('Updates the advertisement and shows success toast on successful update', async () => { const updateAdByIdMock = jest.fn().mockResolvedValue({ data: { @@ -248,6 +250,7 @@ describe('Testing Advertisement Entry Component', () => { }, }); }); + test('Simulating if the mutation doesnt have data variable while updating', async () => { const updateAdByIdMock = jest.fn().mockResolvedValue({ updateAdvertisement: { @@ -308,6 +311,7 @@ describe('Testing Advertisement Entry Component', () => { }, }); }); + test('Updates the advertisement and shows error toast on successful update', async () => { const updateAdByIdMock = jest.fn(); @@ -354,6 +358,7 @@ describe('Testing Advertisement Entry Component', () => { }, }); }); + test('Simulating if the mutation does not have data variable while registering', async () => { Object.defineProperty(window, 'location', { configurable: true, diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index e8fad060fe..3a19860550 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -33,6 +33,7 @@ function advertisementEntry({ const [buttonLoading, setButtonLoading] = useState(false); const [dropdown, setDropdown] = useState(false); const [showDeleteModal, setShowDeleteModal] = useState(false); + const [deleteAdById] = useMutation(DELETE_ADVERTISEMENT_BY_ID, { refetchQueries: [ADVERTISEMENTS_GET], }); diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx index a1a16bf7b8..b0249cc48f 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.test.tsx @@ -119,6 +119,7 @@ describe('Testing Advertisement Register Component', () => { expect(getByText(translations.addNew)).toBeInTheDocument(); }); }); + test('AdvertismentRegister component loads correctly in edit mode', async () => { render( @@ -145,6 +146,7 @@ describe('Testing Advertisement Register Component', () => { expect(screen.getByTestId('editBtn')).toBeInTheDocument(); }); }); + test('Opens and closes modals on button click', async () => { const { getByText, queryByText } = render( @@ -174,6 +176,7 @@ describe('Testing Advertisement Register Component', () => { expect(queryByText(translations.close)).not.toBeInTheDocument(); }); }); + test('Submits the form and shows success toast on successful advertisement creation', async () => { const setTimeoutSpy = jest.spyOn(global, 'setTimeout'); @@ -241,6 +244,7 @@ describe('Testing Advertisement Register Component', () => { expect(queryByText(translations.close)).not.toBeInTheDocument(); }); + test('Logs error to the console and shows error toast when advertisement creation fails', async () => { const { getByText, queryByText } = render( diff --git a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx index c4eb6ee4fd..44b12b01be 100644 --- a/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx +++ b/src/components/Advertisements/core/AdvertisementRegister/AdvertisementRegister.tsx @@ -181,8 +181,9 @@ function advertisementRegister({ } }; return ( + //If register show register button else show edit button <> - {formStatus === 'register' ? ( //If register show register button else show edit button + {formStatus === 'register' ? (