From ca724b0e8e71ce533d5bcb3608018e76b81a6918 Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Tue, 23 Apr 2013 12:34:53 +0100 Subject: [PATCH 1/2] test(ngAnimate): also provide W3C transition property to work on IE10 --- test/ng/directive/ngIncludeSpec.js | 17 ++- test/ng/directive/ngRepeatSpec.js | 23 ++-- test/ng/directive/ngViewSpec.js | 193 ++++++++++++++--------------- 3 files changed, 115 insertions(+), 118 deletions(-) diff --git a/test/ng/directive/ngIncludeSpec.js b/test/ng/directive/ngIncludeSpec.js index 9b5319f1e75c..a990a840ed54 100644 --- a/test/ng/directive/ngIncludeSpec.js +++ b/test/ng/directive/ngIncludeSpec.js @@ -291,6 +291,11 @@ describe('ngInclude ngAnimate', function() { return element; } + function applyCSS(element, cssProp, cssValue) { + element.css(cssProp, cssValue); + element.css(vendorPrefix + cssProp, cssValue); + } + beforeEach(function() { // we need to run animation on attached elements; body = jqLite(document.body); @@ -328,9 +333,7 @@ describe('ngInclude ngAnimate', function() { //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]); - var cssProp = vendorPrefix + 'transition'; - var cssValue = '1s linear all'; - child.css(cssProp, cssValue); + applyCSS(child, 'transition', '1s linear all'); if ($sniffer.supportsTransitions) { expect(child.attr('class')).toContain('custom-enter-setup'); @@ -360,9 +363,7 @@ describe('ngInclude ngAnimate', function() { //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]); - var cssProp = vendorPrefix + 'transition'; - var cssValue = '1s linear all'; - child.css(cssProp, cssValue); + applyCSS(child, 'transition', '1s linear all'); $rootScope.tpl = ''; $rootScope.$digest(); @@ -395,9 +396,7 @@ describe('ngInclude ngAnimate', function() { //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]); - var cssProp = vendorPrefix + 'transition'; - var cssValue = '0.5s linear all'; - child.css(cssProp, cssValue); + applyCSS(child, 'transition', '0.5s linear all'); $rootScope.tpl = 'enter'; $rootScope.$digest(); diff --git a/test/ng/directive/ngRepeatSpec.js b/test/ng/directive/ngRepeatSpec.js index 4372f57ab424..fbd1a2dc36a0 100644 --- a/test/ng/directive/ngRepeatSpec.js +++ b/test/ng/directive/ngRepeatSpec.js @@ -542,6 +542,11 @@ describe('ngRepeat ngAnimate', function() { return element; } + function applyCSS(element, cssProp, cssValue) { + element.css(cssProp, cssValue); + element.css(vendorPrefix + cssProp, cssValue); + } + beforeEach(function() { // we need to run animation on attached elements; body = jqLite(document.body); @@ -577,12 +582,10 @@ describe('ngRepeat ngAnimate', function() { $rootScope.$digest(); //if we add the custom css stuff here then it will get picked up before the animation takes place - var cssProp = vendorPrefix + 'transition'; - var cssValue = '1s linear all'; var kids = element.children(); for(var i=0;idata', {}]); - $animator.enabled(true); - } - })); + beforeEach(module(function($provide, $routeProvider) { + $provide.value('$window', window = angular.mock.createMockWindow()); + $routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'}); + return function($sniffer, $templateCache, $animator) { + vendorPrefix = '-' + $sniffer.vendorPrefix + '-'; + $templateCache.put('/foo.html', [200, '
data
', {}]); + $animator.enabled(true); + } + })); - it('should fire off the enter animation + add and remove the css classes', - inject(function($compile, $rootScope, $sniffer, $location, $templateCache) { - element = $compile(html('
'))($rootScope); + it('should fire off the enter animation + add and remove the css classes', + inject(function($compile, $rootScope, $sniffer, $location, $templateCache) { + element = $compile(html('
'))($rootScope); - $location.path('/foo'); - $rootScope.$digest(); + $location.path('/foo'); + $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]); - var cssProp = '-' + $sniffer.vendorPrefix + '-transition'; - var cssValue = '1s linear all'; - child.css(cssProp, cssValue); + //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.supportsTransitions) { - expect(child.attr('class')).toContain('custom-enter-setup'); - window.setTimeout.expect(1).process(); + if ($sniffer.supportsTransitions) { + expect(child.attr('class')).toContain('custom-enter-setup'); + window.setTimeout.expect(1).process(); - expect(child.attr('class')).toContain('custom-enter-start'); - window.setTimeout.expect(1000).process(); - } else { - expect(window.setTimeout.queue).toEqual([]); - } + expect(child.attr('class')).toContain('custom-enter-start'); + window.setTimeout.expect(1000).process(); + } else { + expect(window.setTimeout.queue).toEqual([]); + } - expect(child.attr('class')).not.toContain('custom-enter-setup'); - expect(child.attr('class')).not.toContain('custom-enter-start'); - })); + expect(child.attr('class')).not.toContain('custom-enter-setup'); + expect(child.attr('class')).not.toContain('custom-enter-start'); + })); - it('should fire off the leave animation + add and remove the css classes', - inject(function($compile, $rootScope, $sniffer, $location, $templateCache) { - $templateCache.put('/foo.html', [200, '
foo
', {}]); - element = $compile(html('
'))($rootScope); + it('should fire off the leave animation + add and remove the css classes', + inject(function($compile, $rootScope, $sniffer, $location, $templateCache) { + $templateCache.put('/foo.html', [200, '
foo
', {}]); + element = $compile(html('
'))($rootScope); - $location.path('/foo'); - $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]); - var cssProp = '-' + $sniffer.vendorPrefix + '-transition'; - var cssValue = '1s linear all'; - child.css(cssProp, cssValue); + $location.path('/foo'); + $rootScope.$digest(); - $location.path('/'); - $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.supportsTransitions) { - expect(child.attr('class')).toContain('custom-leave-setup'); - window.setTimeout.expect(1).process(); + $location.path('/'); + $rootScope.$digest(); - expect(child.attr('class')).toContain('custom-leave-start'); - window.setTimeout.expect(1000).process(); - } else { - expect(window.setTimeout.queue).toEqual([]); - } + if ($sniffer.supportsTransitions) { + expect(child.attr('class')).toContain('custom-leave-setup'); + window.setTimeout.expect(1).process(); + + expect(child.attr('class')).toContain('custom-leave-start'); + window.setTimeout.expect(1000).process(); + } else { + expect(window.setTimeout.queue).toEqual([]); + } + + expect(child.attr('class')).not.toContain('custom-leave-setup'); + expect(child.attr('class')).not.toContain('custom-leave-start'); + })); + + it('should catch and use the correct duration for animations', + inject(function($compile, $rootScope, $sniffer, $location, $templateCache) { + $templateCache.put('/foo.html', [200, '
foo
', {}]); + element = $compile(html( + '
' + + '
' + ))($rootScope); - expect(child.attr('class')).not.toContain('custom-leave-setup'); - expect(child.attr('class')).not.toContain('custom-leave-start'); - })); + $location.path('/foo'); + $rootScope.$digest(); - it('should catch and use the correct duration for animations', - inject(function($compile, $rootScope, $sniffer, $location, $templateCache) { - $templateCache.put('/foo.html', [200, '
foo
', {}]); - element = $compile(html( - '
' + - '
' - ))($rootScope); - - $location.path('/foo'); - $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'); - //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]); - var cssProp = '-' + $sniffer.vendorPrefix + '-transition'; - var cssValue = '0.5s linear all'; - child.css(cssProp, cssValue); - - if($sniffer.supportsTransitions) { - window.setTimeout.expect(1).process(); - window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process(); - } else { - expect(window.setTimeout.queue).toEqual([]); - } - })); + if($sniffer.supportsTransitions) { + window.setTimeout.expect(1).process(); + window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process(); + } else { + expect(window.setTimeout.queue).toEqual([]); + } + })); -}); + }); +}); \ No newline at end of file From d1cefe460fe545d7243c4003a8ea80c441a689e7 Mon Sep 17 00:00:00 2001 From: Pete Bacon Darwin Date: Thu, 25 Apr 2013 14:39:28 +0100 Subject: [PATCH 2/2] touch --- test/ng/animatorSpec.js | 1 + 1 file changed, 1 insertion(+) diff --git a/test/ng/animatorSpec.js b/test/ng/animatorSpec.js index 4d549ee393ca..1727b2766082 100644 --- a/test/ng/animatorSpec.js +++ b/test/ng/animatorSpec.js @@ -18,6 +18,7 @@ describe("$animator", function() { afterEach(function(){ dealoc(body); + }); describe("enable / disable", function() {