diff options
Diffstat (limited to 'test/ng/directive')
| -rwxr-xr-x | test/ng/directive/ngIfSpec.js | 86 | ||||
| -rw-r--r-- | test/ng/directive/ngIncludeSpec.js | 98 | ||||
| -rw-r--r-- | test/ng/directive/ngRepeatSpec.js | 216 | ||||
| -rw-r--r-- | test/ng/directive/ngShowHideSpec.js | 159 | ||||
| -rw-r--r-- | test/ng/directive/ngSwitchSpec.js | 112 |
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'); })); }); |
