Skip to content

E
edx-platform
Commit f157ee14 by Renzo Lucioni
Options

Add tests of access and password reset views

parent d8eafc47
Showing with 162 additions and 55 deletions
lms/static/js/spec/student_account/access_spec.js
define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessView'], define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessView'],
function(TemplateHelpers) { function(TemplateHelpers) {
describe("edx.student.account.AccessView", function() { describe('edx.student.account.AccessView', function() {
'use strict'; 'use strict';
var view = null, var view = null,
ajaxSuccess = true; ajaxSuccess = true;
var assertForms = function(visible, hidden) {
expect($(visible)).not.toHaveClass('hidden');
expect($(hidden)).toHaveClass('hidden');
expect($('#password-reset-wrapper')).toBeEmpty();
};
beforeEach(function() { beforeEach(function() {
var mainFixture = "<div id='login-and-registration-container'class='login-register'data-initial-mode='${initial_mode}'data-third-party-auth-providers='${third_party_auth_providers}'/>"; setFixtures("<div id='login-and-registration-container'></div>");
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); // Used to populate forms
TemplateHelpers.installTemplate("templates/student_account/access"); var form_description = {
TemplateHelpers.installTemplate("templates/student_account/login"); "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 // Stub AJAX calls and force them to return a form description
spyOn($, "ajax").andCallFake(function() { spyOn($, 'ajax').andCallFake(function() {
return $.Deferred(function(defer) { return $.Deferred(function(defer) {
if (ajaxSuccess) { if (ajaxSuccess) {
defer.resolve(); defer.resolveWith(this, [form_description]);
} else { } else {
defer.reject(); defer.reject();
} }
...@@ -26,22 +63,33 @@ define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessVi ...@@ -26,22 +63,33 @@ define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessVi
view = new edx.student.account.AccessView({ view = new edx.student.account.AccessView({
mode: 'login', mode: 'login',
thirdPartyAuth: false thirdPartyAuth: {
currentProvider: null,
providers: []
}
}); });
}); });
it("initially displays the correct form", function() { it("initially displays the correct form", function() {
expect(view.subview.login.$form).not.toHaveClass('hidden'); assertForms($('#login-form'), $('#register-form'));
expect($("#register-form")).toHaveClass('hidden');
expect($("#password-reset-wrapper")).toBeEmpty();
}); });
it("toggles between the login and registration forms", function() { 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() { it("displays the reset password form", function() {
// TODO view.resetPassword();
expect($('#password-reset-wrapper')).not.toBeEmpty();
}); });
}); });
} }
......
lms/static/js/spec/student_account/password_reset_spec.js
define(['js/common_helpers/template_helpers', 'js/student_account/views/PasswordResetView'], define(['js/common_helpers/template_helpers', 'js/student_account/views/PasswordResetView'],
function(TemplateHelpers) { function(TemplateHelpers) {
describe("edx.student.account.PasswordResetView", function() { describe('edx.student.account.PasswordResetView', function() {
'use strict'; '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() { beforeEach(function() {
setFixtures("<div></div>"); setFixtures("<div id='password-reset-wrapper'></div>");
TemplateHelpers.installTemplate("templates/student_account/password_reset"); 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() { 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() { it("validates the email field", function() {
// TODO submitEmail(true);
expect(view.validate).toHaveBeenCalled()
expect(view.$errors).toHaveClass('hidden');
}); });
it("displays password reset errors", function() { it("displays password reset validation errors", function() {
// TODO submitEmail(false);
expect(view.$errors).not.toHaveClass('hidden');
}); });
it("displays an error if the server could not be contacted", function() { 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');
}); });
}); });
} }
......
lms/static/js/student_account/models/PasswordResetModel.js
...@@ -29,10 +29,9 @@ var edx = edx || {}; ...@@ -29,10 +29,9 @@ var edx = edx || {};
.done(function() { .done(function() {
model.trigger('success'); model.trigger('success');
}) })
.fail( function( error ) { .fail( function() {
console.log('RegisterModel.save() FAILURE!!!!!'); model.trigger('error');
model.trigger('error', error);
}); });
} }
}); });
})(jQuery, _, Backbone, gettext); })(jQuery, _, Backbone, gettext);
\ No newline at end of file
lms/static/js/student_account/views/AccessView.js
...@@ -31,7 +31,6 @@ var edx = edx || {}; ...@@ -31,7 +31,6 @@ var edx = edx || {};
currentProvider: null, currentProvider: null,
providers: [] providers: []
}; };
console.log(obj);
this.render(); this.render();
}, },
...@@ -54,7 +53,7 @@ var edx = edx || {}; ...@@ -54,7 +53,7 @@ var edx = edx || {};
loadForm: function( type ) { loadForm: function( type ) {
if ( type === 'login' ) { 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 // Listen for 'password-help' event to toggle sub-views
this.listenTo( this.subview.login, 'password-help', this.resetPassword ); this.listenTo( this.subview.login, 'password-help', this.resetPassword );
...@@ -90,4 +89,4 @@ var edx = edx || {}; ...@@ -90,4 +89,4 @@ var edx = edx || {};
} }
}); });
})(jQuery, _, Backbone, gettext); })(jQuery, _, Backbone, gettext);
\ No newline at end of file
lms/static/js/student_account/views/LoginView.js
...@@ -13,7 +13,7 @@ var edx = edx || {}; ...@@ -13,7 +13,7 @@ var edx = edx || {};
tpl: '#login-tpl', tpl: '#login-tpl',
fieldTpl: $('#form_field-tpl').html(), fieldTpl: '#form_field-tpl',
events: { events: {
'click .js-login': 'submitForm', 'click .js-login': 'submitForm',
...@@ -27,6 +27,7 @@ var edx = edx || {}; ...@@ -27,6 +27,7 @@ var edx = edx || {};
initialize: function( thirdPartyAuthInfo ) { initialize: function( thirdPartyAuthInfo ) {
this.tpl = $(this.tpl).html(); this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html();
this.providers = thirdPartyAuthInfo.providers || []; this.providers = thirdPartyAuthInfo.providers || [];
this.currentProvider = thirdPartyAuthInfo.currentProvider || ""; this.currentProvider = thirdPartyAuthInfo.currentProvider || "";
......
lms/static/js/student_account/views/PasswordResetView.js
...@@ -13,7 +13,7 @@ var edx = edx || {}; ...@@ -13,7 +13,7 @@ var edx = edx || {};
tpl: '#password_reset-tpl', tpl: '#password_reset-tpl',
fieldTpl: $('#form_field-tpl').html(), fieldTpl: '#form_field-tpl',
events: { events: {
'click .js-reset': 'submitForm' 'click .js-reset': 'submitForm'
...@@ -26,14 +26,17 @@ var edx = edx || {}; ...@@ -26,14 +26,17 @@ var edx = edx || {};
$form: {}, $form: {},
initialize: function() { initialize: function() {
this.fieldTpl = $(this.fieldTpl).html();
var fields = this.buildForm([{ var fields = this.buildForm([{
label: 'E-mail',
instructions: 'This is the e-mail address you used to register with edX',
name: 'email', name: 'email',
label: 'Email',
defaultValue: '',
type: 'text',
required: true, required: true,
type: 'email', placeholder: 'xsy@edx.org',
restrictions: [], instructions: 'This is the email address you used to register with edX.',
defaultValue: '' restrictions: {}
}]); }]);
this.tpl = $(this.tpl).html(); this.tpl = $(this.tpl).html();
...@@ -59,16 +62,14 @@ var edx = edx || {}; ...@@ -59,16 +62,14 @@ var edx = edx || {};
this.$form = $container.find('form'); this.$form = $container.find('form');
this.$errors = $container.find('.error-msg'); 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() { initModel: function() {
this.model = new edx.student.account.PasswordResetModel(); this.model = new edx.student.account.PasswordResetModel();
this.listenTo( this.model, 'error', function( error ) {
console.log(error.status, ' error: ', error.responseText);
});
}, },
buildForm: function( data ) { buildForm: function( data ) {
...@@ -87,7 +88,6 @@ var edx = edx || {}; ...@@ -87,7 +88,6 @@ var edx = edx || {};
}, },
getFormData: function() { getFormData: function() {
var obj = {}, var obj = {},
$form = this.$form, $form = this.$form,
elements = $form[0].elements, elements = $form[0].elements,
...@@ -123,6 +123,12 @@ var edx = edx || {}; ...@@ -123,6 +123,12 @@ var edx = edx || {};
$el.find('#password-reset-form').addClass('hidden'); $el.find('#password-reset-form').addClass('hidden');
$el.find('.js-reset-success').removeClass('hidden'); $el.find('.js-reset-success').removeClass('hidden');
this.$resetFail.addClass('hidden');
},
resetError: function() {
this.$resetFail.removeClass('hidden');
}, },
submitForm: function( event ) { submitForm: function( event ) {
...@@ -131,12 +137,10 @@ var edx = edx || {}; ...@@ -131,12 +137,10 @@ var edx = edx || {};
event.preventDefault(); event.preventDefault();
if ( !this.errors.length ) { if ( !this.errors.length ) {
console.log('save me');
this.model.set( data ); this.model.set( data );
this.model.save(); this.model.save();
this.toggleErrorMsg( false ); this.toggleErrorMsg( false );
} else { } else {
console.log('here are the errors ', this.errors);
this.toggleErrorMsg( true ); this.toggleErrorMsg( true );
} }
}, },
...@@ -154,4 +158,4 @@ var edx = edx || {}; ...@@ -154,4 +158,4 @@ var edx = edx || {};
} }
}); });
})(jQuery, _, Backbone, gettext); })(jQuery, _, Backbone, gettext);
\ No newline at end of file
lms/static/js/student_account/views/RegisterView.js
...@@ -13,7 +13,7 @@ var edx = edx || {}; ...@@ -13,7 +13,7 @@ var edx = edx || {};
tpl: '#register-tpl', tpl: '#register-tpl',
fieldTpl: $('#form_field-tpl').html(), fieldTpl: '#form_field-tpl',
events: { events: {
'click .js-register': 'submitForm', 'click .js-register': 'submitForm',
...@@ -26,6 +26,7 @@ var edx = edx || {}; ...@@ -26,6 +26,7 @@ var edx = edx || {};
initialize: function( thirdPartyAuthInfo ) { initialize: function( thirdPartyAuthInfo ) {
this.tpl = $(this.tpl).html(); this.tpl = $(this.tpl).html();
this.fieldTpl = $(this.fieldTpl).html(),
this.providers = thirdPartyAuthInfo.providers || []; this.providers = thirdPartyAuthInfo.providers || [];
this.currentProvider = thirdPartyAuthInfo.currentProvider || ""; this.currentProvider = thirdPartyAuthInfo.currentProvider || "";
...@@ -87,6 +88,7 @@ var edx = edx || {}; ...@@ -87,6 +88,7 @@ var edx = edx || {};
i, i,
len = data.length, len = data.length,
fieldTpl = this.fieldTpl; fieldTpl = this.fieldTpl;
for ( i=0; i<len; i++ ) { for ( i=0; i<len; i++ ) {
html.push( _.template( fieldTpl, $.extend( data[i], { html.push( _.template( fieldTpl, $.extend( data[i], {
form: 'register' form: 'register'
......
lms/templates/student_account/access.underscore
...@@ -19,4 +19,4 @@ ...@@ -19,4 +19,4 @@
<div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div> <div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div>
</section> </section>
<div id="password-reset-wrapper"></div> <div id="password-reset-wrapper"></div>
\ No newline at end of file
lms/templates/student_account/password_reset.underscore
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<section class="form-type"> <section class="form-type">
<p class="action-label">Please enter your email address below and we will send you instructions for setting a new password.</p> <p class="action-label">Please enter your email address below and we will send you instructions for setting a new password.</p>
<div id="password-reset-form" class="form-wrapper"> <div id="password-reset-form" class="form-wrapper">
<form id="password-reset-form"> <form>
<div class="error-msg hidden"> <div class="error-msg hidden">
<h4>An error occured.</h4> <h4>An error occured.</h4>
<div class="errors"> <div class="errors">
...@@ -19,9 +19,11 @@ ...@@ -19,9 +19,11 @@
</form> </form>
</div> </div>
<div class="js-reset-success hidden"> <div class="js-reset-success hidden">
<h2>Password Reset Successful</h2> <h2>Password Reset Successful</h2>
<p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p> <p>We've e-mailed you instructions for setting your password to the e-mail address you submitted. You should be receiving it shortly.</p>
</div> </div>
</section> <div class="js-reset-fail hidden">
\ No newline at end of file <h2>Password Reset Failed</h2>
</div>
</section>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment