change to keydown from keyup; add delayed $updateView

 - There was a perceived lag when typing do to the fact that we were
   listening on the keyup event instead of keydown. The issue with
   keydown is that we can not read the value of the input field. To
   solve this we schedule a defer call and perform the model update
   then.

 - To prevent calling $eval on root scope too many times as well as to
   prevent drowning the browser with too many updates we now call the
   $eval only after 25ms and any additional requests get ignored. The
   new update service is called $updateView

4 files changed, 70 insertions, 13 deletions

diff --git a/test/BinderSpec.js b/test/BinderSpec.js
index 9515accb..33bcb091 100644
--- a/test/BinderSpec.js
+++ b/test/BinderSpec.js
@@ -248,7 +248,8 @@ describe('Binder', function(){
     assertEquals('b', second.val());
   
     first.val('ABC');
-    browserTrigger(first, 'keyup');
+    browserTrigger(first, 'keydown');
+    c.scope.$service('$browser').defer.flush();
     assertEquals(c.scope.items[0].x, 'ABC');
   });
   
diff --git a/test/servicesSpec.js b/test/servicesSpec.js
index 6df83beb..8918f415 100644
--- a/test/servicesSpec.js
+++ b/test/servicesSpec.js
@@ -394,7 +394,7 @@ describe("service", function(){
     it('should call eval even if an exception is thrown in callback', function() {
       var eval = this.spyOn(scope, '$eval').andCallThrough();
 
-      $defer(function() {throw "Test Error"});
+      $defer(function() {throw "Test Error";});
       expect(eval).wasNotCalled();
 
       $browser.defer.flush();
@@ -594,7 +594,7 @@ describe("service", function(){
 
         $browser.defer.flush();
         expect(eval).wasCalled();
-      })
+      });
     });
 
   });
@@ -777,4 +777,57 @@ describe("service", function(){
       expect(match[10]).toEqual('?book=moby');
     });
   });
+
+  describe('$updateView', function(){
+    var scope, browser, evalCount, $updateView;
+
+    beforeEach(function(){
+      browser = new MockBrowser();
+      // Pretend that you are real Browser so that we see the delays
+      browser.isMock = false;
+      browser.defer = jasmine.createSpy('defer');
+
+      scope = angular.scope(null, null, {$browser:browser});
+      $updateView = scope.$service('$updateView');
+      scope.$onEval(function(){ evalCount++; });
+      evalCount = 0;
+    });
+
+    it('should eval root scope after a delay', function(){
+      $updateView();
+      expect(evalCount).toEqual(0);
+      expect(browser.defer).toHaveBeenCalled();
+      expect(browser.defer.mostRecentCall.args[1]).toEqual(25);
+      browser.defer.mostRecentCall.args[0]();
+      expect(evalCount).toEqual(1);
+    });
+
+    it('should allow changing of delay time', function(){
+      var oldValue = angular.service('$updateView').delay;
+      angular.service('$updateView').delay = 50;
+      $updateView();
+      expect(evalCount).toEqual(0);
+      expect(browser.defer).toHaveBeenCalled();
+      expect(browser.defer.mostRecentCall.args[1]).toEqual(50);
+      angular.service('$updateView').delay = oldValue;
+    });
+
+    it('should ignore multiple requests for update', function(){
+      $updateView();
+      $updateView();
+      expect(evalCount).toEqual(0);
+      expect(browser.defer).toHaveBeenCalled();
+      expect(browser.defer.callCount).toEqual(1);
+      browser.defer.mostRecentCall.args[0]();
+      expect(evalCount).toEqual(1);
+    });
+
+    it('should update immediatelly in test/mock mode', function(){
+      scope = angular.scope();
+      scope.$onEval(function(){ evalCount++; });
+      expect(evalCount).toEqual(0);
+      scope.$service('$updateView')();
+      expect(evalCount).toEqual(1);
+    });
+  });
 });
