Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 660605b

Browse files
petebacondarwinpetebacondarwin
committed
test(ngAnimate): also provide W3C transition property to work on IE10
Closes: #2492
1 parent 89c0b5d commit 660605b

File tree

3 files changed

+115
-118
lines changed

3 files changed

+115
-118
lines changed

‎test/ng/directive/ngIncludeSpec.js

+8-9
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,11 @@ describe('ngInclude ngAnimate', function() {
291291
return element;
292292
}
293293

294+
function applyCSS(element, cssProp, cssValue) {
295+
element.css(cssProp, cssValue);
296+
element.css(vendorPrefix + cssProp, cssValue);
297+
}
298+
294299
beforeEach(function() {
295300
// we need to run animation on attached elements;
296301
body = jqLite(document.body);
@@ -328,9 +333,7 @@ describe('ngInclude ngAnimate', function() {
328333

329334
//if we add the custom css stuff here then it will get picked up before the animation takes place
330335
var child = jqLite(element.children()[0]);
331-
var cssProp = vendorPrefix + 'transition';
332-
var cssValue = '1s linear all';
333-
child.css(cssProp, cssValue);
336+
applyCSS(child, 'transition', '1s linear all');
334337

335338
if ($sniffer.supportsTransitions) {
336339
expect(child.attr('class')).toContain('custom-enter-setup');
@@ -360,9 +363,7 @@ describe('ngInclude ngAnimate', function() {
360363

361364
//if we add the custom css stuff here then it will get picked up before the animation takes place
362365
var child = jqLite(element.children()[0]);
363-
var cssProp = vendorPrefix + 'transition';
364-
var cssValue = '1s linear all';
365-
child.css(cssProp, cssValue);
366+
applyCSS(child, 'transition', '1s linear all');
366367

367368
$rootScope.tpl = '';
368369
$rootScope.$digest();
@@ -395,9 +396,7 @@ describe('ngInclude ngAnimate', function() {
395396

396397
//if we add the custom css stuff here then it will get picked up before the animation takes place
397398
var child = jqLite(element.children()[0]);
398-
var cssProp = vendorPrefix + 'transition';
399-
var cssValue = '0.5s linear all';
400-
child.css(cssProp, cssValue);
399+
applyCSS(child, 'transition', '0.5s linear all');
401400

402401
$rootScope.tpl = 'enter';
403402
$rootScope.$digest();

‎test/ng/directive/ngRepeatSpec.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,11 @@ describe('ngRepeat ngAnimate', function() {
542542
return element;
543543
}
544544

545+
function applyCSS(element, cssProp, cssValue) {
546+
element.css(cssProp, cssValue);
547+
element.css(vendorPrefix + cssProp, cssValue);
548+
}
549+
545550
beforeEach(function() {
546551
// we need to run animation on attached elements;
547552
body = jqLite(document.body);
@@ -577,12 +582,10 @@ describe('ngRepeat ngAnimate', function() {
577582
$rootScope.$digest();
578583

579584
//if we add the custom css stuff here then it will get picked up before the animation takes place
580-
var cssProp = vendorPrefix + 'transition';
581-
var cssValue = '1s linear all';
582585
var kids = element.children();
583586
for(var i=0;i<kids.length;i++) {
584587
kids[i] = jqLite(kids[i]);
585-
kids[i].css(cssProp, cssValue);
588+
applyCSS(kids[i], 'transition', '1s linear all');
586589
}
587590

588591
if ($sniffer.supportsTransitions) {
@@ -620,12 +623,10 @@ describe('ngRepeat ngAnimate', function() {
620623
$rootScope.$digest();
621624

622625
//if we add the custom css stuff here then it will get picked up before the animation takes place
623-
var cssProp = vendorPrefix + 'transition';
624-
var cssValue = '1s linear all';
625626
var kids = element.children();
626627
for(var i=0;i<kids.length;i++) {
627628
kids[i] = jqLite(kids[i]);
628-
kids[i].css(cssProp, cssValue);
629+
applyCSS(kids[i], 'transition', '1s linear all');
629630
}
630631

631632
$rootScope.items = ['1','3'];
@@ -660,12 +661,10 @@ describe('ngRepeat ngAnimate', function() {
660661
$rootScope.$digest();
661662

662663
//if we add the custom css stuff here then it will get picked up before the animation takes place
663-
var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
664-
var cssValue = '1s linear all';
665664
var kids = element.children();
666665
for(var i=0;i<kids.length;i++) {
667666
kids[i] = jqLite(kids[i]);
668-
kids[i].css(cssProp, cssValue);
667+
applyCSS(kids[i], 'transition', '1s linear all');
669668
}
670669

671670
$rootScope.items = ['2','3','1'];
@@ -719,10 +718,10 @@ describe('ngRepeat ngAnimate', function() {
719718
var kids = element.children();
720719
var first = jqLite(kids[0]);
721720
var second = jqLite(kids[1]);
722-
var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
721+
var cssProp = 'transition';
723722
var cssValue = '0.5s linear all';
724-
first.css(cssProp, cssValue);
725-
second.css(cssProp, cssValue);
723+
applyCSS(first, cssProp, cssValue);
724+
applyCSS(second, cssProp, cssValue);
726725

727726
if ($sniffer.supportsTransitions) {
728727
window.setTimeout.expect(1).process();

‎test/ng/directive/ngViewSpec.js

+96-97
Original file line numberDiff line numberDiff line change
@@ -505,122 +505,121 @@ describe('ngView', function() {
505505
});
506506
});
507507
});
508-
});
509508

510-
describe('ngAnimate', function() {
511-
var window;
512-
var body, element;
509+
describe('ngAnimate ', function() {
510+
var window, vendorPrefix;
511+
var body, element;
513512

514-
function html(html) {
515-
body.html(html);
516-
element = body.children().eq(0);
517-
return element;
518-
}
513+
function html(html) {
514+
body.html(html);
515+
element = body.children().eq(0);
516+
return element;
517+
}
519518

520-
beforeEach(function() {
521-
// we need to run animation on attached elements;
522-
body = jqLite(document.body);
523-
});
519+
function applyCSS(element, cssProp, cssValue) {
520+
element.css(cssProp, cssValue);
521+
element.css(vendorPrefix + cssProp, cssValue);
522+
}
524523

525-
afterEach(function(){
526-
dealoc(body);
527-
dealoc(element);
528-
});
524+
beforeEach(function() {
525+
// we need to run animation on attached elements;
526+
body = jqLite(document.body);
527+
});
529528

529+
afterEach(function(){
530+
dealoc(body);
531+
dealoc(element);
532+
});
530533

531534

532-
beforeEach(module(function($provide, $routeProvider) {
533-
$provide.value('$window', window = angular.mock.createMockWindow());
534-
$routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
535-
return function($templateCache, $animator) {
536-
$templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
537-
$animator.enabled(true);
538-
}
539-
}));
535+
beforeEach(module(function($provide, $routeProvider) {
536+
$provide.value('$window', window = angular.mock.createMockWindow());
537+
$routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
538+
return function($sniffer, $templateCache, $animator) {
539+
vendorPrefix = '-' + $sniffer.vendorPrefix + '-';
540+
$templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
541+
$animator.enabled(true);
542+
}
543+
}));
540544

541-
it('should fire off the enter animation + add and remove the css classes',
542-
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
543-
element = $compile(html('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($rootScope);
545+
it('should fire off the enter animation + add and remove the css classes',
546+
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
547+
element = $compile(html('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($rootScope);
544548

545-
$location.path('/foo');
546-
$rootScope.$digest();
549+
$location.path('/foo');
550+
$rootScope.$digest();
547551

548-
//if we add the custom css stuff here then it will get picked up before the animation takes place
549-
var child = jqLite(element.children()[0]);
550-
var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
551-
var cssValue = '1s linear all';
552-
child.css(cssProp, cssValue);
552+
//if we add the custom css stuff here then it will get picked up before the animation takes place
553+
var child = jqLite(element.children()[0]);
554+
applyCSS(child, 'transition', '1s linear all');
553555

554-
if ($sniffer.supportsTransitions) {
555-
expect(child.attr('class')).toContain('custom-enter-setup');
556-
window.setTimeout.expect(1).process();
556+
if ($sniffer.supportsTransitions) {
557+
expect(child.attr('class')).toContain('custom-enter-setup');
558+
window.setTimeout.expect(1).process();
557559

558-
expect(child.attr('class')).toContain('custom-enter-start');
559-
window.setTimeout.expect(1000).process();
560-
} else {
561-
expect(window.setTimeout.queue).toEqual([]);
562-
}
560+
expect(child.attr('class')).toContain('custom-enter-start');
561+
window.setTimeout.expect(1000).process();
562+
} else {
563+
expect(window.setTimeout.queue).toEqual([]);
564+
}
563565

564-
expect(child.attr('class')).not.toContain('custom-enter-setup');
565-
expect(child.attr('class')).not.toContain('custom-enter-start');
566-
}));
566+
expect(child.attr('class')).not.toContain('custom-enter-setup');
567+
expect(child.attr('class')).not.toContain('custom-enter-start');
568+
}));
567569

568-
it('should fire off the leave animation + add and remove the css classes',
569-
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
570-
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
571-
element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($rootScope);
570+
it('should fire off the leave animation + add and remove the css classes',
571+
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
572+
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
573+
element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($rootScope);
572574

573-
$location.path('/foo');
574-
$rootScope.$digest();
575-
576-
//if we add the custom css stuff here then it will get picked up before the animation takes place
577-
var child = jqLite(element.children()[0]);
578-
var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
579-
var cssValue = '1s linear all';
580-
child.css(cssProp, cssValue);
575+
$location.path('/foo');
576+
$rootScope.$digest();
581577

582-
$location.path('/');
583-
$rootScope.$digest();
578+
//if we add the custom css stuff here then it will get picked up before the animation takes place
579+
var child = jqLite(element.children()[0]);
580+
applyCSS(child, 'transition', '1s linear all');
584581

585-
if ($sniffer.supportsTransitions) {
586-
expect(child.attr('class')).toContain('custom-leave-setup');
587-
window.setTimeout.expect(1).process();
582+
$location.path('/');
583+
$rootScope.$digest();
588584

589-
expect(child.attr('class')).toContain('custom-leave-start');
590-
window.setTimeout.expect(1000).process();
591-
} else {
592-
expect(window.setTimeout.queue).toEqual([]);
593-
}
585+
if ($sniffer.supportsTransitions) {
586+
expect(child.attr('class')).toContain('custom-leave-setup');
587+
window.setTimeout.expect(1).process();
588+
589+
expect(child.attr('class')).toContain('custom-leave-start');
590+
window.setTimeout.expect(1000).process();
591+
} else {
592+
expect(window.setTimeout.queue).toEqual([]);
593+
}
594+
595+
expect(child.attr('class')).not.toContain('custom-leave-setup');
596+
expect(child.attr('class')).not.toContain('custom-leave-start');
597+
}));
598+
599+
it('should catch and use the correct duration for animations',
600+
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
601+
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
602+
element = $compile(html(
603+
'<div ' +
604+
'ng-view ' +
605+
'ng-animate="{enter: \'customEnter\'}">' +
606+
'</div>'
607+
))($rootScope);
594608

595-
expect(child.attr('class')).not.toContain('custom-leave-setup');
596-
expect(child.attr('class')).not.toContain('custom-leave-start');
597-
}));
609+
$location.path('/foo');
610+
$rootScope.$digest();
598611

599-
it('should catch and use the correct duration for animations',
600-
inject(function($compile, $rootScope, $sniffer, $location, $templateCache) {
601-
$templateCache.put('/foo.html', [200, '<div>foo</div>', {}]);
602-
element = $compile(html(
603-
'<div ' +
604-
'ng-view ' +
605-
'ng-animate="{enter: \'customEnter\'}">' +
606-
'</div>'
607-
))($rootScope);
608-
609-
$location.path('/foo');
610-
$rootScope.$digest();
612+
//if we add the custom css stuff here then it will get picked up before the animation takes place
613+
var child = jqLite(element.children()[0]);
614+
applyCSS(child, 'transition', '0.5s linear all');
611615

612-
//if we add the custom css stuff here then it will get picked up before the animation takes place
613-
var child = jqLite(element.children()[0]);
614-
var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
615-
var cssValue = '0.5s linear all';
616-
child.css(cssProp, cssValue);
617-
618-
if($sniffer.supportsTransitions) {
619-
window.setTimeout.expect(1).process();
620-
window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process();
621-
} else {
622-
expect(window.setTimeout.queue).toEqual([]);
623-
}
624-
}));
616+
if($sniffer.supportsTransitions) {
617+
window.setTimeout.expect(1).process();
618+
window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process();
619+
} else {
620+
expect(window.setTimeout.queue).toEqual([]);
621+
}
622+
}));
625623

626-
});
624+
});
625+
});

0 commit comments

Comments
 (0)