diff --git a/lms/static/js/spec/student_account/register_spec.js b/lms/static/js/spec/student_account/register_spec.js index 8d38c54520..78c517eeb5 100644 --- a/lms/static/js/spec/student_account/register_spec.js +++ b/lms/static/js/spec/student_account/register_spec.js @@ -213,7 +213,12 @@ } ] }; - var createRegisterView = function(that) { + var createRegisterView = function(that, formFields) { + var fields = formFields; + if (typeof fields === 'undefined') { + fields = FORM_DESCRIPTION.fields; + } + // Initialize the register model model = new RegisterModel({}, { url: FORM_DESCRIPTION.submit_url, @@ -222,7 +227,7 @@ // Initialize the register view view = new RegisterView({ - fields: FORM_DESCRIPTION.fields, + fields: fields, model: model, thirdPartyAuth: THIRD_PARTY_AUTH, platformName: PLATFORM_NAME @@ -537,6 +542,27 @@ // The iframe has been deleted expect($content.find('iframe').length).toEqual(0); }); + + it('displays optional fields toggle', function() { + createRegisterView(this); + expect(view.$('.checkbox-optional_fields_toggle')).toBeVisible(); + }); + + it('hides optional fields toggle when there are no visible optional fields', function() { + createRegisterView(this, [ + { + placeholder: '', + name: 'hidden_optional', + label: 'Hidden Optional', + defaultValue: '', + type: 'hidden', + required: false, + instructions: 'Used for testing hidden input fields that are optional.', + restrictions: {} + } + ]); + expect(view.$('.checkbox-optional_fields_toggle')).toHaveClass('hidden'); + }); }); }); }).call(this, define || RequireJS.define); diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js index 7287ac8b41..e9536a6db9 100644 --- a/lms/static/js/student_account/views/RegisterView.js +++ b/lms/static/js/student_account/views/RegisterView.js @@ -94,27 +94,35 @@ buildForm: function(data) { var html = [], i, + field, len = data.length, requiredFields = [], optionalFields = []; this.fields = data; + this.hasOptionalFields = false; for (i = 0; i < len; i++) { - if (data[i].errorMessages) { + field = data[i]; + if (field.errorMessages) { // eslint-disable-next-line no-param-reassign - data[i].errorMessages = this.escapeStrings(data[i].errorMessages); + field.errorMessages = this.escapeStrings(field.errorMessages); } - if (data[i].required) { - requiredFields.push(data[i]); + if (field.required) { + requiredFields.push(field); } else { - optionalFields.push(data[i]); + if (field.type !== 'hidden') { + // For the purporse of displaying the optional field toggle, + // the form should be considered to have optional fields + // only if all of the optional fields are being rendering as + // input elements that are visible on the page. + this.hasOptionalFields = true; + } + optionalFields.push(field); } } - this.hasOptionalFields = optionalFields.length > 0; - html = this.renderFields(requiredFields, 'required-fields'); html.push.apply(html, this.renderFields(optionalFields, 'optional-fields'));