Merge pull request #3635 from alphagov/make-selection-summary-more-detailed

Make selection summary more detailed

app/assets/javascripts/templateFolderForm.js

@@ -171,9 +171,29 @@
 
     this.selectionStatus = {
       'default': 'Nothing selected',
-      'selected': numSelected => `${numSelected} selected`,
+      'selected': numSelected => {
+        const getString = key => {
+          if (numSelected[key] === 0) {
+            return '';
+          } else if (numSelected[key] === 1) {
+            return `1 ${key.substring(0, key.length - 1)}`;
+          } else {
+            return `${numSelected[key]} ${key}`;
+          }
+        };
+
+        const results = [];
+
+        if (numSelected.templates > 0) {
+          results.push(getString('templates'));
+        }
+        if (numSelected.folders > 0) {
+          results.push(getString('folders'));
+        }
+        return results.join(', ') + ' selected';
+      },
       'update': numSelected => {
-        let message = (numSelected > 0) ? this.selectionStatus.selected(numSelected) : this.selectionStatus.default;
+        let message = (numSelected.total > 0) ? this.selectionStatus.selected(numSelected) : this.selectionStatus.default;
 
         $('.template-list-selected-counter__count').html(message);
         this.$liveRegionCounter.html(message);
@@ -183,10 +203,10 @@
     this.templateFolderCheckboxChanged = function() {
       let numSelected = this.countSelectedCheckboxes();
 
-      if (this.currentState === 'nothing-selected-buttons' && numSelected !== 0) {
+      if (this.currentState === 'nothing-selected-buttons' && numSelected.total !== 0) {
         // user has just selected first item
         this.currentState = 'items-selected-buttons';
-      } else if (this.currentState === 'items-selected-buttons' && numSelected === 0) {
+      } else if (this.currentState === 'items-selected-buttons' && numSelected.total === 0) {
         // user has just deselected last item
         this.currentState = 'nothing-selected-buttons';
       }
@@ -206,7 +226,15 @@
     };
 
     this.countSelectedCheckboxes = function() {
-      return this.$form.find('input:checkbox:checked').length;
+      const allSelected = this.$form.find('input:checkbox:checked');
+      const templates = allSelected.filter((idx, el) => $(el).siblings('.template-list-template').length > 0).length;
+      const folders = allSelected.filter((idx, el) => $(el).siblings('.template-list-folder').length > 0).length;
+      const results = {
+        'templates': templates,
+        'folders': folders,
+        'total': allSelected.length
+      };
+      return results;
     };
 
     this.render = function() {

tests/javascripts/support/helpers/html.js

@@ -39,16 +39,14 @@ function templatesAndFoldersCheckboxes (hierarchy) {
   hierarchy.forEach((node, idx) => {
 
     result += `
-      <div class="template-list-item template-list-item-with-checkbox  template-list-item-without-ancestors">
+      <div class="govuk-checkboxes__item template-list-item template-list-item-with-checkbox template-list-item-without-ancestors">
-        <div class="multiple-choice">
+        <input class="govuk-checkboxes__input" id="templates-or-folder-${idx}" name="templates_and_folders" type="checkbox" value="templates-or-folder-${idx}">
-          <input id="templates-or-folder-${idx}" name="templates_and_folders" type="checkbox" value="templates-or-folder-${idx}">
+        <label class="govuk-checkboxes__label template-list-item-label" for="templates-or-folder-${idx}">
-          <label></label>
+          <span class="govuk-visually-hidden">${node.label}</span>
-        </div>
+        </label>
-        <h2 class="message-name">
+        <a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="govuk-link govuk-link--no-visited-state template-list-${node.type === 'folder' ? 'folder' : 'template'}">
-          <a href="/services/6658542f-0cad-491f-bec8-ab8457700ead/templates/all/folders/3d057d9a-51fc-45ea-8b63-0003206350a6" class="govuk-link govuk-link--no-visited-state template-list-${node.type === 'folder' ? 'folder' : 'template'}">
+          <span class="live-search-relevant">${node.label}</span>
-            <span class="live-search-relevant">${node.label}</span>
+        </a>
-          </a>
-        </h2>
         ${node.meta}
       </div>`;
 

tests/javascripts/templateFolderForm.test.js

@@ -610,7 +610,7 @@ describe('TemplateFolderForm', () => {
 
       test("the content of the counter should reflect the selection", () => {
 
-        expect(visibleCounterText).toEqual('2 selected');
+        expect(visibleCounterText).toEqual('1 template, 1 folder selected');
 
       });
 
@@ -781,4 +781,70 @@ describe('TemplateFolderForm', () => {
 
   });
 
+  describe("Additional selection counter scenarios", () => {
+
+    let templateFolderCheckboxes;
+
+    beforeEach(() => {
+
+      // start module
+      window.GOVUK.modules.start();
+
+      templateFolderCheckboxes = getTemplateFolderCheckboxes();
+      visibleCounterText = getVisibleCounter().textContent.trim();
+      hiddenCounterText = getHiddenCounter().textContent.trim();
+
+      formControls = templateFolderForm.querySelector('#sticky_template_forms');
+
+      // reset sticky JS mocks called when the module starts
+      resetStickyMocks();
+
+    });
+
+    afterEach(() => resetStickyMocks());
+
+    describe("When just templates are selected", () => {
+
+      test("the content of both visible and hidden counters should match", () => {
+
+        helpers.triggerEvent(templateFolderCheckboxes[1], 'click');
+        helpers.triggerEvent(templateFolderCheckboxes[2], 'click');
+
+        expect(visibleCounterText).toEqual(hiddenCounterText);
+
+      });
+
+      test("the content of the counter should reflect the selection", () => {
+
+        helpers.triggerEvent(templateFolderCheckboxes[1], 'click');
+        helpers.triggerEvent(templateFolderCheckboxes[2], 'click');
+
+        expect(visibleCounterText).toEqual('2 templates selected');
+
+      });
+
+    });
+
+    describe("When just folders are selected", () => {
+
+      test("the content of both visible and hidden counters should match", () => {
+
+        helpers.triggerEvent(templateFolderCheckboxes[0], 'click');
+
+        expect(visibleCounterText).toEqual(hiddenCounterText);
+
+      });
+
+      test("the content of the counter should reflect the selection", () => {
+
+        helpers.triggerEvent(templateFolderCheckboxes[0], 'click');
+
+        expect(visibleCounterText).toEqual('1 folder selected');
+
+      });
+
+    });
+
+  });
+
 });