@defra/forms-engine-plugin 4.0.5 → 4.0.7

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

@@ -0,0 +1,270 @@
+import {
+  ComponentType,
+  type EastingNorthingFieldComponent,
+  type LatLongFieldComponent,
+  type NationalGridFieldNumberFieldComponent,
+  type OsGridRefFieldComponent
+} from '@defra/forms-model'
+
+import {
+  getAnswer,
+  getAnswerMarkdown
+} from '~/src/server/plugins/engine/components/helpers/components.js'
+import {
+  EastingNorthingField,
+  LatLongField,
+  NationalGridFieldNumberField,
+  OsGridRefField
+} from '~/src/server/plugins/engine/components/index.js'
+import { FormModel } from '~/src/server/plugins/engine/models/FormModel.js'
+import definition from '~/test/form/definitions/blank.js'
+
+describe('Location field formatting', () => {
+  let model: FormModel
+
+  beforeEach(() => {
+    model = new FormModel(definition, {
+      basePath: 'test'
+    })
+  })
+
+  describe('EastingNorthingField', () => {
+    let field: EastingNorthingField
+
+    beforeEach(() => {
+      const def: EastingNorthingFieldComponent = {
+        type: ComponentType.EastingNorthingField,
+        name: 'locationEN',
+        title: 'Location',
+        options: {}
+      }
+      field = new EastingNorthingField(def, { model })
+    })
+
+    it('formats for email output with labels on separate lines', () => {
+      const state = {
+        locationEN__easting: 123456,
+        locationEN__northing: 654321
+      }
+
+      const answer = getAnswer(field, state, { format: 'email' })
+      expect(answer).toBe('Northing: 654321\nEasting: 123456\n')
+    })
+
+    it('formats for data output', () => {
+      const state = {
+        locationEN__easting: 123456,
+        locationEN__northing: 654321
+      }
+
+      const answer = getAnswer(field, state, { format: 'data' })
+      expect(answer).toBe('Northing: 654321\nEasting: 123456')
+    })
+
+    it('formats for summary display', () => {
+      const state = {
+        locationEN__easting: 123456,
+        locationEN__northing: 654321
+      }
+
+      const answer = getAnswer(field, state, { format: 'summary' })
+      // Should render as HTML from markdown
+      expect(answer).toContain('Northing: 654321')
+      expect(answer).toContain('Easting: 123456')
+    })
+
+    it('returns empty string when no values', () => {
+      const state = {}
+
+      const answer = getAnswer(field, state, { format: 'email' })
+      expect(answer).toBe('')
+    })
+  })
+
+  describe('LatLongField', () => {
+    let field: LatLongField
+
+    beforeEach(() => {
+      const def: LatLongFieldComponent = {
+        type: ComponentType.LatLongField,
+        name: 'locationLL',
+        title: 'Coordinates',
+        options: {}
+      }
+      field = new LatLongField(def, { model })
+    })
+
+    it('formats for email output with labels on separate lines', () => {
+      const state = {
+        locationLL__latitude: 51.51945,
+        locationLL__longitude: -0.127758
+      }
+
+      const answer = getAnswer(field, state, { format: 'email' })
+      expect(answer).toBe('Lat: 51.51945\nLong: -0.127758\n')
+    })
+
+    it('formats for data output', () => {
+      const state = {
+        locationLL__latitude: 51.51945,
+        locationLL__longitude: -0.127758
+      }
+
+      const answer = getAnswer(field, state, { format: 'data' })
+      expect(answer).toBe('Lat: 51.51945\nLong: -0.127758')
+    })
+
+    it('formats for summary display', () => {
+      const state = {
+        locationLL__latitude: 51.51945,
+        locationLL__longitude: -0.127758
+      }
+
+      const answer = getAnswer(field, state, { format: 'summary' })
+      // Should render as HTML from markdown
+      expect(answer).toContain('Lat: 51.51945')
+      expect(answer).toContain('Long: -0.127758')
+    })
+
+    it('returns empty string when no values', () => {
+      const state = {}
+
+      const answer = getAnswer(field, state, { format: 'email' })
+      expect(answer).toBe('')
+    })
+  })
+
+  describe('OsGridRefField', () => {
+    let field: OsGridRefField
+
+    beforeEach(() => {
+      const def: OsGridRefFieldComponent = {
+        type: ComponentType.OsGridRefField,
+        name: 'gridRef',
+        title: 'OS Grid Reference',
+        options: {}
+      }
+      field = new OsGridRefField(def, { model })
+    })
+
+    it('formats for email output as single value', () => {
+      const state = {
+        gridRef: 'TQ123456'
+      }
+
+      const answer = getAnswer(field, state, { format: 'email' })
+      expect(answer).toBe('TQ123456\n')
+    })
+
+    it('formats for data output', () => {
+      const state = {
+        gridRef: 'TQ123456'
+      }
+
+      const answer = getAnswer(field, state, { format: 'data' })
+      expect(answer).toBe('TQ123456')
+    })
+
+    it('formats for summary display', () => {
+      const state = {
+        gridRef: 'TQ123456'
+      }
+
+      const answer = getAnswer(field, state, { format: 'summary' })
+      expect(answer).toBe('TQ123456')
+    })
+  })
+
+  describe('NationalGridFieldNumberField', () => {
+    let field: NationalGridFieldNumberField
+
+    beforeEach(() => {
+      const def: NationalGridFieldNumberFieldComponent = {
+        type: ComponentType.NationalGridFieldNumberField,
+        name: 'ngField',
+        title: 'National Grid Field Number',
+        options: {}
+      }
+      field = new NationalGridFieldNumberField(def, { model })
+    })
+
+    it('formats for email output as single value', () => {
+      const state = {
+        ngField: 'NG12345678'
+      }
+
+      const answer = getAnswer(field, state, { format: 'email' })
+      expect(answer).toBe('NG12345678\n')
+    })
+
+    it('formats for data output', () => {
+      const state = {
+        ngField: 'NG12345678'
+      }
+
+      const answer = getAnswer(field, state, { format: 'data' })
+      expect(answer).toBe('NG12345678')
+    })
+
+    it('formats for summary display', () => {
+      const state = {
+        ngField: 'NG12345678'
+      }
+
+      const answer = getAnswer(field, state, { format: 'summary' })
+      expect(answer).toBe('NG12345678')
+    })
+  })
+
+  describe('getAnswerMarkdown', () => {
+    it('formats EastingNorthingField correctly', () => {
+      const def: EastingNorthingFieldComponent = {
+        type: ComponentType.EastingNorthingField,
+        name: 'locationEN',
+        title: 'Location',
+        options: {}
+      }
+      const field = new EastingNorthingField(def, { model })
+      const state = {
+        locationEN__easting: 123456,
+        locationEN__northing: 654321
+      }
+
+      const answer = getAnswerMarkdown(field, state, { format: 'email' })
+      expect(answer).toBe('Northing: 654321\nEasting: 123456\n')
+    })
+
+    it('formats LatLongField correctly', () => {
+      const def: LatLongFieldComponent = {
+        type: ComponentType.LatLongField,
+        name: 'locationLL',
+        title: 'Coordinates',
+        options: {}
+      }
+      const field = new LatLongField(def, { model })
+      const state = {
+        locationLL__latitude: 51.51945,
+        locationLL__longitude: -0.127758
+      }
+
+      const answer = getAnswerMarkdown(field, state, { format: 'email' })
+      expect(answer).toBe('Lat: 51.51945\nLong: -0.127758\n')
+    })
+
+    it('formats simple location fields correctly', () => {
+      const def: OsGridRefFieldComponent = {
+        type: ComponentType.OsGridRefField,
+        name: 'gridRef',
+        title: 'OS Grid Reference',
+        options: {}
+      }
+      const field = new OsGridRefField(def, { model })
+      const state = {
+        gridRef: 'TQ123456'
+      }
+
+      const answer = getAnswerMarkdown(field, state, { format: 'email' })
+      expect(answer).toBe('TQ123456\n')
+    })
+  })
+})

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