diff --git a/test/testabilityPatch.js b/test/testabilityPatch.js
index d389ae19..6cbf91e9 100644
--- a/test/testabilityPatch.js
+++ b/test/testabilityPatch.js
@@ -1,7 +1,7 @@
 /**
  * Here is the problem: http://bugs.jquery.com/ticket/7292
  * basically jQuery treats change event on some browsers (IE) as a
- * special event and changes it form 'change' to 'click/keyup' and
+ * special event and changes it form 'change' to 'click/keydown' and
  * few others. This horrible hack removes the special treatment
  */
 _jQuery.event.special.change = undefined;
diff --git a/test/widgetsSpec.js b/test/widgetsSpec.js
index e56e895b..8dab4630 100644
--- a/test/widgetsSpec.js
+++ b/test/widgetsSpec.js
@@ -22,7 +22,7 @@ describe("widget", function(){
   describe("input", function(){
 
     describe("text", function(){
-      it('should input-text auto init and handle keyup/change events', function(){
+      it('should input-text auto init and handle keydown/change events', function(){
         compile('<input type="Text" name="name" value="Misko" ng:change="count = count + 1" ng:init="count=0"/>');
         expect(scope.$get('name')).toEqual("Misko");
         expect(scope.$get('count')).toEqual(0);
@@ -32,7 +32,10 @@ describe("widget", function(){
         expect(element.val()).toEqual("Adam");
 
         element.val('Shyam');
-        browserTrigger(element, 'keyup');
+        browserTrigger(element, 'keydown');
+        // keydown event must be deferred
+        expect(scope.$get('name')).toEqual('Adam');
+        scope.$service('$browser').defer.flush();
         expect(scope.$get('name')).toEqual('Shyam');
         expect(scope.$get('count')).toEqual(1);
 
@@ -46,7 +49,7 @@ describe("widget", function(){
         compile('<input type="Text" name="name" value="Misko" ng:change="count = count + 1" ng:init="count=0"/>');
         expect(scope.name).toEqual("Misko");
         expect(scope.count).toEqual(0);
-        browserTrigger(element, 'keyup');
+        browserTrigger(element, 'keydown');
         expect(scope.name).toEqual("Misko");
         expect(scope.count).toEqual(0);
       });
@@ -69,7 +72,7 @@ describe("widget", function(){
           expect(element.val()).toEqual("x, y, z");
 
           element.val('1, 2, 3');
-          browserTrigger(element, 'keyup');
+          browserTrigger(element);
           expect(scope.$get('list')).toEqual(['1', '2', '3']);
         });
 
@@ -191,7 +194,7 @@ describe("widget", function(){
           expect(element.attr('ng-validation-error')).toBeFalsy();
 
           element.val('x');
-          browserTrigger(element, 'keyup');
+          browserTrigger(element);
           expect(element.hasClass('ng-validation-error')).toBeTruthy();
           expect(element.attr('ng-validation-error')).toEqual('Not a number');
         });
@@ -245,7 +248,7 @@ describe("widget", function(){
       expect(element.attr('ng-validation-error')).toBeFalsy();
 
       element.val('');
-      browserTrigger(element, 'keyup');
+      browserTrigger(element);
       expect(element.hasClass('ng-validation-error')).toBeTruthy();
       expect(element.attr('ng-validation-error')).toEqual('Required');
     });
@@ -270,7 +273,7 @@ describe("widget", function(){
       expect(element.attr('ng-validation-error')).toEqual('Required');
 
       element.val('abc');
-      browserTrigger(element, 'keyup');
+      browserTrigger(element);
       expect(element.hasClass('ng-validation-error')).toBeFalsy();
       expect(element.attr('ng-validation-error')).toBeFalsy();
     });
@@ -284,11 +287,11 @@ describe("widget", function(){
       expect(element.val()).toEqual("Adam");
 
       element.val('Shyam');
-      browserTrigger(element, 'keyup');
+      browserTrigger(element);
       expect(scope.$get('name')).toEqual('Shyam');
 
       element.val('Kai');
-      browserTrigger(element, 'change');
+      browserTrigger(element);
       expect(scope.$get('name')).toEqual('Kai');
     });