feat(AHWR-460): Update Species Selection Page (#421)

app/routes/endemics/which-species-ms.js

@@ -12,6 +12,7 @@ const urlPrefix = require('../../config').urlPrefix
 const pageUrl = `${urlPrefix}/${endemicsWhichSpecies}`
 const backLink = claimDashboard
 const errorMessage = { text: 'Select which species you are claiming for' }
+const view = `${endemicsWhichSpecies}-ms`
 
 const getHandler = {
   method: 'GET',
@@ -20,7 +21,7 @@ const getHandler = {
     handler: async (request, h) => {
       const endemicsClaimData = getEndemicsClaim(request)
       // to do - customise the view for MS as it has different content
-      return h.view(endemicsWhichSpecies, {
+      return h.view(view, {
         ...(endemicsClaimData?.typeOfLivestock && {
           previousAnswer: endemicsClaimData.typeOfLivestock
         }),
@@ -44,7 +45,7 @@ const postHandler = {
       failAction: (request, h, err) => {
         request.logger.setBindings({ err })
         return h
-          .view(endemicsWhichSpecies, {
+          .view(view, {
             errorMessage,
             backLink
           })

app/views/endemics/which-species-ms.njk

@@ -0,0 +1,65 @@
+{% extends './layouts/layout.njk' %}
+
+{% block pageTitle %}Which species are you claiming for? - {{ serviceName }} - GOV.UK{% endblock %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+        text: "Back",
+        href: backLink
+      }) }}
+{% endblock %}
+
+{% block content %}
+  <div class="govuk-grid-row govuk-width-container govuk-!-static-margin-top-0">
+    <div class="govuk-grid-column-two-thirds govuk-!-static-padding-0">
+      {% if errorMessage %}
+        {{ govukErrorSummary({
+          titleText: "There is a problem",
+          errorList:[{
+            text: errorMessage.text,
+              href: "#typeOfLivestock"
+          }]
+        }) }}
+      {% endif %}
+      <h1 class="govuk-heading-l">Which species are you claiming for?</h1>
+
+    <form method="POST" autocomplete="off" novalidate="novalidate">
+      <input type="hidden" name="crumb" value="{{crumb}}"/>
+
+      {{ govukRadios({
+          id: "typeOfLivestock",
+          name: "typeOfLivestock",
+          errorMessage: errorMessage,
+          items: [
+            {
+              value: "beef",
+              text: "Beef cattle",
+              checked: previousAnswer === "beef"
+            },
+            {
+              value: "dairy",
+              text: "Dairy cattle",
+              checked: previousAnswer === "dairy"
+            },
+            {
+              value: "pigs",
+              text: "Pigs",
+              checked: previousAnswer === "pigs"
+            },
+            {
+              value: "sheep",
+              text: "Sheep",
+              checked: previousAnswer === "sheep"
+            }
+          ]
+        })
+      }}
+      {{ govukButton({
+          text: "Continue",
+          attributes: {id: "btnContinue"},
+          preventDoubleClick: true
+        })
+      }}
+    </form>
+  </div>
+{% endblock %}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ffc-ahwr-farmer-claim",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Web frontend for farmer claim journey",
   "homepage": "https://github.com/DEFRA/ffc-ahwr-farmer-claim",
   "main": "app/index.js",

test/integration/narrow/routes/endemics/which-species-ms.test.js

@@ -30,56 +30,79 @@ describe('Endemics which species test', () => {
     crumb = await getCrumbs(global.__SERVER__)
   })
 
-  test('Sheep should be selected when typeOfLivestock is sheep', async () => {
+  describe('GET claim/endemics/which-species', () => {
+    test('should render page when no previous session exists', async () => {
+      const options = {
+        method: 'GET',
+        auth,
+        url
+      }
+
+      const res = await global.__SERVER__.inject(options)
+      const $ = cheerio.load(res.payload)
+
+      expect(res.statusCode).toBe(200)
+      expect($('title').text().trim()).toContain('Which species are you claiming for? - Get funding to improve animal health and welfare - GOV.UK')
+      expect($('h1').text().trim()).toMatch('Which species are you claiming for?')
+      expect($('.govuk-radios__item').length).toEqual(4)
+      expect($('.govuk-back-link').attr('href')).toContain('vet-visits')
+    })
+  })
+
+  test.each([
+    { typeOfLivestock: 'beef', radio: 'Beef cattle' },
+    { typeOfLivestock: 'dairy', radio: 'Dairy cattle' },
+    { typeOfLivestock: 'pigs', radio: 'Pigs' },
+    { typeOfLivestock: 'sheep', radio: 'Sheep' }
+  ])('should select $radio when previous session livestock is $typeOfLivestock', async ({ typeOfLivestock, radio }) => {
     const options = {
       method: 'GET',
       auth,
       url
     }
 
-    getEndemicsClaim.mockReturnValue({ typeOfLivestock: 'sheep' })
+    getEndemicsClaim.mockReturnValue({ typeOfLivestock })
 
     const res = await global.__SERVER__.inject(options)
-    const $ = cheerio.load(res.payload)
-    const typeOfLivestock = 'sheep'
 
-    expect($('input[name="typeOfLivestock"]:checked').val()).toEqual(
-      typeOfLivestock
-    )
+    const $ = cheerio.load(res.payload)
+    expect($('input[name="typeOfLivestock"]:checked').next('label').text().trim()).toEqual(radio)
     expect($('.govuk-back-link').text()).toMatch('Back')
   })
-  test('Continue without selected livestock should return error', async () => {
-    const options = {
-      method: 'POST',
-      auth,
-      url,
-      headers: { cookie: `crumb=${crumb}` },
-      payload: { crumb, typeOfLivestock: '' }
-    }
 
-    getEndemicsClaim.mockReturnValue({})
+  describe('POST claim/endemics/which-species', () => {
+    test('should display error when livestock not selected', async () => {
+      const options = {
+        method: 'POST',
+        auth,
+        url,
+        headers: { cookie: `crumb=${crumb}` },
+        payload: { crumb, typeOfLivestock: '' }
+      }
+      getEndemicsClaim.mockReturnValue({})
 
-    const res = await global.__SERVER__.inject(options)
-    const $ = cheerio.load(res.payload)
-    const errorMessage = 'Select which species you are claiming for'
+      const res = await global.__SERVER__.inject(options)
 
-    expect($('p.govuk-error-message').text()).toMatch(errorMessage)
-  })
-  test('Continue with Sheep seleceted as a livestock', async () => {
-    const options = {
-      method: 'POST',
-      auth,
-      url,
-      headers: { cookie: `crumb=${crumb}` },
-      payload: { crumb, typeOfLivestock: 'sheep' }
-    }
+      const $ = cheerio.load(res.payload)
+      expect($('p.govuk-error-message').text()).toMatch('Select which species you are claiming for')
+      expect(res.statusCode).toBe(400)
+    })
 
-    getEndemicsClaim.mockReturnValue({ typeOfLivestock: 'sheep' })
+    test('should redirect to next page when livestock selected', async () => {
+      const options = {
+        method: 'POST',
+        auth,
+        url,
+        headers: { cookie: `crumb=${crumb}` },
+        payload: { crumb, typeOfLivestock: 'sheep' }
+      }
+      getEndemicsClaim.mockReturnValue({ typeOfLivestock: 'sheep' })
 
-    const res = await global.__SERVER__.inject(options)
+      const res = await global.__SERVER__.inject(options)
 
-    expect(res.statusCode).toBe(302)
-    expect(res.headers.location).toEqual('/claim/endemics/date-of-visit')
-    expect(setEndemicsClaimMock).toHaveBeenCalled()
+      expect(res.statusCode).toBe(302)
+      expect(res.headers.location).toEqual('/claim/endemics/date-of-visit')
+      expect(setEndemicsClaimMock).toHaveBeenCalled()
+    })
   })
 })