feat(ng:repeat) collection items and DOM elements affinity / stability

1 files changed, 189 insertions, 96 deletions

diff --git a/test/widgetsSpec.js b/test/widgetsSpec.js
index 6fccaa48..02d0ef71 100644
--- a/test/widgetsSpec.js
+++ b/test/widgetsSpec.js
@@ -1,6 +1,6 @@
 'use strict';
 
-describe("widget", function(){
+describe("widget", function() {
   var compile, element, scope;
 
   beforeEach(function() {
@@ -19,14 +19,15 @@ describe("widget", function(){
     };
   });
 
-  afterEach(function(){
+  afterEach(function() {
     dealoc(element);
   });
 
-  describe("input", function(){
 
-    describe("text", function(){
-      it('should input-text auto init and handle keydown/change events', function(){
+  describe("input", function() {
+
+    describe("text", 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.name).toEqual("Misko");
         expect(scope.count).toEqual(0);
@@ -49,7 +50,7 @@ describe("widget", function(){
         expect(scope.count).toEqual(2);
       });
 
-      it('should not trigger eval if value does not change', function(){
+      it('should not trigger eval if value does not change', 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);
@@ -58,16 +59,16 @@ describe("widget", function(){
         expect(scope.count).toEqual(0);
       });
 
-      it('should allow complex refernce binding', function(){
+      it('should allow complex refernce binding', function() {
         compile('<div ng:init="obj={abc:{}}">'+
                   '<input type="Text" name="obj[\'abc\'].name" value="Misko""/>'+
                 '</div>');
         expect(scope.obj['abc'].name).toEqual('Misko');
       });
 
-      describe("ng:format", function(){
 
-        it("should format text", function(){
+      describe("ng:format", function() {
+        it("should format text", function() {
           compile('<input type="Text" name="list" value="a,b,c" ng:format="list"/>');
           expect(scope.list).toEqual(['a', 'b', 'c']);
 
@@ -80,13 +81,13 @@ describe("widget", function(){
           expect(scope.list).toEqual(['1', '2', '3']);
         });
 
-        it("should come up blank if null", function(){
+        it("should come up blank if null", function() {
           compile('<input type="text" name="age" ng:format="number" ng:init="age=null"/>');
           expect(scope.age).toBeNull();
           expect(scope.$element[0].value).toEqual('');
         });
 
-        it("should show incorect text while number does not parse", function(){
+        it("should show incorect text while number does not parse", function() {
           compile('<input type="text" name="age" ng:format="number"/>');
           scope.age = 123;
           scope.$digest();
@@ -97,14 +98,14 @@ describe("widget", function(){
           expect(scope.$element).toBeInvalid();
         });
 
-        it("should clober incorect text if model changes", function(){
+        it("should clober incorect text if model changes", function() {
           compile('<input type="text" name="age" ng:format="number" value="123X"/>');
           scope.age = 456;
           scope.$digest();
           expect(scope.$element.val()).toEqual('456');
         });
 
-        it("should not clober text if model changes due to itself", function(){
+        it("should not clober text if model changes due to itself", function() {
           compile('<input type="text" name="list" ng:format="list" value="a"/>');
 
           scope.$element.val('a ');
@@ -128,23 +129,23 @@ describe("widget", function(){
           expect(scope.list).toEqual(['a', 'b']);
         });
 
-        it("should come up blank when no value specifiend", function(){
+        it("should come up blank when no value specifiend", function() {
           compile('<input type="text" name="age" ng:format="number"/>');
           scope.$digest();
           expect(scope.$element.val()).toEqual('');
           expect(scope.age).toEqual(null);
         });
-
       });
 
-      describe("checkbox", function(){
-        it("should format booleans", function(){
+
+      describe("checkbox", function() {
+        it("should format booleans", function() {
           compile('<input type="checkbox" name="name" ng:init="name=false"/>');
           expect(scope.name).toEqual(false);
           expect(scope.$element[0].checked).toEqual(false);
         });
 
-        it('should support type="checkbox"', function(){
+        it('should support type="checkbox"', function() {
           compile('<input type="checkBox" name="checkbox" checked ng:change="action = true"/>');
           expect(scope.checkbox).toEqual(true);
           browserTrigger(element);
@@ -154,9 +155,9 @@ describe("widget", function(){
           expect(scope.checkbox).toEqual(true);
         });
 
-        it("should use ng:format", function(){
+        it("should use ng:format", function() {
           angularFormatter('testFormat', {
-            parse: function(value){
+            parse: function(value) {
               return value ? "Worked" : "Failed";
             },
 
@@ -181,8 +182,9 @@ describe("widget", function(){
         });
       });
 
-      describe("ng:validate", function(){
-        it("should process ng:validate", function(){
+
+      describe("ng:validate", function() {
+        it("should process ng:validate", function() {
           compile('<input type="text" name="price" value="abc" ng:validate="number"/>',
                   jqLite(document.body));
           expect(element.hasClass('ng-validation-error')).toBeTruthy();
@@ -210,9 +212,9 @@ describe("widget", function(){
           expect(element.attr('ng-validation-error')).toBeFalsy();
         });
 
-        it("should not call validator if undefined/empty", function(){
+        it("should not call validator if undefined/empty", function() {
           var lastValue = "NOT_CALLED";
-          angularValidator.myValidator = function(value){lastValue = value;};
+          angularValidator.myValidator = function(value) {lastValue = value;};
           compile('<input type="text" name="url" ng:validate="myValidator"/>');
           expect(lastValue).toEqual("NOT_CALLED");
 
@@ -225,19 +227,20 @@ describe("widget", function(){
       });
     });
 
-    it("should ignore disabled widgets", function(){
+
+    it("should ignore disabled widgets", function() {
       compile('<input type="text" name="price" ng:required disabled/>');
       expect(element.hasClass('ng-validation-error')).toBeFalsy();
       expect(element.attr('ng-validation-error')).toBeFalsy();
     });
 
-    it("should ignore readonly widgets", function(){
+    it("should ignore readonly widgets", function() {
       compile('<input type="text" name="price" ng:required readonly/>');
       expect(element.hasClass('ng-validation-error')).toBeFalsy();
       expect(element.attr('ng-validation-error')).toBeFalsy();
     });
 
-    it("should process ng:required", function(){
+    it("should process ng:required", function() {
       compile('<input type="text" name="price" ng:required/>', jqLite(document.body));
       expect(element.hasClass('ng-validation-error')).toBeTruthy();
       expect(element.attr('ng-validation-error')).toEqual('Required');
@@ -296,9 +299,8 @@ describe("widget", function(){
     });
 
 
-    describe('radio', function(){
-
-      it('should support type="radio"', function(){
+    describe('radio', function() {
+      it('should support type="radio"', function() {
         compile('<div>' +
             '<input type="radio" name="chose" value="A" ng:change="clicked = 1"/>' +
             '<input type="radio" name="chose" value="B" checked ng:change="clicked = 2"/>' +
@@ -323,7 +325,7 @@ describe("widget", function(){
         expect(scope.clicked).toEqual(1);
       });
 
-      it('should honor model over html checked keyword after', function(){
+      it('should honor model over html checked keyword after', function() {
         compile('<div ng:init="choose=\'C\'">' +
             '<input type="radio" name="choose" value="A""/>' +
             '<input type="radio" name="choose" value="B" checked/>' +
@@ -333,7 +335,7 @@ describe("widget", function(){
         expect(scope.choose).toEqual('C');
       });
 
-      it('should honor model over html checked keyword before', function(){
+      it('should honor model over html checked keyword before', function() {
         compile('<div ng:init="choose=\'A\'">' +
             '<input type="radio" name="choose" value="A""/>' +
             '<input type="radio" name="choose" value="B" checked/>' +
@@ -345,8 +347,9 @@ describe("widget", function(){
 
     });
 
-    describe('select-one', function(){
-      it('should initialize to selected', function(){
+
+    describe('select-one', function() {
+      it('should initialize to selected', function() {
         compile(
             '<select name="selection">' +
                 '<option>A</option>' +
@@ -372,11 +375,11 @@ describe("widget", function(){
 
         expect(scope.$element.text()).toBe('foobarC');
       });
-
     });
 
-    describe('select-multiple', function(){
-      it('should support type="select-multiple"', function(){
+
+    describe('select-multiple', function() {
+      it('should support type="select-multiple"', function() {
         compile('<select name="selection" multiple>' +
                   '<option>A</option>' +
                   '<option selected>B</option>' +
@@ -386,32 +389,32 @@ describe("widget", function(){
         scope.$digest();
         expect(element[0].childNodes[0].selected).toEqual(true);
       });
-
     });
 
-    it('should ignore text widget which have no name', function(){
+
+    it('should ignore text widget which have no name', function() {
       compile('<input type="text"/>');
       expect(scope.$element.attr('ng-exception')).toBeFalsy();
       expect(scope.$element.hasClass('ng-exception')).toBeFalsy();
     });
 
-    it('should ignore checkbox widget which have no name', function(){
+    it('should ignore checkbox widget which have no name', function() {
       compile('<input type="checkbox"/>');
       expect(scope.$element.attr('ng-exception')).toBeFalsy();
       expect(scope.$element.hasClass('ng-exception')).toBeFalsy();
     });
 
-    it('should report error on assignment error', function(){
-      expect(function(){
+    it('should report error on assignment error', function() {
+      expect(function() {
         compile('<input type="text" name="throw \'\'" value="x"/>');
       }).toThrow("Syntax Error: Token '''' is an unexpected token at column 7 of the expression [throw ''] starting at [''].");
       $logMock.error.logs.shift();
     });
-
   });
 
-  describe('ng:switch', function(){
-    it('should switch on value change', function(){
+
+  describe('ng:switch', function() {
+    it('should switch on value change', function() {
       compile('<ng:switch on="select">' +
           '<div ng:switch-when="1">first:{{name}}</div>' +
           '<div ng:switch-when="2">second:{{name}}</div>' +
@@ -435,7 +438,7 @@ describe("widget", function(){
       expect(element.text()).toEqual('true:misko');
     });
 
-    it('should switch on switch-when-default', function(){
+    it('should switch on switch-when-default', function() {
       compile('<ng:switch on="select">' +
                 '<div ng:switch-when="1">one</div>' +
                 '<div ng:switch-default>other</div>' +
@@ -447,7 +450,7 @@ describe("widget", function(){
       expect(element.text()).toEqual('one');
     });
 
-    it('should call change on switch', function(){
+    it('should call change on switch', function() {
       var scope = angular.compile('<ng:switch on="url" change="name=\'works\'"><div ng:switch-when="a">{{name}}</div></ng:switch>')();
       scope.url = 'a';
       scope.$apply();
@@ -457,7 +460,8 @@ describe("widget", function(){
     });
   });
 
-  describe('ng:include', function(){
+
+  describe('ng:include', function() {
     it('should include on external file', function() {
       var element = jqLite('<ng:include src="url" scope="childScope"></ng:include>');
       var scope = angular.compile(element)();
@@ -488,7 +492,7 @@ describe("widget", function(){
       dealoc(scope);
     });
 
-    it('should allow this for scope', function(){
+    it('should allow this for scope', function() {
       var element = jqLite('<ng:include src="url" scope="this"></ng:include>');
       var scope = angular.compile(element)();
       scope.url = 'myUrl';
@@ -518,7 +522,7 @@ describe("widget", function(){
       dealoc(element);
     });
 
-    it('should destroy old scope', function(){
+    it('should destroy old scope', function() {
       var element = jqLite('<ng:include src="url"></ng:include>');
       var scope = angular.compile(element)();
 
@@ -536,6 +540,7 @@ describe("widget", function(){
     });
   });
 
+
   describe('a', function() {
     it('should prevent default action to be executed when href is empty', function() {
       var orgLocation = document.location.href,
@@ -571,12 +576,13 @@ describe("widget", function(){
     });
   });
 
-  describe('ng:options', function(){
+
+  describe('ng:options', function() {
     var select, scope;
 
-    function createSelect(attrs, blank, unknown){
+    function createSelect(attrs, blank, unknown) {
       var html = '<select';
-      forEach(attrs, function(value, key){
+      forEach(attrs, function(value, key) {
         if (isBoolean(value)) {
           if (value) html += ' ' + key;
         } else {
@@ -591,14 +597,14 @@ describe("widget", function(){
       scope = compile(select);
     }
 
-    function createSingleSelect(blank, unknown){
+    function createSingleSelect(blank, unknown) {
       createSelect({
         'name':'selected',
         'ng:options':'value.name for value in values'
       }, blank, unknown);
     }
 
-    function createMultiSelect(blank, unknown){
+    function createMultiSelect(blank, unknown) {
       createSelect({
         'name':'selected',
         'multiple':true,
@@ -606,19 +612,19 @@ describe("widget", function(){
       }, blank, unknown);
     }
 
-    afterEach(function(){
+    afterEach(function() {
       dealoc(select);
       dealoc(scope);
     });
 
-    it('should throw when not formated "? for ? in ?"', function(){
-      expect(function(){
+    it('should throw when not formated "? for ? in ?"', function() {
+      expect(function() {
         compile('<select name="selected" ng:options="i dont parse"></select>');
       }).toThrow("Expected ng:options in form of '_select_ (as _label_)? for (_key_,)?_value_ in" +
                  " _collection_' but got 'i dont parse'.");
     });
 
-    it('should render a list', function(){
+    it('should render a list', function() {
       createSingleSelect();
       scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
       scope.selected = scope.values[0];
@@ -630,7 +636,7 @@ describe("widget", function(){
       expect(sortedHtml(options[2])).toEqual('<option value="2">C</option>');
     });
 
-    it('should render an object', function(){
+    it('should render an object', function() {
       createSelect({
         'name':'selected',
         'ng:options': 'value as key for (key, value) in object'
@@ -651,7 +657,7 @@ describe("widget", function(){
       expect(options[3].selected).toEqual(true);
     });
 
-    it('should grow list', function(){
+    it('should grow list', function() {
       createSingleSelect();
       scope.values = [];
       scope.$digest();
@@ -671,7 +677,7 @@ describe("widget", function(){
       expect(sortedHtml(select.find('option')[1])).toEqual('<option value="1">B</option>');
     });
 
-    it('should shrink list', function(){
+    it('should shrink list', function() {
       createSingleSelect();
       scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
       scope.selected = scope.values[0];
@@ -695,7 +701,7 @@ describe("widget", function(){
       expect(select.find('option').length).toEqual(1); // we add back the special empty option
     });
 
-    it('should shrink and then grow list', function(){
+    it('should shrink and then grow list', function() {
       createSingleSelect();
       scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
       scope.selected = scope.values[0];
@@ -713,7 +719,7 @@ describe("widget", function(){
       expect(select.find('option').length).toEqual(3);
     });
 
-    it('should update list', function(){
+    it('should update list', function() {
       createSingleSelect();
       scope.values = [{name:'A'}, {name:'B'}, {name:'C'}];
       scope.selected = scope.values[0];
@@ -729,7 +735,7 @@ describe("widget", function(){
       expect(sortedHtml(options[2])).toEqual('<option value="2">D</option>');
     });
 
-    it('should preserve existing options', function(){
+    it('should preserve existing options', function() {
       createSingleSelect(true);
 
       scope.$digest();
@@ -749,8 +755,9 @@ describe("widget", function(){
       expect(jqLite(select.find('option')[0]).text()).toEqual('blank');
     });
 
-    describe('binding', function(){
-      it('should bind to scope value', function(){
+
+    describe('binding', function() {
+      it('should bind to scope value', function() {
         createSingleSelect();
         scope.values = [{name:'A'}, {name:'B'}];
         scope.selected = scope.values[0];
@@ -762,7 +769,8 @@ describe("widget", function(){
         expect(select.val()).toEqual('1');
       });
 
-      it('should bind to scope value and group', function(){
+
+      it('should bind to scope value and group', function() {
         createSelect({
           'name':'selected',
           'ng:options':'item.name group by item.group for item in values'
@@ -795,7 +803,7 @@ describe("widget", function(){
         expect(select.val()).toEqual('0');
       });
 
-      it('should bind to scope value through experession', function(){
+      it('should bind to scope value through experession', function() {
         createSelect({'name':'selected', 'ng:options':'item.id as item.name for item in values'});
         scope.values = [{id:10, name:'A'}, {id:20, name:'B'}];
         scope.selected = scope.values[0].id;
@@ -807,7 +815,7 @@ describe("widget", function(){
         expect(select.val()).toEqual('1');
       });
 
-      it('should bind to object key', function(){
+      it('should bind to object key', function() {
         createSelect({
           'name':'selected',
           'ng:options':'key as value for (key, value) in object'
@@ -822,7 +830,7 @@ describe("widget", function(){
         expect(select.val()).toEqual('blue');
       });
 
-      it('should bind to object value', function(){
+      it('should bind to object value', function() {
         createSelect({
           name:'selected',
           'ng:options':'value as key for (key, value) in object'
@@ -837,7 +845,7 @@ describe("widget", function(){
         expect(select.val()).toEqual('blue');
       });
 
-      it('should insert a blank option if bound to null', function(){
+      it('should insert a blank option if bound to null', function() {
         createSingleSelect();
         scope.values = [{name:'A'}];
         scope.selected = null;
@@ -852,7 +860,7 @@ describe("widget", function(){
         expect(select.find('option').length).toEqual(1);
       });
 
-      it('should reuse blank option if bound to null', function(){
+      it('should reuse blank option if bound to null', function() {
         createSingleSelect(true);
         scope.values = [{name:'A'}];
         scope.selected = null;
@@ -867,7 +875,7 @@ describe("widget", function(){
         expect(select.find('option').length).toEqual(2);
       });
 
-      it('should insert a unknown option if bound to something not in the list', function(){
+      it('should insert a unknown option if bound to something not in the list', function() {
         createSingleSelect();
         scope.values = [{name:'A'}];
         scope.selected = {};
@@ -883,8 +891,9 @@ describe("widget", function(){
       });
     });
 
-    describe('on change', function(){
-      it('should update model on change', function(){
+
+    describe('on change', function() {
+      it('should update model on change', function() {
         createSingleSelect();
         scope.values = [{name:'A'}, {name:'B'}];
         scope.selected = scope.values[0];
@@ -896,7 +905,7 @@ describe("widget", function(){
         expect(scope.selected).toEqual(scope.values[1]);
       });
 
-      it('should fire ng:change if present', function(){
+      it('should fire ng:change if present', function() {
         createSelect({
           name:'selected',
           'ng:options':'value for value in values',
@@ -924,7 +933,7 @@ describe("widget", function(){
         expect(scope.selected).toEqual(scope.values[0]);
       });
 
-      it('should update model on change through expression', function(){
+      it('should update model on change through expression', function() {
         createSelect({name:'selected', 'ng:options':'item.id as item.name for item in values'});
         scope.values = [{id:10, name:'A'}, {id:20, name:'B'}];
         scope.selected = scope.values[0].id;
@@ -936,7 +945,7 @@ describe("widget", function(){
         expect(scope.selected).toEqual(scope.values[1].id);
       });
 
-      it('should update model to null on change', function(){
+      it('should update model to null on change', function() {
         createSingleSelect(true);
         scope.values = [{name:'A'}, {name:'B'}];
         scope.selected = scope.values[0];
@@ -949,8 +958,9 @@ describe("widget", function(){
       });
     });
 
-    describe('select-many', function(){
-      it('should read multiple selection', function(){
+
+    describe('select-many', function() {
+      it('should read multiple selection', function() {
         createMultiSelect();
         scope.values = [{name:'A'}, {name:'B'}];
 
@@ -973,7 +983,7 @@ describe("widget", function(){
         expect(select.find('option')[1].selected).toEqual(true);
       });
 
-      it('should update model on change', function(){
+      it('should update model on change', function() {
         createMultiSelect();
         scope.values = [{name:'A'}, {name:'B'}];
 
@@ -990,8 +1000,7 @@ describe("widget", function(){
 
 
   describe('@ng:repeat', function() {
-
-    it('should ng:repeat over array', function(){
+    it('should ng:repeat over array', function() {
       var scope = compile('<ul><li ng:repeat="item in items" ng:init="suffix = \';\'" ng:bind="item + suffix"></li></ul>');
 
       Array.prototype.extraProperty = "should be ignored";
@@ -1015,16 +1024,16 @@ describe("widget", function(){
       expect(element.text()).toEqual('brad;');
     });
 
-    it('should ng:repeat over object', function(){
+    it('should ng:repeat over object', function() {
       var scope = compile('<ul><li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li></ul>');
       scope.items = {misko:'swe', shyam:'set'};
       scope.$digest();
       expect(element.text()).toEqual('misko:swe;shyam:set;');
     });
 
-    it('should not ng:repeat over parent properties', function(){
-      var Class = function(){};
-      Class.prototype.abc = function(){};
+    it('should not ng:repeat over parent properties', function() {
+      var Class = function() {};
+      Class.prototype.abc = function() {};
       Class.prototype.value = 'abc';
 
       var scope = compile('<ul><li ng:repeat="(key, value) in items" ng:bind="key + \':\' + value + \';\' "></li></ul>');
@@ -1034,8 +1043,8 @@ describe("widget", function(){
       expect(element.text()).toEqual('name:value;');
     });
 
-    it('should error on wrong parsing of ng:repeat', function(){
-      expect(function(){
+    it('should error on wrong parsing of ng:repeat', function() {
+      expect(function() {
         compile('<ul><li ng:repeat="i dont parse"></li></ul>');
       }).toThrow("Expected ng:repeat in form of '_item_ in _collection_' but got 'i dont parse'.");
 
@@ -1076,8 +1085,11 @@ describe("widget", function(){
     });
 
     it('should expose iterator position as $position when iterating over objects', function() {
-      var scope = compile('<ul><li ng:repeat="(key, val) in items" ' +
-                                  'ng:bind="key + \':\' + val + \':\' + $position + \'|\'"></li></ul>');
+      var scope = compile(
+        '<ul>' +
+          '<li ng:repeat="(key, val) in items" ng:bind="key + \':\' + val + \':\' + $position + \'|\'">' +
+          '</li>' +
+        '</ul>');
       scope.items = {'misko':'m', 'shyam':'s', 'doug':'d', 'frodo':'f'};
       scope.$digest();
       expect(element.text()).toEqual('misko:m:first|shyam:s:middle|doug:d:middle|frodo:f:last|');
@@ -1087,12 +1099,93 @@ describe("widget", function(){
       scope.$digest();
       expect(element.text()).toEqual('misko:m:first|shyam:s:last|');
     });
+
+
+    describe('stability', function() {
+      var a, b, c, d, scope, lis;
+
+      beforeEach(function() {
+        scope = compile(
+          '<ul>' +
+            '<li ng:repeat="item in items" ng:bind="key + \':\' + val + \':\' + $position + \'|\'">' +
+            '</li>' +
+          '</ul>');
+        a = {};
+        b = {};
+        c = {};
+        d = {};
+
+        scope.items = [a, b, c];
+        scope.$digest();
+        lis = element.find('li');
+      });
+
+      it('should preserve the order of elements', function() {
+        scope.items = [a, c, d];
+        scope.$digest();
+        var newElements = element.find('li');
+        expect(newElements[0]).toEqual(lis[0]);
+        expect(newElements[1]).toEqual(lis[2]);
+        expect(newElements[2]).not.toEqual(lis[1]);
+      });
+
+      it('should support duplicates', function() {
+        scope.items = [a, a, b, c];
+        scope.$digest();
+        var newElements = element.find('li');
+        expect(newElements[0]).toEqual(lis[0]);
+        expect(newElements[1]).not.toEqual(lis[0]);
+        expect(newElements[2]).toEqual(lis[1]);
+        expect(newElements[3]).toEqual(lis[2]);
+
+        lis = newElements;
+        scope.$digest();
+        newElements = element.find('li');
+        expect(newElements[0]).toEqual(lis[0]);
+        expect(newElements[1]).toEqual(lis[1]);
+        expect(newElements[2]).toEqual(lis[2]);
+        expect(newElements[3]).toEqual(lis[3]);
+
+        scope.$digest();
+        newElements = element.find('li');
+        expect(newElements[0]).toEqual(lis[0]);
+        expect(newElements[1]).toEqual(lis[1]);
+        expect(newElements[2]).toEqual(lis[2]);
+        expect(newElements[3]).toEqual(lis[3]);
+      });
+
+      it('should remove last item when one duplicate instance is removed', function() {
+        scope.items = [a, a, a];
+        scope.$digest();
+        lis = element.find('li');
+
+        scope.items = [a, a];
+        scope.$digest();
+        var newElements = element.find('li');
+        expect(newElements.length).toEqual(2);
+        expect(newElements[0]).toEqual(lis[0]);
+        expect(newElements[1]).toEqual(lis[1]);
+      });
+
+      it('should reverse items when the collection is reversed', function() {
+        scope.items = [a, b, c];
+        scope.$digest();
+        lis = element.find('li');
+
+        scope.items = [c, b, a];
+        scope.$digest();
+        var newElements = element.find('li');
+        expect(newElements.length).toEqual(3);
+        expect(newElements[0]).toEqual(lis[2]);
+        expect(newElements[1]).toEqual(lis[1]);
+        expect(newElements[2]).toEqual(lis[0]);
+      });
+    });
   });
 
 
   describe('@ng:non-bindable', function() {
-
-    it('should prevent compilation of the owning element and its children', function(){
+    it('should prevent compilation of the owning element and its children', function() {
       var scope = compile('<div ng:non-bindable><span ng:bind="name"></span></div>');
       scope.name =  'misko';
       scope.$digest();
@@ -1203,7 +1296,6 @@ describe("widget", function(){
       dealoc($route.current.scope);
     });
 
-
     it('should initialize view template after the view controller was initialized even when ' +
        'templates were cached', function() {
       //this is a test for a regression that was introduced by making the ng:view cache sync
@@ -1245,6 +1337,8 @@ describe("widget", function(){
 
 
   describe('ng:pluralize', function() {
+
+
     describe('deal with pluralized strings without offset', function() {
        beforeEach(function() {
           compile('<ng:pluralize count="email"' +
@@ -1366,7 +1460,6 @@ describe("widget", function(){
         expect(element.text()).toBe('Igor, Misko and 2 other people are viewing.');
       });
     });
-
   });
 });