kylefang/angular.js
1
0
Fork 0
mirror of https://github.com/zhigang1992/angular.js.git synced 2026-04-01 08:56:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(mocks): remove usage of $animate.flushNext in favour of queing

Browse Source 
The flushNext method of testing is difficult and highly coupled with the behavior
of ngAnimate's $animate workflow. It is much better instead to just queue all
$animate animation calls into a queue collection which is available on the $animate
service when mock.animate is included as a module within test code.
This commit is contained in:
Matias Niemelä
2014-01-22 19:21:05 -05:00
parent a8c1d9c978
commit 906fdad0f9
9 changed files with 211 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/ngMock/angular-mocks.js vendored
View File

@@ -790,37 +790,20 @@ if(animateLoaded) {
angular.mock.animate = angular.module('mock.animate', ['ng'])
.config(['$provide', function($provide) {
$provide.decorator('$animate', function($delegate) {
var animate = {
queue : [],
enabled : $delegate.enabled,
flushNext : function(name) {
var tick = animate.queue.shift();
if (!tick) throw new Error('No animation to be flushed');
if(tick.method !== name) {
throw new Error('The next animation is not "' + name +
'", but is "' + tick.method + '"');
}
tick.fn();
return tick;
}
};
angular.forEach(['enter','leave','move','addClass','removeClass'], function(method) {
animate[method] = function() {
var params = arguments;
animate.queue.push({
method : method,
params : params,
element : angular.isElement(params[0]) && params[0],
parent : angular.isElement(params[1]) && params[1],
after : angular.isElement(params[2]) && params[2],
fn : function() {
$delegate[method].apply($delegate, params);
}
event : method,
element : arguments[0],
args : arguments
});
$delegate[method].apply($delegate, arguments);
};
});

20
test/ng/compileSpec.js
View File

@@ -4506,8 +4506,9 @@ describe('$compile', function() {
$rootScope.val2 = 'rice';
$rootScope.$digest();
data = $animate.flushNext('addClass');
expect(data.params[1]).toBe('ice rice');
data = $animate.queue.shift();
expect(data.event).toBe('addClass');
expect(data.args[1]).toBe('ice rice');
expect(element.hasClass('ice')).toBe(true);
expect(element.hasClass('rice')).toBe(true);
@@ -4516,10 +4517,12 @@ describe('$compile', function() {
$rootScope.val2 = 'dice';
$rootScope.$digest();
data = $animate.flushNext('removeClass');
expect(data.params[1]).toBe('rice');
data = $animate.flushNext('addClass');
expect(data.params[1]).toBe('dice');
data = $animate.queue.shift();
expect(data.event).toBe('removeClass');
expect(data.args[1]).toBe('rice');
data = $animate.queue.shift();
expect(data.event).toBe('addClass');
expect(data.args[1]).toBe('dice');
expect(element.hasClass('ice')).toBe(true);
expect(element.hasClass('dice')).toBe(true);
@@ -4529,8 +4532,9 @@ describe('$compile', function() {
$rootScope.val2 = '';
$rootScope.$digest();
data = $animate.flushNext('removeClass');
expect(data.params[1]).toBe('ice dice');
data = $animate.queue.shift();
expect(data.event).toBe('removeClass');
expect(data.args[1]).toBe('ice dice');
expect(element.hasClass('ice')).toBe(false);
expect(element.hasClass('dice')).toBe(false);

30
test/ng/directive/ngClassSpec.js
View File

@@ -320,23 +320,23 @@ describe('ngClass animations', function() {
$rootScope.val = 'one';
$rootScope.$digest();
$animate.flushNext('addClass');
expect($animate.queue.shift().event).toBe('addClass');
expect($animate.queue.length).toBe(0);
$rootScope.val = '';
$rootScope.$digest();
$animate.flushNext('removeClass'); //only removeClass is called
expect($animate.queue.shift().event).toBe('removeClass'); //only removeClass is called
expect($animate.queue.length).toBe(0);
$rootScope.val = 'one';
$rootScope.$digest();
$animate.flushNext('addClass');
expect($animate.queue.shift().event).toBe('addClass');
expect($animate.queue.length).toBe(0);
$rootScope.val = 'two';
$rootScope.$digest();
$animate.flushNext('removeClass');
$animate.flushNext('addClass');
expect($animate.queue.shift().event).toBe('removeClass');
expect($animate.queue.shift().event).toBe('addClass');
expect($animate.queue.length).toBe(0);
});
});
@@ -430,16 +430,18 @@ describe('ngClass animations', function() {
$rootScope.$digest();
//this fires twice due to the class observer firing
className = $animate.flushNext('addClass').params[1];
expect(className).toBe('one two three');
var item = $animate.queue.shift();
expect(item.event).toBe('addClass');
expect(item.args[1]).toBe('one two three');
expect($animate.queue.length).toBe(0);
$rootScope.three = false;
$rootScope.$digest();
className = $animate.flushNext('removeClass').params[1];
expect(className).toBe('three');
item = $animate.queue.shift();
expect(item.event).toBe('removeClass');
expect(item.args[1]).toBe('three');
expect($animate.queue.length).toBe(0);
@@ -447,11 +449,13 @@ describe('ngClass animations', function() {
$rootScope.three = true;
$rootScope.$digest();
className = $animate.flushNext('removeClass').params[1];
expect(className).toBe('two');
item = $animate.queue.shift();
expect(item.event).toBe('removeClass');
expect(item.args[1]).toBe('two');
className = $animate.flushNext('addClass').params[1];
expect(className).toBe('three');
item = $animate.queue.shift();
expect(item.event).toBe('addClass');
expect(item.args[1]).toBe('three');
expect($animate.queue.length).toBe(0);
});

17
test/ng/directive/ngIfSpec.js
View File

@@ -245,8 +245,9 @@ describe('ngIf animations', function () {
$rootScope.$digest();
$scope.$apply('value = true');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('Hi');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('Hi');
expect(element.children().length).toBe(1);
}));
@@ -262,14 +263,16 @@ describe('ngIf animations', function () {
))($scope);
$scope.$apply('value = true');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('Hi');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('Hi');
$scope.$apply('value = false');
expect(element.children().length).toBe(1);
$scope.$apply('value = false');
item = $animate.flushNext('leave').element;
expect(item.text()).toBe('Hi');
item = $animate.queue.shift();
expect(item.event).toBe('leave');
expect(item.element.text()).toBe('Hi');
expect(element.children().length).toBe(0);
}));

41
test/ng/directive/ngIncludeSpec.js
View File

@@ -367,7 +367,7 @@ describe('ngInclude', function() {
});
expect(autoScrollSpy).not.toHaveBeenCalled();
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).toHaveBeenCalledOnce();
@@ -384,7 +384,7 @@ describe('ngInclude', function() {
$rootScope.value = true;
});
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
$rootScope.$apply(function () {
@@ -392,8 +392,8 @@ describe('ngInclude', function() {
$rootScope.value = 'some-string';
});
$animate.flushNext('leave');
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('leave');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
$rootScope.$apply(function() {
@@ -401,8 +401,8 @@ describe('ngInclude', function() {
$rootScope.value = 100;
});
$animate.flushNext('leave');
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('leave');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).toHaveBeenCalled();
@@ -418,7 +418,7 @@ describe('ngInclude', function() {
$rootScope.tpl = 'template.html';
});
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).not.toHaveBeenCalled();
}));
@@ -434,7 +434,7 @@ describe('ngInclude', function() {
$rootScope.value = false;
});
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
$rootScope.$apply(function () {
@@ -456,7 +456,7 @@ describe('ngInclude', function() {
expect(autoScrollSpy).not.toHaveBeenCalled();
$rootScope.$apply("tpl = 'template.html'");
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).toHaveBeenCalledOnce();
@@ -608,8 +608,9 @@ describe('ngInclude animations', function() {
))($rootScope);
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('data');
var animation = $animate.queue.pop();
expect(animation.event).toBe('enter');
expect(animation.element.text()).toBe('data');
}));
it('should fire off the leave animation',
@@ -624,14 +625,16 @@ describe('ngInclude animations', function() {
))($rootScope);
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('data');
var animation = $animate.queue.shift();
expect(animation.event).toBe('enter');
expect(animation.element.text()).toBe('data');
$rootScope.tpl = '';
$rootScope.$digest();
item = $animate.flushNext('leave').element;
expect(item.text()).toBe('data');
animation = $animate.queue.shift();
expect(animation.event).toBe('leave');
expect(animation.element.text()).toBe('data');
}));
it('should animate two separate ngInclude elements',
@@ -647,14 +650,14 @@ describe('ngInclude animations', function() {
))($rootScope);
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('one');
var item1 = $animate.queue.shift().element;
expect(item1.text()).toBe('one');
$rootScope.tpl = 'two';
$rootScope.$digest();
var itemA = $animate.flushNext('leave').element;
var itemB = $animate.flushNext('enter').element;
var itemA = $animate.queue.shift().element;
var itemB = $animate.queue.shift().element;
expect(itemA.attr('ng-include')).toBe('tpl');
expect(itemB.attr('ng-include')).toBe('tpl');
expect(itemA).not.toEqual(itemB);

60
test/ng/directive/ngRepeatSpec.js
View File

@@ -1182,14 +1182,17 @@ describe('ngRepeat animations', function() {
$rootScope.items = ['1','2','3'];
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('1');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('1');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('2');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('2');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('3');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('3');
}));
it('should fire off the leave animation',
@@ -1207,20 +1210,24 @@ describe('ngRepeat animations', function() {
$rootScope.items = ['1','2','3'];
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('1');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('1');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('2');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('2');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('3');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('3');
$rootScope.items = ['1','3'];
$rootScope.$digest();
item = $animate.flushNext('leave').element;
expect(item.text()).toBe('2');
item = $animate.queue.shift();
expect(item.event).toBe('leave');
expect(item.element.text()).toBe('2');
}));
it('should fire off the move animation',
@@ -1239,23 +1246,28 @@ describe('ngRepeat animations', function() {
$rootScope.items = ['1','2','3'];
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('1');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('1');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('2');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('2');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('3');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('3');
$rootScope.items = ['2','3','1'];
$rootScope.$digest();
item = $animate.flushNext('move').element;
expect(item.text()).toBe('2');
item = $animate.queue.shift();
expect(item.event).toBe('move');
expect(item.element.text()).toBe('2');
item = $animate.flushNext('move').element;
expect(item.text()).toBe('1');
item = $animate.queue.shift();
expect(item.event).toBe('move');
expect(item.element.text()).toBe('3');
}));
});

28
test/ng/directive/ngShowHideSpec.js
View File

@@ -91,16 +91,18 @@ describe('ngShow / ngHide animations', function() {
))($scope);
$scope.$digest();
item = $animate.flushNext('removeClass').element;
expect(item.text()).toBe('data');
expect(item).toBeShown();
item = $animate.queue.shift();
expect(item.event).toBe('removeClass');
expect(item.element.text()).toBe('data');
expect(item.element).toBeShown();
$scope.on = false;
$scope.$digest();
item = $animate.flushNext('addClass').element;
expect(item.text()).toBe('data');
expect(item).toBeHidden();
item = $animate.queue.shift();
expect(item.event).toBe('addClass');
expect(item.element.text()).toBe('data');
expect(item.element).toBeHidden();
}));
});
@@ -114,16 +116,18 @@ describe('ngShow / ngHide animations', function() {
))($scope);
$scope.$digest();
item = $animate.flushNext('addClass').element;
expect(item.text()).toBe('datum');
expect(item).toBeHidden();
item = $animate.queue.shift();
expect(item.event).toBe('addClass');
expect(item.element.text()).toBe('datum');
expect(item.element).toBeHidden();
$scope.off = false;
$scope.$digest();
item = $animate.flushNext('removeClass').element;
expect(item.text()).toBe('datum');
expect(item).toBeShown();
item = $animate.queue.shift();
expect(item.event).toBe('removeClass');
expect(item.element.text()).toBe('datum');
expect(item.element).toBeShown();
}));
});
});

