javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(collectionRepeat): huge optimization upgrades

Browse Source 
Closes #1597
This commit is contained in:
Andrew Joslin
2014-06-09 15:50:33 -06:00
parent 8c36a667d8
commit 6af5d68da4
6 changed files with 361 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
test/unit/angular/service/collectionDataSource.unit.js
View File

@@ -25,7 +25,7 @@ describe('$collectionDataSource service', function() {
return dataSource;
}
it('should have properties', function() {
it('should have properties', inject(function($collectionDataSource) {
var source = setup({
scope: 1,
transcludeFn: 2,
@@ -44,7 +44,7 @@ describe('$collectionDataSource service', function() {
expect(source.trackByExpr).toBe(6);
expect(source.heightGetter).toBe(7);
expect(source.widthGetter).toBe(8);
});
}));
describe('.itemHashGetter()', function() {
@@ -70,40 +70,18 @@ describe('$collectionDataSource service', function() {
});
});
describe('itemCache', function() {
it('should be $cacheFactory', function() {
var cache = {};
module('ionic', function($provide) {
$provide.value('$cacheFactory', function() { return cache; });
});
var source = setup();
expect(source.itemCache).toBe(cache);
});
it('should have added keys() method', function() {
var source = setup();
source.itemCache.put('a', 1);
source.itemCache.put('b', 2);
expect(source.itemCache.keys()).toEqual(['a', 'b']);
source.itemCache.remove('a');
expect(source.itemCache.keys()).toEqual(['b']);
});
});
it('.destroy() should cleanup dimensions & cache', function() {
it('.destroy() should cleanup dimensions backupItemsArray and attachedItems', function() {
var source = setup();
source.dimensions = [1,2,3];
var cachedItem = {
scope: { $destroy: jasmine.createSpy('$destroy') },
element: { remove: jasmine.createSpy('remove') }
};
source.itemCache.put('a', cachedItem);
source.attachedItems = {0: 'a'};
source.backupItemsArray = ['b'];
spyOn(source, 'destroyItem');
source.destroy();
expect(source.dimensions.length).toBe(0);
expect(cachedItem.scope.$destroy).toHaveBeenCalled();
expect(cachedItem.element.remove).toHaveBeenCalled();
expect(source.destroyItem).toHaveBeenCalledWith('a');
expect(source.destroyItem).toHaveBeenCalledWith('b');
expect(source.attachedItems).toEqual({});
expect(source.backupItemsArray).toEqual([]);
});
it('.calculateDataDimensions()', function() {
@@ -135,64 +113,128 @@ describe('$collectionDataSource service', function() {
});
});
describe('.compileItem()', function() {
it('should get item from cache if exists', function() {
describe('.createItem()', function() {
it('should return item with new scope and transclude', function() {
var source = setup();
var hash = source.itemHashGetter(1,2);
var item = {};
source.itemCache.put(hash, item);
expect(source.compileItem(1,2)).toBe(item);
});
it('should give back a compiled item and put in cache', function() {
var source = setup({
keyExpr: 'key'
});
var item = source.compileItem(1, 2);
var item = source.createItem();
expect(item.scope.$parent).toBe(source.scope);
expect(item.scope.key).toBe(2);
expect(item.element).toBeTruthy();
expect(item.element.css('position')).toBe('absolute');
expect(item.element.scope()).toBe(item.scope);
expect(source.itemCache.get(source.itemHashGetter(1,2))).toBe(item);
expect(item.element.parent()[0]).toBe(source.transcludeParent[0]);
});
});
describe('.getItem()', function() {
it('should return a value with index values set', function() {
it('should return attachedItems[hash] if available', function() {
var source = setup();
source.data = ['a', 'b', 'c'];
spyOn(source, 'compileItem').andCallFake(function() { return { scope: {} }; });
var item = {};
source.attachedItems['123'] = item;
expect(source.getItem('123')).toBe(item);
});
var item = source.getItem(0);
expect(item.scope.$index).toBe(0);
expect(item.scope.$first).toBe(true);
expect(item.scope.$last).toBe(false);
expect(item.scope.$middle).toBe(false);
expect(item.scope.$odd).toBe(false);
it('should return backupItemsArray item if available, and reconnect the item', function() {
var source = setup();
var item = {
scope: {},
};
spyOn(window, 'reconnectScope');
source.backupItemsArray = [item];
expect(source.getItem('123')).toBe(item);
expect(reconnectScope).toHaveBeenCalledWith(item.scope);
});
item = source.getItem(1);
expect(item.scope.$index).toBe(1);
expect(item.scope.$first).toBe(false);
expect(item.scope.$last).toBe(false);
expect(item.scope.$middle).toBe(true);
expect(item.scope.$odd).toBe(true);
item = source.getItem(2);
expect(item.scope.$index).toBe(2);
expect(item.scope.$first).toBe(false);
expect(item.scope.$last).toBe(true);
expect(item.scope.$middle).toBe(false);
expect(item.scope.$odd).toBe(false);
it('should last resort create an item', function() {
var source = setup();
var item = {};
spyOn(source, 'createItem').andReturn(item);
expect(source.getItem('123')).toBe(item);
});
});
describe('.attachItemAtIndex()', function() {
it('should return a value with index values set and put in attachedItems', inject(function($rootScope) {
var source = setup({
keyExpr: 'value'
});
source.data = ['a', 'b', 'c'];
spyOn(source, 'getItem').andCallFake(function() {
return { scope: $rootScope.$new() };
});
spyOn(source, 'itemHashGetter').andCallFake(function(index, value) {
return index + ':' + value;
});
var item1 = source.attachItemAtIndex(0);
expect(item1.scope.value).toEqual('a');
expect(item1.scope.$index).toBe(0);
expect(item1.scope.$first).toBe(true);
expect(item1.scope.$last).toBe(false);
expect(item1.scope.$middle).toBe(false);
expect(item1.scope.$odd).toBe(false);
expect(item1.hash).toEqual('0:a');
var item2 = source.attachItemAtIndex(1);
expect(item2.scope.value).toEqual('b');
expect(item2.scope.$index).toBe(1);
expect(item2.scope.$first).toBe(false);
expect(item2.scope.$last).toBe(false);
expect(item2.scope.$middle).toBe(true);
expect(item2.scope.$odd).toBe(true);
expect(item2.hash).toEqual('1:b');
var item3 = source.attachItemAtIndex(2);
expect(item3.scope.value).toEqual('c');
expect(item3.scope.$index).toBe(2);
expect(item3.scope.$first).toBe(false);
expect(item3.scope.$last).toBe(true);
expect(item3.scope.$middle).toBe(false);
expect(item3.scope.$odd).toBe(false);
expect(item3.hash).toEqual('2:c');
expect(source.attachedItems).toEqual({
'0:a': item1,
'1:b': item2,
'2:c': item3
});
}));
});
describe('.detachItem()', function() {
it('should remove element from parent and disconnectScope', function() {
it('should detach item and add to backup array if there is room', function() {
var source = setup();
var item = {
element: angular.element('<div>'),
scope: {},
hash: 'foo'
};
source.backupItemsArray = [];
source.attachedItems[item.hash] = item;
spyOn(window, 'disconnectScope');
source.detachItem(item);
expect(source.attachedItems).toEqual({});
expect(source.backupItemsArray).toEqual([item]);
expect(disconnectScope).toHaveBeenCalledWith(item.scope);
});
it('should remove element from parent and disconnectScope if backupItemsArray is full', function() {
var source = setup();
spyOn(source, 'destroyItem');
source.BACKUP_ITEMS_LENGTH = 0;
var item = { hash: 'abc' };
source.attachedItems[item.hash] = item;
source.detachItem(item);
expect(source.destroyItem).toHaveBeenCalledWith(item);
expect(source.attachedItems).toEqual({});
});
});
describe('.destroyItem()', function() {
it('should remove element and destroy scope', function() {
var source = setup();
var element = angular.element('<div>');
var parent = angular.element('<div>').append(element);
@@ -200,55 +242,17 @@ describe('$collectionDataSource service', function() {
element: element,
scope: {}
};
spyOn(window, 'disconnectScope');
var destroySpy = item.scope.$destroy = jasmine.createSpy('$destroy');
expect(element[0].parentNode).toBe(parent[0]);
source.detachItem(item);
source.destroyItem(item);
expect(element[0].parentNode).toBeFalsy();
expect(disconnectScope).toHaveBeenCalledWith(item.scope);
expect(destroySpy).toHaveBeenCalled();
expect(item.scope).toBe(null);
expect(item.element).toBe(null);
});
});
describe('.attachItem()', function() {
it('should add element if it has no parent and digest', inject(function($rootScope) {
var source = setup({
transcludeParent: angular.element('<div>')
});
var element = angular.element('<div>');
spyOn(window, 'reconnectScope');
var item = {
element: element,
scope: $rootScope.$new()
};
spyOn(item.scope, '$digest');
spyOn(source.transcludeParent[0], 'appendChild');
source.attachItem(item);
expect(source.transcludeParent[0].appendChild).toHaveBeenCalledWith(element[0]);
expect(reconnectScope).toHaveBeenCalledWith(item.scope);
expect(item.scope.$digest).toHaveBeenCalled();
}));
it('should not append element if it has a parent already', inject(function($rootScope) {
var element = angular.element('<div>');
var source = setup({
transcludeParent: angular.element('<div>')
.append(element)
});
spyOn(window, 'reconnectScope');
var item = {
element: element,
scope: $rootScope.$new()
};
spyOn(item.scope, '$digest');
source.attachItem(item);
spyOn(source.transcludeParent[0], 'appendChild');
expect(source.transcludeParent[0].appendChild).not.toHaveBeenCalled();
expect(reconnectScope).toHaveBeenCalledWith(item.scope);
expect(item.scope.$digest).toHaveBeenCalled();
}));
});
describe('.getLength()', function() {
it('should return 0 by default', function() {
var source = setup();

68
test/unit/angular/service/collectionRepeatManager.unit.js
View File

@@ -20,7 +20,7 @@ describe('collectionRepeatManager service', function() {
var dataSource = new $collectionDataSource(angular.extend({
scope: $rootScope.$new(),
transcludeParent: angular.element('<div>'),
trancsludeFn: function(scope, cb) {
transcludeFn: function(scope, cb) {
cb($compile('<div></div>')(scope));
},
keyExpr: 'key',
@@ -328,41 +328,23 @@ describe('collectionRepeatManager service', function() {
});
describe('.renderScroll()', function() {
it('with isVertical', function() {
it('should pass the values to __$callback', function() {
var manager = setup();
spyOn(manager, 'getTransformPosition').andReturn('banana');
spyOn(manager.scrollView, '__$callback');
manager.renderScroll(1, 2, 3, 4);
expect(manager.getTransformPosition).toHaveBeenCalledWith(2);
expect(manager.scrollView.__$callback).toHaveBeenCalledWith(1,'banana',3,4);
});
it('with !isVertical', function() {
var manager = setup();
manager.isVertical = false;
spyOn(manager, 'getTransformPosition').andReturn('blueberry');
spyOn(manager.scrollView, '__$callback');
manager.renderScroll(1, 2, 3, 4);
expect(manager.getTransformPosition).toHaveBeenCalledWith(1);
expect(manager.scrollView.__$callback).toHaveBeenCalledWith('blueberry',2,3,4);
expect(manager.scrollView.__$callback).toHaveBeenCalledWith(1, 2, 3, 4);
});
});
describe('.getTransformPosition()', function() {
it('should return pos - lastRenderScrollValue', function() {
var manager = setup();
manager.lastRenderScrollValue = 11;
expect(manager.getTransformPosition(44)).toBe(33);
});
describe('.renderIfNeeded()', function() {
it('should render if >= nextPos', function() {
var manager = setup();
spyOn(manager, 'render');
manager.hasNextIndex = true;
manager.nextPos = 30;
manager.getTransformPosition(20);
manager.renderIfNeeded(20);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(30);
manager.renderIfNeeded(30);
expect(manager.render).toHaveBeenCalled();
});
@@ -371,31 +353,11 @@ describe('collectionRepeatManager service', function() {
spyOn(manager, 'render');
manager.hasPrevIndex = true;
manager.previousPos = 50;
manager.getTransformPosition(60);
manager.renderIfNeeded(60);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(50);
manager.renderIfNeeded(50);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(49);
expect(manager.render).toHaveBeenCalled();
});
it('should render if abs(val)>100', function() {
var manager = setup();
spyOn(manager, 'render');
manager.getTransformPosition(60);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(100);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(101);
expect(manager.render).toHaveBeenCalled();
manager.render.reset();
manager.getTransformPosition(-60);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(-100);
expect(manager.render).not.toHaveBeenCalled();
manager.getTransformPosition(-101);
manager.renderIfNeeded(49);
expect(manager.render).toHaveBeenCalled();
});
});
@@ -425,7 +387,7 @@ describe('collectionRepeatManager service', function() {
var manager = setup();
manager.renderedItems = {'a':1, 'b':1};
spyOn(manager, 'removeItem');
expect(manager.render()).toBe(null);
manager.render();
expect(manager.removeItem).toHaveBeenCalledWith('a');
expect(manager.removeItem).toHaveBeenCalledWith('b');
});
@@ -522,16 +484,15 @@ describe('collectionRepeatManager service', function() {
});
describe('.renderItem()', function() {
it('should attachItem and set the element transform', function() {
it('should attachItemAtIndex and set the element transform', function() {
var manager = setup();
var item = {
element: angular.element('<div>')
};
spyOn(item.element, 'css');
spyOn(manager.dataSource, 'getItem').andReturn(item);
spyOn(manager.dataSource, 'attachItem');
spyOn(manager.dataSource, 'attachItemAtIndex').andReturn(item);
manager.renderItem(0, 33, 44);
expect(manager.dataSource.attachItem).toHaveBeenCalledWith(item);
expect(manager.dataSource.attachItemAtIndex).toHaveBeenCalledWith(0);
expect(item.element.css).toHaveBeenCalledWith(
ionic.CSS.TRANSFORM,
manager.transformString(33, 44)
@@ -545,10 +506,9 @@ describe('collectionRepeatManager service', function() {
var manager = setup();
var item = {};
manager.renderedItems[0] = item;
spyOn(manager.dataSource, 'getItem').andReturn(item);
spyOn(manager, 'removeItem').andCallThrough();
spyOn(manager.dataSource, 'detachItem');
manager.removeItem(0);
expect(manager.dataSource.detachItem).toHaveBeenCalledWith(item);
expect(manager.renderedItems).toEqual({});
});
});