From 30ebf2c09a073727872e3184f9d932f1189e3e97 Mon Sep 17 00:00:00 2001
From: CarolinaUniovi <uo275673@uniovi.es>
Date: Mon, 29 Apr 2024 23:43:01 +0200
Subject: [PATCH] Group creation modal tests added

---
 .../group/GroupCreationModal.test.js          | 41 ++++++++++++++++++-
 .../components/group/GroupCreationModal.tsx   | 13 +++++-
 2 files changed, 50 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/group/GroupCreationModal.test.js b/webapp/src/components/group/GroupCreationModal.test.js
index ad0a55d..5adff1d 100644
--- a/webapp/src/components/group/GroupCreationModal.test.js
+++ b/webapp/src/components/group/GroupCreationModal.test.js
@@ -1,7 +1,10 @@
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from "@testing-library/user-event";
 import { CreationModal } from './GroupCreationModal';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 
-jest.mock('axios');
+const mockAxios = new MockAdapter(axios);
 
 describe('CreationModal component', () => {
   test('renders the modal properly', async () => {
@@ -29,4 +32,38 @@ describe('CreationModal component', () => {
     
   });
 
+  it('should render input fields and handle changes correctly', async () => {
+    const nowHasGroupMock = jest.fn();
+    const setErrorMock = jest.fn();
+    const toggleCreateModalMock = jest.fn();
+
+     render(
+      <CreationModal
+        nowHasGroup={nowHasGroupMock}
+        setError={setErrorMock}
+        toggleCreateModal={toggleCreateModalMock}
+      />
+    );
+
+    const groupName = screen.getByTestId('group-name-input');
+    const description = screen.getByTestId('description-input');
+
+    // Simulate changing input values
+    await userEvent.type(groupName, "a")
+    await userEvent.type(description, "a")
+    fireEvent.click(screen.getByTestId('no-button'));
+    fireEvent.change(screen.getByTestId('max-members-input'), { target: { value: '5' } });
+
+    // Ensure input values are updated correctly
+    expect(screen.getByTestId('max-members-input')).toHaveValue(5);
+
+    mockAxios.onPost('http://localhost:8000/createGroup').reply(200, {group: "1"});
+
+
+    fireEvent.click(screen.getByTestId('create-button'));
+    await waitFor(() => {
+      expect(nowHasGroupMock).toHaveBeenCalled();
+    });
+  });
+
 });
\ No newline at end of file
diff --git a/webapp/src/components/group/GroupCreationModal.tsx b/webapp/src/components/group/GroupCreationModal.tsx
index e5956d2..bbfc7ed 100644
--- a/webapp/src/components/group/GroupCreationModal.tsx
+++ b/webapp/src/components/group/GroupCreationModal.tsx
@@ -27,7 +27,12 @@ export const CreationModal: FC<ActionProps> = ({ nowHasGroup, setError, toggleCr
                 nowHasGroup();
             });
         } catch (error: any) {
-            setError(error.response?.data.error);
+            if (error.response && error.response.data && error.response.data.error) {
+                setError(error.response.data.error);
+              } else {
+                // Handle other types of errors
+                console.error('An error occurred:', error);
+              }
         }
     };
 
@@ -81,7 +86,11 @@ export const CreationModal: FC<ActionProps> = ({ nowHasGroup, setError, toggleCr
                         <Grid item xs={6} ><p>{t('create_group_max_members')}</p></Grid>
                         <Grid item xs={1} ><input
                             data-testid="max-members-input"
-                            style={{ width: '37px' }} type="number" step={1} value={maxMembers} onChange={handleChange} max={200} min={2} /></Grid>
+                            style={{ width: '37px' }} 
+                            type="number" 
+                            step={1} 
+                            value={maxMembers} 
+                            onChange={handleChange} max={200} min={2} /></Grid>
                     </Grid>
                     <Grid container padding={2} sx={{ display: 'flex', width: '400px', justifyContent: 'space-evenly', alignItems: 'center' }}>
                         <Grid item xs={5} ><p>{t('create_group_description')}</p></Grid>