From 2fdf8161d2fef9407b7f408dd4234727b23cc668 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Wed, 28 Aug 2019 11:06:27 +0100
Subject: [PATCH] Fix radios helpers

They were using a 'name' property which wasn't
being set in the data. Radios share the same name
attribute so they can get it from the parent
group.

Also includes fixes for tests where the original
API is used.
---
 .../stick-to-window-when-scrolling.test.js           | 12 ++++++------
 tests/javascripts/support/helpers/html.js            | 12 ++++++------
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/tests/javascripts/stick-to-window-when-scrolling.test.js b/tests/javascripts/stick-to-window-when-scrolling.test.js
index fec68663f..32bacaf9f 100644
--- a/tests/javascripts/stick-to-window-when-scrolling.test.js
+++ b/tests/javascripts/stick-to-window-when-scrolling.test.js
@@ -472,8 +472,8 @@ describe("Stick to top/bottom of window when scrolling", () => {
         // add another sticky element before the form footer
         radios = helpers.getRadioGroup({
           cssClasses: ['js-stick-at-top-when-scrolling'],
-          name: 'send-time',
-          label: 'send time',
+          name: 'choose-send-time',
+          label: 'Choose send time',
           fields: [
             {
               label: 'Now',
@@ -604,7 +604,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
                 }
               });
 
-            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields));
+            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields, 'days'));
 
             radios.offsetHeight = 475;
 
@@ -1146,8 +1146,8 @@ describe("Stick to top/bottom of window when scrolling", () => {
         // add another sticky element before the form footer
         radios = helpers.getRadioGroup({
           cssClasses: ['js-stick-at-bottom-when-scrolling'],
-          name: 'send-time',
-          label: 'Send time',
+          name: 'choose-send-time',
+          label: 'Choose send time',
           fields: [
             {
               label: 'Now',
@@ -1280,7 +1280,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
                 }
               });
 
-            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields));
+            radios.querySelector('fieldset').insertAdjacentHTML('beforeend', helpers.getRadios(fields, 'days'));
 
             radios.offsetHeight = 475;
 
diff --git a/tests/javascripts/support/helpers/html.js b/tests/javascripts/support/helpers/html.js
index 7b3d78eb4..e0b8aa22e 100644
--- a/tests/javascripts/support/helpers/html.js
+++ b/tests/javascripts/support/helpers/html.js
@@ -1,6 +1,6 @@
 // helpers for generating patterns of HTML
 
-function getRadios (fields) {
+function getRadios (fields, name) {
   const result = '';
 
   return fields.map((field, idx) => {
@@ -8,8 +8,8 @@ function getRadios (fields) {
 
     return `
       <div class="multiple-choice">
-        <input id="choose-${field.name}-1" name="choose-${field.name}-1" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
-        <label class="block-label" for="choose-${field.name}-1">
+        <input id="${name}-1" name="${name}" type="radio" value="${field.value}" ${field.checked ? 'checked' : ''}>
+        <label class="block-label" for="${name}-1">
           ${field.label}
         </label>
       </div>`;
@@ -22,11 +22,11 @@ function getRadioGroup (data) {
   data.cssClasses.forEach(cssClass => radioGroup.classList.add(cssClass));
   radioGroup.innerHTML = `
     <div class="form-group ">
-      <fieldset id="choose-${data.name}">
+      <fieldset id="${data.name}">
         <legend class="form-label">
-           Choose ${data.label}
+          ${data.label}
         </legend>
-        ${getRadios(data.fields)}
+        ${getRadios(data.fields, data.name)}
       </fieldset>
     </div>`;