From d27c5a3c3ae95eb0b7257a4500ee871c75504729 Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 26 Feb 2015 12:37:37 -0700 Subject: [PATCH] test(collectionRepeat): add tests for getComputedStyle() --- js/angular/directive/collectionRepeat.js | 12 ++-- .../directive/collectionRepeat.unit.js | 58 +++++++++++++++++-- 2 files changed, 61 insertions(+), 9 deletions(-) diff --git a/js/angular/directive/collectionRepeat.js b/js/angular/directive/collectionRepeat.js index 9efa80df26a..2e172c3e898 100644 --- a/js/angular/directive/collectionRepeat.js +++ b/js/angular/directive/collectionRepeat.js @@ -103,7 +103,8 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r "an xy scrollView."); } - var match = attr.collectionRepeat.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/); + var repeatExpr = attr.collectionRepeat; + var match = repeatExpr.match(/^\s*([\s\S]+?)\s+in\s+([\s\S]+?)(?:\s+track\s+by\s+([\s\S]+?))?\s*$/); if (!match) { throw new Error("collection-repeat expected expression in form of '_item_ in " + "_collection_[ track by _id_]' but got '" + attr.collectionRepeat + "'."); @@ -202,6 +203,7 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r } } function refreshDimensions() { + if (window.debug) debugger; if (heightData.computed || widthData.computed) { computeStyleDimensions(); } @@ -209,8 +211,8 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r if (heightData.computed) { heightData.value = computedStyleDimensions.height; if (!heightData.value) { - throw new Error('collection-repeat tried to compute the height of elements "' + - listExpr + '", but was unable to. Please provide the "item-height" attribute. ' + + throw new Error('collection-repeat tried to compute the height of repeated elements "' + + repeatExpr + '", but was unable to. Please provide the "item-height" attribute. ' + 'http://ionicframework.com/docs/api/directive/collectionRepeat/'); } } else if (!heightData.dynamic && heightData.getValue) { @@ -220,8 +222,8 @@ function CollectionRepeatDirective($ionicCollectionManager, $parse, $window, $$r if (widthData.computed) { widthData.value = computedStyleDimensions.width; if (!widthData.value) { - throw new Error('collection-repeat tried to compute the width of elements in "' + - listExpr + '", but was unable to. Please provide the "item-width" attribute. ' + + throw new Error('collection-repeat tried to compute the width of repeated elements "' + + repeatExpr + '", but was unable to. Please provide the "item-width" attribute. ' + 'http://ionicframework.com/docs/api/directive/collectionRepeat/'); } } else if (!widthData.dynamic && widthData.getValue) { diff --git a/test/unit/angular/directive/collectionRepeat.unit.js b/test/unit/angular/directive/collectionRepeat.unit.js index 0bf16bb69ef..9416f247d49 100644 --- a/test/unit/angular/directive/collectionRepeat.unit.js +++ b/test/unit/angular/directive/collectionRepeat.unit.js @@ -14,6 +14,7 @@ describe('collectionRepeat', function() { })); var scrollView; + var repeaterScope; function setup(listData, attrs, scrollViewData) { var content = angular.element('') scrollView = angular.extend({ @@ -47,6 +48,7 @@ describe('collectionRepeat', function() { var element; inject(function($compile, $rootScope) { + repeaterScope = $rootScope.$new(); attrs = attrs || ''; if (!/item-height/.test(attrs)) attrs += ' item-height="25px"'; if (!/item-render-buffer/.test(attrs)) attrs += ' item-render-buffer="0"'; @@ -56,7 +58,7 @@ describe('collectionRepeat', function() { content.append(element); content.data('$$ionicScrollController', scrollCtrl); $rootScope.list = list; - $compile(element)($rootScope); + $compile(element)(repeaterScope); $rootScope.$apply(); content.triggerHandler('scroll.init'); $rootScope.$apply(); @@ -64,6 +66,11 @@ describe('collectionRepeat', function() { return element; } + afterEach(function() { + repeaterScope && repeaterScope.$destroy(); + repeaterScope = null; + }); + function scrollTo(n) { if (scrollView.options.scrollingY) { scrollView.__scrollTop = n; @@ -145,7 +152,6 @@ describe('collectionRepeat', function() { }).toThrow(); })); - it('should destroy', inject(function($compile, $rootScope) { var scope = $rootScope.$new(); var content = $compile('' + @@ -156,8 +162,49 @@ describe('collectionRepeat', function() { scope.$destroy(); })); + describe('automatic dimensions', function() { + it('should use computed width/height', inject(function($window) { + spyOn($window, 'getComputedStyle').andReturn({ + height: '50px', + width: '50px' + }); + setup(5, 'item-height="" item-width=""', { + __clientHeight: 75, + __clientWidth: 100 + }); + + expect(activeItems().length).toBe(4); + expect(activeItemDimensions()).toEqual([ + 'x:0,y:0,w:50,h:50', + 'x:50,y:0,w:50,h:50', + 'x:0,y:50,w:50,h:50', + 'x:50,y:50,w:50,h:50' + ]); + })); + + it('should error if computed height is 0', inject(function($window) { + spyOn($window, 'getComputedStyle').andReturn({ + height: '0px', + width: '100px' + }); + expect(function() { + setup(5, 'item-height="" item-width=""'); + }).toThrow(); + })); + + it('should error if computed width is 0', inject(function($window) { + spyOn($window, 'getComputedStyle').andReturn({ + height: '100px', + width: '0px' + }); + expect(function() { + setup(5, 'item-height="" item-width=""'); + }).toThrow(); + })); + }); + describe('horizontal static list', function() { - beforeEach(function() { + function setupHorizontal() { setup(10, 'item-height="100%" item-width="30"', { options: { scrollingX: true, @@ -166,12 +213,14 @@ describe('collectionRepeat', function() { __clientWidth: 80, __clientHeight: 25 }); - }); + } it('should show initial screen of items', function() { + setupHorizontal(); expect(activeItems().length).toBe(3); expect(activeItemContents()).toEqual(['0','1','2']) }); it('should switch out as you scroll', function() { + setupHorizontal(); expect(activeItems().length).toBe(3); expect(activeItemContents()).toEqual(['0','1','2']) expect(activeItemIds()).toEqual(['item0','item1','item2']); @@ -189,6 +238,7 @@ describe('collectionRepeat', function() { expect(activeItemIds()).toEqual(['item2','item0','item1']); }); it('should start with the same items when resizing', inject(function($window) { + setupHorizontal(); scrollTo(31); scrollTo(61);