Coverage, after review and Sonar

Author: jbarnsley10

src/client/javascripts/geospatial-map.js

@@ -7,6 +7,7 @@ import {
   getCentroidGridRef,
   getCoordinateGridRef
 } from '~/src/client/javascripts/map.js'
+import { formatDelimtedList } from '~/src/client/javascripts/utils.js'
 
 const helpPanelConfig = {
   showLabel: true,
@@ -56,29 +57,29 @@ function getLineOrShapeText(allowLine, allowShape) {
 function getAllowedTypesPhrase(allowPoint, allowLine, allowShape) {
   const items = []
 
-  if (allowPoint) items.push('points')
-  if (allowLine) items.push('lines')
-  if (allowShape) items.push('shapes')
-
-  if (items.length === 0) return ''
-
-  if (items.length === 1) {
-    return items[0]
+  if (allowPoint) {
+    items.push('points')
+  }
+  if (allowLine) {
+    items.push('lines')
+  }
+  if (allowShape) {
+    items.push('shapes')
   }
 
-  if (items.length === 2) {
-    return `${items[0]} or ${items[1]}`
+  if (items.length === 0) {
+    return ''
   }
 
-  return `${items[0]}, ${items[1]} or ${items[2]}`
+  return formatDelimtedList(items, ',', 'or')
 }
 
 /**
  * @param {boolean} allowPoint
  * @param {boolean} allowLine
  * @param {boolean} allowShape
  */
-function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
+export function getHelpPanelHtml(allowPoint, allowLine, allowShape) {
   const lineOrShapeText = getLineOrShapeText(allowLine, allowShape)
   const doneExtra = lineOrShapeText
     ? `<li>Double‑click, or select 'Done', when you have finished drawing ${lineOrShapeText}</li>`

src/client/javascripts/utils.js

@@ -0,0 +1,22 @@
+/**
+ * Builds a text representation of a list in the form 'a, b, c, d or e'
+ * @param {string[]} items
+ * @param {string} separator
+ * @param {string} lastSpearator
+ */
+export function formatDelimtedList(items, separator, lastSpearator) {
+  if (items.length === 0) {
+    return ''
+  }
+
+  if (items.length === 1) {
+    return items[0]
+  }
+
+  if (items.length === 2) {
+    return `${items[0]} ${lastSpearator} ${items[1]}`
+  }
+
+  const last = items.pop()
+  return `${items.join(`${separator} `)} ${lastSpearator} ${last}`
+}

test/client/javascripts/map.test.js

@@ -1,6 +1,7 @@
 import {
   createFeatureHTML,
-  createFeaturesHTML
+  createFeaturesHTML,
+  getHelpPanelHtml
 } from '~/src/client/javascripts/geospatial-map.js'
 import {
   formSubmitFactory,
@@ -289,6 +290,44 @@ describe('Maps Client JS', () => {
     })
   })
 
+  describe('getHelpPanelHtml', () => {
+    it('should handle only point', () => {
+      expect(getHelpPanelHtml(true, false, false)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add points to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Give the location a name</li></ul>'
+      )
+    })
+    it('should handle only line', () => {
+      expect(getHelpPanelHtml(false, true, false)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add lines to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a line</li><li>Give the location a name</li></ul>'
+      )
+    })
+    it('should handle only shape', () => {
+      expect(getHelpPanelHtml(false, false, true)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add shapes to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a shape</li><li>Give the location a name</li></ul>'
+      )
+    })
+    it('should handle point and line', () => {
+      expect(getHelpPanelHtml(true, true, false)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add points or lines to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a line</li><li>Give the location a name</li></ul>'
+      )
+    })
+    it('should handle point and shape', () => {
+      expect(getHelpPanelHtml(true, false, true)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add points or shapes to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a shape</li><li>Give the location a name</li></ul>'
+      )
+    })
+    it('should handle line and shape', () => {
+      expect(getHelpPanelHtml(false, true, true)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add lines or shapes to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a line or shape</li><li>Give the location a name</li></ul>'
+      )
+    })
+    it('should handle point, line and shape', () => {
+      expect(getHelpPanelHtml(true, true, true)).toBe(
+        '<p class="govuk-body-s govuk-!-margin-bottom-2">You can add points, lines or shapes to the map.</p><ul class="govuk-list govuk-list--number govuk-body-s"><li>Search for a county, place or postcode</li><li>Use the + and - icons to zoom in and out</li><li>Double‑click, or select \'Done\', when you have finished drawing a line or shape</li><li>Give the location a name</li></ul>'
+      )
+    })
+  })
+
   describe('Easting northing component', () => {
     beforeEach(() => {
       document.body.innerHTML = `

test/client/javascripts/utils.test.js

@@ -0,0 +1,25 @@
+import { formatDelimtedList } from '~/src/client/javascripts/utils.js'
+
+describe('utils', () => {
+  describe('formatDelimitedList', () => {
+    it('should handle empty list', () => {
+      expect(formatDelimtedList([], ',', 'or')).toBe('')
+    })
+
+    it('should handle one item', () => {
+      expect(formatDelimtedList(['item1'], ',', 'or')).toBe('item1')
+    })
+
+    it('should handle two items', () => {
+      expect(formatDelimtedList(['item1', 'item2'], ',', 'or')).toBe(
+        'item1 or item2'
+      )
+    })
+
+    it('should handle three items', () => {
+      expect(formatDelimtedList(['item1', 'item2', 'item3'], ',', 'or')).toBe(
+        'item1, item2 or item3'
+      )
+    })
+  })
+})