aboutsummaryrefslogtreecommitdiffstats
path: root/test/ng/directive
diff options
context:
space:
mode:
Diffstat (limited to 'test/ng/directive')
-rwxr-xr-xtest/ng/directive/ngIfSpec.js86
-rw-r--r--test/ng/directive/ngIncludeSpec.js98
-rw-r--r--test/ng/directive/ngRepeatSpec.js216
-rw-r--r--test/ng/directive/ngShowHideSpec.js159
-rw-r--r--test/ng/directive/ngSwitchSpec.js112
5 files changed, 160 insertions, 511 deletions
diff --git a/test/ng/directive/ngIfSpec.js b/test/ng/directive/ngIfSpec.js
index 0cca57d5..8f2cb793 100755
--- a/test/ng/directive/ngIfSpec.js
+++ b/test/ng/directive/ngIfSpec.js
@@ -75,8 +75,7 @@ describe('ngIf', function () {
});
-describe('ngIf ngAnimate', function () {
- var vendorPrefix, window;
+describe('ngIf animations', function () {
var body, element, $rootElement;
function html(html) {
@@ -85,6 +84,8 @@ describe('ngIf ngAnimate', function () {
return element;
}
+ beforeEach(module('mock.animate'));
+
beforeEach(module(function() {
// we need to run animation on attached elements;
return function(_$rootElement_) {
@@ -99,97 +100,52 @@ describe('ngIf ngAnimate', function () {
dealoc(element);
});
- beforeEach(module(function($animationProvider, $provide) {
- $provide.value('$window', window = angular.mock.createMockWindow());
- return function($sniffer, $animator) {
- vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
- $animator.enabled(true);
+ beforeEach(module(function($animateProvider, $provide) {
+ return function($animate) {
+ $animate.enabled(true);
};
}));
- it('should fire off the enter animation + add and remove the css classes',
- inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the enter animation',
+ inject(function($compile, $rootScope, $animate) {
+ var item;
var $scope = $rootScope.$new();
- var style = vendorPrefix + 'transition: 1s linear all';
element = $compile(html(
'<div>' +
- '<div ng-if="value" style="' + style + '" ng-animate="{enter: \'custom-enter\', leave: \'custom-leave\'}"><div>Hi</div></div>' +
+ '<div ng-if="value"><div>Hi</div></div>' +
'</div>'
))($scope);
$rootScope.$digest();
$scope.$apply('value = true');
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('Hi');
expect(element.children().length).toBe(1);
- var first = element.children()[0];
-
- if ($sniffer.transitions) {
- expect(first.className).toContain('custom-enter');
- window.setTimeout.expect(1).process();
- expect(first.className).toContain('custom-enter-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(first.className).not.toContain('custom-enter');
- expect(first.className).not.toContain('custom-enter-active');
}));
- it('should fire off the leave animation + add and remove the css classes',
- inject(function ($compile, $rootScope, $sniffer) {
+ it('should fire off the leave animation',
+ inject(function ($compile, $rootScope, $animate) {
+ var item;
var $scope = $rootScope.$new();
- var style = vendorPrefix + 'transition: 1s linear all';
element = $compile(html(
'<div>' +
- '<div ng-if="value" style="' + style + '" ng-animate="{enter: \'custom-enter\', leave: \'custom-leave\'}"><div>Hi</div></div>' +
+ '<div ng-if="value"><div>Hi</div></div>' +
'</div>'
))($scope);
$scope.$apply('value = true');
- expect(element.children().length).toBe(1);
- var first = element.children()[0];
-
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('Hi');
$scope.$apply('value = false');
- expect(element.children().length).toBe($sniffer.transitions ? 1 : 0);
+ expect(element.children().length).toBe(1);
- if ($sniffer.transitions) {
- expect(first.className).toContain('custom-leave');
- window.setTimeout.expect(1).process();
- expect(first.className).toContain('custom-leave-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('leave').element;
+ expect(item.text()).toBe('Hi');
expect(element.children().length).toBe(0);
}));
- it('should catch and use the correct duration for animation',
- inject(function ($compile, $rootScope, $sniffer) {
- var $scope = $rootScope.$new();
- var style = vendorPrefix + 'transition: 0.5s linear all';
- element = $compile(html(
- '<div>' +
- '<div ng-if="value" style="' + style + '" ng-animate="{enter: \'custom-enter\', leave: \'custom-leave\'}"><div>Hi</div></div>' +
- '</div>'
- ))($scope);
- $scope.$apply('value = true');
-
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(500).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
- }));
-
});
diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js
index 6cb78755..286ee5af 100644
--- a/test/ng/directive/ngIncludeSpec.js
+++ b/test/ng/directive/ngIncludeSpec.js
@@ -341,8 +341,7 @@ describe('ngInclude', function() {
});
});
-describe('ngInclude ngAnimate', function() {
- var vendorPrefix, window;
+describe('ngInclude animations', function() {
var body, element, $rootElement;
function html(html) {
@@ -351,11 +350,6 @@ describe('ngInclude ngAnimate', function() {
return element;
}
- function applyCSS(element, cssProp, cssValue) {
- element.css(cssProp, cssValue);
- element.css(vendorPrefix + cssProp, cssValue);
- }
-
beforeEach(module(function() {
// we need to run animation on attached elements;
return function(_$rootElement_) {
@@ -370,107 +364,51 @@ describe('ngInclude ngAnimate', function() {
dealoc(element);
});
- beforeEach(module(function($animationProvider, $provide) {
- $provide.value('$window', window = angular.mock.createMockWindow());
- return function($sniffer, $animator) {
- vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
- $animator.enabled(true);
- };
- }));
+ beforeEach(module('mock.animate'));
afterEach(function(){
dealoc(element);
});
- it('should fire off the enter animation + add and remove the css classes',
- inject(function($compile, $rootScope, $templateCache, $sniffer) {
+ it('should fire off the enter animation',
+ inject(function($compile, $rootScope, $templateCache, $animate) {
+ var item;
$templateCache.put('enter', [200, '<div>data</div>', {}]);
$rootScope.tpl = 'enter';
element = $compile(html(
'<div ' +
- 'ng-include="tpl" ' +
- 'ng-animate="{enter: \'custom-enter\'}">' +
+ 'ng-include="tpl">' +
'</div>'
))($rootScope);
$rootScope.$digest();
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var child = jqLite(element.children()[0]);
- applyCSS(child, 'transition', '1s linear all');
-
- if ($sniffer.transitions) {
- expect(child.attr('class')).toContain('custom-enter');
- window.setTimeout.expect(1).process();
-
- expect(child.attr('class')).toContain('custom-enter-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(child.attr('class')).not.toContain('custom-enter');
- expect(child.attr('class')).not.toContain('custom-enter-active');
+ item = $animate.process('leave').element;
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('data');
}));
- it('should fire off the leave animation + add and remove the css classes',
- inject(function($compile, $rootScope, $templateCache, $sniffer) {
+ it('should fire off the leave animation',
+ inject(function($compile, $rootScope, $templateCache, $animate) {
+ var item;
$templateCache.put('enter', [200, '<div>data</div>', {}]);
$rootScope.tpl = 'enter';
element = $compile(html(
'<div ' +
- 'ng-include="tpl" ' +
- 'ng-animate="{leave: \'custom-leave\'}">' +
+ 'ng-include="tpl">' +
'</div>'
))($rootScope);
$rootScope.$digest();
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var child = jqLite(element.children()[0]);
- applyCSS(child, 'transition', '1s linear all');
+ item = $animate.process('leave').element;
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('data');
$rootScope.tpl = '';
$rootScope.$digest();
- if ($sniffer.transitions) {
- expect(child.attr('class')).toContain('custom-leave');
- window.setTimeout.expect(1).process();
-
- expect(child.attr('class')).toContain('custom-leave-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(child.attr('class')).not.toContain('custom-leave');
- expect(child.attr('class')).not.toContain('custom-leave-active');
- }));
-
- it('should catch and use the correct duration for animation',
- inject(function($compile, $rootScope, $templateCache, $sniffer) {
- $templateCache.put('enter', [200, '<div>data</div>', {}]);
- $rootScope.tpl = 'enter';
- element = $compile(html(
- '<div ' +
- 'ng-include="tpl" ' +
- 'ng-animate="{enter: \'custom-enter\'}">' +
- '</div>'
- ))($rootScope);
- $rootScope.$digest();
-
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var child = jqLite(element.children()[0]);
- applyCSS(child, 'transition', '0.5s linear all');
-
- $rootScope.tpl = 'enter';
- $rootScope.$digest();
-
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(500).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('leave').element;
+ expect(item.text()).toBe('data');
}));
});
diff --git a/test/ng/directive/ngRepeatSpec.js b/test/ng/directive/ngRepeatSpec.js
index 26562f4e..a85fd5ab 100644
--- a/test/ng/directive/ngRepeatSpec.js
+++ b/test/ng/directive/ngRepeatSpec.js
@@ -822,10 +822,30 @@ describe('ngRepeat', function() {
expect(newLis[2]).toEqual(lis[1]);
});
});
+
+ it('should grow multi-node repeater', inject(function($compile, $rootScope) {
+ $rootScope.show = false;
+ $rootScope.books = [
+ {title:'T1', description: 'D1'},
+ {title:'T2', description: 'D2'}
+ ];
+ element = $compile(
+ '<div>' +
+ '<dt ng-repeat-start="book in books">{{book.title}}:</dt>' +
+ '<dd ng-repeat-end>{{book.description}};</dd>' +
+ '</div>')($rootScope);
+
+ $rootScope.$digest();
+ expect(element.text()).toEqual('T1:D1;T2:D2;');
+ $rootScope.books.push({title:'T3', description: 'D3'});
+ $rootScope.$digest();
+ expect(element.text()).toEqual('T1:D1;T2:D2;T3:D3;');
+ }));
+
+
});
-describe('ngRepeat ngAnimate', function() {
- var vendorPrefix, window;
+describe('ngRepeat animations', function() {
var body, element, $rootElement;
function html(html) {
@@ -834,10 +854,7 @@ describe('ngRepeat ngAnimate', function() {
return element;
}
- function applyCSS(element, cssProp, cssValue) {
- element.css(cssProp, cssValue);
- element.css(vendorPrefix + cssProp, cssValue);
- }
+ beforeEach(module('mock.animate'));
beforeEach(module(function() {
// we need to run animation on attached elements;
@@ -853,21 +870,14 @@ describe('ngRepeat ngAnimate', function() {
dealoc(element);
});
- beforeEach(module(function($animationProvider, $provide) {
- $provide.value('$window', window = angular.mock.createMockWindow());
- return function($sniffer, $animator) {
- vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
- $animator.enabled(true);
- };
- }));
+ it('should fire off the enter animation',
+ inject(function($compile, $rootScope, $animate) {
- it('should fire off the enter animation + add and remove the css classes',
- inject(function($compile, $rootScope, $sniffer) {
+ var item;
element = $compile(html(
'<div><div ' +
- 'ng-repeat="item in items" ' +
- 'ng-animate="{enter: \'custom-enter\'}">' +
+ 'ng-repeat="item in items">' +
'{{ item }}' +
'</div></div>'
))($rootScope);
@@ -877,40 +887,24 @@ describe('ngRepeat ngAnimate', function() {
$rootScope.items = ['1','2','3'];
$rootScope.$digest();
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var kids = element.children();
- for(var i=0;i<kids.length;i++) {
- kids[i] = jqLite(kids[i]);
- applyCSS(kids[i], 'transition', '1s linear all');
- }
-
- if ($sniffer.transitions) {
- angular.forEach(kids, function(kid) {
- expect(kid.attr('class')).toContain('custom-enter');
- window.setTimeout.expect(1).process();
- });
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('1');
- angular.forEach(kids, function(kid) {
- expect(kid.attr('class')).toContain('custom-enter-active');
- window.setTimeout.expect(1000).process();
- });
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('2');
- angular.forEach(kids, function(kid) {
- expect(kid.attr('class')).not.toContain('custom-enter');
- expect(kid.attr('class')).not.toContain('custom-enter-active');
- });
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('3');
}));
- it('should fire off the leave animation + add and remove the css classes',
- inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the leave animation',
+ inject(function($compile, $rootScope, $animate) {
+
+ var item;
element = $compile(html(
'<div><div ' +
- 'ng-repeat="item in items" ' +
- 'ng-animate="{leave: \'custom-leave\'}">' +
+ 'ng-repeat="item in items">' +
'{{ item }}' +
'</div></div>'
))($rootScope);
@@ -918,36 +912,30 @@ describe('ngRepeat ngAnimate', function() {
$rootScope.items = ['1','2','3'];
$rootScope.$digest();
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var kids = element.children();
- for(var i=0;i<kids.length;i++) {
- kids[i] = jqLite(kids[i]);
- applyCSS(kids[i], 'transition', '1s linear all');
- }
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('1');
+
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('2');
+
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('3');
$rootScope.items = ['1','3'];
$rootScope.$digest();
- //the last element gets pushed down when it animates
- var kid = jqLite(element.children()[1]);
- if ($sniffer.transitions) {
- expect(kid.attr('class')).toContain('custom-leave');
- window.setTimeout.expect(1).process();
- expect(kid.attr('class')).toContain('custom-leave-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(kid.attr('class')).not.toContain('custom-leave');
- expect(kid.attr('class')).not.toContain('custom-leave-active');
+ item = $animate.process('leave').element;
+ expect(item.text()).toBe('2');
}));
- it('should fire off the move animation + add and remove the css classes',
- inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the move animation',
+ inject(function($compile, $rootScope, $animate) {
+
+ var item;
+
element = $compile(html(
'<div>' +
- '<div ng-repeat="item in items" ng-animate="{move: \'custom-move\'}">' +
+ '<div ng-repeat="item in items">' +
'{{ item }}' +
'</div>' +
'</div>'
@@ -956,97 +944,23 @@ describe('ngRepeat ngAnimate', function() {
$rootScope.items = ['1','2','3'];
$rootScope.$digest();
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var kids = element.children();
- for(var i=0;i<kids.length;i++) {
- kids[i] = jqLite(kids[i]);
- applyCSS(kids[i], 'transition', '1s linear all');
- }
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('1');
- $rootScope.items = ['2','3','1'];
- $rootScope.$digest();
-
- //the last element gets pushed down when it animates
- kids = element.children();
- var first = jqLite(kids[0]);
- var left = jqLite(kids[1]);
- var right = jqLite(kids[2]);
-
- if ($sniffer.transitions) {
- expect(first.attr('class')).toContain('custom-move');
- window.setTimeout.expect(1).process();
- expect(left.attr('class')).toContain('custom-move');
- window.setTimeout.expect(1).process();
-
- expect(first.attr('class')).toContain('custom-move-active');
- window.setTimeout.expect(1000).process();
- expect(left.attr('class')).toContain('custom-move-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(first.attr('class')).not.toContain('custom-move');
- expect(first.attr('class')).not.toContain('custom-move-active');
- expect(left.attr('class')).not.toContain('custom-move');
- expect(left.attr('class')).not.toContain('custom-move-active');
- expect(right.attr('class')).not.toContain('custom-move');
- expect(right.attr('class')).not.toContain('custom-move-active');
- }));
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('2');
- it('should catch and use the correct duration for animation',
- inject(function($compile, $rootScope, $sniffer) {
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('3');
- element = $compile(html(
- '<div><div ' +
- 'ng-repeat="item in items" ' +
- 'ng-animate="{enter: \'custom-enter\'}">' +
- '{{ item }}' +
- '</div></div>'
- ))($rootScope);
-
- $rootScope.$digest(); // re-enable the animations;
-
- $rootScope.items = ['a','b'];
+ $rootScope.items = ['2','3','1'];
$rootScope.$digest();
- //if we add the custom css stuff here then it will get picked up before the animation takes place
- var kids = element.children();
- var first = jqLite(kids[0]);
- var second = jqLite(kids[1]);
- var cssProp = 'transition';
- var cssValue = '0.5s linear all';
- applyCSS(first, cssProp, cssValue);
- applyCSS(second, cssProp, cssValue);
-
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(500).process();
- window.setTimeout.expect(500).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
- }));
+ item = $animate.process('move').element;
+ expect(item.text()).toBe('2');
- it('should grow multi-node repeater', inject(function($compile, $rootScope) {
- $rootScope.show = false;
- $rootScope.books = [
- {title:'T1', description: 'D1'},
- {title:'T2', description: 'D2'}
- ];
- element = $compile(
- '<div>' +
- '<dt ng-repeat-start="book in books">{{book.title}}:</dt>' +
- '<dd ng-repeat-end>{{book.description}};</dd>' +
- '</div>')($rootScope);
-
- $rootScope.$digest();
- expect(element.text()).toEqual('T1:D1;T2:D2;');
- $rootScope.books.push({title:'T3', description: 'D3'});
- $rootScope.$digest();
- expect(element.text()).toEqual('T1:D1;T2:D2;T3:D3;');
+ item = $animate.process('move').element;
+ expect(item.text()).toBe('1');
}));
-
});
diff --git a/test/ng/directive/ngShowHideSpec.js b/test/ng/directive/ngShowHideSpec.js
index 9b95440d..f8193a12 100644
--- a/test/ng/directive/ngShowHideSpec.js
+++ b/test/ng/directive/ngShowHideSpec.js
@@ -13,20 +13,20 @@ describe('ngShow / ngHide', function() {
element = jqLite('<div ng-show="exp"></div>');
element = $compile(element)($rootScope);
$rootScope.$digest();
- expect(isCssVisible(element)).toEqual(false);
+ expect(element).toBeHidden();
$rootScope.exp = true;
$rootScope.$digest();
- expect(isCssVisible(element)).toEqual(true);
+ expect(element).toBeShown();
}));
it('should make hidden element visible', inject(function($rootScope, $compile) {
- element = jqLite('<div style="display: none" ng-show="exp"></div>');
+ element = jqLite('<div class="ng-hide" ng-show="exp"></div>');
element = $compile(element)($rootScope);
- expect(isCssVisible(element)).toBe(false);
+ expect(element).toBeHidden();
$rootScope.exp = true;
$rootScope.$digest();
- expect(isCssVisible(element)).toBe(true);
+ expect(element).toBeShown();
}));
});
@@ -34,17 +34,15 @@ describe('ngShow / ngHide', function() {
it('should hide an element', inject(function($rootScope, $compile) {
element = jqLite('<div ng-hide="exp"></div>');
element = $compile(element)($rootScope);
- expect(isCssVisible(element)).toBe(true);
+ expect(element).toBeShown();
$rootScope.exp = true;
$rootScope.$digest();
- expect(isCssVisible(element)).toBe(false);
+ expect(element).toBeHidden();
}));
});
});
-describe('ngShow / ngHide - ngAnimate', function() {
- var window;
- var vendorPrefix;
+describe('ngShow / ngHide animations', function() {
var body, element, $rootElement;
function html(html) {
@@ -65,152 +63,57 @@ describe('ngShow / ngHide - ngAnimate', function() {
body.removeAttr('ng-animation-running');
});
- beforeEach(module(function($animationProvider, $provide) {
- $provide.value('$window', window = angular.mock.createMockWindow());
- return function($sniffer, _$rootElement_, $animator) {
- vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
+ beforeEach(module('mock.animate'));
+
+ beforeEach(module(function($animateProvider, $provide) {
+ return function(_$rootElement_) {
$rootElement = _$rootElement_;
- $animator.enabled(true);
};
}));
describe('ngShow', function() {
- it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the $animate.show and $animate.hide animation', inject(function($compile, $rootScope, $animate) {
+ var item;
var $scope = $rootScope.$new();
$scope.on = true;
element = $compile(html(
- '<div ' +
- 'style="'+vendorPrefix+'transition: 1s linear all"' +
- 'ng-show="on" ' +
- 'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' +
- '</div>'
+ '<div ng-show="on">data</div>'
))($scope);
$scope.$digest();
- if ($sniffer.transitions) {
- expect(element.attr('class')).toContain('custom-show');
- window.setTimeout.expect(1).process();
-
- expect(element.attr('class')).toContain('custom-show-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(element.attr('class')).not.toContain('custom-show-active');
- expect(element.attr('class')).not.toContain('custom-show');
+ item = $animate.process('show').element;
+ expect(item.text()).toBe('data');
+ expect(item).toBeShown();
$scope.on = false;
$scope.$digest();
- if ($sniffer.transitions) {
- expect(element.attr('class')).toContain('custom-hide');
- window.setTimeout.expect(1).process();
- expect(element.attr('class')).toContain('custom-hide-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(element.attr('class')).not.toContain('custom-hide-active');
- expect(element.attr('class')).not.toContain('custom-hide');
- }));
- it('should skip animation if parent animation running', function() {
- var fired = false;
- inject(function($animator, $compile, $rootScope, $sniffer) {
- $animator.enabled(true);
- $rootScope.$digest();
- $rootScope.val = true;
- var element = $compile(html('<div ng-show="val" ng-animate="\'animation\'">123</div>'))($rootScope);
- $rootElement.controller('ngAnimate').running = true;
- element.css('display','none');
- expect(element.css('display')).toBe('none');
-
- $rootScope.$digest();
- expect(element[0].style.display).toBe('');
- expect(fired).toBe(false);
-
- $rootElement.controller('ngAnimate').running = false;
- $rootScope.val = false;
- $rootScope.$digest();
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(0).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
- expect(element[0].style.display).toBe('none');
- });
- });
+ item = $animate.process('hide').element;
+ expect(item.text()).toBe('data');
+ expect(item).toBeHidden();
+ }));
});
describe('ngHide', function() {
- it('should fire off the animator.show and animator.hide animation', inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the $animate.show and $animate.hide animation', inject(function($compile, $rootScope, $animate) {
+ var item;
var $scope = $rootScope.$new();
$scope.off = true;
element = $compile(html(
- '<div ' +
- 'style="'+vendorPrefix+'transition: 1s linear all"' +
- 'ng-hide="off" ' +
- 'ng-animate="{show: \'custom-show\', hide: \'custom-hide\', animateFirst: true}">' +
- '</div>'
+ '<div ng-hide="off">datum</div>'
))($scope);
$scope.$digest();
- if ($sniffer.transitions) {
- expect(element.attr('class')).toContain('custom-hide');
- window.setTimeout.expect(1).process();
-
- expect(element.attr('class')).toContain('custom-hide-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(element.attr('class')).not.toContain('custom-hide-active');
- expect(element.attr('class')).not.toContain('custom-hide');
+ item = $animate.process('hide').element;
+ expect(item.text()).toBe('datum');
+ expect(item).toBeHidden();
$scope.off = false;
$scope.$digest();
- if ($sniffer.transitions) {
- expect(element.attr('class')).toContain('custom-show');
- window.setTimeout.expect(1).process();
- expect(element.attr('class')).toContain('custom-show-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(element.attr('class')).not.toContain('custom-show-active');
- expect(element.attr('class')).not.toContain('custom-show');
+ item = $animate.process('show').element;
+ expect(item.text()).toBe('datum');
+ expect(item).toBeShown();
}));
-
- it('should disable animation when parent animation is running', function() {
- var fired = false;
- module(function($animationProvider) {
- $animationProvider.register('destructive-animation', function() {
- return {
- setup : function() {},
- start : function(element, done) {
- fired = true;
- }
- };
- });
- });
- inject(function($compile, $rootScope) {
- $rootScope.val = false;
- var element = $compile(html('<div ng-hide="val" ng-animate="{ hide:\'destructive-animation\' }">123</div>'))($rootScope);
- $rootElement.controller('ngAnimate').running = true;
- element.css('display','block');
- expect(element.css('display')).toBe('block');
-
- $rootScope.val = true;
- $rootScope.$digest();
-
- expect(element.css('display')).toBe('none');
- expect(fired).toBe(false);
- });
- });
});
});
diff --git a/test/ng/directive/ngSwitchSpec.js b/test/ng/directive/ngSwitchSpec.js
index ab231ec2..8750b187 100644
--- a/test/ng/directive/ngSwitchSpec.js
+++ b/test/ng/directive/ngSwitchSpec.js
@@ -214,8 +214,7 @@ describe('ngSwitch', function() {
}));
});
-describe('ngSwitch ngAnimate', function() {
- var vendorPrefix, window;
+describe('ngSwitch animations', function() {
var body, element, $rootElement;
function html(html) {
@@ -224,6 +223,8 @@ describe('ngSwitch ngAnimate', function() {
return element;
}
+ beforeEach(module('mock.animate'));
+
beforeEach(module(function() {
// we need to run animation on attached elements;
return function(_$rootElement_) {
@@ -238,23 +239,15 @@ describe('ngSwitch ngAnimate', function() {
dealoc(element);
});
- beforeEach(module(function($animationProvider, $provide) {
- $provide.value('$window', window = angular.mock.createMockWindow());
- return function($sniffer, $animator) {
- vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
- $animator.enabled(true);
- };
- }));
-
- it('should fire off the enter animation + set and remove the classes',
- inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the enter animation',
+ inject(function($compile, $rootScope, $animate) {
+ var item;
var $scope = $rootScope.$new();
- var style = vendorPrefix + 'transition: 1s linear all';
element = $compile(html(
- '<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' +
- '<div ng-switch-when="one" style="' + style + '">one</div>' +
- '<div ng-switch-when="two" style="' + style + '">two</div>' +
- '<div ng-switch-when="three" style="' + style + '">three</div>' +
+ '<div ng-switch on="val">' +
+ '<div ng-switch-when="one">one</div>' +
+ '<div ng-switch-when="two">two</div>' +
+ '<div ng-switch-when="three">three</div>' +
'</div>'
))($scope);
@@ -262,33 +255,20 @@ describe('ngSwitch ngAnimate', function() {
$scope.val = 'one';
$scope.$digest();
- expect(element.children().length).toBe(1);
- var first = element.children()[0];
-
- if ($sniffer.transitions) {
- expect(first.className).toContain('cool-enter');
- window.setTimeout.expect(1).process();
-
- expect(first.className).toContain('cool-enter-active');
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(first.className).not.toContain('cool-enter');
- expect(first.className).not.toContain('cool-enter-active');
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('one');
}));
- it('should fire off the leave animation + set and remove the classes',
- inject(function($compile, $rootScope, $sniffer) {
+ it('should fire off the leave animation',
+ inject(function($compile, $rootScope, $animate) {
+ var item;
var $scope = $rootScope.$new();
- var style = vendorPrefix + 'transition: 1s linear all';
element = $compile(html(
- '<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' +
- '<div ng-switch-when="one" style="' + style + '">one</div>' +
- '<div ng-switch-when="two" style="' + style + '">two</div>' +
- '<div ng-switch-when="three" style="' + style + '">three</div>' +
+ '<div ng-switch on="val">' +
+ '<div ng-switch-when="one">one</div>' +
+ '<div ng-switch-when="two">two</div>' +
+ '<div ng-switch-when="three">three</div>' +
'</div>'
))($scope);
@@ -296,59 +276,17 @@ describe('ngSwitch ngAnimate', function() {
$scope.val = 'two';
$scope.$digest();
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('two');
$scope.val = 'three';
$scope.$digest();
- expect(element.children().length).toBe($sniffer.transitions ? 2 : 1);
- var first = element.children()[0];
-
-
- if ($sniffer.transitions) {
- expect(first.className).toContain('cool-leave');
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(1).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('leave').element;
+ expect(item.text()).toBe('two');
-
- if ($sniffer.transitions) {
- expect(first.className).toContain('cool-leave-active');
- window.setTimeout.expect(1000).process();
- window.setTimeout.expect(1000).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
-
- expect(first.className).not.toContain('cool-leave');
- expect(first.className).not.toContain('cool-leave-active');
- }));
-
- it('should catch and use the correct duration for animation',
- inject(function($compile, $rootScope, $sniffer) {
- element = $compile(html(
- '<div ng-switch on="val" ng-animate="{enter: \'cool-enter\', leave: \'cool-leave\'}">' +
- '<div ng-switch-when="one" style="' + vendorPrefix + 'transition: 0.5s linear all">one</div>' +
- '</div>'
- ))($rootScope);
-
- $rootScope.$digest(); // re-enable the animations;
- $rootScope.val = 'one';
- $rootScope.$digest();
-
- if ($sniffer.transitions) {
- window.setTimeout.expect(1).process();
- window.setTimeout.expect(500).process();
- } else {
- expect(window.setTimeout.queue).toEqual([]);
- }
+ item = $animate.process('enter').element;
+ expect(item.text()).toBe('three');
}));
});