diff --git a/lms/static/js/spec/student_account/access_spec.js b/lms/static/js/spec/student_account/access_spec.js index a1d2d37ae9..ecba86b2fe 100644 --- a/lms/static/js/spec/student_account/access_spec.js +++ b/lms/static/js/spec/student_account/access_spec.js @@ -1,23 +1,60 @@ define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessView'], function(TemplateHelpers) { - describe("edx.student.account.AccessView", function() { + describe('edx.student.account.AccessView', function() { 'use strict'; var view = null, ajaxSuccess = true; + var assertForms = function(visible, hidden) { + expect($(visible)).not.toHaveClass('hidden'); + expect($(hidden)).toHaveClass('hidden'); + expect($('#password-reset-wrapper')).toBeEmpty(); + }; + beforeEach(function() { - var mainFixture = "
"; + setFixtures("
"); + TemplateHelpers.installTemplate('templates/student_account/access'); + TemplateHelpers.installTemplate('templates/student_account/login'); + TemplateHelpers.installTemplate('templates/student_account/register'); + TemplateHelpers.installTemplate('templates/student_account/password_reset'); + TemplateHelpers.installTemplate('templates/student_account/form_field'); - setFixtures(mainFixture); - TemplateHelpers.installTemplate("templates/student_account/access"); - TemplateHelpers.installTemplate("templates/student_account/login"); + // Used to populate forms + var form_description = { + "method": "post", + "submit_url": "/submit", + "fields": [ + { + "name": "email", + "label": "Email", + "default": "", + "type": "text", + "required": true, + "placeholder": "xsy@edx.org", + "instructions": "Enter your email here.", + "restrictions": {}, + }, + { + "name": "username", + "label": "Username", + "default": "", + "type": "text", + "required": true, + "placeholder": "Xsy", + "instructions": "Enter your username here.", + "restrictions": { + "max_length": 200 + } + } + ] + }; - // Stub AJAX calls to return success / failure - spyOn($, "ajax").andCallFake(function() { + // Stub AJAX calls and force them to return a form description + spyOn($, 'ajax').andCallFake(function() { return $.Deferred(function(defer) { if (ajaxSuccess) { - defer.resolve(); + defer.resolveWith(this, [form_description]); } else { defer.reject(); } @@ -26,22 +63,33 @@ define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessVi view = new edx.student.account.AccessView({ mode: 'login', - thirdPartyAuth: false + thirdPartyAuth: { + currentProvider: null, + providers: [] + } }); }); it("initially displays the correct form", function() { - expect(view.subview.login.$form).not.toHaveClass('hidden'); - expect($("#register-form")).toHaveClass('hidden'); - expect($("#password-reset-wrapper")).toBeEmpty(); + assertForms($('#login-form'), $('#register-form')); }); it("toggles between the login and registration forms", function() { - // TODO + var registerChangeEvent = $.Event('change', {currentTarget: $('#register-option')}), + loginChangeEvent = $.Event('change', {currentTarget: $('#login-option')}); + + // Simulate selection of the registration form + view.toggleForm(registerChangeEvent) + assertForms($('#register-form'), $('#login-form')); + + // Simulate selection of the login form + view.toggleForm(loginChangeEvent) + assertForms($('#login-form'), $('#register-form')); }); it("displays the reset password form", function() { - // TODO + view.resetPassword(); + expect($('#password-reset-wrapper')).not.toBeEmpty(); }); }); } diff --git a/lms/static/js/spec/student_account/password_reset_spec.js b/lms/static/js/spec/student_account/password_reset_spec.js index 2e4e4b7f9d..9b2662a58d 100644 --- a/lms/static/js/spec/student_account/password_reset_spec.js +++ b/lms/static/js/spec/student_account/password_reset_spec.js @@ -1,27 +1,84 @@ define(['js/common_helpers/template_helpers', 'js/student_account/views/PasswordResetView'], function(TemplateHelpers) { - describe("edx.student.account.PasswordResetView", function() { + describe('edx.student.account.PasswordResetView', function() { 'use strict'; + var view = null, + ajaxSuccess = true; + + var submitEmail = function(validationSuccess) { + // Simulate manual entry of an email address + $('#reset-password-email').val('foo@bar.baz'); + + // Create a fake click event + var clickEvent = $.Event('click'); + + // Used to avoid spying on view.validate twice + if (typeof validationSuccess !== 'undefined') { + // Force validation to return as expected + spyOn(view, 'validate').andReturn(validationSuccess); + } + + // Submit the email address + view.submitForm(clickEvent); + }; + + var assertAjax = function(url, method, data) { + expect($.ajax).toHaveBeenCalled(); + var ajaxArgs = $.ajax.mostRecentCall.args[0]; + expect(ajaxArgs.url).toEqual(url); + expect(ajaxArgs.type).toEqual(method); + expect(ajaxArgs.data).toEqual(data) + expect(ajaxArgs.headers.hasOwnProperty("X-CSRFToken")).toBe(true); + }; + beforeEach(function() { - setFixtures("
"); - TemplateHelpers.installTemplate("templates/student_account/password_reset"); + setFixtures("
"); + TemplateHelpers.installTemplate('templates/student_account/password_reset'); + TemplateHelpers.installTemplate('templates/student_account/form_field'); + + // Stub AJAX calls + spyOn($, 'ajax').andCallFake(function() { + return $.Deferred(function(defer) { + if (ajaxSuccess) { + defer.resolve(); + } else { + defer.reject(); + } + }).promise(); + }); + + view = new edx.student.account.PasswordResetView(); }); it("allows the user to request a new password", function() { - // TODO + submitEmail(true); + assertAjax('/account/password', 'POST', {email: 'foo@bar.baz'}); + expect($('.js-reset-success')).not.toHaveClass('hidden'); }); it("validates the email field", function() { - // TODO + submitEmail(true); + expect(view.validate).toHaveBeenCalled() + expect(view.$errors).toHaveClass('hidden'); }); - it("displays password reset errors", function() { - // TODO + it("displays password reset validation errors", function() { + submitEmail(false); + expect(view.$errors).not.toHaveClass('hidden'); }); it("displays an error if the server could not be contacted", function() { - // TODO + // If we get an error status on the AJAX request, display an error + ajaxSuccess = false; + submitEmail(true); + expect(view.$resetFail).not.toHaveClass('hidden'); + + // If we try again and succeed, the error should go away + ajaxSuccess = true; + // No argument means we won't spy on view.validate again + submitEmail(); + expect(view.$resetFail).toHaveClass('hidden'); }); }); } diff --git a/lms/static/js/student_account/models/PasswordResetModel.js b/lms/static/js/student_account/models/PasswordResetModel.js index c62d83c1be..00958667b2 100644 --- a/lms/static/js/student_account/models/PasswordResetModel.js +++ b/lms/static/js/student_account/models/PasswordResetModel.js @@ -29,10 +29,9 @@ var edx = edx || {}; .done(function() { model.trigger('success'); }) - .fail( function( error ) { - console.log('RegisterModel.save() FAILURE!!!!!'); - model.trigger('error', error); + .fail( function() { + model.trigger('error'); }); } }); -})(jQuery, _, Backbone, gettext); \ No newline at end of file +})(jQuery, _, Backbone, gettext); diff --git a/lms/static/js/student_account/views/AccessView.js b/lms/static/js/student_account/views/AccessView.js index 1bf7b70846..ec42ac8be2 100644 --- a/lms/static/js/student_account/views/AccessView.js +++ b/lms/static/js/student_account/views/AccessView.js @@ -31,7 +31,6 @@ var edx = edx || {}; currentProvider: null, providers: [] }; - console.log(obj); this.render(); }, @@ -54,7 +53,7 @@ var edx = edx || {}; loadForm: function( type ) { if ( type === 'login' ) { - this.subview.login = new edx.student.account.LoginView( this.thirdPartyAuth ); + this.subview.login = new edx.student.account.LoginView( this.thirdPartyAuth ); // Listen for 'password-help' event to toggle sub-views this.listenTo( this.subview.login, 'password-help', this.resetPassword ); @@ -90,4 +89,4 @@ var edx = edx || {}; } }); -})(jQuery, _, Backbone, gettext); \ No newline at end of file +})(jQuery, _, Backbone, gettext); diff --git a/lms/static/js/student_account/views/LoginView.js b/lms/static/js/student_account/views/LoginView.js index 21ed098373..2ea46747a9 100644 --- a/lms/static/js/student_account/views/LoginView.js +++ b/lms/static/js/student_account/views/LoginView.js @@ -13,7 +13,7 @@ var edx = edx || {}; tpl: '#login-tpl', - fieldTpl: $('#form_field-tpl').html(), + fieldTpl: '#form_field-tpl', events: { 'click .js-login': 'submitForm', @@ -27,6 +27,7 @@ var edx = edx || {}; initialize: function( thirdPartyAuthInfo ) { this.tpl = $(this.tpl).html(); + this.fieldTpl = $(this.fieldTpl).html(); this.providers = thirdPartyAuthInfo.providers || []; this.currentProvider = thirdPartyAuthInfo.currentProvider || ""; diff --git a/lms/static/js/student_account/views/PasswordResetView.js b/lms/static/js/student_account/views/PasswordResetView.js index 1d357f2a10..d915602f49 100644 --- a/lms/static/js/student_account/views/PasswordResetView.js +++ b/lms/static/js/student_account/views/PasswordResetView.js @@ -13,7 +13,7 @@ var edx = edx || {}; tpl: '#password_reset-tpl', - fieldTpl: $('#form_field-tpl').html(), + fieldTpl: '#form_field-tpl', events: { 'click .js-reset': 'submitForm' @@ -26,14 +26,17 @@ var edx = edx || {}; $form: {}, initialize: function() { + this.fieldTpl = $(this.fieldTpl).html(); + var fields = this.buildForm([{ - label: 'E-mail', - instructions: 'This is the e-mail address you used to register with edX', name: 'email', + label: 'Email', + defaultValue: '', + type: 'text', required: true, - type: 'email', - restrictions: [], - defaultValue: '' + placeholder: 'xsy@edx.org', + instructions: 'This is the email address you used to register with edX.', + restrictions: {} }]); this.tpl = $(this.tpl).html(); @@ -59,16 +62,14 @@ var edx = edx || {}; this.$form = $container.find('form'); this.$errors = $container.find('.error-msg'); + this.$resetFail = $container.find('.js-reset-fail'); - this.listenTo( this.model, 'success', this.resetComplete) ; + this.listenTo( this.model, 'success', this.resetComplete ); + this.listenTo( this.model, 'error', this.resetError ); }, initModel: function() { this.model = new edx.student.account.PasswordResetModel(); - - this.listenTo( this.model, 'error', function( error ) { - console.log(error.status, ' error: ', error.responseText); - }); }, buildForm: function( data ) { @@ -87,7 +88,6 @@ var edx = edx || {}; }, getFormData: function() { - var obj = {}, $form = this.$form, elements = $form[0].elements, @@ -123,6 +123,12 @@ var edx = edx || {}; $el.find('#password-reset-form').addClass('hidden'); $el.find('.js-reset-success').removeClass('hidden'); + + this.$resetFail.addClass('hidden'); + }, + + resetError: function() { + this.$resetFail.removeClass('hidden'); }, submitForm: function( event ) { @@ -131,12 +137,10 @@ var edx = edx || {}; event.preventDefault(); if ( !this.errors.length ) { - console.log('save me'); this.model.set( data ); this.model.save(); this.toggleErrorMsg( false ); } else { - console.log('here are the errors ', this.errors); this.toggleErrorMsg( true ); } }, @@ -154,4 +158,4 @@ var edx = edx || {}; } }); -})(jQuery, _, Backbone, gettext); \ No newline at end of file +})(jQuery, _, Backbone, gettext); diff --git a/lms/static/js/student_account/views/RegisterView.js b/lms/static/js/student_account/views/RegisterView.js index 0c7afd8007..ec6ee2eaa0 100644 --- a/lms/static/js/student_account/views/RegisterView.js +++ b/lms/static/js/student_account/views/RegisterView.js @@ -13,7 +13,7 @@ var edx = edx || {}; tpl: '#register-tpl', - fieldTpl: $('#form_field-tpl').html(), + fieldTpl: '#form_field-tpl', events: { 'click .js-register': 'submitForm', @@ -26,6 +26,7 @@ var edx = edx || {}; initialize: function( thirdPartyAuthInfo ) { this.tpl = $(this.tpl).html(); + this.fieldTpl = $(this.fieldTpl).html(), this.providers = thirdPartyAuthInfo.providers || []; this.currentProvider = thirdPartyAuthInfo.currentProvider || ""; @@ -87,6 +88,7 @@ var edx = edx || {}; i, len = data.length, fieldTpl = this.fieldTpl; + for ( i=0; i
-
\ No newline at end of file +
diff --git a/lms/templates/student_account/password_reset.underscore b/lms/templates/student_account/password_reset.underscore index 61359b0340..5b8a39dbc5 100644 --- a/lms/templates/student_account/password_reset.underscore +++ b/lms/templates/student_account/password_reset.underscore @@ -5,7 +5,7 @@

Please enter your email address below and we will send you instructions for setting a new password.

-
+
\ No newline at end of file + +