Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Event Form Validations #370

Merged
merged 7 commits into from
Feb 10, 2023
Merged

Event Form Validations #370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e23d8e5
Add validation for even description
YolineB Feb 7, 2023
3ce7c80
Update test, WIP
YolineB Feb 8, 2023
5440171
Refactor for a cleaner change regarding test
YolineB Feb 8, 2023
e21b00a
Update required fields to Name, Start Date, URL only
YolineB Feb 9, 2023
c5dff79
Correct error message for date
YolineB Feb 9, 2023
46cd6a3
Fix test moment call
YolineB Feb 9, 2023
40e347e
Correct default values for dates
YolineB Feb 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions src/__tests__/elements/EventForm.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ describe('Event Form', () => {

it('submits valid event', async () => {
const mockHandleFormSubmit = jest.fn();
const dateString = moment().format('YYYY-MM-DD');
const fakeDate = moment();

render(
<MemoryRouter>
Expand All @@ -33,15 +33,15 @@ describe('Event Form', () => {

const eventNameInput = screen.getByLabelText(/Event Name/i);
const startDateInput = screen.getAllByLabelText(/Start Date/i)[0];
const eventUrlInput = screen.getAllByLabelText(/Event Registration URL/i)[0];
const eventUrlInput = screen.getAllByLabelText(/Event URL/i)[0];

expect(eventNameInput).toBeInTheDocument();
expect(startDateInput).toBeInTheDocument();
expect(eventUrlInput).toBeInTheDocument();

await act(() => {
fireEvent.change(eventNameInput, { target: { value: 'Example name' } });
fireEvent.change(startDateInput, { target: { value: dateString } });
fireEvent.change(startDateInput, { target: { value: fakeDate.toISOString() } });
fireEvent.change(eventUrlInput, { target: { value: 'http://www.example.com' } });
fireEvent.click(screen.getByText('Review'));
});
Expand All @@ -51,6 +51,10 @@ describe('Event Form', () => {
const formSubmitArgs = mockHandleFormSubmit.mock.calls[0][0];

expect(formSubmitArgs['eventName']).toBe('Example name');
expect(formSubmitArgs['startDate'].toISOString()).toMatch(dateString);
expect(
moment(formSubmitArgs['startDate']).format('YYYY-MM-DD')
).toMatch(
fakeDate.format('YYYY-MM-DD')
);
});
});
2 changes: 1 addition & 1 deletion src/components/elements/DatePickerField.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import 'react-datepicker/dist/react-datepicker.css';
const DatePickerField = ({ ...props }) => {
const [field] = useField(props);
const { setFieldValue, touched, errors } = useFormikContext();
const [dateValue, setDateValue] = useState(new Date());
const [dateValue, setDateValue] = useState("");
const fieldTouched = touched[field.name];
const fieldErrors = errors[field.name];
const showErrors = fieldTouched && fieldErrors;
Expand Down
14 changes: 6 additions & 8 deletions src/components/elements/EventForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,7 @@ import FormErrors from './FormErrors';
const EVENT_FORM_LABELS = {
eventName: 'Event name',
startDate: 'Start date',
organizationUrl: 'Organization URL',
eventUrl: 'Event Registration URL',
eventUrl: 'Event URL',
}

/**
Expand Down Expand Up @@ -120,7 +119,7 @@ function PostEventFormComponent(props) {
<Field
autoComplete="new-password"
id="eventUrl"
label="Event Registration URL*"
label="Event URL*"
name="eventUrl"
component={ValidatedInput}
className={formStyleClasses.input}
Expand Down Expand Up @@ -246,19 +245,19 @@ function PostEventFormComponent(props) {
<TimeSlotField
id="startTime"
name="startTime"
label="Start Time*"
label="Start Time"
/>
</div>
<div className="col-span-1">
<TimeSlotField
id="endTime"
name="endTime"
label="End Time*"
label="End Time"
/>
</div>
</section>
<section>
<label>Time Zone*</label>
<label>Time Zone</label>
<TimezoneSelect
className={`${formStyleClasses.reactSelect} timezone-select-container`}
classNamePrefix="timezone-select"
Expand Down Expand Up @@ -463,8 +462,7 @@ export function handleSubmit(values, { props }) {
*/
export const validationSchema = Yup.object().shape({
eventName: Yup.string().required('Field is required'),
startDate: Yup.string().required('Field is required'),
endDate: Yup.string().required('Field is required'),
startDate: Yup.string().required('Field is required').typeError('Field is required'),
eventUrl: Yup.string().required('Field is required').url('Must be a valid URL'),
});

Expand Down
4 changes: 2 additions & 2 deletions src/constants/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const eventProperties = {
'discountCode': '',
'discountUnit': '',
'discountValue': '',
'endDate': new Date(),
'endDate': '',
'endTime': '',
'eventName': '',
'eventType': '',
Expand All @@ -44,7 +44,7 @@ export const eventProperties = {
'socialMediaHashTag': '',
'socialMediaLinks': [],
'speakers': [],
'startDate': new Date(),
'startDate': '',
'startTime': '',
'state': '',
'submitted': false,
Expand Down