Feature/DF-854: Geojson type

designer/.automated-tests.env

@@ -49,3 +49,7 @@ NODE_TLS_REJECT_UNAUTHORIZED=0
 FEATURE_FLAG_USE_ENTITLEMENT_API=false
 FEATURE_FLAG_ALLOW_PAYMENTS=true
 FEATURE_FLAG_PUBLISH_AUDIT_EVENTS=true
+
+# Ordnance Survey API credentials
+ORDNANCE_SURVEY_API_KEY=test
+ORDNANCE_SURVEY_API_SECRET=test

designer/client/jest.config.mjs

@@ -32,7 +32,8 @@ export default {
       'nanoid', // Supports ESM only
       'slug', // Supports ESM only
       '@defra/forms-engine-plugin',
-      '@defra/forms-model'
+      '@defra/forms-model',
+      'geodesy' // Supports ESM only
     ].join('|')}/)`
   ]
 }

designer/client/src/javascripts/maps.js

@@ -0,0 +1,152 @@
+import {
+  geospatialMap,
+  map as mapImports
+} from '@defra/forms-engine-plugin/shared.js'
+
+const { createMap, defaultMapConfig } = mapImports
+const {
+  addFeatureToMap,
+  createFeaturesHTML,
+  getBoundingBox,
+  getGeoJSON,
+  focusFeature
+} = geospatialMap
+
+/**
+ * Factory clousure to create the map ready callback with access to the map provider, geojson and list element
+ * @param {any} mapProvider - the map provider instance
+ * @param {GeoJSON} geojson - the geojson data
+ * @param {HTMLDivElement} listEl - the list element to render the features list into
+ * @param {any} drawPlugin - the map draw plugin instance
+ * @param {any} map - the initialised map instance
+ * @param {string} mapId - the map id string
+ */
+function onMapReadyFactory(
+  mapProvider,
+  geojson,
+  listEl,
+  drawPlugin,
+  map,
+  mapId
+) {
+  /**
+   * Callback function which fires when the draw plugin is ready
+   */
+  return function () {
+    const { features } = geojson
+
+    // Add all features to the map
+    features.forEach((feature) => addFeatureToMap(feature, drawPlugin, map))
+
+    // Create the list (in readonly mode)
+    listEl.innerHTML = createFeaturesHTML(features, mapId, true)
+
+    // Listen to anchor click events to focus features
+    listEl.addEventListener(
+      'click',
+      function (e) {
+        const target = e.target
+
+        if (!(target instanceof HTMLElement)) {
+          return
+        }
+
+        if (
+          target.tagName === 'A' &&
+          target.dataset.action &&
+          target.dataset.id
+        ) {
+          const { action, id } = target.dataset
+          const feature = geojson.features.find((f) => f.id === id)
+
+          if (action === 'focus' && feature) {
+            focusFeature(feature, mapProvider)
+          }
+        }
+      },
+      false
+    )
+  }
+}
+
+/**
+ * Process a geospatial component preview by rendering the map and features, and setting up event listeners
+ * @param {Element} preview
+ * @param {number} index
+ */
+function processPreview(preview, index) {
+  // @ts-expect-error - Defra namespace currently comes from UMD support files
+  const defra = window.defra
+
+  const mapId = `map_${index}`
+  const geospatialInput = preview.querySelector('.govuk-textarea')
+
+  if (!(geospatialInput instanceof HTMLTextAreaElement)) {
+    return
+  }
+
+  const listEl = preview.querySelector(`#list_${index}`)
+  if (!(listEl instanceof HTMLDivElement)) {
+    return
+  }
+
+  /**
+   * @type {GeoJSON}
+   */
+  const geojson = getGeoJSON(geospatialInput)
+  const bounds = geojson.features.length ? getBoundingBox(geojson) : undefined
+  const drawPlugin = defra.drawMLPlugin()
+
+  const initConfig = {
+    ...defaultMapConfig,
+    bounds,
+    plugins: [drawPlugin]
+  }
+
+  const { map } = createMap(mapId, initConfig, {
+    assetPath: '/assets',
+    apiPath: '/maps/api',
+    data: {
+      VTS_OUTDOOR_URL: '/maps/api/maps/vts/OS_VTS_3857_Outdoor.json',
+      VTS_DARK_URL: '/maps/api/maps/vts/OS_VTS_3857_Dark.json',
+      VTS_BLACK_AND_WHITE_URL:
+        '/maps/api/maps/vts/OS_VTS_3857_Black_and_White.json'
+    }
+  })
+
+  map.on(
+    'map:ready',
+    /**
+     * Callback function which fires when the map is ready
+     * @param {object} e - the event
+     * @param {any} e.map - the map provider instance
+     */
+    function onMapReady({ map: mapProvider }) {
+      map.on(
+        'draw:ready',
+        onMapReadyFactory(mapProvider, geojson, listEl, drawPlugin, map, mapId)
+      )
+    }
+  )
+}
+
+/**
+ * Processes all geospatial component previews on the page by rendering maps and features, and setting up event listeners
+ */
+export function processMapPreview() {
+  const previews = document.querySelectorAll('.app-geospatial-field--preview')
+
+  previews.forEach(processPreview)
+}
+
+processMapPreview()
+
+/**
+ * @import { FeatureCollection } from '@defra/forms-engine-plugin/engine/types.js'
+ */
+
+/**
+ * @typedef {object} GeoJSON
+ * @property {'FeatureCollection'} type - the GeoJSON type string
+ * @property {FeatureCollection} features - the features
+ */

