Skip to content

Commit

Permalink
Merge pull request #129 from Arquisoft/fixFinalTest
Browse files Browse the repository at this point in the history 
Fix final test
  • Loading branch information
@UO287741
UO287741 committed Apr 29, 2024
2 parents e049f4c + 8fc1602 commit d85e4df
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 34 deletions.
32 changes: 32 additions & 0 deletions webapp/src/components/group/GroupCreationModal.test.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { render, fireEvent } from '@testing-library/react';
import { CreationModal } from './GroupCreationModal';

jest.mock('axios');

describe('CreationModal component', () => {
test('renders the modal properly', async () => {
const { getByTestId } = render(<CreationModal nowHasGroup={() => {}} setError={() => {}} toggleCreateModal={() => {}} />);

// Verifica que el título del modal esté presente
expect(getByTestId('modal-title')).toBeInTheDocument();

// Verifica que los elementos de entrada estén presentes
expect(getByTestId('group-name-input')).toBeInTheDocument();
expect(getByTestId('yes-button')).toBeInTheDocument();
expect(getByTestId('no-button')).toBeInTheDocument();
expect(getByTestId('description-input')).toBeInTheDocument();
});

test('clicking on the create button calls the createGroup function', async () => {
const mockNowHasGroup = jest.fn();
const mockSetError = jest.fn();
const mockToggleCreateModal = jest.fn();

const { getByTestId } = render(<CreationModal nowHasGroup={mockNowHasGroup} setError={mockSetError} toggleCreateModal={mockToggleCreateModal} />);

// Simula hacer clic en el botón de creación
fireEvent.click(getByTestId('create-button'));

});

});
76 changes: 42 additions & 34 deletions webapp/src/components/group/GroupCreationModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
import { useState, ChangeEvent, FC } from 'react';
import { useState, ChangeEvent, FC } from 'react';
import axios from 'axios';
import { Button, TextField, Grid, RadioGroup, FormControlLabel, Radio } from "@mui/material";
import { useTranslation } from 'react-i18next';
import "./Group.scss"
import "./Group.scss";
import CloseModalIcon from '../util/CloseModalIcon';

const apiEndpoint = process.env.REACT_APP_API_ENDPOINT || 'http://localhost:8000';

type ActionProps = {
nowHasGroup:()=> void;
setError:(error:any) => void;
toggleCreateModal: () => void
}
nowHasGroup: () => void;
setError: (error: any) => void;
toggleCreateModal: () => void;
};

export const CreationModal: FC<ActionProps> = ({nowHasGroup, setError, toggleCreateModal}) => {
export const CreationModal: FC<ActionProps> = ({ nowHasGroup, setError, toggleCreateModal }) => {
const { t } = useTranslation();
const [isPublic, setPublic] = useState(true);
const [groupName, setGroupName] = useState('');
const [description, setDescription] = useState('');
const [maxMembers, setMaxMembers] = useState(2);
const creatorUUID = JSON.stringify(localStorage.getItem("userUUID")).replace("\"", "").replace("\"", "");
const creatorUUID = JSON.stringify(localStorage.getItem("userUUID")).replace("\"", "").replace("\"", "");

const createGroup = async () =>{
try{
await axios.post(`${apiEndpoint}/createGroup`, { groupName, creatorUUID, description, isPublic }).then( res => {
const createGroup = async () => {
try {
await axios.post(`${apiEndpoint}/createGroup`, { groupName, creatorUUID, description, isPublic }).then(res => {
nowHasGroup();
});
}catch (error:any) {
setError(error.response.data.error);
} catch (error: any) {
setError(error.response?.data.error);
}
}
};

const handleChange = ({ currentTarget: { value } }: ChangeEvent<HTMLInputElement>) => {
setMaxMembers(curr => {
Expand All @@ -48,7 +48,7 @@ export const CreationModal: FC<ActionProps> = ({nowHasGroup, setError, toggleCre
<div className="modal-overlay" data-testid="create-group-modal">
<div className="modal">
<div className="modal-header">
<h2>Create group</h2>
<h2 data-testid="modal-title">Create group</h2>
<button className="close-button" onClick={toggleCreateModal}>
<CloseModalIcon />
</button>
Expand All @@ -57,45 +57,53 @@ export const CreationModal: FC<ActionProps> = ({nowHasGroup, setError, toggleCre
<Grid container padding={2} sx={{ display: 'flex', width: '400px' , justifyContent: 'space-evenly', alignItems: 'center' }}>
<Grid item xs={5} ><p>{t('create_group_group_name')}</p></Grid>
<Grid item xs={6} ><TextField
margin="normal"
label={t('create_group_group_name_label')}
value={groupName}
onChange={(e) => setGroupName(e.target.value)}
data-testid="group-name-input"
margin="normal"
label={t('create_group_group_name_label')}
value={groupName}
onChange={(e) => setGroupName(e.target.value)}
/></Grid>
</Grid>
<Grid container padding={2} sx={{ display: 'flex', width: '400px', justifyContent: 'space-evenly', alignItems: 'center' }}>
<Grid item xs={5} ><p>{t('create_group_public_group')}</p></Grid>
<Grid item xs={5}><RadioGroup
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="yes"
name="radio-buttons-group"
sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}
onChange={(e) => setPublic(e.target.value === "yes")}
aria-labelledby="demo-radio-buttons-group-label"
defaultValue="yes"
name="radio-buttons-group"
sx={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}
onChange={(e) => setPublic(e.target.value === "yes")}
>
<FormControlLabel value="yes" control={<Radio />} label={t('create_group_yes')} />
<FormControlLabel value="no" control={<Radio />} label={t('create_group_no')} />
<FormControlLabel data-testid="yes-button" value="yes" control={<Radio />} label={t('create_group_yes')} />
<FormControlLabel data-testid="no-button" value="no" control={<Radio />} label={t('create_group_no')} />
</RadioGroup></Grid>
</Grid>
<Grid container padding={2} sx={{ display: 'flex', width: '400px', justifyContent: 'space-evenly', alignItems: 'center' }}>
<Grid item xs={6} ><p>{t('create_group_max_members')}</p></Grid>
<Grid item xs={1} ><input style={{ width: '37px' }} type="number" step={1} value={maxMembers} onChange={handleChange} max={200} min={2} /></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>
</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>
<Grid item xs={7} ><TextField
margin="normal"
multiline
label={t('create_group_description_label')}
value={description}
onChange={(e) => setDescription(e.target.value)}
data-testid="description-input"
margin="normal"
multiline
label={t('create_group_description_label')}
value={description}
onChange={(e) => setDescription(e.target.value)}
/></Grid>
</Grid>
<Grid container padding={2} >
<Grid item xs={6} ><Button variant="contained" onClick={createGroup} sx={{ width: '140px' }}>{t('create_group_button')}</Button></Grid>
<Grid item xs={6} ><Button
data-testid="create-button"
variant="contained"
onClick={createGroup}
sx={{ width: '140px' }}>{t('create_group_button')}</Button></Grid>
</Grid>
</Grid>
</div>
</div>
);

}
};

0 comments on commit d85e4df

Please sign in to comment.