20
test/ng/directive/ngSwitchSpec.js
View File

@@ -255,8 +255,9 @@ describe('ngSwitch animations', function() {
$scope.val = 'one';
$scope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('one');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('one');
}));
@@ -276,17 +277,20 @@ describe('ngSwitch animations', function() {
$scope.val = 'two';
$scope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('two');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('two');
$scope.val = 'three';
$scope.$digest();
item = $animate.flushNext('leave').element;
expect(item.text()).toBe('two');
item = $animate.queue.shift();
expect(item.event).toBe('leave');
expect(item.element.text()).toBe('two');
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('three');
item = $animate.queue.shift();
expect(item.event).toBe('enter');
expect(item.element.text()).toBe('three');
}));
});

158
test/ngRoute/directive/ngViewSpec.js
View File

@@ -683,58 +683,64 @@ describe('ngView animations', function() {
}));
describe('hooks', function() {
beforeEach(module('ngAnimate'));
beforeEach(module('mock.animate'));
it('should fire off the enter animation',
inject(function($compile, $rootScope, $location, $animate) {
inject(function($compile, $rootScope, $location, $timeout, $animate) {
element = $compile(html('<div ng-view></div>'))($rootScope);
$location.path('/foo');
$rootScope.$digest();
var item = $animate.flushNext('enter').element;
expect(item.text()).toBe('data');
var animation = $animate.queue.pop();
expect(animation.event).toBe('enter');
}));
it('should fire off the leave animation',
inject(function($compile, $rootScope, $location, $templateCache, $animate) {
inject(function($compile, $rootScope, $location, $templateCache, $timeout, $animate) {
var item;
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
element = $compile(html('<div ng-view></div>'))($rootScope);
element = $compile(html('<ng-view></div>'))($rootScope);
$location.path('/foo');
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('foo');
$timeout.flush();
$location.path('/');
$rootScope.$digest();
item = $animate.flushNext('leave').element;
expect(item.text()).toBe('foo');
var animation = $animate.queue.pop();
expect(animation.event).toBe('leave');
}));
it('should animate two separate ngView elements',
inject(function($compile, $rootScope, $templateCache, $animate, $location) {
inject(function($compile, $rootScope, $templateCache, $location, $animate) {
var item;
$rootScope.tpl = 'one';
element = $compile(html('<div><div ng-view></div></div>'))($rootScope);
element = $compile(html('<div ng-view></div>'))($rootScope);
$rootScope.$digest();
$location.path('/foo');
$rootScope.$digest();
item = $animate.flushNext('enter').element;
expect(item.text()).toBe('data');
//we don't care about the enter animation for the first element
$animate.queue.pop();
$location.path('/bar');
$rootScope.$digest();
var itemA = $animate.flushNext('enter').element;
var animationB = $animate.queue.pop();
expect(animationB.event).toBe('leave');
var itemB = animationB.args[0];
var animationA = $animate.queue.pop();
expect(animationA.event).toBe('enter');
var itemA = animationA.args[0];
expect(itemA).not.toEqual(itemB);
var itemB = $animate.flushNext('leave').element;
}));
it('should render ngClass on ngView',
@@ -749,17 +755,20 @@ describe('ngView animations', function() {
$location.path('/foo');
$rootScope.$digest();
item = $animate.flushNext('enter').element;
//we don't care about the enter animation
$animate.queue.shift();
$animate.flushNext('addClass').element;
var animation = $animate.queue.shift();
expect(animation.event).toBe('addClass');
var item = animation.element;
expect(item.hasClass('classy')).toBe(true);
$rootScope.klass = 'boring';
$rootScope.$digest();
$animate.flushNext('removeClass').element;
$animate.flushNext('addClass').element;
expect($animate.queue.shift().event).toBe('removeClass');
expect($animate.queue.shift().event).toBe('addClass');
expect(item.hasClass('classy')).toBe(false);
expect(item.hasClass('boring')).toBe(true);
@@ -767,69 +776,66 @@ describe('ngView animations', function() {
$location.path('/bar');
$rootScope.$digest();
$animate.flushNext('enter').element;
item = $animate.flushNext('leave').element;
//we don't care about the enter animation
$animate.queue.shift();
$animate.flushNext('addClass').element;
animation = $animate.queue.shift();
item = animation.element;
expect(animation.event).toBe('leave');
expect($animate.queue.shift().event).toBe('addClass');
expect(item.hasClass('boring')).toBe(true);
}));
});
it('should not double compile when the route changes', function() {
it('should not double compile when the route changes', function() {
module('ngAnimate');
module('mock.animate');
var window;
module(function($routeProvider, $animateProvider, $provide) {
$routeProvider.when('/foo', {template: '<div ng-repeat="i in [1,2]">{{i}}</div>'});
$routeProvider.when('/bar', {template: '<div ng-repeat="i in [3,4]">{{i}}</div>'});
$animateProvider.register('.my-animation', function() {
return {
leave: function(element, done) {
done();
}
};
});
});
var window;
module(function($routeProvider, $animateProvider, $provide) {
$routeProvider.when('/foo', {template: '<div ng-repeat="i in [1,2]">{{i}}</div>'});
$routeProvider.when('/bar', {template: '<div ng-repeat="i in [3,4]">{{i}}</div>'});
$animateProvider.register('.my-animation', function() {
return {
leave: function(element, done) {
done();
inject(function($rootScope, $compile, $location, $route, $timeout, $rootElement, $sniffer, $animate) {
element = $compile(html('<div><ng:view onload="load()" class="my-animation"></ng:view></div>'))($rootScope);
$animate.enabled(true);
$location.path('/foo');
$rootScope.$digest();
expect($animate.queue.shift().event).toBe('enter'); //ngView
expect($animate.queue.shift().event).toBe('enter'); //repeat 1
expect($animate.queue.shift().event).toBe('enter'); //repeat 2
expect(element.text()).toEqual('12');
$location.path('/bar');
$rootScope.$digest();
expect($animate.queue.shift().event).toBe('enter'); //ngView new
expect($animate.queue.shift().event).toBe('leave'); //ngView old
$rootScope.$digest();
expect($animate.queue.shift().event).toBe('enter'); //ngRepeat 3
expect($animate.queue.shift().event).toBe('enter'); //ngRepeat 4
expect(element.text()).toEqual('34');
function n(text) {
return text.replace(/\r\n/m, '').replace(/\r\n/m, '');
}
};
});
});
});
inject(function($rootScope, $compile, $location, $route, $timeout, $rootElement, $sniffer, $animate) {
element = $compile(html('<div><ng:view onload="load()" class="my-animation"></ng:view></div>'))($rootScope);
$animate.enabled(true);
$location.path('/foo');
$rootScope.$digest();
$animate.flushNext('enter'); //ngView
$animate.flushNext('enter'); //repeat 1
$animate.flushNext('enter'); //repeat 2
expect(element.text()).toEqual('12');
$location.path('/bar');
$rootScope.$digest();
$animate.flushNext('enter'); //ngView new
$animate.flushNext('leave'); //ngView old
$rootScope.$digest();
expect(n(element.text())).toEqual(''); //this is midway during the animation
$animate.flushNext('enter'); //ngRepeat 3
$animate.flushNext('enter'); //ngRepeat 4
$rootScope.$digest();
expect(element.text()).toEqual('34');
function n(text) {
return text.replace(/\r\n/m, '').replace(/\r\n/m, '');
}
});
});
describe('autoscroll', function () {
var autoScrollSpy;
@@ -866,7 +872,7 @@ describe('ngView animations', function() {
$location.path('/foo');
$rootScope.$digest();
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).toHaveBeenCalledOnce();
@@ -880,7 +886,7 @@ describe('ngView animations', function() {
$rootScope.value = true;
$location.path('/foo');
$rootScope.$digest();
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).toHaveBeenCalledOnce();
@@ -893,7 +899,7 @@ describe('ngView animations', function() {
$location.path('/foo');
$rootScope.$digest();
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).not.toHaveBeenCalled();
@@ -907,7 +913,7 @@ describe('ngView animations', function() {
$rootScope.value = false;
$location.path('/foo');
$rootScope.$digest();
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect(autoScrollSpy).not.toHaveBeenCalled();
@@ -924,7 +930,7 @@ describe('ngView animations', function() {
expect(autoScrollSpy).not.toHaveBeenCalled();
$animate.flushNext('enter');
expect($animate.queue.shift().event).toBe('enter');
$timeout.flush();
expect($animate.enter).toHaveBeenCalledOnce();