SAA-66: Add child-partner-nationality typeahead page

apps/saa/fields/index.js

@@ -1,4 +1,5 @@
 const hof = require('hof');
+const countries = require('hof').utils.countries();
 const dateComponent = hof.components.date;
 module.exports = {
   'changes-to-contact-details': {
@@ -95,5 +96,14 @@ module.exports = {
     validate: ['required'],
     className: ['govuk-radios', 'govuk-radios--inline'],
     isPageHeading: true
+  },
+  'child-partner-nationality': {
+    mixin: 'select',
+    className: ['typeahead'],
+    validate: ['required'],
+    options: [{
+      value: '',
+      label: 'fields.child-partner-nationality.options.none_selected'
+    }].concat(countries)
   }
 };

apps/saa/index.js

@@ -279,6 +279,7 @@ const steps = {
     next: '/child-partner-nationality'
   },
   '/child-partner-nationality': {
+    fields: ['child-partner-nationality'],
     next: '/evidence-child-partner'
   },
   '/evidence-child-partner': {

apps/saa/sections/summary-data-sections.js

@@ -13,6 +13,11 @@ module.exports = {
       {
         step: '/do-you-need-add-remove-dependant',
         field: 'add-remove-dependant'
+      },
+      {
+        step: '/child-partner-nationality',
+        field: 'child-partner-nationality',
+        dependsOn: 'add-remove-dependant'
       }
     ]
   },

apps/saa/translations/src/en/fields.json

@@ -130,5 +130,11 @@
     "label": "Upload a file",
     "no-files-uploaded": "No files uploaded",
     "files-uploaded": "Files uploaded"
+  },
+  "child-partner-nationality": {
+    "label": "Country of nationality",
+    "options": {
+      "none_selected": "Select a country"
+    }
   }
 }

apps/saa/translations/src/en/pages.json

@@ -150,6 +150,7 @@
     "captionHeading": "Add or remove a child or partner"
   },
   "child-partner-nationality": {
+    "captionHeading": "Add or remove a child or partner",
     "header": "Their country of nationality"
   },
   "evidence-child-partner": {

apps/saa/translations/src/en/validation.json

@@ -56,5 +56,8 @@
     "fileType": "File must be a document (.doc, .docx, .pdf, .rtf, .txt, .odt) or image (.jpeg, .jpg, .png)",
     "supportingEvidenceLimit": "You can only upload up to {{supportingEvidenceLimit}} files. Remove a file before uploading another",
     "isDuplicateFileName": "A file with this name has already been uploaded"
+  },
+  "child-partner-nationality": {
+    "required": "Select their country of nationality"
   }
 }

assets/js/index.js

@@ -1,7 +1,9 @@
 require('hof/frontend/themes/gov-uk/client-js');
 
 const { initFileUpload } = require('./file-upload');
+const { initTypeahead } = require('./typeahead');
 
 document.addEventListener('DOMContentLoaded', () => {
   initFileUpload();
+  initTypeahead();
 });

assets/js/typeahead.js

@@ -0,0 +1,16 @@
+'use strict';
+
+const accessibleAutocomplete = require('accessible-autocomplete');
+
+function initTypeahead() {
+  document
+    .querySelectorAll('.typeahead')
+    .forEach(function applyTypeahead(element) {
+      accessibleAutocomplete.enhanceSelectElement({
+        defaultValue: '',
+        selectElement: element
+      });
+    });
+}
+
+module.exports = { initTypeahead };

assets/scss/app.scss

@@ -284,7 +284,7 @@ pre.looped-records {
   font-family: "GDS Transport", arial, sans-serif;
 }
 
-ul:not(p.govuk-list-label--content + ul):not(.govuk-error-summary__list) {
+ul:not([class]):not(p.govuk-list-label--content + ul) {
   @extend .govuk-list--bullet;
 }
 

test/_unit/assets/typeahead.spec.js

@@ -0,0 +1,74 @@
+'use strict';
+
+jest.mock('accessible-autocomplete', () => ({
+  enhanceSelectElement: jest.fn()
+}));
+jest.mock('hof/frontend/themes/gov-uk/client-js', () => ({}));
+jest.mock('../../../assets/js/file-upload', () => ({
+  initFileUpload: jest.fn()
+}));
+
+const accessibleAutocomplete = require('accessible-autocomplete');
+const { initTypeahead } = require('../../../assets/js/typeahead');
+
+describe('typeahead initialization', () => {
+  afterEach(() => {
+    delete global.document;
+    jest.clearAllMocks();
+  });
+
+  test('enhances each matching select once with an empty default value', () => {
+    const firstSelect = {};
+    const secondSelect = {};
+    global.document = {
+      querySelectorAll: jest.fn().mockReturnValue([firstSelect, secondSelect])
+    };
+
+    initTypeahead();
+
+    expect(global.document.querySelectorAll).toHaveBeenCalledWith('.typeahead');
+    expect(accessibleAutocomplete.enhanceSelectElement).toHaveBeenCalledTimes(2);
+    expect(accessibleAutocomplete.enhanceSelectElement).toHaveBeenNthCalledWith(1, {
+      defaultValue: '',
+      selectElement: firstSelect
+    });
+    expect(accessibleAutocomplete.enhanceSelectElement).toHaveBeenNthCalledWith(2, {
+      defaultValue: '',
+      selectElement: secondSelect
+    });
+  });
+  test('does nothing when there are no matching selects', () => {
+    global.document = {
+      querySelectorAll: jest.fn().mockReturnValue([])
+    };
+
+    expect(() => initTypeahead()).not.toThrow();
+    expect(accessibleAutocomplete.enhanceSelectElement).not.toHaveBeenCalled();
+  });
+
+  test('the entry point enhances each select exactly once', () => {
+    const firstSelect = {};
+    const secondSelect = {};
+    const handlers = {};
+    global.document = {
+      querySelectorAll: jest.fn().mockReturnValue([firstSelect, secondSelect]),
+      addEventListener: jest.fn((event, handler) => {
+        handlers[event] = handler;
+      })
+    };
+
+    jest.isolateModules(() => {
+      const autocomplete = require('accessible-autocomplete');
+      autocomplete.enhanceSelectElement.mockClear();
+
+      require('../../../assets/js/index');
+      expect(handlers.DOMContentLoaded).toEqual(expect.any(Function));
+      handlers.DOMContentLoaded();
+
+      expect(autocomplete.enhanceSelectElement.mock.calls).toEqual([
+        [{ defaultValue: '', selectElement: firstSelect }],
+        [{ defaultValue: '', selectElement: secondSelect }]
+      ]);
+    });
+  });
+});