@defra/forms-engine-plugin 0.1.11 → 0.1.12

package/src/server/plugins/engine/components/FileUploadField.ts

@@ -5,9 +5,11 @@ import {
   FormComponent,
   isUploadState
 } from '~/src/server/plugins/engine/components/FormComponent.js'
+import { messageTemplate } from '~/src/server/plugins/engine/pageControllers/validationOptions.js'
 import {
   FileStatus,
   UploadStatus,
+  type ErrorMessageTemplateList,
   type FileState,
   type FileUpload,
   type FileUploadMetadata,
@@ -104,9 +106,13 @@ export class FileUploadField extends FormComponent {
   ) {
     super(def, props)
 
-    const { options, schema, title } = def
+    const { options, schema } = def
 
-    let formSchema = joi.array<FileState>().label(title).single().required()
+    let formSchema = joi
+      .array<FileState>()
+      .label(this.label)
+      .single()
+      .required()
 
     if (options.required === false) {
       formSchema = formSchema.optional()
@@ -231,7 +237,7 @@ export class FileUploadField extends FormComponent {
     })
 
     // Set up the `accept` attribute
-    if ('accept' in options) {
+    if ('accept' in options && options.accept) {
       attributes.accept = options.accept
     }
 
@@ -259,4 +265,47 @@ export class FileUploadField extends FormComponent {
   isValue(value?: FormStateValue | FormState): value is UploadState {
     return isUploadState(value)
   }
+
+  /**
+   * For error preview page that shows all possible errors on a component
+   */
+  getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [
+        { type: 'selectRequired', template: messageTemplate.selectRequired },
+        {
+          type: 'filesMimes',
+          template: 'The selected file must be a {{#limit}}'
+        },
+        {
+          type: 'filesSize',
+          template: 'The selected file must be smaller than 100MB'
+        },
+        { type: 'filesEmpty', template: 'The selected file is empty' },
+        { type: 'filesVirus', template: 'The selected file contains a virus' },
+        {
+          type: 'filesPartial',
+          template: 'The selected file has not fully uploaded'
+        },
+        {
+          type: 'filesError',
+          template: 'The selected file could not be uploaded – try again'
+        }
+      ],
+      advancedSettingsErrors: [
+        {
+          type: 'filesMin',
+          template: 'You must upload {{#limit}} files or more'
+        },
+        {
+          type: 'filesMax',
+          template: 'You can only upload {{#limit}} files or less'
+        },
+        {
+          type: 'filesExact',
+          template: 'You must upload exactly {{#limit}} files'
+        }
+      ]
+    }
+  }
 }

package/src/server/plugins/engine/components/FormComponent.ts

@@ -3,6 +3,7 @@ import { type FormComponentsDef, type Item } from '@defra/forms-model'
 import { ComponentBase } from '~/src/server/plugins/engine/components/ComponentBase.js'
 import { optionalText } from '~/src/server/plugins/engine/components/constants.js'
 import {
+  type ErrorMessageTemplateList,
   type FileState,
   type FormPayload,
   type FormState,
@@ -18,6 +19,7 @@ import {
 export class FormComponent extends ComponentBase {
   type: FormComponentsDef['type']
   hint: FormComponentsDef['hint']
+  label: string
 
   isFormComponent = true
 
@@ -31,6 +33,10 @@ export class FormComponent extends ComponentBase {
 
     this.type = type
     this.hint = hint
+    this.label =
+      'shortDescription' in def && def.shortDescription
+        ? def.shortDescription
+        : def.title
   }
 
   get keys() {
@@ -100,10 +106,19 @@ export class FormComponent extends ComponentBase {
     return list
   }
 
-  getError(errors?: FormSubmissionError[]): FormSubmissionError | undefined {
+  getFirstError(
+    errors?: FormSubmissionError[]
+  ): FormSubmissionError | undefined {
     return this.getErrors(errors)?.[0]
   }
 
+  getViewErrors(
+    errors?: FormSubmissionError[]
+  ): FormSubmissionError[] | undefined {
+    const firstError = this.getFirstError(errors)
+    return firstError && [firstError]
+  }
+
   getViewModel(payload: FormPayload, errors?: FormSubmissionError[]) {
     const { hint, name, options = {}, title, viewModel } = this
 
@@ -119,7 +134,7 @@ export class FormComponent extends ComponentBase {
 
     // Filter component errors only
     const componentErrors = this.getErrors(errors)
-    const componentError = this.getError(componentErrors)
+    const componentError = this.getFirstError(componentErrors)
 
     if (componentErrors) {
       viewModel.errors = componentErrors
@@ -175,6 +190,13 @@ export class FormComponent extends ComponentBase {
   isState(value?: FormStateValue | FormState): value is FormState {
     return isFormState(value)
   }
+
+  getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [],
+      advancedSettingsErrors: []
+    }
+  }
 }
 
 /**

package/src/server/plugins/engine/components/ListFormComponent.ts

@@ -14,7 +14,9 @@ import joi, {
 
 import { FormComponent } from '~/src/server/plugins/engine/components/FormComponent.js'
 import { type ListItem } from '~/src/server/plugins/engine/components/types.js'
+import { messageTemplate } from '~/src/server/plugins/engine/pageControllers/validationOptions.js'
 import {
+  type ErrorMessageTemplateList,
   type FormPayload,
   type FormSubmissionError,
   type FormSubmissionState
@@ -61,7 +63,7 @@ export class ListFormComponent extends FormComponent {
   ) {
     super(def, props)
 
-    const { options, title } = def
+    const { options } = def
     const { model } = props
 
     if ('list' in def) {
@@ -71,7 +73,7 @@ export class ListFormComponent extends FormComponent {
 
     let formSchema = joi[this.listType]()
       .valid(...this.values)
-      .label(title)
+      .label(this.label)
       .required()
 
     if (options.customValidationMessages) {
@@ -137,4 +139,16 @@ export class ListFormComponent extends FormComponent {
       items
     }
   }
+
+  /**
+   * For error preview page that shows all possible errors on a component
+   */
+  getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [
+        { type: 'selectRequired', template: messageTemplate.selectRequired }
+      ],
+      advancedSettingsErrors: []
+    }
+  }
 }

package/src/server/plugins/engine/components/Markdown.test.ts

@@ -0,0 +1,48 @@
+import { ComponentType, type MarkdownComponent } from '@defra/forms-model'
+
+import { ComponentCollection } from '~/src/server/plugins/engine/components/ComponentCollection.js'
+import { type Guidance } from '~/src/server/plugins/engine/components/helpers.js'
+import { FormModel } from '~/src/server/plugins/engine/models/FormModel.js'
+import definition from '~/test/form/definitions/basic.js'
+
+describe('Markdown', () => {
+  let model: FormModel
+
+  beforeEach(() => {
+    model = new FormModel(definition, {
+      basePath: 'test'
+    })
+  })
+
+  describe('Defaults', () => {
+    let def: MarkdownComponent
+    let collection: ComponentCollection
+    let guidance: Guidance
+
+    beforeEach(() => {
+      def = {
+        title: 'Markdown guidance',
+        name: 'myComponent',
+        type: ComponentType.Markdown,
+        content: '# Heading 1 ## Heading 2',
+        options: {}
+      } satisfies MarkdownComponent
+
+      collection = new ComponentCollection([def], { model })
+      guidance = collection.guidance[0]
+    })
+
+    describe('View model', () => {
+      it('sets Nunjucks component defaults', () => {
+        const viewModel = guidance.getViewModel()
+
+        expect(viewModel).toEqual(
+          expect.objectContaining({
+            attributes: {},
+            content: def.content
+          })
+        )
+      })
+    })
+  })
+})

package/src/server/plugins/engine/components/Markdown.ts

@@ -0,0 +1,29 @@
+import { type MarkdownComponent } from '@defra/forms-model'
+
+import { ComponentBase } from '~/src/server/plugins/engine/components/ComponentBase.js'
+
+export class Markdown extends ComponentBase {
+  declare options: MarkdownComponent['options']
+  content: MarkdownComponent['content']
+
+  constructor(
+    def: MarkdownComponent,
+    props: ConstructorParameters<typeof ComponentBase>[1]
+  ) {
+    super(def, props)
+
+    const { content, options } = def
+
+    this.content = content
+    this.options = options
+  }
+
+  getViewModel() {
+    const { content, viewModel } = this
+
+    return {
+      ...viewModel,
+      content
+    }
+  }
+}

package/src/server/plugins/engine/components/MonthYearField.test.ts

@@ -31,6 +31,7 @@ describe('MonthYearField', () => {
     beforeEach(() => {
       def = {
         title: 'Example month/year field',
+        shortDescription: 'Example month/year',
         name: 'myComponent',
         type: ComponentType.MonthYearField,
         options: {}
@@ -168,6 +169,32 @@ describe('MonthYearField', () => {
           })
         )
 
+        expect(result.errors).toEqual([
+          expect.objectContaining({
+            text: 'Example month/year must include a month'
+          }),
+          expect.objectContaining({
+            text: 'Example month/year must include a year'
+          })
+        ])
+      })
+
+      it('adds errors for empty value given no short desc exists', () => {
+        def = {
+          title: 'Example month/year field',
+          name: 'myComponent',
+          type: ComponentType.MonthYearField,
+          options: {}
+        } satisfies MonthYearFieldComponent
+
+        collection = new ComponentCollection([def], { model })
+        const result = collection.validate(
+          getFormData({
+            month: '',
+            year: ''
+          })
+        )
+
         expect(result.errors).toEqual([
           expect.objectContaining({
             text: 'Example month/year field must include a month'
@@ -347,6 +374,14 @@ describe('MonthYearField', () => {
         })
       })
     })
+
+    describe('AllPossibleErrors', () => {
+      it('should return errors', () => {
+        const errors = field.getAllPossibleErrors()
+        expect(errors.baseErrors).not.toBeEmpty()
+        expect(errors.advancedSettingsErrors).not.toBeEmpty()
+      })
+    })
   })
 
   describe('Validation', () => {

package/src/server/plugins/engine/components/MonthYearField.ts

@@ -17,12 +17,14 @@ import { NumberField } from '~/src/server/plugins/engine/components/NumberField.
 import { type DateInputItem } from '~/src/server/plugins/engine/components/types.js'
 import { messageTemplate } from '~/src/server/plugins/engine/pageControllers/validationOptions.js'
 import {
+  type ErrorMessageTemplateList,
   type FormPayload,
   type FormState,
   type FormStateValue,
   type FormSubmissionError,
   type FormSubmissionState
 } from '~/src/server/plugins/engine/types.js'
+import { convertToLanguageMessages } from '~/src/server/utils/type-utils.js'
 
 export class MonthYearField extends FormComponent {
   declare options: MonthYearFieldComponent['options']
@@ -40,15 +42,18 @@ export class MonthYearField extends FormComponent {
 
     const isRequired = options.required !== false
 
-    const customValidationMessages: LanguageMessages = {
-      'any.required': messageTemplate.objectMissing,
-      'number.base': messageTemplate.objectMissing,
-      'number.precision': messageTemplate.dateFormat,
-      'number.integer': messageTemplate.dateFormat,
-      'number.unsafe': messageTemplate.dateFormat,
-      'number.min': messageTemplate.dateFormat,
-      'number.max': messageTemplate.dateFormat
-    }
+    const customValidationMessages: LanguageMessages =
+      convertToLanguageMessages({
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        'any.required': messageTemplate.objectMissing,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        'number.base': messageTemplate.objectMissing,
+        'number.precision': messageTemplate.dateFormat,
+        'number.integer': messageTemplate.dateFormat,
+        'number.unsafe': messageTemplate.dateFormat,
+        'number.min': messageTemplate.dateFormat,
+        'number.max': messageTemplate.dateFormat
+      })
 
     this.collection = new ComponentCollection(
       [
@@ -180,6 +185,26 @@ export class MonthYearField extends FormComponent {
     return MonthYearField.isMonthYear(value)
   }
 
+  /**
+   * For error preview page that shows all possible errors on a component
+   */
+  getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [
+        { type: 'required', template: messageTemplate.required },
+        {
+          type: 'dateFormatMonth',
+          template: '{{#label}} must include a month'
+        },
+        { type: 'dateFormatYear', template: '{{#label}} must include a year' }
+      ],
+      advancedSettingsErrors: [
+        { type: 'dateMin', template: messageTemplate.dateMin },
+        { type: 'dateMax', template: messageTemplate.dateMax }
+      ]
+    }
+  }
+
   static isMonthYear(
     value?: FormStateValue | FormState
   ): value is MonthYearState {

package/src/server/plugins/engine/components/MultilineTextField.test.ts

@@ -29,7 +29,8 @@ describe('MultilineTextField', () => {
 
     beforeEach(() => {
       def = {
-        title: 'Example textarea',
+        title: 'Example textarea title',
+        shortDescription: 'Example textarea',
         name: 'myComponent',
         type: ComponentType.MultilineTextField,
         options: {},
@@ -41,7 +42,7 @@ describe('MultilineTextField', () => {
     })
 
     describe('Schema', () => {
-      it('uses component title as label', () => {
+      it('uses component short description as label', () => {
         const { formSchema } = collection
         const { keys } = formSchema.describe()
 
@@ -117,6 +118,25 @@ describe('MultilineTextField', () => {
         ])
       })
 
+      it('adds errors for empty value given no short description', () => {
+        def = {
+          title: 'Example textarea title',
+          name: 'myComponent',
+          type: ComponentType.MultilineTextField,
+          options: {},
+          schema: {}
+        } satisfies MultilineTextFieldComponent
+
+        collection = new ComponentCollection([def], { model })
+        const result = collection.validate(getFormData(''))
+
+        expect(result.errors).toEqual([
+          expect.objectContaining({
+            text: 'Enter example textarea title'
+          })
+        ])
+      })
+
       it('adds errors for invalid values', () => {
         const result1 = collection.validate(getFormData(['invalid']))
         const result2 = collection.validate(
@@ -234,6 +254,14 @@ describe('MultilineTextField', () => {
         )
       })
     })
+
+    describe('AllPossibleErrors', () => {
+      it('should return errors', () => {
+        const errors = field.getAllPossibleErrors()
+        expect(errors.baseErrors).not.toBeEmpty()
+        expect(errors.advancedSettingsErrors).not.toBeEmpty()
+      })
+    })
   })
 
   describe('Validation', () => {
@@ -294,7 +322,57 @@ describe('MultilineTextField', () => {
         ]
       },
       {
-        description: 'Schema min and max',
+        description: 'Schema min',
+        component: {
+          title: 'Example textarea',
+          name: 'myComponent',
+          type: ComponentType.MultilineTextField,
+          options: {},
+          schema: {
+            min: 5
+          }
+        } satisfies MultilineTextFieldComponent,
+        assertions: [
+          {
+            input: getFormData('Text'),
+            output: {
+              value: getFormData('Text'),
+              errors: [
+                expect.objectContaining({
+                  text: 'Example textarea must be 5 characters or more'
+                })
+              ]
+            }
+          }
+        ]
+      },
+      {
+        description: 'Schema max',
+        component: {
+          title: 'Example textarea',
+          name: 'myComponent',
+          type: ComponentType.MultilineTextField,
+          options: {},
+          schema: {
+            max: 8
+          }
+        } satisfies MultilineTextFieldComponent,
+        assertions: [
+          {
+            input: getFormData('Text too long'),
+            output: {
+              value: getFormData('Text too long'),
+              errors: [
+                expect.objectContaining({
+                  text: 'Example textarea must be 8 characters or less'
+                })
+              ]
+            }
+          }
+        ]
+      },
+      {
+        description: 'Schema min and max together',
         component: {
           title: 'Example textarea',
           name: 'myComponent',
@@ -312,7 +390,7 @@ describe('MultilineTextField', () => {
               value: getFormData('Text'),
               errors: [
                 expect.objectContaining({
-                  text: 'Example textarea must be 5 characters or more'
+                  text: 'Example textarea must be between 5 and 8 characters'
                 })
               ]
             }
@@ -323,7 +401,7 @@ describe('MultilineTextField', () => {
               value: getFormData('Textarea too long'),
               errors: [
                 expect.objectContaining({
-                  text: 'Example textarea must be 8 characters or less'
+                  text: 'Example textarea must be between 5 and 8 characters'
                 })
               ]
             }

package/src/server/plugins/engine/components/MultilineTextField.ts

@@ -3,7 +3,9 @@ import Joi, { type CustomValidator, type StringSchema } from 'joi'
 
 import { type ComponentBase } from '~/src/server/plugins/engine/components/ComponentBase.js'
 import { FormComponent } from '~/src/server/plugins/engine/components/FormComponent.js'
+import { messageTemplate } from '~/src/server/plugins/engine/pageControllers/validationOptions.js'
 import {
+  type ErrorMessageTemplateList,
   type FormPayload,
   type FormSubmissionError
 } from '~/src/server/plugins/engine/types.js'
@@ -22,9 +24,9 @@ export class MultilineTextField extends FormComponent {
   ) {
     super(def, props)
 
-    const { schema, options, title } = def
+    const { schema, options } = def
 
-    let formSchema = Joi.string().trim().label(title).required()
+    let formSchema = Joi.string().trim().label(this.label).required()
 
     if (options.required === false) {
       formSchema = formSchema.allow('')
@@ -71,6 +73,15 @@ export class MultilineTextField extends FormComponent {
       })
     } else if (options.customValidationMessages) {
       formSchema = formSchema.messages(options.customValidationMessages)
+    } else if (
+      typeof schema.max === 'number' &&
+      typeof schema.min === 'number'
+    ) {
+      const minMaxErrorText = this.buildMinMaxText(schema.min, schema.max)
+      formSchema = formSchema.ruleset
+        .min(schema.min)
+        .max(schema.max)
+        .message(minMaxErrorText)
     }
 
     this.formSchema = formSchema.default('')
@@ -105,6 +116,30 @@ export class MultilineTextField extends FormComponent {
       rows
     }
   }
+
+  buildMinMaxText(min?: number, max?: number): string {
+    const minMaxError = messageTemplate.minMax as string
+    return minMaxError
+      .replace('{{#min}}', min ? min.toString() : '[min length]')
+      .replace('{{#max}}', max ? max.toString() : '[max length]')
+  }
+
+  /**
+   * For error preview page that shows all possible errors on a component
+   */
+  getAllPossibleErrors(): ErrorMessageTemplateList {
+    return {
+      baseErrors: [{ type: 'required', template: messageTemplate.required }],
+      advancedSettingsErrors: [
+        { type: 'min', template: messageTemplate.min },
+        { type: 'max', template: messageTemplate.max },
+        {
+          type: 'minMax',
+          template: this.buildMinMaxText(this.schema.min, this.schema.max)
+        }
+      ]
+    }
+  }
 }
 
 function getValidatorMaxWords(component: MultilineTextField) {

package/src/server/plugins/engine/components/NumberField.test.ts

@@ -27,6 +27,7 @@ describe('NumberField', () => {
     beforeEach(() => {
       def = {
         title: 'Example number field',
+        shortDescription: 'Example number',
         name: 'myComponent',
         type: ComponentType.NumberField,
         options: {},
@@ -46,7 +47,7 @@ describe('NumberField', () => {
           'myComponent',
           expect.objectContaining({
             flags: expect.objectContaining({
-              label: 'Example number field'
+              label: 'Example number'
             })
           })
         )
@@ -113,9 +114,22 @@ describe('NumberField', () => {
 
         expect(result.errors).toEqual([
           expect.objectContaining({
-            text: 'Enter example number field'
+            text: 'Enter example number'
           })
         ])
+      })
+
+      it('adds errors for empty value given no short description exists', () => {
+        def = {
+          title: 'Example number field',
+          name: 'myComponent',
+          type: ComponentType.NumberField,
+          options: {},
+          schema: {}
+        } satisfies NumberFieldComponent
+
+        collection = new ComponentCollection([def], { model })
+        const result = collection.validate(getFormData(''))
 
         expect(result.errors).toEqual([
           expect.objectContaining({
@@ -258,6 +272,14 @@ describe('NumberField', () => {
 
       expect(viewModel).toHaveProperty('value', 'AA')
     })
+
+    describe('AllPossibleErrors', () => {
+      it('should return errors', () => {
+        const errors = field.getAllPossibleErrors()
+        expect(errors.baseErrors).not.toBeEmpty()
+        expect(errors.advancedSettingsErrors).not.toBeEmpty()
+      })
+    })
   })
 
   describe('Validation', () => {