Add home login views tests

www/scripts/apps/login/home/views/form.js

@@ -13,11 +13,11 @@ define([
     "backbone",
     "bootstrap",
     "common/validator",
-    "apps/login/home/views/inputView"
+    "apps/login/home/views/input"
 ], function($, _, Backbone, bootstrap, Validator, InputView) {
     var RegisterForm = Backbone.View.extend({
         events: {
-            "submit": "onSubmit"
+            "submit": "_onSubmit"
         },
         initialize: function(options) {
             var self = this;
@@ -36,7 +36,7 @@ define([
                 self._addInputView(input);
             });
         },
-        onSubmit: function (event) {
+        _onSubmit: function (event) {
             var self = this;
 
             // reset previous errors in the view

www/scripts/apps/login/home/views/input.js

@@ -11,7 +11,7 @@ define([
     "jquery",
     "underscore",
     "backbone",
-    "apps/login/home/views/errorView",
+    "apps/login/home/views/error",
     "common/multiviews"
 ], function($, _, Backbone, ErrorView, MultiViews) {
     var InputView = Backbone.View.extend(_.extend({}, MultiViews, {

www/scripts/common/validator.js

@@ -58,6 +58,10 @@ define([
         return this.errors.length > 0;
     };
 
+    FormValidator.prototype.getRules = function() {
+        return this.rules;
+    };
+
     FormValidator.prototype._addField = function(field) {
         this.fields.push({
             name: field.name,

www/scripts/tests/fixtures/home/login/form

@@ -0,0 +1,55 @@
+<form novalidate="" name="loginForm" method="POST" action="/login/authenticate/">
+    <div class="row-fluid">
+        <div class="span12">
+            <label for="login" class="required">Login</label>
+            <table class="input-table">
+                <tbody><tr>
+                        <td class="icon">
+                            <i class="icon-envelope icon-white"></i>
+                        </td>
+                        <td class="input">
+                            <input type="text" id="login" name="login" required="required" class="input-block-level">
+                        </td>
+                    </tr>
+                </tbody></table>
+            <div class="error-view"></div>
+        </div>
+    </div>
+    <div class="row-fluid">
+        <div class="span12">
+            <label for="password" class="required">Password</label>
+            <table class="input-table">
+                <tbody><tr>
+                        <td class="icon">
+                            <i class="icon-lock icon-white"></i>
+                        </td>
+                        <td class="input">
+                            <input type="password" id="password" name="password" required="required" class="input-block-level">
+                        </td>
+                    </tr>
+                </tbody></table>
+            <div class="error-view"></div>
+        </div>
+    </div>
+    <div class="text-right">
+        <a class="forget-password-link" href="/login/forgot-password/">Forgot password?</a>
+    </div>
+
+    <div class="row-fluid">
+        <div class="span12">
+            <button type="submit" class="btn btn-success btn-trigger">
+                Connection
+            </button>
+        </div>
+    </div>
+    <div class="row-fluid">
+        <div class="span12">
+            <label for="remember-me" class="checkbox">
+                <input type="checkbox" id="remember-me" name="remember-me" checked="checked" value="1">
+                Remember me
+            </label>
+            <div class="error-view"></div>
+        </div>
+    </div>
+    <input type="hidden" id="redirect" name="redirect"><input type="hidden" id="_token" name="_token" value="76b1bdee87734050bb1ab237c162f1211eda0622">
+</form>

www/scripts/tests/fixtures/home/login/templates

@@ -0,0 +1,23 @@
+<script type="text/template" id="field_errors">
+    <div class="hidden-phone popover bottom field-error">
+        <div class="arrow"></div>
+        <div class="popover-content">
+            <table>
+                <tr>
+                    <td style="width:35px;"><i class="icon-warning-sign icon-white"></i></td>
+                    <td>
+                        <% _.each(errors, function(error) { %>
+                            <div><%= error.message %></div>
+                        <% }); %>
+                    </td>
+                </tr>
+            </table>
+        </div>
+    </div>
+
+    <span class="visible-phone text-error help-block help-block-error">
+        <% _.each(errors, function(error) { %>
+            <td> <%= error.message %></td>
+        <% }); %>
+    </span>
+</script>

www/scripts/tests/index.html

@@ -14,8 +14,10 @@
         require([
             'tests/baseTest',
             'specs/admin/fields',
+            'specs/login/home',
             'specs/models',
-            'specs/validator'], runMocha);
+            'specs/validator'
+        ], runMocha);
     </script>
 </body>
 </html>

www/scripts/tests/specs/admin/fields.js

@@ -44,7 +44,7 @@ define([
 
     App.initialize();
 
-    describe("Application", function() {
+    describe("Admin field", function() {
         describe("Initialization", function() {
             it("should create a global variable", function() {
                 should.exist(AdminFieldApp);

www/scripts/tests/specs/login/home.js

@@ -0,0 +1,93 @@
+define([
+    'chai',
+    'fixtures',
+    'jquery',
+    'apps/login/home/views/form',
+    'apps/login/home/views/input',
+    'apps/login/home/views/error'
+], function(
+    chai,
+    fixtures,
+    $,
+    FormView,
+    InputView,
+    ErrorView
+) {
+    var expect = chai.expect;
+    var assert = chai.assert;
+    var should = chai.should();
+
+    fixtures.path = 'fixtures';
+    $("body").append(fixtures.read('home/login/form', 'home/login/templates'));
+
+    describe("Login Home", function() {
+        describe("Form View", function() {
+            it("should be initialize validator with proper rules", function() {
+                var rules = [{name: "hello",rules: "simple_rules"}];
+                var form = new FormView({
+                    el: $('form[name=loginForm]'),
+                    rules: rules
+                });
+                form.validator.getRules().should.equal(rules);
+            });
+
+            it("should be initialize input views", function() {
+                var form = new FormView({
+                    el: $('form[name=loginForm]')
+                });
+
+                Object.keys(form.inputViews).length.should.equal(5);
+            });
+
+            it("should be initialize errors", function() {
+                var form = new FormView({
+                    el: $('form[name=loginForm]')
+                });
+
+                assert.isTrue(_.isEmpty(form.validator.getErrors()));
+            });
+        });
+
+        describe("Input View", function() {
+            it("should initialize error view", function() {
+                var input = new InputView({
+                    "name": "test"
+                });
+                expect(input.errorView).to.be.an.instanceof(ErrorView);
+            });
+        });
+
+        describe("Error View", function() {
+            it("should render errors", function() {
+                var error ={
+                    name: "test",
+                    message: "Something is wrong"
+                };
+
+                var errorView = new ErrorView({
+                    "errors": [error],
+                    "el" : $(".error-view").first()
+                });
+
+                errorView.render();
+
+                assert.isTrue(errorView.$el.html().indexOf(error.message) !== -1);
+            });
+
+            it("should empty errors content if there are no errors", function() {
+                var $el = $(".error-view").first();
+
+                $el.html('previous error here');
+
+                var errorView = new ErrorView({
+                    "errors": [],
+                    "el" : $el
+                });
+
+                errorView.render();
+
+                assert.isTrue(errorView.$el.html() === "");
+            });
+        });
+    });
+});