refactor: switch to existing buttonEnabled helper

Author: samuelallan72

openassessment/xblock/static/dist/manifest.json

@@ -4,10 +4,10 @@
   "openassessment-editor-textarea.js.map": "/openassessment-editor-textarea.cbb31e4372be87d437fb.js.map",
   "openassessment-editor-tinymce.js": "/openassessment-editor-tinymce.2a1e66e98a2a1132f633.js",
   "openassessment-editor-tinymce.js.map": "/openassessment-editor-tinymce.2a1e66e98a2a1132f633.js.map",
-  "openassessment-lms.css": "/openassessment-lms.3b32189187e8e2d3e0c3.css",
-  "openassessment-lms.js": "/openassessment-lms.3b32189187e8e2d3e0c3.js",
-  "openassessment-lms.css.map": "/openassessment-lms.3b32189187e8e2d3e0c3.css.map",
-  "openassessment-lms.js.map": "/openassessment-lms.3b32189187e8e2d3e0c3.js.map",
+  "openassessment-lms.css": "/openassessment-lms.1d1152611b06737ce755.css",
+  "openassessment-lms.js": "/openassessment-lms.1d1152611b06737ce755.js",
+  "openassessment-lms.css.map": "/openassessment-lms.1d1152611b06737ce755.css.map",
+  "openassessment-lms.js.map": "/openassessment-lms.1d1152611b06737ce755.js.map",
   "openassessment-ltr.css": "/openassessment-ltr.97990de9668aaa4cd1d5.css",
   "openassessment-ltr.js": "/openassessment-ltr.97990de9668aaa4cd1d5.js",
   "openassessment-ltr.css.map": "/openassessment-ltr.97990de9668aaa4cd1d5.css.map",

openassessment/xblock/static/dist/openassessment-lms.1d1152611b06737ce755.css

