aboutsummaryrefslogtreecommitdiffstats
path: root/test/ng/directive/ngSwitchSpec.js
diff options
context:
space:
mode:
authorMatias Niemelä2013-06-18 13:59:57 -0400
committerMisko Hevery2013-07-26 23:49:54 -0700
commit81923f1e41560327f7de6e8fddfda0d2612658f3 (patch)
treebbf8151bddf4d026f8f5fa3196b84a45ecd9c858 /test/ng/directive/ngSwitchSpec.js
parent11521a4cde689c2bd6aaa227b1f45cb3fb53725b (diff)
downloadangular.js-81923f1e41560327f7de6e8fddfda0d2612658f3.tar.bz2
feat(ngAnimate): complete rewrite of animations
- ngAnimate directive is gone and was replaced with class based animations/transitions - support for triggering animations on css class additions and removals - done callback was added to all animation apis - $animation and $animator where merged into a single $animate service with api: - $animate.enter(element, parent, after, done); - $animate.leave(element, done); - $animate.move(element, parent, after, done); - $animate.addClass(element, className, done); - $animate.removeClass(element, className, done); BREAKING CHANGE: too many things changed, we'll write up a separate doc with migration instructions
Diffstat (limited to 'test/ng/directive/ngSwitchSpec.js')
-rw-r--r--test/ng/directive/ngSwitchSpec.js112
1 files changed, 25 insertions, 87 deletions
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');
}));
});