Tests for grid.size and grid.refreshItems

test/grid-binding-data.html

@@ -104,7 +104,7 @@
     describe('items function', function() {
       it('should set a function as items', function() {
         infiniteDataSource.size = 2;
-
+        grid.size = 2;
         grid.items = infiniteDataSource;
 
         return grid.then(function() {
@@ -141,6 +141,12 @@
           document.body.removeChild(g);
         });
       });
+
+      it('should have matching size property', function() {
+        grid.items = ["foo", "bar"];
+        expect(grid.size).to.equal(2);
+      });
+
     });
 
     describe('getItem', function() {
@@ -214,19 +220,130 @@
       });
     });
 
-    describe('clearCache', function() {
+    describe('refreshItems', function() {
+      it('should update cached items', function() {
+        grid.items = ['foo'];
+        grid.items[0] = 'bar';
+
+        expect(qLocal('.vaadin-grid-body .vaadin-grid-cell span').innerHTML).to.equal('foo');
+        grid.refreshItems();
+        expect(qLocal('.vaadin-grid-body .vaadin-grid-cell span').innerHTML).to.equal('bar');
+      });
+
       it('should work even if datasource was empty', function(){
         grid.items = [];
 
         return grid.then(function() {
-          grid.items.push(1)
-          grid.clearCache(1);
+          grid.items.push(1);
+          grid.size = grid.items.length;
           return grid;
         }).then(function() {
           expect(qLocal('.vaadin-grid-body .vaadin-grid-cell')).to.exist;
         });
       });
     });
+
+    describe('size', function() {
+
+      var unknownSizeDs = function(params, callback) {
+        var data = [];
+        for (var i = params.index; i < grid.size && i < params.index + params.count; i++) {
+          data.push(["foo " + i, "bar " + i]);
+        }
+        callback(data);
+      };
+
+      it('should not refresh visible items', function() {
+        grid.items = ['foo', 'bar', 'baz'];
+        return grid.then(function() {
+          grid.items[0] = 'qux';
+          grid.size = 2;
+        }).then(function() {
+          expect(qLocal('.vaadin-grid-body .vaadin-grid-cell span').innerHTML).to.equal('foo');
+        });
+      });
+
+      it('should be optional to provide the size for data request callback', function() {
+        grid.items = unknownSizeDs;
+        grid.size = 5;
+        return grid.then(function() {
+          expect(qaLocal('.vaadin-grid-body .vaadin-grid-row')).to.have.length(grid.size);
+        });
+      });
+
+      it('should work if size is given before the datasource', function() {
+        grid.size = 5;
+        grid.items = unknownSizeDs;
+        return grid.then(function() {
+          expect(qaLocal('.vaadin-grid-body .vaadin-grid-row')).to.have.length(grid.size);
+        });
+      });
+
+      it('should request for empty result and size if no size is provided', function() {
+        grid.size = 0;
+        infiniteDataSource.size = 1000;
+        spy = sinon.spy(infiniteDataSource);
+        grid.items = spy;
+
+        return grid.then(function() {
+          expect(spy.getCall(0).args[0].count).to.equal(0);
+          expect(spy.callCount).to.be.above(1);
+        });
+      });
+
+      it('should not request for empty result and size if size is provided', function() {
+        grid.size = 100;
+        spy = sinon.spy(unknownSizeDs);
+        grid.items = spy;
+
+        return grid.then(function() {
+          expect(spy.getCall(0).args[0].count).not.to.equal(0);
+          expect(spy.callCount).to.equal(1);
+        });
+      });
+
+      it('should request missing rows', function() {
+        grid.size = 2;
+        grid.items = unknownSizeDs;
+
+        return grid.then(function() {
+          expect(qaLocal('.vaadin-grid-body .vaadin-grid-row')).to.have.length(grid.size);
+          grid.size = 3;
+        }).then(function() {
+          expect(qaLocal('.vaadin-grid-body .vaadin-grid-row')).to.have.length(grid.size);
+        });
+      });
+
+      it('should accept size even without a datasource', function() {
+        var g = document.createElement("vaadin-grid");
+        g.size = 4;
+        expect(g.size).to.equal(4);
+      });
+
+      it('should physically resize by size', function(done) {
+        var items = [];
+        items.length = 8;
+        grid.items = items;
+        var originalHeight, reducedHeight;
+
+        grid.then(function() {
+          originalHeight = grid.clientHeight;
+          grid.size = 2;
+        }).then(function() {
+          reducedHeight = grid.clientHeight;
+          expect(reducedHeight).to.be.below(originalHeight);
+          grid.size = 3;
+        }).then(function() {
+          Polymer.Base.async(function() {
+            expect(grid.clientHeight).to.be.below(originalHeight);
+            expect(grid.clientHeight).to.be.above(reducedHeight);
+            done();
+          }, 500);
+        });
+      });
+
+    });
+
   });
 </script>
 

test/grid-editing-columns.html

@@ -161,7 +161,7 @@
 
         mydata.splice(0, 1);
         mydata[0].splice(0, 1);
-        grid.clearCache();
+        grid.refreshItems();
 
         grid.columns.splice(0, 1);
         grid.then(function() {

test/grid-rendering-light-dom.html

@@ -152,11 +152,13 @@
         }
 
         it('should render values from `<td>` elements', function() {
-          var row = grid.$$(".vaadin-grid-body .vaadin-grid-row");
-          var contents = row.querySelectorAll('span');
+          return grid.then(function() {
+            var row = grid.$$(".vaadin-grid-body .vaadin-grid-row");
+            var contents = row.querySelectorAll('span');
 
-          assert.isTrue(contents[0].innerHTML == 'Grid');
-          assert.isTrue(contents[1].innerHTML == '10000');
+            assert.isTrue(contents[0].innerHTML == 'Grid');
+            assert.isTrue(contents[1].innerHTML == '10000');
+          });
         });
 
         it('should mutate on tbody inner changes', function(done) {

test/grid-selecting-rows.html

@@ -578,12 +578,13 @@
 
         describe('in mode: multi', function() {
           beforeEach(function() {
+            grid.size = 100;
             grid.items =  function(params, callback) {
               var data = [];
               for (var i = params.index; i < params.index + params.count; i++) {
                 data.push(["foo " + i, "bar " + i]);
               }
-              callback(data, 100);
+              callback(data);
             };
             grid.selection.mode = 'multi';
             grid.selection.select(0);

test/testcase.html

@@ -190,21 +190,21 @@ <h3>Mapping data from a JS object into columns</h3>
 
         var updatedItem = {name: "Button X", value: Math.round(Math.random() * 1000), progress: Math.random()};
         data[0] = updatedItem;
-        grid.clearCache();
+        grid.refreshItems();
       });
 
       document.querySelector('#addButton').addEventListener('click', function(e) {
         var grid = document.querySelector('#myMapGrid');
 
         data.splice(0, 0, {name: "Button " + data.length, value: 111, progress: 0.01});
-        grid.clearCache(data.length);
+        grid.refreshItems();
       });
 
       document.querySelector('#removeButton').addEventListener('click', function(e) {
         var grid = document.querySelector('#myMapGrid');
 
         data.splice(0, 1);
-        grid.clearCache(data.length);
+        grid.refreshItems();
       });
   </script>
   </li>