diff --git a/public/locales/en.json b/public/locales/en.json index 06006a0052..5d98b0c0b3 100644 --- a/public/locales/en.json +++ b/public/locales/en.json @@ -702,7 +702,7 @@ "delete": "Delete", "Rname": "Enter name of Advertisement", "Rtype": "Select type of Advertisement", - "Rlink": "Provide a link for content to be displayed", + "Rmedia": "Provide media content to be displayed", "RstartDate": "Select Start Date", "RendDate": "Select End Date", "RClose": "Close the window", diff --git a/public/locales/fr.json b/public/locales/fr.json index b9862b6912..347e7ad046 100644 --- a/public/locales/fr.json +++ b/public/locales/fr.json @@ -700,6 +700,7 @@ "deleteAdvertisementMsg": "Voulez-vous supprimer cette annonce ?", "no": "Non", "yes": "Oui", + "Rmedia": "Fournir du contenu multimédia à afficher", "view": "Voir", "edit": "Éditer", "editAdvertisement": "Éditer l'annonce", diff --git a/public/locales/hi.json b/public/locales/hi.json index 7db22caa28..36a7e6aed3 100644 --- a/public/locales/hi.json +++ b/public/locales/hi.json @@ -701,6 +701,7 @@ "deleteAdvertisementMsg": "क्या आप इस विज्ञापन को हटाना चाहते हैं?", "no": "नहीं", "yes": "हाँ", + "Rmedia": "प्रदर्शित करने के लिए मीडिया सामग्री प्रदान करें", "view": "देखें", "edit": "संपादित करें", "editAdvertisement": "विज्ञापन संपादित करें", diff --git a/public/locales/sp.json b/public/locales/sp.json index 76138e8045..bddb75fbd8 100644 --- a/public/locales/sp.json +++ b/public/locales/sp.json @@ -700,6 +700,7 @@ "deleteAdvertisementMsg": "¿Desea eliminar este anuncio?", "no": "No", "yes": "Sí", + "Rmedia": "Proporcionar contenido multimedia para mostrar", "view": "Ver", "edit": "Editar", "editAdvertisement": "Editar Anuncio", diff --git a/public/locales/zh.json b/public/locales/zh.json index 8c1337c0de..7f8aa670ea 100644 --- a/public/locales/zh.json +++ b/public/locales/zh.json @@ -701,6 +701,7 @@ "deleteAdvertisementMsg": "您是否要删除此广告？", "no": "不", "yes": "是", + "Rmedia": "提供要显示的媒体内容", "view": "查看", "edit": "编辑", "editAdvertisement": "编辑广告", diff --git a/schema.graphql b/schema.graphql index f0e8979e4f..d94b2cd7c6 100644 --- a/schema.graphql +++ b/schema.graphql @@ -5,9 +5,9 @@ directive @role(requires: UserType) on FIELD_DEFINITION type Advertisement { _id: ID endDate: Date! - link: String! + mediaUrl: URL! name: String! - orgId: ID + organizationId: ID! startDate: Date! type: String! } @@ -402,6 +402,19 @@ type MinimumValueError implements FieldError { path: [String!]! } +input CreateAdvertisementInput { + endDate: Date! + name: String! + organizationId: ID! + startDate: Date! + type: String! + mediaFile: String! +} + +type CreateAdvertisementPayload { + advertisement: Advertisement +} + type Mutation { acceptAdmin(id: ID!): Boolean! acceptMembershipRequest(membershipRequestId: ID!): MembershipRequest! @@ -419,14 +432,7 @@ type Mutation { cancelMembershipRequest(membershipRequestId: ID!): MembershipRequest! checkIn(data: CheckInInput!): CheckIn! createAdmin(data: UserAndOrganizationInput!): User! - createAdvertisement( - endDate: Date! - link: String! - name: String! - orgId: ID! - startDate: Date! - type: String! - ): Advertisement! + createAdvertisement(input: CreateAdvertisementInput!): CreateAdvertisementPayload createComment(data: CommentInput!, postId: ID!): Comment createDirectChat(data: createChatInput!): DirectChat! createDonation( diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts index 0d70d585eb..21c3ede242 100644 --- a/src/GraphQl/Mutations/mutations.ts +++ b/src/GraphQl/Mutations/mutations.ts @@ -444,20 +444,22 @@ export const ADD_PLUGIN_MUTATION = gql` `; export const ADD_ADVERTISEMENT_MUTATION = gql` mutation ( - $orgId: ID! + $organizationId: ID! $name: String! - $link: String! $type: String! $startDate: Date! $endDate: Date! + $file: String! ) { createAdvertisement( - orgId: $orgId - name: $name - link: $link - type: $type - startDate: $startDate - endDate: $endDate + input: { + organizationId: $organizationId + name: $name + type: $type + startDate: $startDate + endDate: $endDate + mediaFile: $file + } ) { _id } @@ -467,7 +469,7 @@ export const UPDATE_ADVERTISEMENT_MUTATION = gql` mutation UpdateAdvertisement( $id: ID! $name: String - $link: String + $file: String $type: AdvertisementType $startDate: Date $endDate: Date @@ -476,7 +478,7 @@ export const UPDATE_ADVERTISEMENT_MUTATION = gql` input: { _id: $id name: $name - link: $link + mediaFile: $file type: $type startDate: $startDate endDate: $endDate diff --git a/src/GraphQl/Queries/PlugInQueries.ts b/src/GraphQl/Queries/PlugInQueries.ts index 76ade412a6..6c5ba023a0 100644 --- a/src/GraphQl/Queries/PlugInQueries.ts +++ b/src/GraphQl/Queries/PlugInQueries.ts @@ -30,8 +30,10 @@ export const ADVERTISEMENTS_GET = gql` _id name type - orgId - link + organization { + _id + } + mediaUrl endDate startDate } diff --git a/src/components/Advertisements/Advertisements.test.tsx b/src/components/Advertisements/Advertisements.test.tsx index 513a8d9c21..bdb974d358 100644 --- a/src/components/Advertisements/Advertisements.test.tsx +++ b/src/components/Advertisements/Advertisements.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import 'jest-location-mock'; -import { act, render, screen } from '@testing-library/react'; +import { act, fireEvent, render, screen } from '@testing-library/react'; import { MockedProvider } from '@apollo/client/testing'; import { ApolloClient, @@ -88,9 +88,9 @@ const ADD_ADVERTISEMENT_MUTATION_MOCK = { request: { query: ADD_ADVERTISEMENT_MUTATION, variables: { - orgId: 'undefined', + organizationId: 'undefined', name: 'Cookie Shop', - link: 'http://yourwebsite.com/photo', + file: 'data:image/png;base64,bWVkaWEgY29udGVudA==', type: 'POPUP', startDate: '2023-01-01', endDate: '2023-02-02', @@ -210,10 +210,18 @@ describe('Testing Advertisement Component', () => { screen.getByLabelText('Enter name of Advertisement'), 'Cookie Shop' ); - userEvent.type( - screen.getByLabelText('Provide a link for content to be displayed'), - 'http://yourwebsite.com/photo' - ); + const mediaFile = new File(['media content'], 'test.png', { + type: 'image/png', + }); + + const mediaInput = screen.getByTestId('advertisementMedia'); + fireEvent.change(mediaInput, { + target: { + files: [mediaFile], + }, + }); + const mediaPreview = await screen.findByTestId('mediaPreview'); + expect(mediaPreview).toBeInTheDocument(); userEvent.selectOptions( screen.getByLabelText('Select type of Advertisement'), 'POPUP' @@ -221,7 +229,7 @@ describe('Testing Advertisement Component', () => { userEvent.type(screen.getByLabelText('Select Start Date'), '2023-01-01'); userEvent.type(screen.getByLabelText('Select End Date'), '2023-02-02'); - await userEvent.click(screen.getByTestId('addonregister')); + userEvent.click(screen.getByTestId('addonregister')); expect( await screen.findByText('Advertisement created successfully') ).toBeInTheDocument(); @@ -243,8 +251,10 @@ describe('Testing Advertisement Component', () => { _id: '1', name: 'Advertisement1', type: 'POPUP', - orgId: 'undefined', - link: 'http://example1.com', + organization: { + _id: 'undefined', + }, + mediaUrl: 'http://example1.com', endDate: '2023-01-01', startDate: '2022-01-01', }, @@ -308,8 +318,10 @@ describe('Testing Advertisement Component', () => { _id: '1', name: 'Advertisement1', type: 'POPUP', - orgId: 'undefined', - link: 'http://example1.com', + organization: { + _id: 'undefined', + }, + mediaUrl: 'http://example1.com', endDate: '2023-01-01', startDate: '2022-01-01', }, @@ -317,8 +329,10 @@ describe('Testing Advertisement Component', () => { _id: '2', name: 'Advertisement2', type: 'BANNER', - orgId: 'undefined', - link: 'http://example2.com', + organization: { + _id: 'undefined', + }, + mediaUrl: 'http://example2.com', endDate: tomorrow, startDate: today, }, diff --git a/src/components/Advertisements/Advertisements.tsx b/src/components/Advertisements/Advertisements.tsx index 21a0bf0b8b..81a3f4b28e 100644 --- a/src/components/Advertisements/Advertisements.tsx +++ b/src/components/Advertisements/Advertisements.tsx @@ -3,87 +3,23 @@ import React, { useEffect, useState } from 'react'; // import PropTypes from 'react'; import styles from './Advertisements.module.css'; import { useQuery } from '@apollo/client'; -import { ADVERTISEMENTS_GET, PLUGIN_GET } from 'GraphQl/Queries/Queries'; // PLUGIN_LIST -import { useSelector } from 'react-redux'; -import type { RootState } from '../../state/reducers'; -import { Col, Form, Row, Tab, Tabs } from 'react-bootstrap'; -import PluginHelper from 'components/AddOn/support/services/Plugin.helper'; -import { store } from 'state/store'; +import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries'; +import { Col, Row, Tab, Tabs } from 'react-bootstrap'; import { useTranslation } from 'react-i18next'; -import Loader from 'components/Loader/Loader'; import OrganizationScreen from 'components/OrganizationScreen/OrganizationScreen'; import AdvertisementEntry from './core/AdvertisementEntry/AdvertisementEntry'; import AdvertisementRegister from './core/AdvertisementRegister/AdvertisementRegister'; -import AddOnRegister from 'components/AddOn/core/AddOnRegister/AddOnRegister'; export default function advertisements(): JSX.Element { const { - data: data2, - loading: loading2, - error: error2, + data: advertisementsData, + loading: loadingAdvertisements, + error: errorAdvertisement, } = useQuery(ADVERTISEMENTS_GET); const currentOrgId = window.location.href.split('/id=')[1] + ''; const { t } = useTranslation('translation', { keyPrefix: 'advertisement' }); document.title = t('title'); - const [isStore, setIsStore] = useState(true); - const [showEnabled, setShowEnabled] = useState(true); - const [searchText, setSearchText] = useState(''); - const [dataList, setDataList] = useState([]); - - const [render, setRender] = useState(true); - const appRoutes = useSelector((state: RootState) => state.appRoutes); - const { targets, configUrl } = appRoutes; - - const plugins = useSelector((state: RootState) => state.plugins); - const { installed, addonStore } = plugins; - const { data, loading, error } = useQuery(PLUGIN_GET); - /* istanbul ignore next */ - // eslint-disable-next-line @typescript-eslint/explicit-function-return-type - const getStorePlugins = async () => { - let plugins = await new PluginHelper().fetchStore(); - const installIds = (await new PluginHelper().fetchInstalled()).map( - (plugin: any) => plugin.id - ); - plugins = plugins.map((plugin: any) => { - plugin.installed = installIds.includes(plugin.id); - return plugin; - }); - store.dispatch({ type: 'UPDATE_STORE', payload: plugins }); - }; - - /* istanbul ignore next */ - const getInstalledPlugins: () => any = () => { - setDataList(data); - }; - // const getAdvertisements: () => any = ()=> { - // return - // } - - /* istanbul ignore next */ - const updateLinks = async (links: any[]): Promise => { - store.dispatch({ type: 'UPDATE_P_TARGETS', payload: links }); - }; - /* istanbul ignore next */ - const pluginModified = (): void => { - return getInstalledPlugins(); - // .then((installedPlugins) => { - // getStorePlugins(); - // return installedPlugins; - // }); - }; - - const updateSelectedTab = (tab: any): void => { - setIsStore(tab === 'activeAds'); - isStore ? getStorePlugins() : getInstalledPlugins(); - }; - - /* istanbul ignore next */ - const filterChange = (ev: any): void => { - setShowEnabled(ev.target.value === 'enabled'); - }; - - /* istanbul ignore next */ - if (loading) { + if (loadingAdvertisements) { return ( <>
@@ -102,23 +38,21 @@ export default function advertisements(): JSX.Element {

{t('pHeading')}

- - - {data2?.getAdvertisements - .filter((ad: any) => ad.orgId == currentOrgId) + + {advertisementsData?.getAdvertisements + .filter((ad: any) => ad.organization._id == currentOrgId) .filter((ad: any) => new Date(ad.endDate) > new Date()) .length == 0 ? (

{t('pMessage')}

// eslint-disable-line ) : ( - data2?.getAdvertisements - .filter((ad: any) => ad.orgId == currentOrgId) + advertisementsData?.getAdvertisements + .filter((ad: any) => ad.organization._id == currentOrgId) .filter((ad: any) => new Date(ad.endDate) > new Date()) .map( ( @@ -126,8 +60,8 @@ export default function advertisements(): JSX.Element { _id: string; name: string | undefined; type: string | undefined; - orgId: string; - link: string; + organization: any; + mediaUrl: string; endDate: Date; startDate: Date; }, @@ -138,25 +72,24 @@ export default function advertisements(): JSX.Element { key={i} name={ad.name} type={ad.type} - orgId={ad.orgId} + organizationId={ad.organization._id} startDate={new Date(ad.startDate)} endDate={new Date(ad.endDate)} - link={ad.link} - // getInstalledPlugins={getInstalledPlugins} + mediaUrl={ad.mediaUrl} /> ) ) )} - {data2?.getAdvertisements - .filter((ad: any) => ad.orgId == currentOrgId) + {advertisementsData?.getAdvertisements + .filter((ad: any) => ad.organization._id == currentOrgId) .filter((ad: any) => new Date(ad.endDate) < new Date()) .length == 0 ? (

{t('pMessage')}

// eslint-disable-line ) : ( - data2?.getAdvertisements - .filter((ad: any) => ad.orgId == currentOrgId) + advertisementsData?.getAdvertisements + .filter((ad: any) => ad.organization._id == currentOrgId) .filter((ad: any) => new Date(ad.endDate) < new Date()) .map( ( @@ -164,8 +97,8 @@ export default function advertisements(): JSX.Element { _id: string; name: string | undefined; type: string | undefined; - orgId: string; - link: string; + organization: any; + mediaUrl: string; endDate: Date; startDate: Date; }, @@ -176,10 +109,10 @@ export default function advertisements(): JSX.Element { key={i} name={ad.name} type={ad.type} - orgId={ad.orgId} + organizationId={ad.organization._id} startDate={new Date(ad.startDate)} endDate={new Date(ad.endDate)} - // getInstalledPlugins={getInstalledPlugins} + mediaUrl={ad.mediaUrl} /> ) ) diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css index 20bb86a21a..879d96a0a0 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css @@ -18,6 +18,11 @@ margin-right: 8px; } +.admedia { + object-fit: cover; + height: 20rem; +} + .buttons { display: flex; justify-content: flex-end; diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx index 5ae43aed5a..140ef30fa0 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.test.tsx @@ -59,9 +59,9 @@ describe('Testing Advertisement Entry Component', () => { startDate={new Date()} id="1" key={1} - link="google.com" + mediaUrl="data:videos" name="Advert1" - orgId="1" + organizationId="1" type="POPUP" /> @@ -74,6 +74,7 @@ describe('Testing Advertisement Entry Component', () => { expect(getByTestId('AdEntry')).toBeInTheDocument(); expect(getAllByText('POPUP')[0]).toBeInTheDocument(); expect(getAllByText('Advert1')[0]).toBeInTheDocument(); + expect(screen.getByTestId('media')).toBeInTheDocument(); //Testing successful deletion fireEvent.click(getByTestId('moreiconbtn')); @@ -130,9 +131,9 @@ describe('Testing Advertisement Entry Component', () => { startDate={new Date()} id="1" key={1} - link="google.com" + mediaUrl="" name="Advert1" - orgId="1" + organizationId="1" type="POPUP" /> @@ -172,7 +173,7 @@ describe('Testing Advertisement Entry Component', () => { advertisement: { _id: '1', name: 'Updated Advertisement', - link: 'google.com', + mediaUrl: '', startDate: dayjs(new Date()).add(1, 'day').format('YYYY-MM-DD'), endDate: dayjs(new Date()).add(2, 'days').format('YYYY-MM-DD'), type: 'BANNER', @@ -188,17 +189,15 @@ describe('Testing Advertisement Entry Component', () => { - { - - } + @@ -217,13 +216,6 @@ describe('Testing Advertisement Entry Component', () => { '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' }, }); @@ -243,7 +235,6 @@ describe('Testing Advertisement Entry Component', () => { 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'), @@ -267,17 +258,15 @@ describe('Testing Advertisement Entry Component', () => { - { - - } + @@ -322,18 +311,16 @@ describe('Testing Advertisement Entry Component', () => { - { - - } + @@ -342,19 +329,11 @@ describe('Testing Advertisement Entry Component', () => { 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', }, }); }); @@ -399,13 +378,6 @@ describe('Testing Advertisement Entry Component', () => { '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' }, }); @@ -429,9 +401,9 @@ describe('Testing Advertisement Entry Component', () => { expect(createAdByIdMock).toHaveBeenCalledWith({ variables: { - orgId: '1', + organizationId: '1', name: 'Updated Advertisement', - link: 'http://example.com', + file: '', 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/AdvertisementEntry/AdvertisementEntry.tsx b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx index 3a19860550..40cacb0442 100644 --- a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx +++ b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.tsx @@ -12,9 +12,9 @@ import { toast } from 'react-toastify'; interface InterfaceAddOnEntryProps { id: string; name: string; - link: string; + mediaUrl: string; type: string; - orgId: string; + organizationId: string; startDate: Date; endDate: Date; } @@ -22,11 +22,9 @@ function advertisementEntry({ id, name, type, - // eslint-disable-next-line @typescript-eslint/no-unused-vars - orgId, - link, + mediaUrl, endDate, - // eslint-disable-next-line @typescript-eslint/no-unused-vars + organizationId, startDate, }: InterfaceAddOnEntryProps): JSX.Element { const { t } = useTranslation('translation', { keyPrefix: 'advertisement' }); @@ -79,8 +77,8 @@ function advertisementEntry({ idEdit={id} nameEdit={name} typeEdit={type} - orgIdEdit={orgId} - linkEdit={link} + orgIdEdit={organizationId} + advertisementMediaEdit={mediaUrl} endDateEdit={endDate} startDateEdit={startDate} /> @@ -91,19 +89,32 @@ function advertisementEntry({ )}
- + {mediaUrl?.includes('videos') ? ( + + ) : ( + + )} {name} Ends on {endDate?.toDateString()} {type} - {link}
+
+ )} {t('Rtype')} @@ -322,21 +368,21 @@ function advertisementRegister({ advertisementRegister.defaultProps = { name: '', - link: '', + advertisementMedia: '', type: 'BANNER', startDate: new Date(), endDate: new Date(), - orgId: '', + organizationId: '', formStatus: 'register', }; advertisementRegister.propTypes = { name: PropTypes.string, - link: PropTypes.string, + advertisementMedia: PropTypes.string, type: PropTypes.string, startDate: PropTypes.instanceOf(Date), endDate: PropTypes.instanceOf(Date), - orgId: PropTypes.string, + organizationId: PropTypes.string, formStatus: PropTypes.string, }; diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.module.css b/src/components/UserPortal/PromotedPost/PromotedPost.module.css index cdc13e621b..676d30a83a 100644 --- a/src/components/UserPortal/PromotedPost/PromotedPost.module.css +++ b/src/components/UserPortal/PromotedPost/PromotedPost.module.css @@ -54,3 +54,8 @@ color: white; cursor: pointer; } + +.admedia { + object-fit: cover; + height: 30rem; +} diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx index 6b68509a51..e713f6de83 100644 --- a/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx +++ b/src/components/UserPortal/PromotedPost/PromotedPost.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { act, render, waitFor } from '@testing-library/react'; +import { act, render, waitFor, screen } from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; @@ -22,7 +22,7 @@ async function wait(ms = 100): Promise { let props = { id: '1', - image: '', + media: '', title: 'Test Post', }; @@ -46,10 +46,10 @@ describe('Testing PromotedPost Test', () => { test('Component should be rendered properly if prop image is not undefined', async () => { props = { ...props, - image: 'promotedPostImage', + media: 'data:image/png;base64,bWVkaWEgY29udGVudA==', }; - render( + const { queryByRole } = render( @@ -61,7 +61,13 @@ describe('Testing PromotedPost Test', () => { ); - await wait(); + await waitFor(() => { + const image = queryByRole('img'); + expect(image).toHaveAttribute( + 'src', + 'data:image/png;base64,bWVkaWEgY29udGVudA==' + ); + }); }); }); @@ -103,12 +109,12 @@ test('Component should display the text correctly', async () => { }); }); -test('Component should display the image correctly', async () => { +test('Component should display the media correctly', async () => { props = { ...props, - image: 'promotedPostImage', + media: 'data:videos', }; - const { queryByRole } = render( + render( @@ -120,8 +126,8 @@ test('Component should display the image correctly', async () => { ); - await waitFor(() => { - const image = queryByRole('img'); - expect(image).toHaveAttribute('src', 'promotedPostImage'); + await waitFor(async () => { + const media = await screen.findByTestId('media'); + expect(media).toBeInTheDocument(); }); }); diff --git a/src/components/UserPortal/PromotedPost/PromotedPost.tsx b/src/components/UserPortal/PromotedPost/PromotedPost.tsx index 81f3aa0e7e..48396ab2d2 100644 --- a/src/components/UserPortal/PromotedPost/PromotedPost.tsx +++ b/src/components/UserPortal/PromotedPost/PromotedPost.tsx @@ -4,7 +4,7 @@ import styles from './PromotedPost.module.css'; import StarPurple500Icon from '@mui/icons-material/StarPurple500'; interface InterfacePostCardProps { id: string; - image: string; + media: string; title: string; } export default function promotedPost( @@ -22,8 +22,23 @@ export default function promotedPost( {props.title} {props.title} - {props.image && ( - + {props.media?.includes('videos') ? ( + + ) : ( + )} diff --git a/src/screens/UserPortal/Home/Home.test.tsx b/src/screens/UserPortal/Home/Home.test.tsx index 6a3324b9d2..b479198256 100644 --- a/src/screens/UserPortal/Home/Home.test.tsx +++ b/src/screens/UserPortal/Home/Home.test.tsx @@ -166,8 +166,10 @@ const MOCKS = [ _id: '1234', name: 'Ad 1', type: 'Type 1', - orgId: 'orgId', - link: 'Link 1', + organization: { + _id: 'orgId', + }, + mediaUrl: 'Link 1', endDate: '2024-12-31', startDate: '2022-01-01', }, @@ -175,8 +177,10 @@ const MOCKS = [ _id: '2345', name: 'Ad 2', type: 'Type 1', - orgId: 'orgId', - link: 'Link 2', + organization: { + _id: 'orgId', + }, + mediaUrl: 'Link 2', endDate: '2024-09-31', startDate: '2023-04-01', }, @@ -184,8 +188,10 @@ const MOCKS = [ _id: '3456', name: 'name3', type: 'Type 2', - orgId: 'orgId', - link: 'link3', + organization: { + _id: 'orgId', + }, + mediaUrl: 'link3', startDate: '2023-01-30', endDate: '2023-12-31', }, @@ -193,8 +199,10 @@ const MOCKS = [ _id: '4567', name: 'name4', type: 'Type 2', - orgId: 'org1', - link: 'link4', + organization: { + _id: 'orgId', + }, + mediaUrl: 'link4', startDate: '2023-01-30', endDate: '2023-12-01', }, diff --git a/src/screens/UserPortal/Home/Home.tsx b/src/screens/UserPortal/Home/Home.tsx index 61e9fec120..009f1f5119 100644 --- a/src/screens/UserPortal/Home/Home.tsx +++ b/src/screens/UserPortal/Home/Home.tsx @@ -316,7 +316,7 @@ export default function home(): JSX.Element {