lorenzoplanas · August 29, 2015 13:57 · Mar 6, 2014 · Mar 6, 2014 · Mar 5, 2014 · Mar 5, 2014
diff --git a/loginMemoizedDomHooks.js → loginDomHooks.js b/loginMemoizedDomHooks.js → loginDomHooks.js
@@ -8,7 +8,6 @@ App.LoginPresenter = (function() {
     );
 
     // DOM hooks
-    var DomMemo = {}
     this.$form = finder("form");
     this.$inputEmail = finder("input[name='email']");
     this.$inputPassword = finder("input[name='password']");
@@ -56,12 +55,11 @@ App.LoginPresenter = (function() {
     };
 
 
-    // Search for a selector within $el, and memoize results
+    // Search for a selector within $el
     function finder(selector) {
       return (function() {
-        DomMemo[selector] = DomMemo[selector] || $(selector, this.$el);
-        return DomMemo[selector];
-      })
+        return (selector, this.$el);
+      });
     }
   };
 

diff --git a/login.js b/login.js
@@ -51,7 +51,7 @@ App.LoginPresenter = (function() {
 
   // Presenter is a mixin with common code for presenters,
   // not shown in this sample
-  $.extend(Login.prototype, Presenter);
+  $.extend(Login.prototype, App.Presenter);
 
   return Login;
 })();
