fix(collectionRepeat): compute width when height is not given

Closes #3357.

Author: ajoslin

js/angular/directive/collectionRepeat.js

@@ -268,16 +268,15 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r
       //4) Dynamic Mode
       //  - The user provides a dynamic expression for the width or height.  This is re-evaluated
       //    for every item, stored on the `.getValue()` field.
-      if (!heightExpr && !widthExpr) {
-        heightData.computed = widthData.computed = true;
+      if (heightExpr) {
+        parseDimensionAttr(heightExpr, heightData);
       } else {
-        if (heightExpr) {
-          parseDimensionAttr(heightExpr, heightData);
-        } else {
-          heightData.computed = true;
-        }
-        if (!widthExpr) widthExpr = '"100%"';
+        heightData.computed = true;
+      }
+      if (widthExpr) {
         parseDimensionAttr(widthExpr, widthData);
+      } else {
+        widthData.computed = true;
       }
     }
 

test/html/collection-repeat/basic-list.html

@@ -19,8 +19,8 @@ <h1 class="title">Basic List: Static Dimensions</h1>
     </ion-header-bar>
     <ion-content>
       <h4 style="margin: 80px;">I have 80px margin</h4>
-      <ion-list can-swipe="true" show-delete="$root.showDelete">
-        <ion-item class="item" collection-repeat="item in items">
+      <ion-list>
+        <ion-item class="item card" collection-repeat="item in items" item-height="50px">
           <ion-option-button>Button</ion-option-button>
           <ion-delete-button  class="ion-minus-circled" ng-click="items.splice($index, 1)"></ion-delete-button>
           <h2>{{item.text}}</h2>

test/unit/angular/directive/collectionRepeat.unit.js

@@ -1,5 +1,4 @@
 describe('collectionRepeat', function() {
-
   var el;
   beforeEach(module('ionic', function($provide) {
     $provide.decorator('$$rAF', function($delegate) {
@@ -222,6 +221,10 @@ describe('collectionRepeat', function() {
     }));
 
     it('should refresh layout on scrollCtrl.resize', inject(function($timeout, $window) {
+      spyOn($window, 'getComputedStyle').andReturn({
+        width: '1px',
+        height: '50px'
+      });
       var el = setup(10, 'item-height="20px"', {
         __clientHeight: 50,
         __clientWidth: 1
@@ -289,16 +292,20 @@ describe('collectionRepeat', function() {
   });
 
   describe('vertical static list', function() {
-    beforeEach(function() {
+    beforeEach(inject(function($window) {
+      spyOn($window, 'getComputedStyle').andReturn({
+        width: '50px',
+        height: '50px'
+      });
       setup(10);
-    });
+    }));
 
     it('should show initial screen of items', function() {
       expect(activeItems().length).toBe(5);
       expect(activeItemContents()).toEqual(['0','1','2','3','4']);
     });
 
-    it('should switch out as you scroll', function() {
+    it('should switch out as you scroll', inject(function($window) {
       expect(activeItems().length).toBe(5);
       expect(activeItemContents()).toEqual(['0','1','2','3','4']);
       expect(activeItemIds()).toEqual(['item0','item1','item2','item3','item4']);
@@ -323,7 +330,7 @@ describe('collectionRepeat', function() {
       expect(activeItems().length).toBe(5);
       expect(activeItemContents()).toEqual(['5','6','7','8','9']);
       expect(activeItemIds()).toEqual(['item0','item1','item2','item3','item4']);
-    });
+    }));
 
     it('should start with the same items when resizing', inject(function($window) {
       scrollTo(26);
@@ -338,8 +345,8 @@ describe('collectionRepeat', function() {
       angular.element($window).triggerHandler('resize');
 
       expect(activeItems().length).toBe(2);
-      expect(activeItemContents()).toEqual(['2','3']);
-      expect(activeItemIds()).toEqual(['item2','item3']);
+      expect(activeItemContents()).toEqual(['8','9']);
+      expect(activeItemIds()).toEqual(['item1','item0']);
     }));
 
   });