diff --git a/src/components/Advertisements/Advertisements.test.tsx b/src/components/Advertisements/Advertisements.test.tsx index bec43589b6..6113609ebe 100644 --- a/src/components/Advertisements/Advertisements.test.tsx +++ b/src/components/Advertisements/Advertisements.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { render } from '@testing-library/react'; +import 'jest-location-mock'; +import { act, render, screen } from '@testing-library/react'; import { MockedProvider } from '@apollo/client/testing'; import { ApolloClient, @@ -17,7 +18,14 @@ import { store } from 'state/store'; import { BACKEND_URL } from 'Constant/constant'; import i18nForTest from 'utils/i18nForTest'; import { I18nextProvider } from 'react-i18next'; -import { ADVERTISEMENTS_GET } from 'GraphQl/Queries/Queries'; +import { + ADVERTISEMENTS_GET, + ORGANIZATIONS_LIST, + PLUGIN_GET, +} from 'GraphQl/Queries/Queries'; +import userEvent from '@testing-library/user-event'; +import { ADD_ADVERTISEMENT_MUTATION } from 'GraphQl/Mutations/mutations'; +import { ToastContainer } from 'react-toastify'; const httpLink = new HttpLink({ uri: BACKEND_URL, @@ -26,49 +34,336 @@ const httpLink = new HttpLink({ }, }); +async function wait(ms = 100): Promise { + await act(() => { + return new Promise((resolve) => { + setTimeout(resolve, ms); + }); + }); +} + const client: ApolloClient = new ApolloClient({ cache: new InMemoryCache(), link: ApolloLink.from([httpLink]), }); -describe('Testing Advertisement Component', () => { - test('Temporary test for Advertisement', () => { - expect(true).toBe(true); - const { getByTestId } = render( + +jest.mock('components/AddOn/support/services/Plugin.helper', () => ({ + __esModule: true, + default: jest.fn().mockImplementation(() => ({ + fetchInstalled: jest.fn().mockResolvedValue([]), + fetchStore: jest.fn().mockResolvedValue([]), + })), +})); + +const today = new Date(); +const tomorrow = today; +tomorrow.setDate(today.getDate() + 1); + +const PLUGIN_GET_MOCK = { + request: { + query: PLUGIN_GET, + }, + result: { + data: { + getPlugins: [ + { + _id: '6581be50e88e74003aab436c', + pluginName: 'Chats', + pluginCreatedBy: 'Talawa Team', + pluginDesc: + 'User can share messages with other users in a chat user interface.', + uninstalledOrgs: [ + '62ccfccd3eb7fd2a30f41601', + '62ccfccd3eb7fd2a30f41601', + ], + __typename: 'Plugin', + }, + ], + }, + loading: false, + }, +}; + +const ADD_ADVERTISEMENT_MUTATION_MOCK = { + request: { + query: ADD_ADVERTISEMENT_MUTATION, + variables: { + orgId: 'undefined', + name: 'Cookie Shop', + link: 'http://yourwebsite.com/photo', + type: 'POPUP', + startDate: '2023-01-01', + endDate: '2023-02-02', + }, + }, + result: { + data: { + createAdvertisement: { + _id: '65844efc814dd4003db811c4', + __typename: 'Advertisement', + }, + }, + }, +}; + +const ORGANIZATIONS_LIST_MOCK = { + request: { + query: ORGANIZATIONS_LIST, + variables: { + id: 'undefined', + }, + }, + result: { + data: { + organizations: [ + { + _id: 'undefined', + image: '', + creator: { + firstName: 'firstName', + lastName: 'lastName', + email: 'email', + }, + name: 'name', + description: 'description', + isPublic: true, + + visibleInSearch: true, + location: 'location', + members: { + _id: 'id', + firstName: 'firstName', + lastName: 'lastName', + email: 'email', + }, + admins: { + _id: 'id', + firstName: 'firstName', + lastName: 'lastName', + email: 'email', + }, + membershipRequests: { + _id: 'id', + user: { + firstName: 'firstName', + lastName: 'lastName', + email: 'email', + }, + }, + blockedUsers: { + _id: 'id', + firstName: 'firstName', + lastName: 'lastName', + email: 'email', + }, + }, + ], + }, + }, +}; + +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, + PLUGIN_GET_MOCK, + ADD_ADVERTISEMENT_MUTATION_MOCK, + { + request: { + query: ADVERTISEMENTS_GET, + }, + result: { + data: { + getAdvertisements: [], + }, + loading: false, + }, + }, + ]; + + render( + + + + + + + + + + + ); + + await wait(); + + await userEvent.click(screen.getByText('Create new advertisement')); + userEvent.type( + screen.getByLabelText('Enter name of Advertisement'), + 'Cookie Shop' + ); + userEvent.type( + screen.getByLabelText('Provide a link for content to be displayed'), + 'http://yourwebsite.com/photo' + ); + userEvent.selectOptions( + screen.getByLabelText('Select type of Advertisement'), + 'POPUP' + ); + 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')); + expect( + await screen.findByText('Advertisement created successfully') + ).toBeInTheDocument(); + }); + + test('if the component renders correctly and ads are correctly categorized date wise', async () => { + const mocks = [ + ORGANIZATIONS_LIST_MOCK, + PLUGIN_GET_MOCK, + ADD_ADVERTISEMENT_MUTATION_MOCK, + { + 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, + }, + }, + ]; + + render( - {} + + + ); - expect(getByTestId('AdEntryStore')).toBeInTheDocument(); + + await wait(); + + const date = await screen.findAllByText(/Ends/i); + const dateString = date[0].innerHTML; + const dateMatch = dateString.match( + /\b(?:Sun|Mon|Tue|Wed|Thu|Fri|Sat)\s+(Jan|Feb|Mar|Apr|May|Jun|Jul|Aug|Sep|Oct|Nov|Dec)\s+(\d{1,2})\s+(\d{4})\b/ + ); + let dateObject = new Date(); + + if (dateMatch) { + const monthName = dateMatch[1]; + const day = parseInt(dateMatch[2], 10); + const year = parseInt(dateMatch[3], 10); + + const monthIndex = + 'JanFebMarAprMayJunJulAugSepOctNovDec'.indexOf(monthName) / 3; + + dateObject = new Date(year, monthIndex, day); + } + + expect(dateObject.getTime()).toBeLessThan(new Date().getTime()); }); - test('renders advertisement data', async () => { + test('for the working of the tabs', async () => { const mocks = [ + ORGANIZATIONS_LIST_MOCK, + PLUGIN_GET_MOCK, + ADD_ADVERTISEMENT_MUTATION_MOCK, { request: { query: ADVERTISEMENTS_GET, - variables: { - name: 'Test', - }, }, result: { data: { getAdvertisements: [ { _id: '1', - name: 'Advertisement', + name: 'Advertisement1', type: 'POPUP', - orgId: 'org1', - link: 'http://example.com', - endDate: new Date(), - startDate: new Date(), + orgId: 'undefined', + link: 'http://example1.com', + endDate: '2023-01-01', + startDate: '2022-01-01', + }, + { + _id: '2', + name: 'Advertisement2', + type: 'BANNER', + orgId: 'undefined', + link: 'http://example2.com', + endDate: tomorrow, + startDate: today, }, - // Add more mock data if needed ], }, loading: false, @@ -76,7 +371,7 @@ describe('Testing Advertisement Component', () => { }, ]; - const { getByTestId } = render( + render( @@ -90,6 +385,10 @@ describe('Testing Advertisement Component', () => { ); - expect(getByTestId('AdEntryStore')).toBeInTheDocument(); + await wait(); + userEvent.click(screen.getByText('Active Campaigns')); + + await wait(); + userEvent.click(screen.getByText('Completed Campaigns')); }); }); diff --git a/src/components/Advertisements/Advertisements.tsx b/src/components/Advertisements/Advertisements.tsx index 7af6fd98c9..461c7d8b9d 100644 --- a/src/components/Advertisements/Advertisements.tsx +++ b/src/components/Advertisements/Advertisements.tsx @@ -63,7 +63,7 @@ export default function advertisements(): JSX.Element { const updateLinks = async (links: any[]): Promise => { store.dispatch({ type: 'UPDATE_P_TARGETS', payload: links }); }; - // /* istanbul ignore next */ + /* istanbul ignore next */ const pluginModified = (): void => { return getInstalledPlugins(); // .then((installedPlugins) => { @@ -77,6 +77,7 @@ export default function advertisements(): JSX.Element { isStore ? getStorePlugins() : getInstalledPlugins(); }; + /* istanbul ignore next */ const filterChange = (ev: any): void => { setShowEnabled(ev.target.value === 'enabled'); };