Skip to content

Commit

Permalink
Added tests for the changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@karthxk07
karthxk07 committed Jan 28, 2024
1 parent af1094a commit 26dcb24
Show file tree
Hide file tree
Showing 5 changed files with 153 additions and 72 deletions.
3 changes: 2 additions & 1 deletion src/components/CurrentHourIndicator/CurrentHourIndicator.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import CurrentHourIndicator from './CurrentHourIndicator';

describe('Testing Current Hour Indicator', () => {
test('Component Should be rendered properly', async () => {
render(<CurrentHourIndicator />);
const { getByTestId } = render(<CurrentHourIndicator />);
expect(getByTestId('container')).toBeInTheDocument();
});
});
2 changes: 1 addition & 1 deletion src/components/CurrentHourIndicator/CurrentHourIndicator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styles from './CurrentHourIndicator.module.css';

const CurrentHourIndicator = (): JSX.Element => {
return (
<div className={styles.container}>
<div className={styles.container} data-testid="container">
<div className={styles.round}></div>
<div className={styles.line}></div>
</div>
Expand Down
203 changes: 141 additions & 62 deletions src/components/EventCalendar/EventCalendar.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 = [
{
Expand Down Expand Up @@ -137,10 +144,10 @@ describe('Calendar', () => {
</I18nextProvider>
</MockedProvider>
);
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++) {
Expand All @@ -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(
<MockedProvider addTypename={false} link={link}>
<I18nextProvider i18n={i18nForTest}>
<Calendar eventData={eventData} />
</I18nextProvider>
</MockedProvider>
);
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 = [
{
Expand Down Expand Up @@ -205,11 +241,11 @@ describe('Calendar', () => {
</MockedProvider>
);
//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);
Expand Down Expand Up @@ -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(<Calendar eventData={eventData} />);
});
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(
<MockedProvider addTypename={false} link={link}>
<I18nextProvider i18n={i18nForTest}>
<Calendar eventData={multipleEventData} />
</I18nextProvider>
</MockedProvider>
);
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(
Expand Down
13 changes: 7 additions & 6 deletions src/components/EventCalendar/EventCalendar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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[];
Expand Down Expand Up @@ -313,14 +313,14 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
: allDayEventsList?.slice(0, 1)}
</div>
{(allDayEventsList?.length > 1 ||
(windowWidth <= 700 && allDayEventsList?.length > 0)) && (
(windowWidth <= 700 && allDayEventsList?.length > 1)) && (
<button
className={styles.btn__more}
onClick={() => {
toggleExpand(-100);
}}
>
{expanded === 0 ? 'View less' : 'View all'}
{expanded === -100 ? 'View less' : 'View all'}
</button>
)}
</div>
Expand Down Expand Up @@ -525,7 +525,7 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
<Button
className={styles.button}
onClick={viewType == ViewType.DAY ? handlePrevDate : handlePrevMonth}
data-testid="prevmonth"
data-testid="prevmonthordate"
>
<ChevronLeft />
</Button>
Expand All @@ -540,14 +540,15 @@ const Calendar: React.FC<InterfaceCalendarProps> = ({
<Button
className={styles.button}
onClick={viewType == ViewType.DAY ? handleNextDate : handleNextMonth}
data-testid="nextmonthordate"
>
<ChevronRight />
</Button>
<div>
<Button
className={styles.btn__today}
onClick={handleTodayButton}
data-testid="nextmonth"
data-testid="today"
>
Today
</Button>
Expand Down
4 changes: 2 additions & 2 deletions src/components/EventListCard/EventListCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 26dcb24

Please sign in to comment.