Merge pull request #170 from DEFRA/DSFAAP-799-name-simple

DSFAAP-799: port full name to answer model template

src/server/common/model/answer/fullName/fullName.js

@@ -2,6 +2,8 @@ import Joi from 'joi'
 import { AnswerModel } from '../answer-model.js'
 import { validateAnswerAgainstSchema } from '../validation.js'
 
+/** @import { AnswerViewModelOptions } from '../answer-model.js' */
+
 const maxLength = 50
 
 export const fullNamePayloadSchema = Joi.object({
@@ -63,6 +65,19 @@ export class FullNameAnswer extends AnswerModel {
     return validateAnswerAgainstSchema(fullNamePayloadSchema, this._data ?? {})
   }
 
+  /**
+   * @param {AnswerViewModelOptions} options
+   */
+  viewModel({ validate }) {
+    const viewModel = { value: this.value }
+
+    if (validate) {
+      viewModel.errors = this.validate().errors
+    }
+
+    return viewModel
+  }
+
   _extractFields({ firstName, lastName }) {
     return { firstName, lastName }
   }

src/server/common/model/answer/fullName/fullName.njk

@@ -0,0 +1,40 @@
+{% from "govuk/components/input/macro.njk" import govukInput %}
+{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
+{% set viewModel = answer.viewModel(viewModelOptions) %}
+{% set value = viewModel.value %}
+{% set errors = viewModel.errors %}
+
+{% call govukFieldset() %}
+  {{
+    govukInput
+    ({
+        label:
+        {
+            text: "First name",
+            classes: "",
+            isPageHeading: false
+        },
+        id: "firstName",
+        name: "firstName",
+        errorMessage: errors.firstName,
+        value: value.firstName,
+        classes: "govuk-input--width-20"
+    })
+  }}
+  {{
+    govukInput
+    ({
+        label:
+        {
+            text: "Last name",
+            classes: "",
+            isPageHeading: false
+        },
+        id: "lastName",
+        name: "lastName",
+        errorMessage: errors.lastName,
+        value: value.lastName,
+        classes: "govuk-input--width-20"
+    })
+  }}
+{% endcall %}

src/server/common/model/answer/fullName/fullName.test.js

@@ -118,3 +118,25 @@ describe('#FullName.html', () => {
     expect(fullName.html).toBe(' ')
   })
 })
+
+describe('FullName.viewModel', () => {
+  const longInput = new Array(51).fill('a').join('')
+  const invalidFullName = {
+    firstName: longInput,
+    lastName: longInput
+  }
+  const name = new FullNameAnswer(invalidFullName)
+
+  it('should return the value without errors (if validate is false)', () => {
+    expect(name.viewModel({ validate: false })).toEqual({
+      value: name.value
+    })
+  })
+
+  it('should return the value with errors (if valiate is true)', () => {
+    expect(name.viewModel({ validate: true })).toEqual({
+      value: name.value,
+      errors: name.validate().errors
+    })
+  })
+})

src/server/licence/fullName/__snapshots__/index.test.js.snap

@@ -12,15 +12,16 @@ exports[`FullNamePage FullNamePage.content should render expected response and c
       <div class="govuk-grid-column-two-thirds">
         <input type="hidden" name="crumb" value="csrf-value">
         <input type="hidden" name="nextPage" value="">
+
 <fieldset class="govuk-fieldset">
-    <div class="govuk-form-group">
+  <div class="govuk-form-group">
   <label class="govuk-label" for="firstName">
     First name
   </label>
   <input class="govuk-input govuk-input--width-20" id="firstName" name="firstName" type="text">
 </div>
 
-    <div class="govuk-form-group">
+  <div class="govuk-form-group">
   <label class="govuk-label" for="lastName">
     Last name
   </label>

src/server/licence/fullName/index.njk

@@ -1,39 +1,4 @@
-{% from "govuk/components/input/macro.njk" import govukInput %}
-{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
 {% extends 'layouts/questions.njk' %}
 {% block questions %}
-  {% call govukFieldset() %}
-    {{
-      govukInput
-      ({
-          label:
-          {
-              text: "First name",
-              classes: "",
-              isPageHeading: false
-          },
-          id: "firstName",
-          name: "firstName",
-          errorMessage: errors.firstName,
-          value: value.firstName,
-          classes: "govuk-input--width-20"
-      })
-    }}
-    {{
-      govukInput
-      ({
-          label:
-          {
-              text: "Last name",
-              classes: "",
-              isPageHeading: false
-          },
-          id: "lastName",
-          name: "lastName",
-          errorMessage: errors.lastName,
-          value: value.lastName,
-          classes: "govuk-input--width-20"
-      })
-    }}
-  {% endcall %}
+  {% include "model/answer/fullName/fullName.njk" %}
 {% endblock %}