diff --git a/src/components/CheckIn/TableRow.test.tsx b/src/components/CheckIn/TableRow.test.tsx index 789eb4d5f6..b8ab48f397 100644 --- a/src/components/CheckIn/TableRow.test.tsx +++ b/src/components/CheckIn/TableRow.test.tsx @@ -95,9 +95,9 @@ describe('Testing Table Row for CheckIn Table', () => { await waitFor(() => expect(queryByText('Generating pdf...')).toBeInTheDocument() ); - await waitFor(() => - expect(queryByText('PDF generated successfully!')).toBeInTheDocument() - ); + await waitFor(() => { + expect(queryByText('PDF generated successfully!')).toBeInTheDocument(); + }); }); test('Upon failing of check in mutation, the appropiate error message should be shown', async () => { diff --git a/src/components/CheckIn/TableRow.tsx b/src/components/CheckIn/TableRow.tsx index 0c69a26303..90e22deff0 100644 --- a/src/components/CheckIn/TableRow.tsx +++ b/src/components/CheckIn/TableRow.tsx @@ -37,15 +37,17 @@ export const TableRow = ({ }); }; - const generateTag = (): void => { - toast.warning('Generating pdf...'); - const inputs = [{ name: data.name }]; - - generate({ template: tagTemplate, inputs }).then((pdf) => { - const blob = new Blob([pdf.buffer], { type: 'application/pdf' }); - window.open(URL.createObjectURL(blob)); - toast.success('PDF generated successfully!'); + const notify = (): Promise => + toast.promise(generateTag, { + pending: 'Generating pdf...', + success: 'PDF generated successfully!', + error: 'Error generating pdf!', }); + const generateTag = async (): Promise => { + const inputs = [{ name: data.name }]; + const pdf = await generate({ template: tagTemplate, inputs }); + const blob = new Blob([pdf.buffer], { type: 'application/pdf' }); + window.open(URL.createObjectURL(blob)); }; return ( @@ -55,7 +57,7 @@ export const TableRow = ({ - diff --git a/src/components/EventListCard/EventListCard.module.css b/src/components/EventListCard/EventListCard.module.css index c2a8e9eb0e..1648c9d16a 100644 --- a/src/components/EventListCard/EventListCard.module.css +++ b/src/components/EventListCard/EventListCard.module.css @@ -17,9 +17,24 @@ .cards a:hover { color: black; } +.cards { + position: relative; + overflow: hidden; + transition: all 0.3s; +} .dispflex { display: flex; - justify-content: space-between; + height: 50px; + transition: transform 0.3s ease; + cursor: pointer; +} +.cards:hover { + transform: scale(2.5); + z-index: 5; +} +.cards:hover h2 { + font-size: 0.4vmax; + margin-bottom: 0; } .iconContainer { display: flex; diff --git a/src/components/EventListCard/EventListCard.test.tsx b/src/components/EventListCard/EventListCard.test.tsx index 17edaf5050..820e563957 100644 --- a/src/components/EventListCard/EventListCard.test.tsx +++ b/src/components/EventListCard/EventListCard.test.tsx @@ -301,4 +301,44 @@ describe('Testing Event List Card', () => { fireEvent.click(deleteBtn); }); }); + + test('Should render truncated event details', async () => { + const longEventName = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long event name that exceeds 150 characters and needs to be truncated'; + const longDescription = + 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. A very long description that exceeds 150 characters and needs to be truncated'; + const longEventNameLength = longEventName.length; + const longDescriptionLength = longDescription.length; + const truncatedEventName = longEventName.substring(0, 150) + '...'; + const truncatedDescriptionName = longDescription.substring(0, 150) + '...'; + render( + + + + + + ); + + await wait(); + + expect(longEventNameLength).toBeGreaterThan(100); + expect(longDescriptionLength).toBeGreaterThan(256); + expect(truncatedEventName).toContain('...'); + expect(truncatedDescriptionName).toContain('...'); + await wait(); + }); }); diff --git a/src/components/EventListCard/EventListCard.tsx b/src/components/EventListCard/EventListCard.tsx index f41c0e9c91..0ec3a62d6f 100644 --- a/src/components/EventListCard/EventListCard.tsx +++ b/src/components/EventListCard/EventListCard.tsx @@ -150,7 +150,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element { >

- {props.eventName ? <>{props.eventName} : <>Dogs Care}{' '} + {props.eventName ? ( + <> + {props.eventName.length > 150 ? ( + <>{props.eventName.substring(0, 150)}... + ) : ( + <>{props.eventName} + )} + + ) : ( + <>Dogs Care + )}

@@ -172,7 +182,17 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {

{t('eventTitle')}:{' '} - {props.eventName ? <>{props.eventName} : <>Dogs Care}{' '} + {props.eventName ? ( + <> + {props.eventName.length > 100 ? ( + <>{props.eventName.substring(0, 100)}... + ) : ( + <>{props.eventName} + )} + + ) : ( + <>Dogs Care + )}

@@ -187,7 +207,11 @@ function eventListCard(props: InterfaceEventListCardProps): JSX.Element {

{t('description')}:{' '} - {props.eventDescription} + + {props.eventDescription && props.eventDescription.length > 256 + ? props.eventDescription.substring(0, 256) + '...' + : props.eventDescription} +

{t('on')}: {props.regDate} diff --git a/src/components/EventProjectModals/AddEventProjectModal.tsx b/src/components/EventProjectModals/AddEventProjectModal.tsx index 3da5043c51..10273b5e4f 100644 --- a/src/components/EventProjectModals/AddEventProjectModal.tsx +++ b/src/components/EventProjectModals/AddEventProjectModal.tsx @@ -22,10 +22,17 @@ export const AddEventProjectModal = ({ const [addMutation] = useMutation(ADD_EVENT_PROJECT_MUTATION); - const handleSubmit = (e: React.FormEvent): void => { + const notify = (e: React.FormEvent): Promise => { e.preventDefault(); - let toSubmit = true; + return toast.promise(handleSubmit, { + pending: 'Adding the project...', + success: 'Added the project successfully!', + error: 'There was an error in adding the project!', + }); + }; + const handleSubmit = async (): Promise => { + let toSubmit = true; if (title.trim().length == 0) { toast.error('Title cannot be empty!'); toSubmit = false; @@ -34,28 +41,18 @@ export const AddEventProjectModal = ({ toast.error('Description cannot be empty!'); toSubmit = false; } - - if (toSubmit) { - toast.warn('Adding the project...'); - addMutation({ - variables: { - title, - description, - eventId, - }, - }) - .then(() => { - toast.success('Added the project successfully!'); - refetchData(); - setTitle(''); - setDescription(''); - handleClose(); - }) - .catch((err) => { - toast.error('There was an error in adding the project!'); - toast.error(err.message); - }); - } + if (!toSubmit) return Promise.reject(); + await addMutation({ + variables: { + title, + description, + eventId, + }, + }); + refetchData(); + setTitle(''); + setDescription(''); + handleClose(); }; return ( @@ -64,7 +61,7 @@ export const AddEventProjectModal = ({ Add an Event Project -

+ Title diff --git a/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx b/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx index 9b75852e19..6a29735f2e 100644 --- a/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx +++ b/src/components/EventProjectModals/DeleteEventProjectModal.test.tsx @@ -104,6 +104,5 @@ describe('Testing Delete Event Project Modal', () => { queryByText('There was an error in deleting the project details!') ).toBeInTheDocument() ); - await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument()); }); }); diff --git a/src/components/EventProjectModals/DeleteEventProjectModal.tsx b/src/components/EventProjectModals/DeleteEventProjectModal.tsx index 9362651215..042e2fcd15 100644 --- a/src/components/EventProjectModals/DeleteEventProjectModal.tsx +++ b/src/components/EventProjectModals/DeleteEventProjectModal.tsx @@ -18,22 +18,22 @@ type ModalPropType = { export const DeleteEventProjectModal = (props: ModalPropType): JSX.Element => { const [deleteMutation] = useMutation(DELETE_EVENT_PROJECT_MUTATION); - const deleteProject = (): void => { - toast.warn('Deleting the project...'); - deleteMutation({ + const notify = (): Promise => { + return toast.promise(deleteProject, { + pending: 'Deleting the project...', + success: 'Deleted the project successfully!', + error: 'There was an error in deleting the project details!', + }); + }; + const deleteProject = async (): Promise => { + await deleteMutation({ variables: { id: props.project._id, }, - }) - .then(() => { - toast.success('Deleted the project successfully!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in deleting the project details!'); - toast.error(err.message); - }); + }); + + props.refetchData(); + props.handleClose(); }; return ( @@ -60,7 +60,7 @@ export const DeleteEventProjectModal = (props: ModalPropType): JSX.Element => { > Cancel - diff --git a/src/components/EventProjectModals/UpdateEventProjectModal.tsx b/src/components/EventProjectModals/UpdateEventProjectModal.tsx index 362d78645a..08ac230c69 100644 --- a/src/components/EventProjectModals/UpdateEventProjectModal.tsx +++ b/src/components/EventProjectModals/UpdateEventProjectModal.tsx @@ -25,9 +25,15 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => { }, [props.project]); const [updateMutation] = useMutation(UPDATE_EVENT_PROJECT_MUTATION); - - const handleSubmit = (e: React.FormEvent): void => { + const notify = (e: React.FormEvent): Promise => { e.preventDefault(); + return toast.promise(handleSubmit, { + pending: 'Updating the project...', + success: 'Updated the project successfully!', + error: 'There was an error in updating the project details!', + }); + }; + const handleSubmit = async (): Promise => { let toSubmit = true; if (title.trim().length == 0) { @@ -38,26 +44,16 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => { toast.error('Description cannot be empty!'); toSubmit = false; } - - if (toSubmit) { - toast.warn('Updating the project...'); - updateMutation({ - variables: { - id: props.project._id, - title, - description, - }, - }) - .then(() => { - toast.success('Updated the project successfully!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in updating the project details!'); - toast.error(err.message); - }); - } + if (!toSubmit) return Promise.reject(); + await updateMutation({ + variables: { + id: props.project._id, + title, + description, + }, + }); + props.refetchData(); + props.handleClose(); }; return ( @@ -71,7 +67,7 @@ export const UpdateEventProjectModal = (props: ModalPropType): JSX.Element => { Update Event Project - + Title diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx index 1c5a1e13e3..0ee4c34e4b 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.test.tsx @@ -18,6 +18,20 @@ const props: InterfaceLeftDrawerProps = { _id: 'testEvent', title: 'Test Event', description: 'Test Description', + organization: { + _id: 'TestOrganization', + }, + }, + hideDrawer: false, + setHideDrawer: jest.fn(), + setShowAddEventProjectModal: jest.fn(), +}; +const props2: InterfaceLeftDrawerProps = { + event: { + _id: 'testEvent', + title: 'This is a very long event title that exceeds 20 characters', + description: + 'This is a very long event description that exceeds 30 characters. It contains more details about the event.', organization: { _id: 'Test Organization', }, @@ -191,4 +205,41 @@ describe('Testing Left Drawer component for the Event Dashboard', () => { expect(localStorage.clear).toHaveBeenCalled(); expect(global.window.location.pathname).toBe('/'); }); + test('Testing substring functionality in event title and description', async () => { + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + + + + ); + const eventTitle = props2.event.title; + expect(eventTitle.length).toBeGreaterThan(20); + const eventDescription = props2.event.description; + expect(eventDescription.length).toBeGreaterThan(30); + const truncatedEventTitle = eventTitle.substring(0, 20) + '...'; + const truncatedEventDescription = eventDescription.substring(0, 30) + '...'; + expect(truncatedEventTitle).toContain('...'); + expect(truncatedEventDescription).toContain('...'); + }); + test('Testing all events button', async () => { + localStorage.setItem('UserType', 'SUPERADMIN'); + render( + + + + + + + + ); + + userEvent.click(screen.getByTestId('allEventsBtn')); + expect(global.window.location.pathname).toBe( + `/orgevents/id=${props.event.organization._id}` + ); + }); }); diff --git a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx index 9ff38b6e45..a691d78520 100644 --- a/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx +++ b/src/components/LeftDrawerEvent/LeftDrawerEvent.tsx @@ -88,8 +88,16 @@ const leftDrawerEvent = ({ />
- {event.title} - {event.description} + + {event.title && event.title.length > 20 + ? event.title.substring(0, 20) + '...' + : event.title} + + + {event.description && event.description.length > 30 + ? event.description.substring(0, 30) + '...' + : event.description} +
@@ -126,6 +134,20 @@ const leftDrawerEvent = ({ eventId={event._id} key={`${event?._id || 'loading'}Stats`} /> + {/* Profile Section & Logout Btn */} diff --git a/src/components/TaskModals/AddTaskModal.tsx b/src/components/TaskModals/AddTaskModal.tsx index 22bd0f4941..0134077afe 100644 --- a/src/components/TaskModals/AddTaskModal.tsx +++ b/src/components/TaskModals/AddTaskModal.tsx @@ -27,9 +27,15 @@ export const AddTaskModal = ({ const [deadline, setDeadline] = useState(today); const [addMutation] = useMutation(ADD_EVENT_PROJECT_TASK_MUTATION); - - const handleSubmit = (e: React.FormEvent): void => { + const notify = async (e: React.FormEvent): Promise => { e.preventDefault(); + toast.promise(handleSubmit, { + pending: 'Adding the task...', + success: 'Added the task successfully!', + error: 'There was an error in adding the task!', + }); + }; + const handleSubmit = async (): Promise => { let toSubmit = true; if (title.trim().length == 0) { @@ -40,29 +46,19 @@ export const AddTaskModal = ({ toast.error('Description cannot be empty!'); toSubmit = false; } - - if (toSubmit) { - toast.warn('Adding the task...'); - addMutation({ - variables: { - title, - description, - projectId, - deadline, - }, - }) - .then(() => { - toast.success('Added the task successfully!'); - refetchData(); - setTitle(''); - setDescription(''); - handleClose(); - }) - .catch((err) => { - toast.error('There was an error in adding the task!'); - toast.error(err.message); - }); - } + if (!toSubmit) return Promise.reject(); + await addMutation({ + variables: { + title, + description, + projectId, + deadline, + }, + }); + refetchData(); + setTitle(''); + setDescription(''); + handleClose(); }; return ( @@ -71,7 +67,7 @@ export const AddTaskModal = ({ Add an Event Task - + Title diff --git a/src/components/TaskModals/DeleteTaskModal.test.tsx b/src/components/TaskModals/DeleteTaskModal.test.tsx index e9ffea1be0..4eb40e53a8 100644 --- a/src/components/TaskModals/DeleteTaskModal.test.tsx +++ b/src/components/TaskModals/DeleteTaskModal.test.tsx @@ -96,6 +96,5 @@ describe('Testing Delete Event Project Modal', () => { queryByText('There was an error in deleting the task!') ).toBeInTheDocument() ); - await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument()); }); }); diff --git a/src/components/TaskModals/DeleteTaskModal.tsx b/src/components/TaskModals/DeleteTaskModal.tsx index f4b6378c1b..73baff5775 100644 --- a/src/components/TaskModals/DeleteTaskModal.tsx +++ b/src/components/TaskModals/DeleteTaskModal.tsx @@ -13,23 +13,21 @@ type ModalPropType = { export const DeleteTaskModal = (props: ModalPropType): JSX.Element => { const [deleteMutation] = useMutation(DELETE_EVENT_TASK_MUTATION); - - const deleteProject = (): void => { - toast.warn('Deleting the task...'); - deleteMutation({ + const notify = (): Promise => { + return toast.promise(deleteProject, { + pending: 'Deleting the task...', + success: 'Deleted the task successfully!', + error: 'There was an error in deleting the task!', + }); + }; + const deleteProject = async (): Promise => { + await deleteMutation({ variables: { id: props.taskId, }, - }) - .then(() => { - toast.success('Deleted the task successfully!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in deleting the task!'); - toast.error(err.message); - }); + }); + props.refetchData(); + props.handleClose(); }; return ( @@ -56,7 +54,7 @@ export const DeleteTaskModal = (props: ModalPropType): JSX.Element => { > Cancel - diff --git a/src/components/TaskModals/ManageVolunteerModal.test.tsx b/src/components/TaskModals/ManageVolunteerModal.test.tsx index 68ac0888d7..e284984969 100644 --- a/src/components/TaskModals/ManageVolunteerModal.test.tsx +++ b/src/components/TaskModals/ManageVolunteerModal.test.tsx @@ -131,7 +131,5 @@ describe('Testing Manage Volunteers Modal', () => { queryByText('There was an error in updating the volunteers!') ).toBeInTheDocument() ); - - await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument()); }); }); diff --git a/src/components/TaskModals/ManageVolunteerModal.tsx b/src/components/TaskModals/ManageVolunteerModal.tsx index 31f9593663..162fda4a02 100644 --- a/src/components/TaskModals/ManageVolunteerModal.tsx +++ b/src/components/TaskModals/ManageVolunteerModal.tsx @@ -32,24 +32,22 @@ export const ManageVolunteerModal = (props: ModalPropType): JSX.Element => { useEffect(() => setVolunteers(props.volunteers), [props.volunteers]); const [setMutation] = useMutation(SET_TASK_VOLUNTEERS_MUTATION); - - const handleSubmit = (): void => { - toast.warn('Updating the volunteers...'); - setMutation({ + const notify = (): Promise => { + return toast.promise(handleSubmit, { + pending: 'Updating the volunteers...', + success: 'Successfully updated the volunteers!', + error: 'There was an error in updating the volunteers!', + }); + }; + const handleSubmit = async (): Promise => { + await setMutation({ variables: { id: props.taskId, volunteers: volunteers.map((volunteer) => volunteer._id), }, - }) - .then(() => { - toast.success('Successfully updated the volunteers!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in updating the volunteers!'); - toast.error(err.message); - }); + }); + props.refetchData(); + props.handleClose(); }; return ( @@ -94,7 +92,7 @@ export const ManageVolunteerModal = (props: ModalPropType): JSX.Element => {
- diff --git a/src/components/TaskModals/UpdateTaskModal.test.tsx b/src/components/TaskModals/UpdateTaskModal.test.tsx index 2184c421a7..9541d6d26b 100644 --- a/src/components/TaskModals/UpdateTaskModal.test.tsx +++ b/src/components/TaskModals/UpdateTaskModal.test.tsx @@ -229,8 +229,6 @@ describe('Testing Update Event Task Modal', () => { queryByText('There was an error in updating the task!') ).toBeInTheDocument() ); - - await waitFor(() => expect(queryByText('Oops')).toBeInTheDocument()); }); test('Manage volunteer modal and delete task modal should open and close properly', async () => { diff --git a/src/components/TaskModals/UpdateTaskModal.tsx b/src/components/TaskModals/UpdateTaskModal.tsx index 76d57da797..d79dd19a36 100644 --- a/src/components/TaskModals/UpdateTaskModal.tsx +++ b/src/components/TaskModals/UpdateTaskModal.tsx @@ -57,9 +57,15 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => { }, [props.task]); const [updateMutation] = useMutation(UPDATE_EVENT_PROJECT_TASK_MUTATION); - - const handleSubmit = (e: React.FormEvent): void => { + const notify = (e: React.FormEvent): Promise => { e.preventDefault(); + return toast.promise(handleSubmit, { + pending: 'Updating the task...', + success: 'Updated the task successfully!', + error: 'There was an error in updating the task!', + }); + }; + const handleSubmit = async (): Promise => { let toSubmit = true; if (title.trim().length == 0) { @@ -70,28 +76,19 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => { toast.error('Description cannot be empty!'); toSubmit = false; } + if (!toSubmit) return Promise.reject(); - if (toSubmit) { - toast.warn('Updating the task...'); - updateMutation({ - variables: { - taskId: props.task._id, - title, - description, - deadline, - completed, - }, - }) - .then(() => { - toast.success('Updated the task successfully!'); - props.refetchData(); - props.handleClose(); - }) - .catch((err) => { - toast.error('There was an error in updating the task!'); - toast.error(err.message); - }); - } + await updateMutation({ + variables: { + taskId: props.task._id, + title, + description, + deadline, + completed, + }, + }); + props.refetchData(); + props.handleClose(); }; return ( @@ -107,7 +104,7 @@ export const UpdateTaskModal = (props: ModalPropType): JSX.Element => { Update the Event Task - + Title diff --git a/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx new file mode 100644 index 0000000000..72ee402369 --- /dev/null +++ b/src/components/UserPortal/SecuredRouteForUser/SecuredRouteForUser.test.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { MemoryRouter, Route } from 'react-router-dom'; +import { render, screen, waitFor } from '@testing-library/react'; +import SecuredRouteForUser from './SecuredRouteForUser'; + +describe('SecuredRouteForUser', () => { + test('renders the route when the user is logged in', () => { + // Set the 'IsLoggedIn' value to 'TRUE' in localStorage to simulate a logged-in user + localStorage.setItem('IsLoggedIn', 'TRUE'); + + render( + + ( + ( +
+ Organizations Component +
+ )} + /> + )} + /> +
+ ); + + expect(screen.getByTestId('organizations-content')).toBeInTheDocument(); + }); + + test('redirects to /user when the user is not logged in', async () => { + // Set the user as not logged in in local storage + localStorage.setItem('IsLoggedIn', 'FALSE'); + + render( + + ( + +
Secured Content
+
+ )} + /> +
+ ); + + await waitFor(() => { + expect(window.location.pathname).toBe('/'); + }); + }); +}); diff --git a/src/components/UsersTableItem/UserTableItemMocks.ts b/src/components/UsersTableItem/UserTableItemMocks.ts index 6fd90d2be4..5f81c8cfe9 100644 --- a/src/components/UsersTableItem/UserTableItemMocks.ts +++ b/src/components/UsersTableItem/UserTableItemMocks.ts @@ -33,7 +33,7 @@ export const MOCKS = [ }, result: { data: { - removeUserFromOrganization: { + removeMember: { _id: '123', }, }, diff --git a/src/screens/EventDashboard/EventDashboard.module.css b/src/screens/EventDashboard/EventDashboard.module.css index 5a484443d8..10ac2ee4ed 100644 --- a/src/screens/EventDashboard/EventDashboard.module.css +++ b/src/screens/EventDashboard/EventDashboard.module.css @@ -41,7 +41,7 @@ font-size: 20px; margin-bottom: 30px; padding-bottom: 5px; - width: 26%; + width: 100%; } .tagdetailsGreen > button { background-color: #31bb6b; diff --git a/src/screens/EventDashboard/EventDashboard.tsx b/src/screens/EventDashboard/EventDashboard.tsx index 810e8335c6..80f1374b71 100644 --- a/src/screens/EventDashboard/EventDashboard.tsx +++ b/src/screens/EventDashboard/EventDashboard.tsx @@ -80,7 +80,7 @@ const EventDashboard = (): JSX.Element => { setShowAddEventProjectModal={setShowAddEventProjectModal} > - +
{/* Side Bar - Static Information about the Event */} @@ -110,7 +110,7 @@ const EventDashboard = (): JSX.Element => {
- + {/* Main Screen Container */}
diff --git a/src/screens/OrganizationEvents/OrganizationEvents.test.tsx b/src/screens/OrganizationEvents/OrganizationEvents.test.tsx index 4c08db90d5..9f79991274 100644 --- a/src/screens/OrganizationEvents/OrganizationEvents.test.tsx +++ b/src/screens/OrganizationEvents/OrganizationEvents.test.tsx @@ -13,6 +13,7 @@ import { CREATE_EVENT_MUTATION } from 'GraphQl/Mutations/mutations'; import i18nForTest from 'utils/i18nForTest'; import userEvent from '@testing-library/user-event'; import { StaticMockLink } from 'utils/StaticMockLink'; +import { toast } from 'react-toastify'; const MOCKS = [ { @@ -112,6 +113,14 @@ async function wait(ms = 100): Promise { }); } +jest.mock('react-toastify', () => ({ + toast: { + success: jest.fn(), + warning: jest.fn(), + error: jest.fn(), + }, +})); + describe('Organisation Events Page', () => { const formData = { title: 'Dummy Org', @@ -297,6 +306,91 @@ describe('Organisation Events Page', () => { userEvent.click(screen.getByTestId('createEventBtn')); }, 15000); + test('Testing Create event with invalid inputs', async () => { + const formData = { + title: ' ', + description: ' ', + location: ' ', + startDate: '03/28/2022', + endDate: '04/15/2023', + startTime: '02:00', + endTime: '06:00', + allDay: false, + recurring: false, + isPublic: true, + isRegisterable: true, + }; + render( + + + + + + + + + + ); + + await wait(); + + userEvent.click(screen.getByTestId('createEventModalBtn')); + + userEvent.type(screen.getByPlaceholderText(/Enter Title/i), formData.title); + userEvent.type( + screen.getByPlaceholderText(/Enter Description/i), + formData.description + ); + userEvent.type( + screen.getByPlaceholderText(/Enter Location/i), + formData.location + ); + userEvent.type( + screen.getByPlaceholderText(/Enter Location/i), + formData.location + ); + + const endDateDatePicker = screen.getByPlaceholderText(/End Date/i); + const startDateDatePicker = screen.getByPlaceholderText(/Start Date/i); + + fireEvent.click(endDateDatePicker); + fireEvent.click(startDateDatePicker); + + await act(async () => { + fireEvent.change(endDateDatePicker, { + target: { + value: formData.endDate, + }, + }); + fireEvent.change(startDateDatePicker, { + target: { + value: formData.startDate, + }, + }); + }); + userEvent.click(screen.getByTestId('alldayCheck')); + userEvent.click(screen.getByTestId('recurringCheck')); + userEvent.click(screen.getByTestId('ispublicCheck')); + userEvent.click(screen.getByTestId('registrableCheck')); + + await wait(); + + expect(screen.getByPlaceholderText(/Enter Title/i)).toHaveValue(' '); + expect(screen.getByPlaceholderText(/Enter Description/i)).toHaveValue(' '); + + expect(endDateDatePicker).toHaveValue(formData.endDate); + expect(startDateDatePicker).toHaveValue(formData.startDate); + expect(screen.getByTestId('alldayCheck')).not.toBeChecked(); + expect(screen.getByTestId('recurringCheck')).toBeChecked(); + expect(screen.getByTestId('ispublicCheck')).not.toBeChecked(); + expect(screen.getByTestId('registrableCheck')).toBeChecked(); + + userEvent.click(screen.getByTestId('createEventBtn')); + expect(toast.warning).toBeCalledWith('Title can not be blank!'); + expect(toast.warning).toBeCalledWith('Description can not be blank!'); + expect(toast.warning).toBeCalledWith('Location can not be blank!'); + }, 15000); + test('Testing if the event is not for all day', async () => { render( diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx index fe25bcdb6d..36852389eb 100644 --- a/src/screens/OrganizationEvents/OrganizationEvents.tsx +++ b/src/screens/OrganizationEvents/OrganizationEvents.tsx @@ -83,41 +83,56 @@ function organizationEvents(): JSX.Element { e: ChangeEvent ): Promise => { e.preventDefault(); - try { - const { data: createEventData } = await create({ - variables: { - title: formState.title, - description: formState.eventdescrip, - isPublic: publicchecked, - recurring: recurringchecked, - isRegisterable: registrablechecked, - organizationId: currentUrl, - startDate: dayjs(startDate).format('YYYY-MM-DD'), - endDate: dayjs(endDate).format('YYYY-MM-DD'), - allDay: alldaychecked, - location: formState.location, - startTime: !alldaychecked ? formState.startTime + 'Z' : null, - endTime: !alldaychecked ? formState.endTime + 'Z' : null, - }, - }); - - /* istanbul ignore next */ - if (createEventData) { - toast.success(t('eventCreated')); - refetch(); - hideInviteModal(); - setFormState({ - title: '', - eventdescrip: '', - date: '', - location: '', - startTime: '08:00:00', - endTime: '18:00:00', + if ( + formState.title.trim().length > 0 && + formState.eventdescrip.trim().length > 0 && + formState.location.trim().length > 0 + ) { + try { + const { data: createEventData } = await create({ + variables: { + title: formState.title, + description: formState.eventdescrip, + isPublic: publicchecked, + recurring: recurringchecked, + isRegisterable: registrablechecked, + organizationId: currentUrl, + startDate: dayjs(startDate).format('YYYY-MM-DD'), + endDate: dayjs(endDate).format('YYYY-MM-DD'), + allDay: alldaychecked, + location: formState.location, + startTime: !alldaychecked ? formState.startTime + 'Z' : null, + endTime: !alldaychecked ? formState.endTime + 'Z' : null, + }, }); + + /* istanbul ignore next */ + if (createEventData) { + toast.success(t('eventCreated')); + refetch(); + hideInviteModal(); + setFormState({ + title: '', + eventdescrip: '', + date: '', + location: '', + startTime: '08:00:00', + endTime: '18:00:00', + }); + } + } catch (error: any) { + /* istanbul ignore next */ + errorHandler(t, error); } - } catch (error: any) { - /* istanbul ignore next */ - errorHandler(t, error); + } + if (formState.title.trim().length === 0) { + toast.warning('Title can not be blank!'); + } + if (formState.eventdescrip.trim().length === 0) { + toast.warning('Description can not be blank!'); + } + if (formState.location.trim().length === 0) { + toast.warning('Location can not be blank!'); } };