PR changes

app/assets/javascripts/collapsibleCheckboxes.js

@@ -1,8 +1,6 @@
 (function (window) {
   "use strict";
 
-  const USWDS = window.USWDS || {};
-
   function Summary (module) {
     this.module = module;
     this.el = module.formGroup.querySelector('.selection-summary');
@@ -26,9 +24,11 @@
 
     if (this.fieldLabel === 'folder') { this.text.classList.add('selection-summary__text--folders'); }
 
-    this.el.setAttribute('id', hint.getAttribute('id'));
+    if (hint) {
+      this.el.setAttribute('id', hint.getAttribute('id'));
+      hint.remove();
+    }
     this.el.appendChild(this.text);
-    hint.remove();
   };
   Summary.prototype.update = function(selection) {
     let template;
@@ -222,8 +222,6 @@
     this.updateToggleButtonText();
   };
   CollapsibleCheckboxes.prototype.bindEvents = function() {
-    const self = this;
-
     this.formGroup.addEventListener('click', (e) => {
       if (e.target.closest('.usa-button')) {
         this.handleClick.call(this, e);

app/assets/javascripts/radioSelect.js

@@ -4,6 +4,16 @@
 
   var Modules = window.NotifyModules;
 
+  const escapeHtml = (unsafe) => {
+    if (!unsafe) return '';
+    return String(unsafe)
+      .replace(/&/g, "&")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  };
+
   // Template functions for rendering component states
   let renderStates = {
     'initial': function(data) {
@@ -11,14 +21,14 @@
         ${data.showNowAsDefault ? `
           <div class="radio-select__column margin-y-2">
             <div class="usa-radio">
-              <input class="usa-radio__input" checked="checked" id="${data.name}-0" name="${data.name}" type="radio" value="">
-              <label class="usa-radio__label" for="${data.name}-0">Now</label>
+              <input class="usa-radio__input" checked="checked" id="${escapeHtml(data.name)}-0" name="${escapeHtml(data.name)}" type="radio" value="">
+              <label class="usa-radio__label" for="${escapeHtml(data.name)}-0">Now</label>
             </div>
           </div>
         ` : ''}
         <div class="radio-select__column margin-y-2">
           ${data.categories.map(category =>
-            `<input type='button' class='usa-button usa-button--outline radio-select__button--category' aria-expanded="false" value='${category}' />`
+            `<input type='button' class='usa-button usa-button--outline radio-select__button--category' aria-expanded="false" value='${escapeHtml(category)}' />`
           ).join('')}
         </div>
       `;
@@ -28,16 +38,16 @@
         ${data.showNowAsDefault ? `
           <div class="radio-select__column margin-y-2">
             <div class="usa-radio">
-              <input class="usa-radio__input" checked="checked" id="${data.name}-0" name="${data.name}" type="radio" value="">
-              <label class="usa-radio__label" for="${data.name}-0">Now</label>
+              <input class="usa-radio__input" checked="checked" id="${escapeHtml(data.name)}-0" name="${escapeHtml(data.name)}" type="radio" value="">
+              <label class="usa-radio__label" for="${escapeHtml(data.name)}-0">Now</label>
             </div>
           </div>
         ` : ''}
         <div class="radio-select__column margin-y-2">
           ${data.choices.map(choice => `
             <div class="usa-radio js-option">
-              <input class="usa-radio__input" type="radio" value="${choice.value}" id="${choice.id}" name="${data.name}" />
-              <label class="usa-radio__label" for="${choice.id}">${choice.label}</label>
+              <input class="usa-radio__input" type="radio" value="${escapeHtml(choice.value)}" id="${escapeHtml(choice.id)}" name="${escapeHtml(data.name)}" />
+              <label class="usa-radio__label" for="${escapeHtml(choice.id)}">${escapeHtml(choice.label)}</label>
             </div>
           `).join('')}
           <input type='button' class='usa-button usa-button--outline radio-select__button--done margin-top-4' aria-expanded='true' value='Back to select a new time' />
@@ -49,16 +59,16 @@
         ${data.showNowAsDefault ? `
           <div class="radio-select__column margin-y-2">
             <div class="usa-radio">
-              <input class="usa-radio__input" id="${data.name}-0" name="${data.name}" type="radio" value="">
-              <label class="usa-radio__label" for="${data.name}-0">Now</label>
+              <input class="usa-radio__input" id="${escapeHtml(data.name)}-0" name="${escapeHtml(data.name)}" type="radio" value="">
+              <label class="usa-radio__label" for="${escapeHtml(data.name)}-0">Now</label>
             </div>
           </div>
         ` : ''}
         <div class="radio-select__column margin-y-2">
           ${data.choices.map(choice => `
             <div class="usa-radio">
-              <input class="usa-radio__input" checked="checked" type="radio" value="${choice.value}" id="${choice.id}" name="${data.name}" />
-              <label class="usa-radio__label" for="${choice.id}">${choice.label}</label>
+              <input class="usa-radio__input" checked="checked" type="radio" value="${escapeHtml(choice.value)}" id="${escapeHtml(choice.id)}" name="${escapeHtml(data.name)}" />
+              <label class="usa-radio__label" for="${escapeHtml(choice.id)}">${escapeHtml(choice.label)}</label>
             </div>
           `).join('')}
         </div>

tests/javascripts/collapsibleCheckboxes.test.js

@@ -658,4 +658,40 @@ describe('Collapsible fieldset', () => {
 
   });
 
+  describe("When there is no hint element", () => {
+
+    beforeEach(() => {
+
+      document.body.innerHTML =
+        `<div class="selection-wrapper" data-module="collapsible-checkboxes" data-field-label="folder">
+          <div class="usa-form-group">
+            <fieldset class="usa-fieldset" id="folder_permissions">
+              <legend class="usa-fieldset__legend usa-fieldset__legend--s">
+                Folders this team member can see
+                <span class="selection-summary" role="region" aria-live="polite"></span>
+              </legend>
+              <ul class="usa-checkbox-group">
+                ${_checkboxes(1, 3)}
+              </ul>
+            </fieldset>
+          </div>
+        </div>`;
+
+      wrapper = document.querySelector('.selection-wrapper');
+      formGroup = wrapper.querySelector('.usa-form-group');
+
+      window.NotifyModules.start();
+
+    });
+
+    test("should initialize without errors", () => {
+
+      const summary = formGroup.querySelector('.selection-summary');
+      expect(summary).not.toBeNull();
+      expect(summary.querySelector('.selection-summary__text')).not.toBeNull();
+
+    });
+
+  });
+
 });

tests/javascripts/liveSearch.test.js

@@ -283,13 +283,13 @@ describe('Live search', () => {
       const users = [
         {
           "label": "Template editor",
-          "email": "template-editor@nhs.uk",
+          "email": "template-editor@example.gov",
           "permissions" : ["Add and edit templates"],
           "checked": true
         },
         {
           "label": "Administrator",
-          "email": "admin@nhs.uk",
+          "email": "admin@example.gov",
           "permissions" : ["Send messages", "Add and edit templates", "Manage settings, team and usage", "API integration"],
           "checked": false
         }