fix(virtualRepeat): Broken demos relating to size computation

Fix test timeouts (something about the way I spied on debounce).

Closes #6167

Author: kseamon

src/components/virtualRepeat/virtual-repeater.js

@@ -132,19 +132,26 @@ function VirtualRepeatContainerController(
   // make a best effort at re-measuring as it changes.
   var boundUpdateSize = angular.bind(this, this.updateSize);
 
-  $$rAF(function() {
+  $$rAF(angular.bind(this, function() {
     boundUpdateSize();
 
     var debouncedUpdateSize = $mdUtil.debounce(boundUpdateSize, 10, null, false);
     var jWindow = angular.element($window);
 
+    // Make one more attempt to get the size if it is 0.
+    // This is not by any means a perfect approach, but there's really no
+    // silver bullet here.
+    if (!this.size) {
+      debouncedUpdateSize();
+    }
+
     jWindow.on('resize', debouncedUpdateSize);
     $scope.$on('$destroy', function() {
       jWindow.off('resize', debouncedUpdateSize);
     });
 
     $scope.$on('$md-resize', boundUpdateSize);
-  });
+  }));
 }
 
 
@@ -187,6 +194,7 @@ VirtualRepeatContainerController.prototype.updateSize = function() {
   this.size = this.isHorizontal()
       ? this.$element[0].clientWidth
       : this.$element[0].clientHeight;
+
   this.repeater && this.repeater.containerUpdated();
 };
 

src/components/virtualRepeat/virtual-repeater.spec.js

@@ -22,7 +22,7 @@ describe('<md-virtual-repeat>', function() {
       ITEM_SIZE = 10;
 
   beforeEach(inject(function(
-      _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$window_, _$material_) {
+      _$$rAF_, _$compile_, _$document_, _$mdUtil_, $rootScope, _$timeout_, _$window_, _$material_) {
     repeater = angular.element(REPEATER_HTML);
     container = angular.element(CONTAINER_HTML).append(repeater);
     component = null;
@@ -31,6 +31,7 @@ describe('<md-virtual-repeat>', function() {
     $mdUtil = _$mdUtil_;
     $compile = _$compile_;
     $document = _$document_;
+    $timeout = _$timeout_;
     $window = _$window_;
     scope = $rootScope.$new();
     scope.startIndex = 0;
@@ -582,13 +583,30 @@ describe('<md-virtual-repeat>', function() {
     expect(offsetter.children().length).toBe(43);
   });
 
+  it('makes a second attempt to measure the size if it starts out at 0',
+      function() {
+    // Create the repeater before appending it to the body.
+    scope.items = createItems(100);
+    component = $compile(container)(scope);
+    $material.flushOutstandingAnimations();
+    angular.element($document[0].body).append(container);
+    offsetter = angular.element(component[0].querySelector('.md-virtual-repeat-offsetter'));
+
+    // Expect 3 children (0 + 3 extra).
+    expect(offsetter.children().length).toBe(3);
+
+    // Expect it to remeasure using debounce.
+    $timeout.flush();
+
+    // Expect 13 children (10 + 3 extra).
+    expect(offsetter.children().length).toBe(13);
+  });
+
   /**
    * Facade to access transform properly even when jQuery is used;
    * since jQuery's css function is obtaining the computed style (not wanted)
    */
   function getTransform(target) {
     return target[0].style.webkitTransform || target.css('transform');
   }
-
-
 });