From 5819b5da2d44423016274d6ee0958f05ab679b43 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Mon, 21 Sep 2020 20:27:47 +0100
Subject: [PATCH] Change context for cancel link

Every other control refers to the group name so
the cancel link should too.
---
 app/assets/javascripts/templateFolderForm.js | 10 +++---
 tests/javascripts/templateFolderForm.test.js | 32 ++++++++++++++++++++
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/templateFolderForm.js b/app/assets/javascripts/templateFolderForm.js
index 0b49494c9..aa2a1d4c3 100644
--- a/app/assets/javascripts/templateFolderForm.js
+++ b/app/assets/javascripts/templateFolderForm.js
@@ -19,10 +19,10 @@
       this.states = [
         {key: 'nothing-selected-buttons', $el: this.$form.find('#nothing_selected'), cancellable: false},
         {key: 'items-selected-buttons', $el: this.$form.find('#items_selected'), cancellable: false},
-        {key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_folder_radios fieldset', true)},
-        {key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_new_folder_name', false)},
-        {key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_folder_name', false)},
-        {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_template_form fieldset', true)}
+        {key: 'move-to-existing-folder', $el: this.$form.find('#move_to_folder_radios'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_folder_radios fieldset', true), action: 'move to folder'},
+        {key: 'move-to-new-folder', $el: this.$form.find('#move_to_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#move_to_new_folder_name', false), action: 'move to new folder'},
+        {key: 'add-new-folder', $el: this.$form.find('#add_new_folder_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_folder_name', false), action: 'new folder'},
+        {key: 'add-new-template', $el: this.$form.find('#add_new_template_form'), cancellable: true, setFocus: this.getFocusRoutine('#add_new_template_form fieldset', true), action: 'new template'}
       ];
 
       // cancel/clear buttons only relevant if JS enabled, so
@@ -88,7 +88,7 @@
           this.selectActionButtons(selector);
         },
         'cancelSelector': selector,
-        'nonvisualText': "this step"
+        'nonvisualText': state.action
       });
 
       state.$el.find('[type=submit]').after($cancel);
diff --git a/tests/javascripts/templateFolderForm.test.js b/tests/javascripts/templateFolderForm.test.js
index ab884351a..06b498f72 100644
--- a/tests/javascripts/templateFolderForm.test.js
+++ b/tests/javascripts/templateFolderForm.test.js
@@ -386,6 +386,8 @@ describe('TemplateFolderForm', () => {
       const cancelLink = formControls.querySelector('.js-cancel');
 
       expect(cancelLink).not.toBeNull();
+      expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
+      expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('new template');
 
     });
 
@@ -471,6 +473,16 @@ describe('TemplateFolderForm', () => {
 
     });
 
+    test("should show a 'Cancel' link", () => {
+
+      const cancelLink = formControls.querySelector('.js-cancel');
+
+      expect(cancelLink).not.toBeNull();
+      expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
+      expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('new folder');
+
+    });
+
     test("should focus the textbox", () => {
 
       expect(document.activeElement).toBe(textbox);
@@ -663,6 +675,16 @@ describe('TemplateFolderForm', () => {
 
       });
 
+      test("should show a 'Cancel' link", () => {
+
+        const cancelLink = formControls.querySelector('.js-cancel');
+
+        expect(cancelLink).not.toBeNull();
+        expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
+        expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('move to folder');
+
+      });
+
       test("focus the 'Choose a folder' fieldset", () => {
 
         expect(document.activeElement).toBe(formControls.querySelector('#move_to'));
@@ -735,6 +757,16 @@ describe('TemplateFolderForm', () => {
 
       });
 
+      test("should show a 'Cancel' link", () => {
+
+        const cancelLink = formControls.querySelector('.js-cancel');
+
+        expect(cancelLink).not.toBeNull();
+        expect(cancelLink.querySelector('.govuk-visually-hidden')).not.toBeNull();
+        expect(cancelLink.querySelector('.govuk-visually-hidden').textContent.trim()).toEqual('move to new folder');
+
+      });
+
       test("should focus the textbox", () => {
 
         expect(document.activeElement).toBe(textbox);