@@ -152,6 +152,17 @@ describe("OpenAssessment.ResponseView", function() {
         stubConfirm = didConfirm;
     };
 
+    /**
+    Helper function to assert response buttons are all consistent and in an expected state
+    (disabled or enabled).
+    **/
+    var expectResponseFieldsEnabled = function(view, expectedEnabled) {
+      expect(view.baseView.buttonEnabled('.step--response__submit')).toBe(expectedEnabled);
+      expect(view.baseView.buttonEnabled('.step--response .file__upload')).toBe(expectedEnabled);
+      expect(view.baseView.buttonEnabled('.step--response .delete__uploaded__file')).toBe(expectedEnabled);
+      expect(view.baseView.buttonEnabled('.step--response .submission__answer__upload')).toBe(expectedEnabled);
+    };
+
     // Store window URL object for replacing after tests;
     const windowURL = window.URL;
     const mockURL = {
@@ -239,21 +250,21 @@ describe("OpenAssessment.ResponseView", function() {
             // response is blank
             view.response(['', '']);
             view.handleResponseChanged();
-            expect(view.submitEnabled()).toBe(true);
+            expectResponseFieldsEnabled(view, true);
             expect(view.isValidForSubmit()).toBe(false);
             expect(view.saveStatus()).toContain('This response has not been saved');
 
             // response is whitespace
             view.response(['               \n      \n      ', ' ']);
             view.handleResponseChanged();
-            expect(view.submitEnabled()).toBe(true);
+            expectResponseFieldsEnabled(view, true);
             expect(view.isValidForSubmit()).toBe(false);
             expect(view.saveStatus()).toContain('This response has not been saved');
 
             // response is not blank
             view.response(['Test response 1', ' ']);
             view.handleResponseChanged();
-            expect(view.submitEnabled()).toBe(true);
+            expectResponseFieldsEnabled(view, true);
             expect(view.isValidForSubmit()).toBe(true);
             expect(view.saveStatus()).toContain('Saving draft');
         });
@@ -262,14 +273,14 @@ describe("OpenAssessment.ResponseView", function() {
             view.textResponse = 'optional';
             view.fileUploadResponse = 'required';
 
-            expect(view.submitEnabled()).toBe(true);
+            expectResponseFieldsEnabled(view, true);
             expect(view.isValidForSubmit()).toBe(false);
 
             var files = [{type: 'application/pdf', size: 1024, name: 'application.pdf', data: ''}];
             view.prepareUpload(files, 'pdf-and-image', ['test description']);
             view.uploadFiles();
 
-            expect(view.submitEnabled()).toBe(true);
+            expectResponseFieldsEnabled(view, true);
             expect(view.isValidForSubmit()).toBe(true);
         });
 
@@ -336,7 +347,7 @@ describe("OpenAssessment.ResponseView", function() {
         expect(server.submit).not.toHaveBeenCalled();
     });
 
-    it("disables the submit button on submission", function() {
+    it("disables the response buttons on submission", function() {
         // Prevent the server's response from resolving,
         // so we can see what happens before view gets re-rendered.
         spyOn(server, 'submit').and.callFake(function() {
@@ -345,10 +356,10 @@ describe("OpenAssessment.ResponseView", function() {
 
         view.response(['Test response 1', 'Test response 2']);
         view.handleSubmitClicked();
-        expect(view.submitEnabled()).toBe(false);
+        expectResponseFieldsEnabled(view, false);
     });
 
-    it("re-enables the submit button on submission error", function() {
+    it("re-enables the response buttons on submission error", function() {
         // Simulate a server error
         spyOn(server, 'submit').and.callFake(function() {
             return $.Deferred(function(defer) {
@@ -359,11 +370,11 @@ describe("OpenAssessment.ResponseView", function() {
         view.response(['Test response 1', 'Test response 2']);
         view.handleSubmitClicked();
 
-        // Expect the submit button to have been re-enabled
-        expect(view.submitEnabled()).toBe(true);
+        // Expect the response buttons to have been re-enabled
+        expectResponseFieldsEnabled(view, true);
     });
 
-    it("re-enables the submit button after cancelling", function() {
+    it("re-enables the response buttons after cancelling", function() {
         // Simulate the user cancelling the submission
         setStubConfirm(false);
         spyOn(server, 'submit').and.callThrough();
@@ -372,8 +383,8 @@ describe("OpenAssessment.ResponseView", function() {
         view.response(['Test response 1', 'Test response 2']);
         view.handleSubmitClicked();
 
-        // Expect the submit button to be re-enabled
-        expect(view.submitEnabled()).toBe(true);
+        // Expect the response buttons to be re-enabled
+        expectResponseFieldsEnabled(view, true);
     });
 
     it("moves to the next step on duplicate submission error", function() {
@@ -620,7 +631,7 @@ describe("OpenAssessment.ResponseView", function() {
         view.prepareUpload(files, 'image', ['i1', 'i2']);
         view.uploadFiles()
         expect(view.isValidForSubmit()).toBe(true);
-        expect(view.submitEnabled()).toBe(true);
+        expectResponseFieldsEnabled(view, true);
         expect(view.files.length).toEqual(2);
         view.prepareUpload(files, 'image', ['i1', 'i2']);
         view.uploadFiles()
@@ -641,7 +652,7 @@ describe("OpenAssessment.ResponseView", function() {
         view.prepareUpload(files, 'image', ['i1', 'i2','i1', 'i2','i1', 'i2','i1', 'i2','i1', 'i2','i1', 'i2',
         'i1', 'i2','i1', 'i2','i1', 'i2','i1', 'i2',]);
         expect(view.isValidForSubmit()).toBe(false);
-        expect(view.submitEnabled()).toBe(true);
+        expectResponseFieldsEnabled(view, true);
         expect(view.getSavedFileCount()).toEqual(20);
         var files2 = [];
         for(i=0; i<2;i++) {

…enassessment-lms.3b32189187e8e2d3e0c3.js …enassessment-lms.1d1152611b06737ce755.jsopenassessment/xblock/static/dist/openassessment-lms.3b32189187e8e2d3e0c3.js renamed to openassessment/xblock/static/dist/openassessment-lms.1d1152611b06737ce755.js openassessment/xblock/static/dist/openassessment-lms.3b32189187e8e2d3e0c3.js renamed to openassessment/xblock/static/dist/openassessment-lms.1d1152611b06737ce755.js

@@ -166,19 +166,19 @@ export class ResponseView {
           // Override default form submission
           eventObject.preventDefault();
           $('.submission__answer__display__file', view.element).removeClass('is--hidden');
-          view.disableFields();
+          view.enableFields(false);
           spinner.removeClass('is--hidden');
           if (view.hasAllUploadFiles()) {
             const promise = view.uploadFiles();
             promise.then(() => {
-              view.enableFields();
+              view.enableFields(true);
               spinner.addClass('is--hidden');
               // Reset the internal files state once upload is complete,
               // to avoid the files being processed again if the user clicks upload again.
               this.files = null;
             });
           } else {
-            view.enableFields();
+            view.enableFields(true);
             spinner.addClass('is--hidden');
           }
         },
@@ -293,48 +293,19 @@ export class ResponseView {
     }
 
     /**
-     Enable/disable the submit button.
-     Check that whether the submit button is enabled.
+     Enable or disable the response fields.
+     Disable the fields to avoid any changes while an action is processing.
+     For example, use this when beginning a file upload, or submitting the response.
+     Then enable them again when the action is complete.
 
      Args:
-     enabled (bool): If specified, set the state of the button.
-
-     Returns:
-     bool: Whether the button is enabled.
-
-     Examples:
-     >> view.submitEnabled(true);  // enable the button
-     >> view.submitEnabled();  // check whether the button is enabled
-     >> true
-     * */
-    submitEnabled(enabled) {
-      return this.baseView.buttonEnabled('.step--response__submit', enabled);
-    }
-
-    /**
-     * Disable the fields to avoid any changes while an action is processing.
-     * For example, use this when beginning a file upload, or submitting the response.
-     */
-    disableFields() {
-      this.submitEnabled(false);
-
-      const responseEl = $('.step--response', this.element);
-      responseEl.find('.file__upload').prop('disabled', true);
-      responseEl.find('.delete__uploaded__file').prop('disabled', true);
-      responseEl.find('.submission__answer__upload').prop('disabled', true);
-    }
-
-    /**
-     * Enable the fields to allow changes again.
-     * Use this to revert the changes made by `disableFields()`.
+     enabled (bool): set the state of the fields.
      */
-    enableFields() {
-      this.submitEnabled(true);
-
-      const responseEl = $('.step--response', this.element);
-      responseEl.find('.file__upload').prop('disabled', false);
-      responseEl.find('.delete__uploaded__file').prop('disabled', false);
-      responseEl.find('.submission__answer__upload').prop('disabled', false);
+    enableFields(enabled) {
+      this.baseView.buttonEnabled('.step--response__submit', enabled);
+      this.baseView.buttonEnabled('.step--response .file__upload', enabled);
+      this.baseView.buttonEnabled('.step--response .delete__uploaded__file', enabled);
+      this.baseView.buttonEnabled('.step--response .submission__answer__upload', enabled);
     }
 
     /**
@@ -555,7 +526,7 @@ export class ResponseView {
 
       // Immediately disable the submit button to prevent multiple submission,
       // and other form fields to avoid race conditions if anything changes.
-      this.disableFields();
+      this.enableFields(false);
 
       const view = this;
       const title = gettext('Confirm Submit Response');
@@ -578,7 +549,7 @@ export class ResponseView {
         title,
         msg,
         () => view.submit(),
-        () => view.enableFields(),
+        () => view.enableFields(true),
       );
     }
 
@@ -600,7 +571,7 @@ export class ResponseView {
             if (errMsg) { this.baseView.toggleActionError('submit', errMsg); }
 
             // Re-enable the submit button and the rest of the form so the user can retry
-            this.enableFields();
+            this.enableFields(true);
           }
         });
     }
@@ -871,13 +842,13 @@ export class ResponseView {
     */
    handleDeleteFileClick(target) {
      const view = this;
-     this.disableFields();
+     this.enableFields(false);
      const filenum = $(target).attr('filenum');
      this.confirmationDialog.confirm(
        gettext('Confirm Delete Uploaded File'),
        this.getConfirmRemoveUploadedFileMessage(filenum),
-       () => view.removeUploadedFile(filenum).always(() => view.enableFields()),
-       () => view.enableFields(),
+       () => view.removeUploadedFile(filenum).always(() => view.enableFields(true)),
+       () => view.enableFields(true),
      );
    }