Fix event creation issue with white spaces. (#1025)

* fix event creation with white spaces * Add test for empty input values
PalisadoesFoundation · Nov 11, 2023 · 7b5775b · 7b5775b
1 parent 57baf75
commit 7b5775b
Show file tree

Hide file tree

Showing 2 changed files with 142 additions and 33 deletions.
diff --git 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<void> {
   });
 }
 
+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(
+      <MockedProvider addTypename={false} link={link}>
+        <BrowserRouter>
+          <Provider store={store}>
+            <I18nextProvider i18n={i18nForTest}>
+              <OrganizationEvents />
+            </I18nextProvider>
+          </Provider>
+        </BrowserRouter>
+      </MockedProvider>
+    );
+
+    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(
       <MockedProvider addTypename={false} link={link}>

diff --git a/src/screens/OrganizationEvents/OrganizationEvents.tsx b/src/screens/OrganizationEvents/OrganizationEvents.tsx
@@ -83,41 +83,56 @@ function organizationEvents(): JSX.Element {
     e: ChangeEvent<HTMLFormElement>
   ): Promise<void> => {
     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!');
     }
   };