diff --git a/site/gatsby-site/playwright/e2e-full/submit.spec.ts b/site/gatsby-site/playwright/e2e-full/submit.spec.ts index fbbc9140a5..1f2c388477 100644 --- a/site/gatsby-site/playwright/e2e-full/submit.spec.ts +++ b/site/gatsby-site/playwright/e2e-full/submit.spec.ts @@ -1056,6 +1056,40 @@ test.describe('The Submit form', () => { await expect(page.locator('text=Please review. Some data is missing.')).toBeVisible(); }); + test('Should display an error messages for each missing field on step 1', async ({ page }) => { + + await page.goto(url); + + const valuesStep1 = { + url: '', + title: '', + authors: '', + date_published: '', + incident_date: '', + }; + + for (const key in valuesStep1) { + await page.locator(`input[name="${key}"]`).fill(valuesStep1[key]); + } + + await setEditorText( + page, + '' + ); + + await expect(page.locator('.form-has-errors')).toBeVisible(); + + await expect(page.locator('text=*URL required')).toBeVisible(); + + await expect(page.locator('text=*Title is required')).toBeVisible(); + + await expect(page.locator('text=*Author is required. Anonymous or the publication can be entered.')).toBeVisible(); + + await expect(page.locator('text=*Text is required')).toBeVisible(); + + await expect(page.locator('text=*Date published is required')).toBeVisible(); + }); + test('Should submit a new report response', async ({ page }) => { const values = { url: 'https://incidentdatabase.ai', diff --git a/site/gatsby-site/src/components/forms/SubmissionWizard/StepOne.js b/site/gatsby-site/src/components/forms/SubmissionWizard/StepOne.js index c5b8e1a135..382697cad0 100644 --- a/site/gatsby-site/src/components/forms/SubmissionWizard/StepOne.js +++ b/site/gatsby-site/src/components/forms/SubmissionWizard/StepOne.js @@ -42,21 +42,21 @@ const StepOne = (props) => { .nullable(), authors: yup .string() + .required('*Author is required. Anonymous or the publication can be entered.') .min(3, '*Authors must have at least 3 characters') .max(200, "*Authors can't be longer than 200 characters") - .required('*Author is required. Anonymous or the publication can be entered.') .nullable(), date_published: yup .string() .matches(dateRegExp, '*Date is not valid, must be `YYYY-MM-DD`') - .test(isPastDate) .required('*Date published is required') + .test(isPastDate) .nullable(), date_downloaded: yup .string() .matches(dateRegExp, '*Date is not valid, must be `YYYY-MM-DD`') - .test(isPastDate) .required('*Date downloaded required') + .test(isPastDate) .nullable(), url: yup .string() @@ -333,6 +333,7 @@ const FormDetails = ({ position: 'relative', ...styles, }} + onBlur={() => setFieldTouched('text', true)} > {touched['text'] && errors['text'] && (
setTouched(true)} {...{ name, disabled,