From 88e85ea01c16e9e31d0e508325d3d5202381a4e2 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Tue, 15 Dec 2020 12:07:28 +0000
Subject: [PATCH] Update liveSearch JS tests and test helpers

Includes a change to make these tests use the
getRadioGroup helper to reduce duplication across
the tests. This also makes a few changes to the
helper so it can produce the HTML required.
---
 tests/javascripts/liveSearch.test.js      | 87 +++++++++++------------
 tests/javascripts/support/helpers/html.js | 11 +--
 2 files changed, 47 insertions(+), 51 deletions(-)

diff --git a/tests/javascripts/liveSearch.test.js b/tests/javascripts/liveSearch.test.js
index ba7422b92..59ff768bd 100644
--- a/tests/javascripts/liveSearch.test.js
+++ b/tests/javascripts/liveSearch.test.js
@@ -29,51 +29,42 @@ describe('Live search', () => {
 
     searchLabelText = "Search branding styles by name";
 
-    function getRadiosHTML (departments) {
-
-      let result = '';
-
-      departments.forEach((department, idx) => result += `
-        <div class="multiple-choice">
-          <input id="${department.id}" name="${department.name}" type="radio" value="${department.id}">
-          <label class="block-label" for="${department.id}">
-            ${department.label}
-          </label>
-        </div>
-      `);
-
-      return result;
-
-    };
-
     beforeEach(() => {
 
-      const departments = [
-        {
-          'label': 'NHS',
-          'id': 'nhs',
-          'name': 'branding'
-        },
-        {
-          'label': 'Department for Work and Pensions',
-          'id': 'dwp',
-          'name': 'branding'
-        },
-        {
-          'label': 'Department for Education',
-          'id': 'dfe',
-          'name': 'branding'
-        },
-        {
-          'label': 'Home Office',
-          'id': 'home-office',
-          'name': 'branding'
-        }
-      ];
+      const departmentData = {
+        name: 'departments',
+        hideLegend: true,
+        fields: [
+          {
+            'label': 'NHS',
+            'id': 'nhs',
+            'name': 'branding',
+            'value': 'nhs'
+          },
+          {
+            'label': 'Department for Work and Pensions',
+            'id': 'dwp',
+            'name': 'branding',
+            'value': 'dwp'
+          },
+          {
+            'label': 'Department for Education',
+            'id': 'dfe',
+            'name': 'branding',
+            'value': 'dfe'
+          },
+          {
+            'label': 'Home Office',
+            'id': 'home-office',
+            'name': 'branding',
+            'value': 'home-office'
+          }
+        ]
+      };
 
       // set up DOM
       document.body.innerHTML = `
-        <div class="live-search js-header" data-module="live-search" data-targets=".multiple-choice">
+        <div class="live-search js-header" data-module="live-search" data-targets=".govuk-radios__item">
           <div class="form-group">
             <label class="form-label" for="search">
                 ${searchLabelText}
@@ -83,13 +74,15 @@ describe('Live search', () => {
           </div>
         </div>
         <form method="post" autocomplete="off" novalidate>
-          ${getRadiosHTML(departments)}
         </form>`;
 
       searchTextbox = document.getElementById('search');
       liveRegion = document.querySelector('.live-search__status');
       list = document.querySelector('form');
 
+      // getRadioGroup returns a DOM node so append once DOM is set up
+      list.appendChild(helpers.getRadioGroup(departmentData));
+
     });
 
     describe("When the page loads", () => {
@@ -99,7 +92,7 @@ describe('Live search', () => {
         // start the module
         window.GOVUK.modules.start();
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(listItems.length);
@@ -114,7 +107,7 @@ describe('Live search', () => {
         // start the module
         window.GOVUK.modules.start();
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(2);
@@ -130,7 +123,7 @@ describe('Live search', () => {
         // start the module
         window.GOVUK.modules.start();
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(1);
@@ -169,7 +162,7 @@ describe('Live search', () => {
         searchTextbox.value = '';
         helpers.triggerEvent(searchTextbox, 'input');
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(listItems.length);
@@ -188,7 +181,7 @@ describe('Live search', () => {
         searchTextbox.value = 'Home';
         helpers.triggerEvent(searchTextbox, 'input');
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(1);
@@ -207,7 +200,7 @@ describe('Live search', () => {
         searchTextbox.value = 'Department for';
         helpers.triggerEvent(searchTextbox, 'input');
 
-        const listItems = list.querySelectorAll('.multiple-choice');
+        const listItems = list.querySelectorAll('.govuk-radios__item');
         const listItemsShowing = Array.from(listItems).filter(item => window.getComputedStyle(item).display !== 'none');
 
         expect(listItemsShowing.length).toEqual(2);
diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js
index 0f7c086fe..8e0826837 100644
--- a/tests/javascripts/support/helpers/html.js
+++ b/tests/javascripts/support/helpers/html.js
@@ -5,11 +5,12 @@ function getRadios (fields, name) {
 
   return fields.map((field, idx) => {
     const count = idx + 1;
+    const id = field.id || `${name}-${count}`;
 
     return `
       <div class="govuk-radios__item">
-        <input class="govuk-radios__input" id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
-        <label class="govuk-label govuk-radios__label" for="${name}-1">
+        <input class="govuk-radios__input" id="${id}" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="govuk-label govuk-radios__label" for="${id}">
           ${field.label}
         </label>
       </div>`;
@@ -20,10 +21,12 @@ function getRadioGroup (data) {
   let radioGroup = document.createElement('div');
 
   radioGroup.classList.add('govuk-form-group');
-  data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  if ('cssClasses' in data) {
+    data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
+  }
   radioGroup.innerHTML = `
     <fieldset class="govuk-fieldset" id="${data.name}">
-      <legend class="govuk-fieldset__legend">
+      <legend class="govuk-fieldset__legend${data.hideLegend ? " govuk-visually-hidden" : ""}">
         ${data.label}
       </legend>
       <div class="govuk-radios">