diff --git a/loginMemoizedDomHooks.js b/loginMemoizedDomHooks.js
@@ -29,7 +29,7 @@ App.LoginPresenter = (function() {
     // Handle login form submit
     this.logIn = function(e) {
       e.preventDefault();
-      this.$errorMessages.remove();
+      this.$errorMessages().remove();
 
       options.user.login({
         email: this.$inputEmail().val(),
@@ -67,7 +67,7 @@ App.LoginPresenter = (function() {
 
   // Presenter is a mixin with common code for presenters,
   // not shown in this sample
-  $.extend(Login.prototype, Presenter);
+  $.extend(Login.prototype, App.Presenter);
 
   return Login;
 })();
diff --git a/loginRefactored.js b/loginRefactored.js
@@ -68,7 +68,7 @@ App.LoginPresenter = (function() {
 
   // Presenter is a mixin with common code for presenters,
   // not shown in this sample
-  $.extend(Login.prototype, Presenter);
+  $.extend(Login.prototype, App.Presenter);
 
   return Login;
 })();
diff --git a/loginSpec.js b/loginSpec.js
@@ -29,7 +29,7 @@ describe("login presenter", function() {
     $("input[name='email']", loginPresenter.$el).val("wrong");
     $("form", loginPresenter.$el).trigger("submit");
 
-    expect($(".error", loginPresenter.$el).length).toBe(0);
+    expect($(".error", loginPresenter.$el).length).toBe(1);
   });
 
   it("triggers a load dashboard event upon successful login", function() {

diff --git a/login.js b/login.js
@@ -0,0 +1,57 @@
+App.LoginPresenter = (function() {
+  var Login = function($el, options) {
+    this.$el = $el;
+    this.name = "login";
+
+    this.errorMessage = $.render(
+      App.templates.error, { text: "Wrong credentials" }
+    );
+
+    // Listen to relevant events
+    this.listen = function() {
+      $("form", this.$el).on("submit", this.logIn.bind(this));
+      return this;
+    };
+
+    // Unbind listeners before being removed from the DOM
+    this.unlisten = function() {
+      $("form", this.$el).off("submit", this.logIn.bind(this));
+      return this;
+    };
+
+    // Handle login form submit
+    this.logIn = function(e) {
+      e.preventDefault();
+      $(".error", this.$el).remove();
+
+      options.user.login({
+        email: $("input[name='email']", this.$el).val();
+        password: $("input[name='password']", this.$el).val();
+      })
+      .fail(this.loginError.bind(this))
+      .done(this.loginSuccess.bind(this));
+
+      return this;
+    };
+
+    // Prepend an error message if incorrect credentials
+    this.loginError = function() {
+      $("form", this.$el).prepend(this.errorMessage);
+      return this;
+    };
+
+    // Upon a "load dashboard" event, this presenter will unbind
+    // events, be removed from the DOM, and the dashboard presenter
+    // will render, bind, etc. Code for that is in the Presenter mixin.
+    this.loginSuccess = function() {
+      options.bus.trigger("load", "dashboard");
+      return this;
+    };
+  };
+
+  // Presenter is a mixin with common code for presenters,
+  // not shown in this sample
+  $.extend(Login.prototype, Presenter);
+
+  return Login;
+})();
diff --git a/loginMemoizedDomHooks.js b/loginMemoizedDomHooks.js
@@ -0,0 +1,73 @@
+App.LoginPresenter = (function() {
+  var Login = function($el, options) {
+    this.$el = $el;
+    this.name = "login";
+
+    this.errorMessage = $.render(
+      App.templates.error, { text: "Wrong credentials" }
+    );
+
+    // DOM hooks
+    var DomMemo = {}
+    this.$form = finder("form");
+    this.$inputEmail = finder("input[name='email']");
+    this.$inputPassword = finder("input[name='password']");
+    this.$errorMessages = finder(".error");
+
+    // Listen to relevant events
+    this.listen = function() {
+      this.$form().on("submit", this.logIn.bind(this));
+      return this;
+    };
+
+    // Unbind listeners before being removed from the DOM
+    this.unlisten = function() {
+      this.$form().off("submit", this.logIn.bind(this));
+      return this;
+    };
+
+    // Handle login form submit
+    this.logIn = function(e) {
+      e.preventDefault();
+      this.$errorMessages.remove();
+
+      options.user.login({
+        email: this.$inputEmail().val(),
+        password: this.$inputPassword().val()
+      })
+      .fail(this.loginError.bind(this))
+      .done(this.loginSuccess.bind(this));
+
+      return this;
+    };
+
+    // Prepend an error message if incorrect credentials
+    this.loginError = function() {
+      this.$form().prepend(this.errorMessage);
+      return this;
+    };
+
+    // Upon a "load dashboard" event, this presenter will unbind
+    // events, be removed from the DOM, and the dashboard presenter
+    // will render, bind, etc. Code for that is in the Presenter mixin.
+    this.loginSuccess = function() {
+      options.bus.trigger("load", "dashboard");
+      return this;
+    };
+
+
+    // Search for a selector within $el, and memoize results
+    function finder(selector) {
+      return (function() {
+        DomMemo[selector] = DomMemo[selector] || $(selector, this.$el);
+        return DomMemo[selector];
+      })
+    }
+  };
+
+  // Presenter is a mixin with common code for presenters,
+  // not shown in this sample
+  $.extend(Login.prototype, Presenter);
+
+  return Login;
+})();
diff --git a/loginRefactored.js b/loginRefactored.js
@@ -0,0 +1,74 @@
+App.LoginPresenter = (function() {
+  var Login = function($el, options) {
+    this.$el = $el;
+    this.name = "login";
+
+    this.errorMessage = $.render(
+      App.templates.error, { text: "Wrong credentials" }
+    );
+
+    // DOM Hooks
+    this.$form = function() {
+      return $("form", this.$el);
+    };
+
+    this.$inputEmail = function() {
+      return $("input[name='email']", this.$el);
+    };
+
+    this.$inputPassword = function() {
+      return $("input[name='password']", this.$el);
+    };
+
+    this.$errorMessages = function() {
+      return $(".error", this.$el);
+    };
+
+    // Listen to relevant events
+    this.listen = function() {
+      this.$form().on("submit", this.logIn.bind(this));
+      return this;
+    };
+
+    // Unbind listeners before being removed from the DOM
+    this.unlisten = function() {
+      this.$form().off("submit", this.logIn.bind(this));
+      return this;
+    };
+
+    // Handle login form submit
+    this.logIn = function(e) {
+      e.preventDefault();
+      this.$errorMessages().remove();
+
+      options.user.login({
+        email: this.$inputEmail().val();
+        password: this.$inputPassword().val();
+      })
+      .fail(this.loginError.bind(this))
+      .done(this.loginSuccess.bind(this));
+
+      return this;
+    };
+
+    // Prepend an error message if incorrect credentials
+    this.loginError = function() {
+      this.$form().prepend(this.errorMessage);
+      return this;
+    };
+
+    // Upon a "load dashboard" event, this presenter will unbind
+    // events, be removed from the DOM, and the dashboard presenter
+    // will render, bind, etc. Code for that is in the Presenter mixin.
+    this.loginSuccess = function() {
+      options.bus.trigger("load", "dashboard");
+      return this;
+    };
+  };
+
+  // Presenter is a mixin with common code for presenters,
+  // not shown in this sample
+  $.extend(Login.prototype, Presenter);
+
+  return Login;
+})();
diff --git a/loginSpec.js b/loginSpec.js
@@ -0,0 +1,48 @@
+describe("login presenter", function() {
+  var $target;
+  var bus;
+  var loginPresenter;
+
+  beforeEach(function() {
+    bus = $.observable({});
+    $target = $("<div class='page'></div>");
+
+    loginPresenter = new App.LoginPresenter($target, {
+      user: new User(),
+      bus: bus
+    });
+  });
+
+  it("renders a login form upon a load login event", function() {
+    expect(loginPresenter.$el.is(":empty")).toBe(true);
+    loginPresenter.render();
+    expect(loginPresenter.$el.is(":empty")).toBe(false);
+  });
+
+  it("renders an error message if credentials incorrect", function() { 
+    loginPresenter.render();
+    loginPresenter.listen();
+
+    expect($(".error", loginPresenter.$el).length).toBe(0);
+
+    $("input[name='email']", loginPresenter.$el).val("wrong");
+    $("input[name='email']", loginPresenter.$el).val("wrong");
+    $("form", loginPresenter.$el).trigger("submit");
+
+    expect($(".error", loginPresenter.$el).length).toBe(0);
+  });
+
+  it("triggers a load dashboard event upon successful login", function() {
+    bus.on("load", function(pageToLoad) {
+      expect(pageToLoad).toBe("dashboard")
+    })
+
+    loginPresenter.render();
+    loginPresenter.listen();
+
+    $("input[name='email']", loginPresenter.$el).val("wrong");
+    $("input[name='email']", loginPresenter.$el).val("wrong");
+    $("form", loginPresenter.$el).trigger("submit");
+    $("form", $el).trigger("submit");
+  });
+});
diff --git a/loginSpecRefactored.js b/loginSpecRefactored.js
@@ -0,0 +1,47 @@
+describe("login presenter", function() {
+  var $target;
+  var bus;
+  var loginPresenter;
+
+  beforeEach(function() {
+    bus = $.observable({});
+    $target = $("<div class='page'></div>");
+
+    loginPresenter = new App.LoginPresenter($target, {
+      user: new User(),
+      bus: bus
+    });
+  });
+
+  it("renders a login form upon a load login event", function() {
+    expect(loginPresenter.$element.is(":empty")).toBe(true);
+    loginPresenter.render();
+    expect(loginPresenter.$element.is(":empty")).toBe(false);
+  });
+
+  it("renders an error message if credentials incorrect", function() { 
+    loginPresenter.render();
+    loginPresenter.bindDomEvents();
+
+    expect(loginPresenter.$errorMessages().length).toBe(0);
+
+    loginPresenter.$inputEmail().val("wrong");
+    loginPresenter.$inputPassword().val("wrong");
+    loginPresenter.$form().trigger("submit");
+
+    expect(loginPresenter.$errorMessages().length).toBe(1);
+  });
+
+  it("triggers a load dashboard event upon successful login", function() {
+    bus.on("load", function(pageToLoad) {
+      expect(pageToLoad).toBe("dashboard")
+    })
+
+    loginPresenter.render();
+    loginPresenter.bindDomEvents();
+
+    loginPresenter.$inputEmail().val("wrong");
+    loginPresenter.$inputPassword().val("wrong");
+    loginPresenter.$form().trigger("submit");
+  });
+});