@@ -1,11 +1,11 @@
 import { ComponentType, type ComponentDef } from '@defra/forms-model'
-import { Marked, type Token } from 'marked'
 
 import { config } from '~/src/config/index.js'
 import { type ComponentBase } from '~/src/server/plugins/engine/components/ComponentBase.js'
 import { ListFormComponent } from '~/src/server/plugins/engine/components/ListFormComponent.js'
 import { escapeMarkdown } from '~/src/server/plugins/engine/components/helpers/index.js'
 import * as Components from '~/src/server/plugins/engine/components/index.js'
+import { markdown } from '~/src/server/plugins/engine/components/markdownParser.js'
 import { type FormState } from '~/src/server/plugins/engine/types.js'
 
 // All component instances
@@ -20,10 +20,14 @@ export type Field = InstanceType<
   | typeof Components.YesNoField
   | typeof Components.CheckboxesField
   | typeof Components.DatePartsField
+  | typeof Components.EastingNorthingField
   | typeof Components.EmailAddressField
+  | typeof Components.LatLongField
   | typeof Components.MonthYearField
   | typeof Components.MultilineTextField
+  | typeof Components.NationalGridFieldNumberField
   | typeof Components.NumberField
+  | typeof Components.OsGridRefField
   | typeof Components.SelectField
   | typeof Components.TelephoneNumberField
   | typeof Components.TextField
@@ -32,13 +36,12 @@ export type Field = InstanceType<
 >
 
 // Guidance component instances only
-export type Guidance = InstanceType<
-  | typeof Components.Details
-  | typeof Components.Html
-  | typeof Components.Markdown
-  | typeof Components.InsetText
-  | typeof Components.List
->
+export type Guidance =
+  | InstanceType<typeof Components.Details>
+  | InstanceType<typeof Components.Html>
+  | InstanceType<typeof Components.Markdown>
+  | InstanceType<typeof Components.InsetText>
+  | InstanceType<typeof Components.List>
 
 // List component instances only
 export type ListField = InstanceType<
@@ -51,43 +54,8 @@ export type ListField = InstanceType<
 
 export const designerUrl = config.get('designerUrl')
 
-export const markdown = new Marked({
-  breaks: true,
-  gfm: true,
-
-  /**
-   * Render paragraphs without `<p>` wrappers
-   * for check answers summary list `<dd>`
-   */
-  extensions: [
-    {
-      name: 'paragraph',
-      renderer({ tokens = [] }) {
-        const text = this.parser.parseInline(tokens)
-        return tokens.length > 1 ? `${text}<br>` : text
-      }
-    }
-  ],
-
-  /**
-   * Restrict allowed Markdown tokens
-   */
-  walkTokens(token) {
-    const tokens: Token['type'][] = [
-      'br',
-      'escape',
-      'list',
-      'list_item',
-      'paragraph',
-      'space',
-      'text'
-    ]
-
-    if (!tokens.includes(token.type)) {
-      token.type = 'text'
-    }
-  }
-})
+// Re-export markdown from its own module to avoid circular dependencies
+export { markdown } from '~/src/server/plugins/engine/components/markdownParser.js'
 
 /**
  * Filter known components with lists
@@ -95,7 +63,7 @@ export const markdown = new Marked({
 export function hasListFormField(
   field?: Partial<Component>
 ): field is ListFormComponent {
-  return !!field && isListFieldType(field.type)
+  return !!field && field.type !== undefined && isListFieldType(field.type)
 }
 
 export function isListFieldType(
@@ -197,6 +165,22 @@ export function createComponent(
     case ComponentType.FileUploadField:
       component = new Components.FileUploadField(def, options)
       break
+
+    case ComponentType.EastingNorthingField:
+      component = new Components.EastingNorthingField(def, options)
+      break
+
+    case ComponentType.OsGridRefField:
+      component = new Components.OsGridRefField(def, options)
+      break
+
+    case ComponentType.NationalGridFieldNumberField:
+      component = new Components.NationalGridFieldNumberField(def, options)
+      break
+
+    case ComponentType.LatLongField:
+      component = new Components.LatLongField(def, options)
+      break
   }
 
   if (typeof component === 'undefined') {
@@ -234,7 +218,9 @@ export function getAnswer(
   if (
     field instanceof ListFormComponent ||
     field instanceof Components.MultilineTextField ||
-    field instanceof Components.UkAddressField
+    field instanceof Components.UkAddressField ||
+    field instanceof Components.EastingNorthingField ||
+    field instanceof Components.LatLongField
   ) {
     return markdown
       .parse(getAnswerMarkdown(field, state), { async: false })
@@ -325,6 +311,12 @@ export function getAnswerMarkdown(
       .map(escapeMarkdown)
       .join('\n')
       .concat('\n')
+  } else if (
+    field instanceof Components.EastingNorthingField ||
+    field instanceof Components.LatLongField
+  ) {
+    const contextValue = field.getContextValueFromState(state)
+    answerEscaped = contextValue ? `${contextValue}\n` : ''
   }
 
   return answerEscaped

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

@@ -1,6 +1,10 @@
-import { type ComponentDef } from '@defra/forms-model'
+import { ComponentType, type ComponentDef } from '@defra/forms-model'
 
 import { ComponentBase } from '~/src/server/plugins/engine/components/ComponentBase.js'
+import { EastingNorthingField } from '~/src/server/plugins/engine/components/EastingNorthingField.js'
+import { LatLongField } from '~/src/server/plugins/engine/components/LatLongField.js'
+import { NationalGridFieldNumberField } from '~/src/server/plugins/engine/components/NationalGridFieldNumberField.js'
+import { OsGridRefField } from '~/src/server/plugins/engine/components/OsGridRefField.js'
 import { createComponent } from '~/src/server/plugins/engine/components/helpers/components.js'
 import { FormModel } from '~/src/server/plugins/engine/models/FormModel.js'
 import definition from '~/test/form/definitions/basic.js'
@@ -22,6 +26,72 @@ describe('helpers tests', () => {
       )
     ).toThrow('Component type invalid-type does not exist')
   })
+
+  test('should create EastingNorthingField component', () => {
+    const component = createComponent(
+      {
+        type: ComponentType.EastingNorthingField,
+        name: 'testField',
+        title: 'Test Easting Northing',
+        options: {},
+        schema: {}
+      },
+      { model: formModel }
+    )
+
+    expect(component).toBeInstanceOf(EastingNorthingField)
+    expect(component.name).toBe('testField')
+    expect(component.title).toBe('Test Easting Northing')
+  })
+
+  test('should create LatLongField component', () => {
+    const component = createComponent(
+      {
+        type: ComponentType.LatLongField,
+        name: 'testField',
+        title: 'Test Lat Long',
+        options: {},
+        schema: {}
+      },
+      { model: formModel }
+    )
+
+    expect(component).toBeInstanceOf(LatLongField)
+    expect(component.name).toBe('testField')
+    expect(component.title).toBe('Test Lat Long')
+  })
+
+  test('should create OsGridRefField component', () => {
+    const component = createComponent(
+      {
+        type: ComponentType.OsGridRefField,
+        name: 'testField',
+        title: 'Test OS Grid Ref',
+        options: {}
+      },
+      { model: formModel }
+    )
+
+    expect(component).toBeInstanceOf(OsGridRefField)
+    expect(component.name).toBe('testField')
+    expect(component.title).toBe('Test OS Grid Ref')
+  })
+
+  test('should create NationalGridFieldNumberField component', () => {
+    const component = createComponent(
+      {
+        type: ComponentType.NationalGridFieldNumberField,
+        name: 'testField',
+        title: 'Test National Grid',
+        options: {}
+      },
+      { model: formModel }
+    )
+
+    expect(component).toBeInstanceOf(NationalGridFieldNumberField)
+    expect(component.name).toBe('testField')
+    expect(component.title).toBe('Test National Grid')
+  })
 })
 
 describe('ComponentBase tests', () => {

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

@@ -23,3 +23,7 @@ export { TelephoneNumberField } from '~/src/server/plugins/engine/components/Tel
 export { TextField } from '~/src/server/plugins/engine/components/TextField.js'
 export { UkAddressField } from '~/src/server/plugins/engine/components/UkAddressField.js'
 export { YesNoField } from '~/src/server/plugins/engine/components/YesNoField.js'
+export { EastingNorthingField } from '~/src/server/plugins/engine/components/EastingNorthingField.js'
+export { OsGridRefField } from '~/src/server/plugins/engine/components/OsGridRefField.js'
+export { NationalGridFieldNumberField } from '~/src/server/plugins/engine/components/NationalGridFieldNumberField.js'
+export { LatLongField } from '~/src/server/plugins/engine/components/LatLongField.js'

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

@@ -0,0 +1,40 @@
+import { Marked, type Token } from 'marked'
+
+export const markdown = new Marked({
+  breaks: true,
+  gfm: true,
+
+  /**
+   * Render paragraphs without `<p>` wrappers
+   * for check answers summary list `<dd>`
+   */
+  extensions: [
+    {
+      name: 'paragraph',
+      renderer({ tokens = [] }) {
+        const text = this.parser.parseInline(tokens)
+        return tokens.length > 1 ? `${text}<br>` : text
+      }
+    }
+  ],
+
+  /**
+   * Restrict allowed Markdown tokens
+   */
+  walkTokens(token) {
+    const tokens: Token['type'][] = [
+      'br',
+      'escape',
+      'link',
+      'list',
+      'list_item',
+      'paragraph',
+      'space',
+      'text'
+    ]
+
+    if (!tokens.includes(token.type)) {
+      token.type = 'text'
+    }
+  }
+})

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

@@ -60,6 +60,10 @@ export interface DateInputItem {
   name?: string
   value?: Item['value']
   classes?: string
+  // Prefix/suffix are used by location fields (e.g., LatLong, EastingNorthing) for units like "°"
+  // but not by date fields. This interface is reused by both component types.
+  prefix?: ComponentText
+  suffix?: ComponentText
   condition?: undefined
 }
 
@@ -126,3 +130,13 @@ export interface MonthYearState extends Record<string, number> {
   month: number
   year: number
 }
+
+export interface EastingNorthingState extends Record<string, number> {
+  easting: number
+  northing: number
+}
+
+export interface LatLongState extends Record<string, number> {
+  latitude: number
+  longitude: number
+}