Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-16 23:30:23 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

test(ngAnimate): also provide W3C transition property to work on IE10

Browse source 
Closes: #2492
This commit is contained in:
Pete Bacon Darwin 2013-04-23 12:34:53 +01:00
parent 89c0b5d096
commit 660605bdb8
3 changed files with 133 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
test/ng/directive/ngIncludeSpec.js
View file

@ -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();

23
test/ng/directive/ngRepeatSpec.js
View file

@ -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;i<kids.length;i++) {
kids[i] = jqLite(kids[i]);
kids[i].css(cssProp, cssValue);
applyCSS(kids[i], 'transition', '1s linear all');
}
if ($sniffer.supportsTransitions) {
@ -620,12 +623,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;i<kids.length;i++) {
kids[i] = jqLite(kids[i]);
kids[i].css(cssProp, cssValue);
applyCSS(kids[i], 'transition', '1s linear all');
}
$rootScope.items = ['1','3'];
@ -660,12 +661,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 = '-' + $sniffer.vendorPrefix + '-transition';
var cssValue = '1s linear all';
var kids = element.children();
for(var i=0;i<kids.length;i++) {
kids[i] = jqLite(kids[i]);
kids[i].css(cssProp, cssValue);
applyCSS(kids[i], 'transition', '1s linear all');
}
$rootScope.items = ['2','3','1'];
@ -719,10 +718,10 @@ describe('ngRepeat ngAnimate', function() {
var kids = element.children();
var first = jqLite(kids[0]);
var second = jqLite(kids[1]);
var cssProp = '-' + $sniffer.vendorPrefix + '-transition';
var cssProp = 'transition';
var cssValue = '0.5s linear all';
first.css(cssProp, cssValue);
second.css(cssProp, cssValue);
applyCSS(first, cssProp, cssValue);
applyCSS(second, cssProp, cssValue);
if ($sniffer.supportsTransitions) {
window.setTimeout.expect(1).process();

229
test/ng/directive/ngViewSpec.js
View file

@ -505,122 +505,121 @@ describe('ngView', function() {
});
});
});
});
describe('ngAnimate', function() {
var window;
var body, element;
describe('ngAnimate ', function() {
var window, vendorPrefix;
var body, element;
function html(html) {
body.html(html);
element = body.children().eq(0);
return element;
}
function html(html) {
body.html(html);
element = body.children().eq(0);
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);
});
afterEach(function(){
dealoc(body);
dealoc(element);
});
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, '<div>data</div>', {}]);
$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('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($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', '1s linear all');
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')).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, '<div>foo</div>', {}]);
element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($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', '1s linear all');
$location.path('/');
$rootScope.$digest();
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, '<div>foo</div>', {}]);
element = $compile(html(
'<div ' +
'ng-view ' +
'ng-animate="{enter: \'customEnter\'}">' +
'</div>'
))($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($sniffer.supportsTransitions) {
window.setTimeout.expect(1).process();
window.setTimeout.expect($sniffer.supportsTransitions ? 500 : 0).process();
} else {
expect(window.setTimeout.queue).toEqual([]);
}
}));
beforeEach(function() {
// we need to run animation on attached elements;
body = jqLite(document.body);
});
afterEach(function(){
dealoc(body);
dealoc(element);
});
beforeEach(module(function($provide, $routeProvider) {
$provide.value('$window', window = angular.mock.createMockWindow());
$routeProvider.when('/foo', {controller: noop, templateUrl: '/foo.html'});
return function($templateCache, $animator) {
$templateCache.put('/foo.html', [200, '<div>data</div>', {}]);
$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('<div ng-view ng-animate="{enter: \'custom-enter\'}"></div>'))($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);
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')).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, '<div>foo</div>', {}]);
element = $compile(html('<div ng-view ng-animate="{leave: \'custom-leave\'}"></div>'))($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('/');
$rootScope.$digest();
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, '<div>foo</div>', {}]);
element = $compile(html(
'<div ' +
'ng-view ' +
'ng-animate="{enter: \'customEnter\'}">' +
'</div>'
))($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 = '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([]);
}
}));
});
});