designer/client/src/javascripts/maps.test.js

@@ -0,0 +1,145 @@
+import { processMapPreview } from '~/src/javascripts/maps.js'
+
+describe('Maps Client JS', () => {
+  /** @type {jest.Mock} */
+  let onMock
+
+  /** @type {jest.Mock} */
+  let addMarkerMock
+
+  /** @type {jest.Mock} */
+  let interactPlugin
+
+  /** @type {jest.Mock} */
+  let drawMLPlugin
+
+  /** @type {jest.Mock} */
+  let drawPluginAddFeature
+
+  /** @type {jest.Mock} */
+  let fitBoundsMock
+
+  /** @type {any} */
+  let mapProvider
+
+  beforeEach(() => {
+    jest.resetAllMocks()
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    const noop = () => {}
+    onMock = jest.fn()
+    addMarkerMock = jest.fn()
+    fitBoundsMock = jest.fn()
+    mapProvider = {
+      fitBounds: fitBoundsMock
+    }
+    drawPluginAddFeature = jest.fn()
+    interactPlugin = jest.fn()
+    drawMLPlugin = jest.fn(() => ({
+      addFeature: drawPluginAddFeature
+    }))
+
+    class MockInteractiveMap {
+      on = onMock
+      addMarker = addMarkerMock
+    }
+
+    // @ts-expect-error - loaded via UMD
+    window.defra = {
+      InteractiveMap: MockInteractiveMap,
+      maplibreProvider: noop,
+      openNamesProvider: noop,
+      mapStylesPlugin: noop,
+      interactPlugin,
+      searchPlugin: noop,
+      zoomControlsPlugin: noop,
+      scaleBarPlugin: noop,
+      drawMLPlugin
+    }
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  describe('Geospatial component', () => {
+    beforeEach(() => {
+      document.body.innerHTML = `
+        <div class="app-geospatial-field--preview">
+          <div id="map_0">
+            <textarea class="govuk-textarea" id="data_0" readonly>[{"id":"5e7fb59c-e9bf-49df-a1fc-46833aa6ff4b","type":"Feature","properties":{"description":"s","coordinateGridReference":"SK 07539 43333","centroidGridReference":"SK 22238 54636"},"geometry":{"coordinates":[[[-1.8891381,52.987284],[-1.4386986,53.0797763],[-1.6803979,53.1984038],[-1.8891381,52.987284]]],"type":"Polygon"}},{"type":"Feature","properties":{"description":"p","coordinateGridReference":"SE 05990 03286","centroidGridReference":"SE 05990 03286"},"geometry":{"type":"Point","coordinates":[-1.9111107,53.5262079]},"id":"ae717bbb-011c-4d73-a60d-a73399c8475c"},{"id":"2ea88bee-73da-43c3-9fc7-e75d07615020","type":"Feature","properties":{"description":"l","coordinateGridReference":"SK 83223 60207","centroidGridReference":"SK 83476 87718"},"geometry":{"coordinates":[[-0.7575463,53.1325401],[-0.5707787,53.4739286],[-0.9113549,53.5327382]],"type":"LineString"}}]</textarea>
+          </div>
+          <div id="list_0">
+          </div>
+        </div>
+      `
+    })
+
+    /**
+     * Initialise geospatial maps preview helper
+     */
+    function initialiseGeospatialMapsPreview() {
+      expect(() => processMapPreview()).not.toThrow()
+      expect(drawMLPlugin).toHaveBeenCalledTimes(1)
+      expect(onMock).toHaveBeenCalledTimes(1)
+      expect(onMock).toHaveBeenNthCalledWith(
+        1,
+        'map:ready',
+        expect.any(Function)
+      )
+
+      const onMapReady = onMock.mock.calls[0][1]
+      expect(typeof onMapReady).toBe('function')
+
+      // Manually invoke onMapReady callback
+      onMapReady({ map: mapProvider })
+
+      expect(onMock).toHaveBeenCalledTimes(2)
+      expect(onMock).toHaveBeenNthCalledWith(
+        2,
+        'draw:ready',
+        expect.any(Function)
+      )
+
+      const onDrawReady = onMock.mock.calls[1][1]
+      expect(typeof onDrawReady).toBe('function')
+
+      // Manually invoke onDrawReady callback
+      onDrawReady()
+
+      const listContainer = document.body.querySelector('#list_0')
+
+      if (listContainer === null) {
+        throw new Error('Unexpected null found for listContainer')
+      }
+
+      expect(listContainer).toBeDefined()
+
+      return {
+        listContainer: /** @type {HTMLDivElement} */ (listContainer)
+      }
+    }
+
+    describe('Map preview initialisation', () => {
+      test('processMapPreview initializes without errors when DOM elements are present', () => {
+        const { listContainer } = initialiseGeospatialMapsPreview()
+        expect(listContainer).toBeDefined()
+      })
+
+      test('click on show link focuses the correct feature', () => {
+        const { listContainer } = initialiseGeospatialMapsPreview()
+        expect(listContainer).toBeDefined()
+
+        const showLinks = listContainer.querySelectorAll(
+          '.govuk-link.govuk-link--no-visited-state[data-action="focus"]'
+        )
+        expect(showLinks).toHaveLength(3)
+
+        // Simulate click on the first "Show" link
+        showLinks[0].dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+        expect(fitBoundsMock).toHaveBeenCalledTimes(1)
+      })
+    })
+  })
+})

designer/client/src/javascripts/preview.js

@@ -18,6 +18,7 @@ import '~/src/views/preview-components/textfield.njk'
 import '~/src/views/preview-components/ukaddressfield.njk'
 import '~/src/views/preview-components/hiddenfield.njk'
 import '~/src/views/preview-components/paymentfield.njk'
+import '~/src/views/preview-components/geospatialfield.njk'
 import '~/src/views/preview-components/unsupportedquestion.njk'
 
 import { ErrorPreview } from '~/src/javascripts/error-preview/error-preview'

designer/client/src/javascripts/preview.test.js

@@ -51,6 +51,7 @@ jest.mock('~/src/views/preview-components/monthyearfield.njk', () => '')
 jest.mock('~/src/views/preview-components/fileuploadfield.njk', () => '')
 jest.mock('~/src/views/preview-components/hiddenfield.njk', () => '')
 jest.mock('~/src/views/preview-components/paymentfield.njk', () => '')
+jest.mock('~/src/views/preview-components/geospatialfield.njk', () => '')
 jest.mock('~/src/views/preview-components/unsupportedquestion.njk', () => '')
 
 jest.mock('~/src/javascripts/preview/nunjucks-renderer.js')

designer/client/src/javascripts/preview/page-controller/setup-page-controller.js

@@ -25,6 +25,7 @@ import '~/src/views/preview-components/textfield.njk'
 import '~/src/views/preview-components/ukaddressfield.njk'
 import '~/src/views/preview-components/yesnofield.njk'
 import '~/src/views/preview-components/hiddenfield.njk'
+import '~/src/views/preview-components/geospatialfield.njk'
 import '~/src/views/preview-components/unsupportedquestion.njk'
 import '~/src/views/preview-controllers/page-controller.njk'
 import '~/src/views/preview-controllers/summary-controller.njk'

designer/client/src/javascripts/preview/page-controller/setup-page-controller.test.js

@@ -59,6 +59,7 @@ jest.mock('~/src/views/preview-components/datepartsfield.njk', () => '')
 jest.mock('~/src/views/preview-components/monthyearfield.njk', () => '')
 jest.mock('~/src/views/preview-components/fileuploadfield.njk', () => '')
 jest.mock('~/src/views/preview-components/hiddenfield.njk', () => '')
+jest.mock('~/src/views/preview-components/geospatialfield.njk', () => '')
 jest.mock('~/src/views/preview-components/paymentfield.njk', () => '')
 jest.mock('~/src/views/preview-components/unsupportedquestion.njk', () => '')
 jest.mock('~/src/views/page-preview-component/template.njk', () => '')

designer/client/src/javascripts/setup-preview.js

@@ -5,6 +5,7 @@
   DeclarationQuestion,
   EastingNorthingQuestion,
   EmailAddressQuestion,
+  GeospatialQuestion,
   LatLongQuestion,
   ListSortableQuestion,
   LongAnswerQuestion,
@@ -439,6 +440,21 @@
       listeners.setupListeners()
 
       return paymentField
+    },
+    /**
+     * @returns {GeospatialQuestion}
+     */
+    GeospatialField: () => {
+      const questionElements = new QuestionDomElements()
+      const nunjucksRenderer = new NunjucksRenderer(questionElements)
+      const geospatial = new GeospatialQuestion(
+        questionElements,
+        nunjucksRenderer
+      )
+      const listeners = new EventListeners(geospatial, questionElements)
+      listeners.setupListeners()
+
+      return geospatial
     }
   })
 

designer/client/src/javascripts/setup-preview.test.js

@@ -258,4 +258,11 @@ Helium:2
       expect(result).toBeDefined()
     })
   })
+
+  describe('GeospatialField', () => {
+    it('should create Question instance', () => {
+      const result = SetupPreview(ComponentType.GeospatialField)
+      expect(result).toBeDefined()
+    })
+  })
 })