Skip to content

E
edx-platform
Commit aba600cf by Renzo Lucioni
Options

Merge pull request #5704 from edx/renzo/add-js-tests 

Add tests of access and password reset views
parents 9aed03be f157ee14
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'],
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 = "<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);
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();
});
});
}
......
lms/static/js/spec/student_account/password_reset_spec.js
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("<div></div>");
TemplateHelpers.installTemplate("templates/student_account/password_reset");
setFixtures("<div id='password-reset-wrapper'></div>");
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');
});
});
}
......
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);
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);
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 || "";
......
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);
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<len; i++ ) {
html.push( _.template( fieldTpl, $.extend( data[i], {
form: 'register'
......
lms/templates/student_account/access.underscore
......@@ -19,4 +19,4 @@
<div id="login-form" class="form-wrapper <% if ( mode !== 'login' ) { %>hidden<% } %>"></div>
</section>
<div id="password-reset-wrapper"></div>
\ No newline at end of file
<div id="password-reset-wrapper"></div>
lms/templates/student_account/password_reset.underscore
......@@ -5,7 +5,7 @@
<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>
<div id="password-reset-form" class="form-wrapper">
<form id="password-reset-form">
<form>
<div class="error-msg hidden">
<h4>An error occured.</h4>
<div class="errors">
......@@ -19,9 +19,11 @@
</form>
</div>
<div class="js-reset-success hidden">
<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>
</div>
</section>
\ No newline at end of file
<div class="js-reset-fail hidden">
<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