WIP: Add JS tests of access, login, register, and password reset views

lms/static/js/spec/student_account/access_spec.js

-define(['js/student_account/views/AccessView'],
-    function() {
-        'use strict';
-
+define(['js/common_helpers/template_helpers', 'js/student_account/views/AccessView'],
+    function(TemplateHelpers) {
         describe("edx.student.account.AccessView", function() {
+            'use strict';
+
+            var view = null,
+                ajaxSuccess = true;
+
+            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(mainFixture);
+                TemplateHelpers.installTemplate("templates/student_account/access");
+                TemplateHelpers.installTemplate("templates/student_account/login");
+
+                // Stub AJAX calls to return success / failure
+                spyOn($, "ajax").andCallFake(function() {
+                    return $.Deferred(function(defer) {
+                        if (ajaxSuccess) {
+                            defer.resolve();
+                        } else {
+                            defer.reject();
+                        }
+                    }).promise();
+                });
+
+                view = new edx.student.account.AccessView({
+                    mode: 'login',
+                    thirdPartyAuth: false
+                });
+            });
+
             it("initially displays the correct form", function() {
-                // TODO
+                expect(view.subview.login.$form).not.toHaveClass('hidden');
+                expect($("#register-form")).toHaveClass('hidden');
+                expect($("#password-reset-wrapper")).toBeEmpty();
             });
 
             it("toggles between the login and registration forms", function() {
@@ -16,4 +45,4 @@ define(['js/student_account/views/AccessView'],
             });
         });
     }
-);
\ No newline at end of file
+);

lms/static/js/spec/student_account/login_spec.js

-define(['js/student_account/views/LoginView'],
-    function() {
-        'use strict';
-
+define(['js/common_helpers/template_helpers', 'js/student_account/views/LoginView'],
+    function(TemplateHelpers) {
         describe("edx.student.account.LoginView", function() {
+            'use strict';
+
+            beforeEach(function() {
+                setFixtures("<div></div>");
+                TemplateHelpers.installTemplate("templates/student_account/login");
+            });
+
             it("logs the user in", function() {
                 // TODO
             });
@@ -36,4 +41,4 @@ define(['js/student_account/views/LoginView'],
             });
         });
     }
-);
\ No newline at end of file
+);

lms/static/js/spec/student_account/password_reset_spec.js

-define(['js/student_account/views/PasswordResetView'],
-    function() {
-        'use strict';
-
+define(['js/common_helpers/template_helpers', 'js/student_account/views/PasswordResetView'],
+    function(TemplateHelpers) {
         describe("edx.student.account.PasswordResetView", function() {
+            'use strict';
+
+            beforeEach(function() {
+                setFixtures("<div></div>");
+                TemplateHelpers.installTemplate("templates/student_account/password_reset");
+            });
+
             it("allows the user to request a new password", function() {
                 // TODO
             });
@@ -20,4 +25,4 @@ define(['js/student_account/views/PasswordResetView'],
             });
         });
     }
-);
\ No newline at end of file
+);

lms/static/js/spec/student_account/register_spec.js

-define(['js/student_account/views/RegisterView'],
-    function() {
-        'use strict';
-
+define(['js/common_helpers/template_helpers', 'js/student_account/views/RegisterView'],
+    function(TemplateHelpers) {
         describe("edx.student.account.RegisterView", function() {
+            'use strict';
+
+            beforeEach(function() {
+                setFixtures("<div></div>");
+                TemplateHelpers.installTemplate("templates/student_account/register");
+            });
+
             it("registers a new user", function() {
                 // TODO
             });
@@ -28,4 +33,4 @@ define(['js/student_account/views/RegisterView'],
             });
         });
     }
-);
\ No newline at end of file
+);

lms/static/js/student_account/views/AccessView.js

@@ -9,7 +9,7 @@ var edx = edx || {};
     edx.student.account.AccessView = Backbone.View.extend({
         el: '#login-and-registration-container',
 
-        tpl: $('#access-tpl').html(),
+        tpl: '#access-tpl',
 
         events: {
             'change .form-toggle': 'toggleForm'
@@ -25,9 +25,8 @@ var edx = edx || {};
         activeForm: '',
 
         initialize: function( obj ) {
+            this.tpl = $(this.tpl).html();
             this.activeForm = obj.mode;
-            console.log(obj);
-
             this.render();
         },
 

lms/static/js/student_account/views/LoginView.js

@@ -11,7 +11,7 @@ var edx = edx || {};
 
         el: '#login-form',
 
-        tpl: $('#login-tpl').html(),
+        tpl: '#login-tpl',
 
         fieldTpl: $('#form_field-tpl').html(),
 
@@ -25,6 +25,7 @@ var edx = edx || {};
         $form: {},
 
         initialize: function() {
+            this.tpl = $(this.tpl).html();
             this.getInitialData();
         },
 

lms/static/js/student_account/views/PasswordResetView.js

@@ -11,7 +11,7 @@ var edx = edx || {};
 
         el: '#password-reset-wrapper',
 
-        tpl: $('#password_reset-tpl').html(),
+        tpl: '#password_reset-tpl',
 
         fieldTpl: $('#form_field-tpl').html(),
 
@@ -35,6 +35,7 @@ var edx = edx || {};
                 restrictions: []
             }]);
 
+            this.tpl = $(this.tpl).html();
             this.initModel();
             this.render( fields );
         },

lms/static/js/student_account/views/RegisterView.js

@@ -11,7 +11,7 @@ var edx = edx || {};
 
         el: '#register-form',
 
-        tpl: $('#register-tpl').html(),
+        tpl: '#register-tpl',
 
         fieldTpl: $('#form_field-tpl').html(),
 
@@ -24,6 +24,7 @@ var edx = edx || {};
         $form: {},
 
         initialize: function() {
+            this.tpl = $(this.tpl).html();
             this.getInitialData();
         },
 

lms/templates/student_account/login_and_register.html

@@ -14,7 +14,7 @@
 <%block name="header_extras">
 % for template_name in ["account", "access", "form_field", "login", "register", "password_reset"]:
 <script type="text/template" id="${template_name}-tpl">
-  <%static:include path="student_account/${template_name}.underscore" />
+    <%static:include path="student_account/${template_name}.underscore" />
 </script>
 % endfor
 </%block>