From 26dcb245a433714d997873f6048ce2872f2cc75a Mon Sep 17 00:00:00 2001 From: karthxk07 Date: Sun, 28 Jan 2024 19:14:55 +0530 Subject: [PATCH] Added tests for the changes --- .../CurrentHourIndicator.test.tsx | 3 +- .../CurrentHourIndicator.tsx | 2 +- .../EventCalendar/EventCalendar.test.tsx | 203 ++++++++++++------ .../EventCalendar/EventCalendar.tsx | 13 +- .../EventListCard/EventListCard.tsx | 4 +- 5 files changed, 153 insertions(+), 72 deletions(-) diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx index 47bea7827c..ef03c02c31 100644 --- a/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx @@ -5,6 +5,7 @@ import CurrentHourIndicator from './CurrentHourIndicator'; describe('Testing Current Hour Indicator', () => { test('Component Should be rendered properly', async () => { - render(); + const { getByTestId } = render(); + expect(getByTestId('container')).toBeInTheDocument(); }); }); diff --git a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx index 2d8edfb36b..9e4a85454a 100644 --- a/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx +++ b/src/components/CurrentHourIndicator/CurrentHourIndicator.tsx @@ -3,7 +3,7 @@ import styles from './CurrentHourIndicator.module.css'; const CurrentHourIndicator = (): JSX.Element => { return ( -
+
diff --git a/src/components/EventCalendar/EventCalendar.test.tsx b/src/components/EventCalendar/EventCalendar.test.tsx index d13686d4eb..9e127a5d86 100644 --- a/src/components/EventCalendar/EventCalendar.test.tsx +++ b/src/components/EventCalendar/EventCalendar.test.tsx @@ -1,6 +1,12 @@ /* eslint-disable react/react-in-jsx-scope */ import Calendar from './EventCalendar'; -import { render, screen, fireEvent, act } from '@testing-library/react'; +import { + render, + screen, + fireEvent, + act, + RenderResult, +} from '@testing-library/react'; import { MockedProvider } from '@apollo/react-testing'; import { I18nextProvider } from 'react-i18next'; import { debug } from 'jest-preview'; @@ -13,6 +19,7 @@ import i18nForTest from 'utils/i18nForTest'; import { StaticMockLink } from 'utils/StaticMockLink'; import styles from './EventCalendar.module.css'; import { BrowserRouter } from 'react-router-dom'; +import userEvent from '@testing-library/user-event'; const eventData = [ { @@ -137,10 +144,10 @@ describe('Calendar', () => { ); - const prevButton = screen.getByTestId('prevmonth'); + const prevButton = screen.getByTestId('prevmonthordate'); fireEvent.click(prevButton); //testing next month button - const nextButton = screen.getByTestId('nextmonth'); + const nextButton = screen.getByTestId('nextmonthordate'); fireEvent.click(nextButton); //Testing year change for (let index = 0; index < 13; index++) { @@ -150,6 +157,35 @@ describe('Calendar', () => { fireEvent.click(prevButton); } }); + it('Should show prev and next date on clicking < & > buttons in the day view', async () => { + render( + + + + + + ); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + //testing previous date button + const prevButton = screen.getByTestId('prevmonthordate'); + fireEvent.click(prevButton); + //testing next date button + const nextButton = screen.getByTestId('nextmonthordate'); + fireEvent.click(nextButton); + debug(); + //Testing year change and month change + for (let index = 0; index < 366; index++) { + fireEvent.click(prevButton); + } + for (let index = 0; index < 732; index++) { + fireEvent.click(nextButton); + } + }); it('Should render eventlistcard of current day event', () => { const currentDayEventMock = [ { @@ -205,11 +241,11 @@ describe('Calendar', () => { ); //Changing the month - const prevButton = screen.getByTestId('prevmonth'); + const prevButton = screen.getByTestId('prevmonthordate'); fireEvent.click(prevButton); // Clicking today button - const todayButton = screen.getByTestId('nextmonth'); + const todayButton = screen.getByTestId('today'); fireEvent.click(todayButton); // const todayCell = screen.getByText(new Date().getDate().toString()); // expect(todayCell).toHaveClass(styles.day__today); @@ -274,63 +310,106 @@ describe('Calendar', () => { fireEvent.click(lessButton); expect(screen.queryByText('Event 3')).not.toBeInTheDocument(); }); - // it('Should open the day view calendar', async () => { - // const multipleEventData = [ - // { - // _id: '1', - // title: 'Event 1', - // description: 'This is event 1', - // startDate: new Date().toISOString().split('T')[0], - // endDate: new Date().toISOString().split('T')[0], - // location: 'Los Angeles', - // startTime: '14:00', - // endTime: '16:00', - // allDay: false, - // recurring: false, - // isPublic: true, - // isRegisterable: true, - // }, - // { - // _id: '2', - // title: 'Event 2', - // description: 'This is event 2', - // startDate: new Date().toISOString().split('T')[0], - // endDate: new Date().toISOString().split('T')[0], - // location: 'Los Angeles', - // startTime: '14:00', - // endTime: '16:00', - // allDay: false, - // recurring: false, - // isPublic: true, - // isRegisterable: true, - // }, - // { - // _id: '3', - // title: 'Event 3', - // description: 'This is event 3', - // startDate: new Date().toISOString().split('T')[0], - // endDate: new Date().toISOString().split('T')[0], - // location: 'Los Angeles', - // startTime: '14:00', - // endTime: '16:00', - // allDay: false, - // recurring: false, - // isPublic: true, - // isRegisterable: true, - // }, - // ]; - // act(() => { - // render(< />); - // }); - // const selector = screen.getByText('Month'); - // await act(() => { - // fireEvent.click(selector); - // }); - // act(() => { - // fireEvent.click(getByTestId('selectDay')); - // }); - // debug(); - // }); + it('Should open the day view calendar', async () => { + await act(async () => { + render(); + }); + expect(screen.getByText('Month')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + expect(screen.getByText('Day')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + expect(screen.getByText('12 AM')).toBeInTheDocument(); + // debug(); + }); + it('Should Expand and contract when clicked on view all and view less in day view', async () => { + const multipleEventData = [ + { + _id: '1', + title: 'Event 1', + description: 'This is event 1', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: undefined, + endTime: undefined, + allDay: true, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '2', + title: 'Event 2', + description: 'This is event 2', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: undefined, + endTime: undefined, + allDay: true, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '3', + title: 'Event 3', + description: 'This is event 3', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '14:00', + endTime: '16:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + { + _id: '4', + title: 'Event 4', + description: 'This is event 4', + startDate: new Date().toISOString().split('T')[0], + endDate: new Date().toISOString().split('T')[0], + location: 'Los Angeles', + startTime: '14:00', + endTime: '16:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }, + ]; + render( + + + + + + ); + expect(screen.getByText('Month')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Month')); + }); + expect(screen.getByText('Day')).toBeInTheDocument(); + await act(async () => { + fireEvent.click(screen.getByText('Day')); + }); + const moreButtons = screen.getAllByText('View all'); + moreButtons.forEach((moreButton) => { + fireEvent.click(moreButton); + expect(screen.getByText('View less')).toBeInTheDocument(); + const lessButton = screen.getByText('View less'); + fireEvent.click(lessButton); + expect(screen.queryByText('View less')).not.toBeInTheDocument(); + }); + + // debug(); + }); test('Handles window resize', () => { render( diff --git a/src/components/EventCalendar/EventCalendar.tsx b/src/components/EventCalendar/EventCalendar.tsx index a0615963d7..2a2696b7a0 100644 --- a/src/components/EventCalendar/EventCalendar.tsx +++ b/src/components/EventCalendar/EventCalendar.tsx @@ -14,8 +14,8 @@ interface InterfaceEvent { startDate: string; endDate: string; location: string; - startTime: string; - endTime: string; + startTime: string | undefined; + endTime: string | undefined; allDay: boolean; recurring: boolean; registrants?: InterfaceIEventAttendees[]; @@ -313,14 +313,14 @@ const Calendar: React.FC = ({ : allDayEventsList?.slice(0, 1)}
{(allDayEventsList?.length > 1 || - (windowWidth <= 700 && allDayEventsList?.length > 0)) && ( + (windowWidth <= 700 && allDayEventsList?.length > 1)) && ( )} @@ -525,7 +525,7 @@ const Calendar: React.FC = ({ @@ -540,6 +540,7 @@ const Calendar: React.FC = ({ @@ -547,7 +548,7 @@ const Calendar: React.FC = ({ diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx index 9e663b3b3d..9ed25715a7 100644 --- a/src/components/EventListCard/EventListCard.tsx +++ b/src/components/EventListCard/EventListCard.tsx @@ -22,8 +22,8 @@ interface InterfaceEventListCardProps { eventDescription: string; regDate: string; regEndDate: string; - startTime: string; - endTime: string; + startTime: string | undefined; + endTime: string | undefined; allDay: boolean; recurring: boolean; isPublic: boolean;